西西木科技-专业的shopify liquid开发机构-前端JS丨a href=’https://dev.weswoo.com/’>react后端丨API接口丨shopify plus丨外贸独立站
需要有一个清晰的学习路线，比如大纲。
在对网页设计的理解上，很多人似乎还停留在网页制作的高度。 我认为只要用好网页制作软件，就能做好网页设计。 这种理解是非常狭隘的。
事实上，网页设计是一个结合感性思维和理性分析的复杂过程。 它的方向取决于设计任务，其实现取决于网页的制作。 俗话说“功夫胜于诗”，网页设计最重要的不是软件应用，而是我们对网页设计和设计制作水平的理解，我们自己的美感和对页面的把握。
首先，我们需要明确网页设计的任务。
1、设计任务
设计是一种审美活动，成功的设计作品一般都具有艺术性。 但艺术只是设计的手段，而不是设计的任务。 设计的任务是实现设计师的意图，而不是创造美。
网页设计的任务是指设计者想要表达的主题和要实现的功能。 场地的性质不同，设计任务也不同。 从形式上来说，网站可以分为以下三类。
第一类是信息类网站，如新浪、网易、搜狐等门户网站。 此类网站将为访问者提供大量信息并获得大量流量。 因此，我们需要关注页面分割、结构合理、页面优化、界面亲和力等问题。
第二类是信息与图像结合的网站，比如一些较大的公司、国内的大学等，这类网站的设计要求较高。 既要保证信息网站的上述要求，又要突出企业、单位的形象。 但从目前的情况来看，此类网站有以次充好的嫌疑。
第三类是图片类网站，比如一些中小型公司或单位。 这类网站一般较小，有的有几个页面，要实现的功能也比较简单。 网页设计的主要任务是突出企业形象。 这类网站要求设计者有较高的艺术功底。
当然，这只是总体看法，具体情况还需要具体情况具体分析。 不同的站点必须区别对待。 不要忘记最重要的一点，这是客户的要求，这也是设计任务。
明确了设计任务后，下一步就是弄清楚如何完成整个任务。
2、设计的实现
设计的实现可以分为两部分。 第一部分是场地规划和草图，可以在纸上完成。 第二部分是网页制作，这个过程是在计算机上完成的。
设计主页的第一步是设计布局。 我们可以像传统的报纸和杂志一样编辑网页，其中包含文本、图像甚至动画。 我们要做的就是将图像和文字以最合适的方式排列在页面的不同位置。
除了拥有一台配置良好的计算机之外，还需要软件。 我们不能简单地说一个软件是好是坏。 只要设计者觉得用起来方便、舒服，就可以称为好软件。 当然，要满足设计师的要求。 我常用的软件有Dreamweaver、Fireworks、Flash以及Adobe的Photoshop和imageready。 这些都是非常好的软件。
接下来我们要做的就是通过软件的使用将设计蓝图变为现实。 最终的集成通常在 Dreamweaver 中完成。 虽然我们在草图中已经确定了页面的大致轮廓，但灵感通常是在制作过程中产生的。 设计作品必须具有创意。 这是最基本的要求。 没有创意的设计将会失败。 在制作过程中，我们会遇到很多问题，其中最敏感的就是页面颜色。
3、色彩的运用
色彩是一种奇怪的东西怎么学做网页；如何学好网页设计？，它美丽而丰富，它能唤起人类心灵的感知。 一般来说，红色是火的颜色，热情奔放； 它也是血的颜色，可以象征生命。 黄色是最鲜艳的颜色，看起来华丽、高贵、明亮。 绿色是大自然植被的颜色，寓意纯净自然、生长，象征宁静、和平、安全，比如绿色食品。 紫色是高贵、庄重的象征。 白色能给人一种纯洁、纯真的感觉，代表和平、圣洁。
我们知道颜色是由光的折射产生的。 红、黄、蓝是三基色。 所有其他颜色都可以与这三种颜色混合。 另一种思维方式怎么学做网页，我们可以利用色彩的变化来表达光影效果，这无疑会让我们的作品更接近现实。
颜色代表不同的情感，具有不同的象征意义。 这些象征意义是人们思想交流中的一个复杂问题。 它们因人的年龄、地区、时代、民族、阶级、经济区域、工作能力、教育水平、风俗习惯、宗教信仰、生活环境和性别差异而异。 不同的。
纯色没有实际意义。 与不同的颜色搭配时，所表现出来的效果也不同。 例如，绿色与金色、浅白色搭配，可以营造出优雅、舒适的氛围。 蓝色和白色的搭配可以体现出柔和、优雅、浪漫的氛围。 红色、黄色和金色的搭配可以营造出喜庆的气氛。 金色和栗色的搭配会给人带来温暖。 根据设计任务的不同怎么学做网页，配色方案也会有所不同。 考虑到网页的适应性，应尽可能使用网页安全的颜色。
然而，颜色的使用并没有一定的规则。 如果一定要使用某种规则，效果就会适得其反。 根据经验，我们可以先确定一种能够表达主题的主色调，然后根据具体需要，利用色彩近似和对比来完成整个页面的配色方案。 整个页面应在视觉上融为一体，达到和谐、赏心悦目的视觉效果。
4.形状的组合
在网页设计中，我们主要通过视觉传达来表达主题。 在视觉传达中，形状是一个非常重要的元素。 屏幕上的所有元素都可以视为点、线、面，它们是屏幕的基本元素。 一件成功的作品，需要点、线、面的组合和搭配来构建整个页面。
通常我们可以使用的组合技巧有顺序、比例、平衡、对称、连续、间隔、重叠、重复、交叉、节奏、押韵、归纳、变异、特写、倒影等，它们都有各自的特点。 设计时应根据具体情况选择最适合的表现方式，有利于主题的表达。
通过点、线、面的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让观看者在感受设计的同时，理解设计的主题。美观，从而实现设计任务。
形状的巧妙运用不仅可以带来巨大的美感，还能更好地凸显企业形象，并且可以将网页上的各种元素有机地组织起来。 它甚至可以引导观看者的视线。
五、设计原则
设计是有原则的。 无论用什么方法来组合画面中的元素，都必须遵循五个大原则：统一、连贯、分割、对比、和谐。 关键词：学习网页制作|网页设计技巧|网页设计原理|
有人说：学习网页制作，应该从用PS制作效果图开始。 有人说你应该从DW开始。 大家都同意！ 而且我认为学习网页制作一定要从html标签和CSS开始，因为网页制作的核心就是html标签加CSS。 Dreamweaver只是一个开发工具，不建议从一开始就学习如何使用。 只要学会了核心，你还是可以用记事本写网页的。 相信大家都知道哪个更重要！
(1)html标签部分
我们都知道html标签有大大小小几十个，但是在我们实际的开发过程中，我们只用到了十几个标签。 所以我建议先学习一些常用的标签，然后再逐步深入学习其他标签。
例如：p标签—>代表一个段落
h标签—>标题标签
网页中一般只使用三个标签：h1、h2、h3。 并且一个网页中只有一个h1标签，一般用于网页的标题。
div标签—>可以理解为盒子容器
标签 —> 链接标签
比如你想跳转到百度>百度
img标签—>引用网页中的图片
例如，如果我想链接一张图片：
注：假设有一张1.jpg的图片。 如果网页和图片在同一目录下，则地址为：src="1.jpg"。
如果在文件夹中，则在其前面添加文件名，并添加尽可能多的级别。 等等。 例如，如果图片在images文件夹中，则地址为：src="images/1.jpg"。
br 标签—>换行符
span标签—>内联标签
强标签—>加粗效果，强调所定义的文本内容非常重要。
表格—>表格标签
定义一个表格，包含tr标签（行）td标签（列）和th标签（一般用于表格的标题）
ul—>无序列表
ol—>有序列表
(2)CSS部分
CSS（层叠样式表）了解成年人穿的衣服。 仅仅改变CSS就相当于把网页变成了一套漂亮的衣服。 CSS部分，我认为有以下几个知识点需要注意：
(1)CSS语法
（二）CSS的几种参考方法
1. 内联样式
例如：
2. 嵌入样式
例如：
3.外部参考风格
这个很少用到
(3)CSS选择器
1.标签选择器
HTML标签：例如：P标签、div标签、span标签……
p{颜色：红色;}
2.类选择器
以“.”开头的是类选择器.p{color:red;}
3.ID选择器
以“#”开头的是 ID 选择器。 一般来说，ID选择器在一个页面中是唯一的，并且只存在一次。
#p{颜色：红色;}
（4）理解：浮动与清零浮动与定位
其实我觉得CSS中只有两点需要理解：一：浮动和清除浮动。 第二是：定位。 只要深刻理解了这两点，相信CSS部分应该问题不大。
为什么这么说？ 因为我遇到过很多新手朋友，他们大多不明白为什么使用浮动后需要“清浮动”，清浮动的意义是什么。
其实清除浮动的目的主要是为了防止网页出现一些不正常的小bug，比如网页错位等。 相信很多新手朋友都遇到过这样的问题：“为什么我的网页错位，没有按照正常布局放置？”
其实这些情况大部分都是清理浮动造成的，由此可见“清理浮动的重要性”。
在定位方面：一定要了解三种定位的含义：相对定位（position：relative）、绝对定位（position：absolute）和position：相对于浏览器定位固定。
其中，我认为最需要理解的是绝对定位，因为绝对定位是相对于某个元素进行定位的。 例如：
我绝对有定位！
想法：如果你给一个元素绝对定位，它总是会在外层寻找相对定位。 如果找到使用相对定位的地方，就相对于它定位。 如果没有找到。 相对于浏览器定位。 可以看出P元素是相对于浏览器定位的，因为它的父DIV没有相对定位。
(3)布局
其实布局就是将DIV模块一一组合起来，用CSS来布局。这里我写了一种最常见的布局框架。 点击预览
(4)关于JS特效(javascript/jquery)
关于javascript和jquery的学习，我认为新手前期不需要深入学习。 他们只需要能够使用这些特效即可。 如果以后从事Web前端领域开发，建议你学习javascript，重点学习jquery。 由于jquery是基于javascript开发类库，所以使用起来比较简单，并且有很好的文档和帮助手册。 你可以用更少的代码完成更多的功能。
写在最后：我不敢说我的学习方法适合你，因为每个人的学习方法都会不同，但至少你站在正确的起跑线上。 我认为快速学习网页制作有两个秘诀：第一，有适合自己的学习方法。 二是要善于思考、多写、多练。 只有在不断写作的过程中你才会发现自己的不足。
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。