网页设计知识的获取 第1篇
文本的定义：由一定的符号或符码组成的信息结构体 文本的优点：文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主夏括CIF、JPEC和PNG等，其中使用最广泛的是GIF和JPEG两种格式。在网页中,为了有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。
超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目能端的链接、指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。链接可以在当前页面中进行跳转，也可以在页面外进行跳转。
音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压文件，其压缩率非常高，音质也不错，是背景音乐的首选。 网页中的视频文件一般为1v格式，它是一种基于FashMX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。
网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按1wscp与AeiveX等各种特效，它们不仅能点级网页，使网页更活泼有趣，还在网上乐、电子商务等方面也有着不可忽视的作用。 ————————————————
网页设计知识的获取 第2篇
这里所说的position是指“位置、大小”->“position”，对应html元素的position属性。金蜘蛛网页设计器的“位置、大小”->“position”有6个选项：将position设置为absolute_绝对位置, 将position设置为relative_相对前一元素底部, 将position设置为inherit_继承父元素position, 将position设置为fixed_固定位置, 将position设置为static, 不设置。 其中选项“不设置”则会默认为“将position设置为relative_相对前一元素底部”，“将position设置为fixed_固定位置”和“将position设置为static”一般用在特别情况下。而最常用的就是“将position设置为relative_相对前一元素底部”和“将position设置为absolute_绝对位置”。
使用“将position设置为relative_相对前一元素底部”是最广泛的，也建议大家使用这种类型，好处是这种类型可以非常方便准确确定位置，特别是使用css样式表可以多个HTML元素用一个css样式来统一确定位置。如页面上有10个面板（div）,如果我们要使每个面板之间间隔10px，使用这种类型直接将“内外边距”->“顶边距”设置为10即可。如果是使用“将position设置为absolute_绝对位置”这种类型，还得考虑每个面板的高度，麻烦很多。另外，我们在设计时也可以不必在意控件的顶边距，只设计好“内外边距”->“顶边距”即可。
使用这种类型运行后的实际顶边距的计算，请看上一节的【一、左边距、顶边距与内外边距】->【2.“位置、大小”->“将position设置为relative_相对前一元素底部】。
“将position设置为absolute_绝对位置”一般是小面积内位置确定或控件间位置不规则使用比较方便。
默认情况，金蜘蛛网页设计器创建的控件都是“将position设置为absolute_绝对位置”的，这是因为为了适应刚入门的朋友。如果你已熟悉，建议改为“将position设置为relative_相对前一元素底部”。如当父面板已用“将position设置为relative_相对前一元素底部”，那么在他上面创建的子控件就会继承父的这个类型。
HTML元素水平居中非常常用。如本文档中的图片、主内容面板。一般的电脑显示分辨率都很大，现在基本都1920*1024以上，像本页这种文档的阅读，如果都做成这么大，那么遇到1024*768这种小的分辨率，就需要显示滚动条，另外如果宽度大，人们在阅读就头部转动的幅度就会过大，体验都不好。这样，我们在设计网页，一般主内容面板宽度可以设定为1024px，居中显示即可，如本文档。
是指“常用组件”->“面板”，创建一个容易的移动网页，在这个网页创建一个“常用组件”->“面板”。然后做以下设置：
“对齐方式”设置为“水平居中对齐_运行网页后生效”(设计时不居中，运行后居中)；“位置、大小”->“position”设置为“将position设置为relative_相对前一元素底部”；“颜色”->“颜色”设置为“clblue”，方便测试。如下图：
如上图，面板是我们随意放置的，不是水平居中的，然后点“预览网页”，如下：
如上图，预览后是水平居中的，如果我们改变浏览器的宽度，发现仍然还是水平居中的。
LayUI的面板水平居中很简单，只需要把“面板类型”设置为“容器面板layui—container”即可。
文本框中的文字水平居中也很简单，把其属性“文本属性”->“水平对齐”设置为“Center—居中对齐”即可。一般来说，文字居中是在父容器中居中，这时我们可以把文本框的属性“位置、大小”->“与父的宽度同”和“自动左边距”都设置为“true”。如下图，是在一个面板上创建了文本框，文字水平居中显示：
预览后文字是在面板中居中，效果如下图：
网页设计知识的获取 第3篇
主流的设计软件中暗示了主流的尺寸；网页常见的主流的设计尺寸：1366x768px、1920x1080px和1440x1024px；工作中具体使用哪个尺寸设计，需要根据用户群体来确定。
一般网页设计中，需要有主视觉安全区域，主视觉安全区域宽度：1200px，网页旁边的导航以及悬浮弹窗在1440px以内；
需要注意的是，在进行网页设计的时候，屏幕的高度要减掉浏览器的高度：180px;
windows系统常用：微软雅黑、宋体、Arial； MAC电脑常用：苹方、宋体和Jelvetical；根据网页的风格可以增加特殊的字体包。网页中字体层级≥2，最小的字号：12px。文字的间距一般为字体的倍。
通过颜色、间距对比展现出网页相同版块的亲密性；亲密性可以对不同模块引导数据流向，降低理解的成本。
网页中常用的图片比例：16：9、1：1和3：4；图片可以压缩，减少服务器的资源耗费，常用的图片压缩网站（Tinypng)。
网页中的配色相对移动端比较克制；配色风格需要根据情绪色彩和业务属性去设定；
比如：蓝色代表安全、科技和可靠，一般用于工具类大数据平台；橙黄色代表热情、活力和快乐，一般多用于购物平台（如：淘宝）；
a:一堆色值：记忆成本难、沟通成本高；
b:一个色值，通过改变不透明度，提高效率；
红色一般表示提交失败、绿色表示成功；这个结合了生活中的红绿灯原理，红灯停（不予通过）、绿灯行（可通过），黄色可以起到警示作用。
网页设计知识的获取 第4篇
色彩搭配：让你的网页更具吸引力
色彩基础知识
色彩是网页设计中最重要的元素之一，它能够直接影响用户的情绪和体验。在选择色彩时，首先要了解一些基本的色彩理论。色轮是一个非常有用的工具，它展示了各种颜间的关系。色轮中的颜色可以分为三类：原色（红、黄、蓝），间色（橙、绿、紫），和复色（由原色和间色混合而成的颜色）。
色彩心理学
不同的颜色会给人带来不同的心理感受。例如，红色通常代表激情和紧急，蓝色则让人感到平静和信任。了解色彩心理学可以帮助你在设计中更好地传达品牌信息和情感。例如，如果你在设计一个医疗网站，使用蓝色和绿色可能会让用户感到更加安心和信任。
色彩搭配技巧
在进行色彩搭配时，可以使用一些经典的配色方案。例如，互补色方案将色轮上相对的两种颜色组合在一起，能够产生强烈的对比效果。类似色方案则使用色轮上相邻的颜色，能够创造出和谐统一的视觉效果。你也可以使用在线配色工具，如Adobe Color，来帮助你选择合适的配色方案。
排版布局：打造清晰易读的页面
基础排版原则
排版是网页设计中另一个关键元素，它直接影响到用户的阅读体验。在进行排版时，首先要遵循一些基本的排版原则。首先是对齐原则，所有的文本和图像应该保持一致的对齐方式，这样可以使页面看起来更加整洁和专业。其次是对比原则，通过使用不同的字体、颜色和大小，可以突出重要的信息，吸引用户的注意力。
网格系统
网格系统是一个非常有用的排版工具，它可以帮助你在设计中保持一致性和对称性。网格系统将页面划分为多个小的单元格，你可以根据需要将文本和图像放置在这些单元格中。使用网格系统可以使你的设计更加有序和美观，同时也可以提高设计效率。
字体选择
字体的选择同样重要，不同的字体会给人带来不同的感受。在选择字体时，首先要考虑的是可读性，确保用户可以轻松阅读页面上的文本。其次是风格匹配，选择与品牌形象和内容风格相符合的字体。例如，如果你在设计一个儿童网站，可以选择一些活泼可爱的字体；而在设计一个金融网站时，则应选择一些简洁专业的字体。
用户体验：提升用户满意度的关键
用户需求分析
用户体验（UX）是网页设计中最重要的方面之一，它直接影响到用户的满意度和留存率。在进行用户体验设计时，首先要进行用户需求分析。通过问卷调查、用户访谈等方法，了解用户的需求和期望。根据这些信息，可以制定出针对性的设计方案，提升用户的满意度。
信息架构
网页设计知识的获取 第5篇
web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等是在浏览网页。
Web前端开发所包括的三大核心技术:HTML、CSS语言和JavaScript语言。
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。
Javascript是一种属于网络的脚本语言,Javascript脚本通过嵌人在HTML,中的方式来实现自身的功能。
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari 浏览器和 Opera浏览器等。
切图软件是对UI设计师设计出的效果进行切图操作，也可以对网页中的图片进行修改等处理。常用的修图软件有photoshop和fireworks。