第三章:网页设计基础_网页设计第三章内容-CSDN博客

本文链接：https://blog.csdn.net/Strawberry_595/article/details/82957108

1.页面布局;

1.页面布局;

统一网站标题/标识(header/logo);
统一导航区域;
让人一目了然的网页标题(title),包括公司/组织/网站的名称;
页脚区域--版权信息,上一次更新日期,联系人电话和邮箱;
良好运用基本设计原则(重复、对比，近似和对齐)；
在高分辨率下的显示时不需要水平滚动；
页面中的文本/图片/空白均匀分布；
在高分辨率下，主页“第一屏”（向下滚动之前）的内容要吸引人，有趣；
主页要在10秒钟之内下载完毕；
用适口，eta增强智能手机上的显示；
通过媒体查询针对手机和平板配置灵活相应的网页；

2.导航;

主导航连接标签清楚且同意；
用无序列表建构导航；
如主导航区域使用图片或多媒体，应在页脚提供清晰的文本连接（无障碍设计）；
提供导航协助，比如站点地图，“跳至内容”连接或面包屑路径；

3.颜色和图片;

在页面背景/文本中使用最多三四种颜色；
颜色使用要一致；
背景和文本颜色具有良好对比度；
不要单独靠颜色来表达意图（无障碍设计）；
颜色和图片的使用能改善网站，而不是分散访问者的注意力；
图片要优化，不要明显拖慢下载速度；
使用的每张图片都要有清楚的目的；
Img标记用alt属性设置代替文本（无障碍设计）；
动画不要使访问者分散注意力，要么不重复播放，要么只重复几次就可以了；

4.多媒体;

使用的每个音频/视频/Flash文件都要有明确的目的；
使用的音频/视频/Flash文件能改善网站，而不是分散访问者的注意力；
为每个音频或者视频文件提供文字稿/字幕（无障碍设计）；
提示音频或视频文件的下载时间；
提供多媒体插件的下载地址；

5.内容呈现;

使用常用的字体；
合理运用Web写作技术，包括标题、小标题、项目列表、短段落和短语、空白等；
统一字体、字号和字体颜色；
使用统一方式组织内容；
信息查找容易（最少点击数）；
要提示时间：上一次修订和/或版本日期要准确；
页面内容没有排版或语法错误；
添加超链接文本时，避免“点击这里”/“点我”这样的说法；
统一设置一套颜色来表明连接已访问/未访问状态；
如果使用了图片/多媒体，同时提供对应的替代文字（无障碍设计）；
文本尽量使用短句，注意文本的长度，简言意赅；列表能充分吸引人的眼球，且易于阅读；

6.功能:

所有内部链接都正常工作；
所有外部链接都正常工作；
所有表单能像预期那样工作；
网页不报错；

7.其他无障碍设计;

在恰当的地方使用专为改善无障碍访问而提供的属性，例如alt和title；
为了帮助屏幕朗读器，html元素的lang属性要指明网页的朗读语言；

8.浏览器的兼容性;

使网页在工作机、平板、智能手机上正常显示；

9.扩展；

“无障碍网络倡议”（Web Accessibility Initiative， WAI）指导原则的最新版本Web Content Accessibility Guidelines 2.0（WCAG2.0）提出四个原则：内容必须可感知性、界面组建必须可操作性、内容和控件必须可理解性、内容应该足够健壮；
色轮是一个描述原色（红、黄、蓝）、二次色（橙、紫、绿）、三次色（橙黄、橙红、紫红、紫蓝、蓝绿、黄绿）的色环；原色就是一种单纯的颜色，二次色是由两种原色混合而成，三次色是由一个原色和一个二次色混合而成；
6种常见的颜色方案：单色、相似色、互补色、分散互补色、三色和四色；

单色：采用一种颜色的变深、变浅和变灰版本。

相似色：选择一种主色，再选择色轮上相邻的两种颜色（eg：橙，橙红、橙黄）；

互补色：使用色轮上直线相对的两种颜色。（eg：黄、紫）；

分散互补色：包含一种主色。色轮上直线相对的颜色（辅色）以及和辅色相邻的两种颜色；

三色：色轮三等分出的三个颜色；

四色：两对互补色；

三种常见的网站组织结构类型：分级式、线性、随机；