作者：朱金华
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页设计与制作 第2版试读：
前言
随着移动互联网络的普及，H5这个称呼在互联网和日常生活中被广泛使用，但并没有官方或学术界对其进行过严格定义，根据目前情况来看，大概是指HTML5在移动方面的应用，所以本次改版的理由为：一方面要全面升级为HTML5+CSS3，另一方面要全面兼容移动应用。通过改版，在以下几个方面得到了提升：编入了最新版浏览器支持的HTML5+CSS3的绝大部分有用的知识点，增加了移动优先的Bootstrap 4响应式网页设计内容以兼顾移动终端，还有一个基于CMS（Drupal 8）的综合实例。
本教材第一版是市重点建设教材，现在的修订版被立项为首批浙江省普通高校新形态教材项目。本课程还是省精品在线开放课程，该平台对所有国内的高校都开放，需要使用该平台的读者请联系作者。
编写本书的初衷是按照新的Web标准既要实现网页的结构与表现分离，又要贯彻有机整合HTML和CSS并融入整个学习过程这一思想，使学习过程更接近实际工作。编写本书的第二个目的就是想做成一本经典教材，而不是自学教程，叙述力求精练，尽量涵盖更多的知识点，有不断深入的入口，有充分发挥老师能动性、主导性的机制。全程实验要求学生动手，自然突出了学生主体性。书中设置了很多思考点，可以激发学生学习的积极性，也凸显了探究式教学方法的自然呈现，每章最后都配有操作题型，供学生自主学习和练习。
本书全程贯穿理论与实践紧密结合的思想，不仅每个知识点都有相应的实例，只要扫描书中的各二维码即可观看操作视频。本书紧跟学科发展前沿，遵循最新Web标准（HTML5和CSS3），书中大量采用这些新技术，所以希望使用者尽量采用各大浏览器（Chrome、Firefox、Edge、Safari或Opera）的最新版，本书所有实例都通过了这些浏览器的兼容性测试。
本书除“第1章网页设计基础”是理论外，后面各章的知识点都是结合在实例中的。各个高校根据自己学生的层次和专业不同，可灵活地搭配授课内容，有些内容也可以作为选学。本课程建议授课学时分配如下。（续）
本书由朱金华、胡秋芬、刘均和何跃编写。参与本书翻译、调试工作的还有李玉仙等，在此一并表示感谢。另外还要感谢学校领导和老师给予的大力支持和帮助，特别感谢多年来使用本教材第1版的老师，你们提出的很多宝贵意见都是我们继续坚持的动力。
本书PPT和源代码将提供给出版社供下载，知识点视频可通过扫描书中的二维码观看。读者可以使用移动设备的相关软件（如微信、QQ）中的“扫一扫”功能扫描书中的二维码，在线查看知识点视频（音频建议用耳机收听）。如果“扫一扫”后，在微信端无法打开相关资源，请选择用手机浏览器或其他软件的“扫一扫”功能扫描查看。
本书的其他视频（实验指导视频和直播视频）和相关资料放在浙江省高等学校在线开放课程共享平台上，网址http://zjedu.moocollege.com/。需要在浙江省高等学校在线开放课程共享平台上开课的学校可以联系本书作者，邮箱uuem@163.com。
书中的源代码不依赖于任何网页编辑器，实验指导对应视频基于Dreamweaver CC 2018.1的实时视图，知识点视频基于Visual Studio Code最新版制作。
由于新技术发展太快，教材出版始终有滞后性，所以本书会及时提供更新内容。请关注浙江省高等学校在线开放课程共享平台，或者联系出版社索取更新内容。
由于时间仓促，书中难免存在不妥之处，请读者原谅，并提出宝贵意见。编者
第1章 网页设计基础
网页设计行业是一个不断更新换代、推陈出新的行业，它要求设计师们必须随时掌握最新的设计趋势，从而确保自己不被这个行业所淘汰。根据网站开发的流程，在开发网页代码前，需要按客户需求进行网站功能规划和网页设计（有的专家把前期这个阶段称为体验设计）。本章主要介绍网页设计的基础知识。
教学目标
● 熟悉网页的相关概念、色彩基础知识与网页配色
● 掌握网站开发流程、Web设计、布局设计、内容设计与风格设计
1.1 网页概述
网页中包含多种类型的内容（即网页的元素），最基本的是文字，还包括图像、动画和音频视频形式的多媒体文件，这些文件存放在服务器上，用户通过浏览器进行访问，这就是人们常说的浏览器/服务器（Browser/Server，B/S）结构。设计网页的最终目的是给访问者显示有价值的信息，并留下深刻的印象。在设计网页前，需要先了解一些相关知识。
WWW（World Wide Web）是环球信息网的缩写，也可简称为Web，中文名为万维网，它是一个基于超文本（Hypertext）方式的信息检索服务工具。这种把全球范围内的信息组织在一起的超文本方法，采用的是由指针链接的超网状结构。Web系统允许超文本指针所指向的目标信息源不仅可以是文本，也可以是其他媒体，如图形、图像、声音和动画等信息，更重要的是可以把分散在不同主机上的资源有机组织在一起，这种超文本结构与多媒体的结合体被称为“超媒体”（Hypermedia，现在的含义已变为UltraMedia）。
Web系统已在教育、科学技术、商业广告、公共关系、大众媒体和娱乐等多方面起着愈来愈重要的作用。WWW的应用已远超原有的设想，成为Internet上最受欢迎的应用之一，它的出现极大地推动了Internet的推广。WWW获得成功的秘诀在于它制定了一套标准的、易于被人们掌握的超文本开发语言、信息资源的统一定位格式和超文本传送通信协议，用户掌握后可以很容易地建立自己的网站。
超链接（Hyper Link）指向WWW中的资源，如一个网页、声音、文件、网页上的一个段落或者WWW中的其他资源等，这些资源可以放在任何一个服务器上。超链接可以是一些文字，也可以是一张图片。
统一资源定位器（Uniform Resource Locator，URL）用于描述Internet上资源的位置和访问方式，也可以把URL称为网址，它的功能相当于在实际生活中写信的通信地址。
例如，新浪网一个网页的网址如下。
基本语法：
URL通常包括三个部分，第一部分Scheme是网络协议，告诉浏览器该如何工作，第二部分是文件所在的主机，第三部分是文件的路径和文件名。
● Scheme（传输协议）：定义因特网服务的类型，告诉浏览器如何解析将要打开的文件内容。最流行的类型是 http，还有ftp等多种网络协议。
● domain（域）：定义因特网域名，如sina.com.cn。
● host（主机）：定义此域中的主机。如果被省略，默认为www，上例中是tech。
● port（端口）：定义服务的端口号，通常省略http默认的端口号80。
● path（路径）：定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录。
● filename（文件名）：定义文档的名称。
网站（Web Site）是一个存放在网络服务器上的完整信息集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。
网页（Web Page）是网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图像、动画、声音及视频信息等。可以把网页看成是一个单一体，是网站的一个元素。
首页（Home Page）是一个单独的网页，也称为主页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者访问一个网站时出现的第一个网页，默认索引文件名为index.html、index.php等。
Windows自带的记事本可以用来查看和编辑网页的源代码，也可以创建简单网页。EditPlus是功能强大的文本文件编辑软件，不仅可以编辑网页文件，也可以编辑C、Java、PHP和JSP等语言文件，它可以自动添加标记、高亮显示一些关键字等功能。Dreamweaver是Adobe公司的专业网页开发工具，不仅可以进行可视化设计，其代码窗口的编辑功能也相当强大。还有WebStorm这个Web前端开发神器以及一些轻量级的强大编辑器（如Visual Studio Code、Sublime Text、Atom、Brackets、HBuilder等）也值得使用。
虽然Microsoft公司开发的IE凭借其Windows自带的默认浏览器身份曾经长期称霸浏览器市场，但是近年来对最新Web标准兼容性更好的浏览器，比如Chrome、Firefox、Edge、Safari、Opera等浏览器已经超过IE。现在的浏览器主要采用4种内核：Edge（Trident的替代者）、Blink、Webkit和Gecko，本书实例均由各内核浏览器测试通过。
一般制作网页时采用的技术主要使用HTML和CSS实现，根据需要也可以使用JavaScript。
在网络中，如果要向全球范围内发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于发布信息的“母语”。这种WWW所使用的母语就是HTML。超文本标记语言（Hypertext Text Markup Language, HTML）是构成Web页面（Page）的基础。用HTML编写的超文本文档称为HTML文档，它是由很多标记组成的一种文本文件，HTML标记可以说明文字、图形、动画、声音、表格和链接等。使用HTML语言描述的文件能独立于各种操作系统平台（如Windows、UNIX/Linux和Mac OS等），访问它只需要一个WWW浏览器，人们所看到的网页是浏览器对HTML文件进行解释的结果。可以通过浏览器直接查看一个页面的HTML源代码，右击网页空白处，在弹出的快捷菜单中选择“查看源文件”或“查看网页源代码”命令即可。
在网页制作时采用层叠样式表（Cascading Style Sheet，CSS）技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。
JavaScript是由Netscape公司开发的一种脚本语言（Scripting Language）。在HTML的基础上，使用JavaScript可以开发交互式Web网页，例如，可以在线填写各类表格、联机编写文档并发布等。
1.2 网站开发流程
在团队中，不同技术专长的人要彼此配合，就必须建立在良好沟通的基础上。由于企划、设计和程序这3个领域的工作是息息相关的，唯有良好的沟通与协调才能顺利完成整个项目，而且沟通的质量也间接影响到最终成品的优劣。下面将对网站项目的执行流程及相关人员该负责哪些工作事项进行说明，大致的流程如图1-1所示。图1-1 网页项目流程
1. 项目经理
项目经理（Project Manager，PM）负责与客户洽谈网页的相关事宜，待项目成立后，项目经理管理项目团队的进度并消除客户的疑问，这个角色也是设计师与客户之间沟通的桥梁，是统筹整个项目与进度的关键角色。
网站在构建过程中需要注意的地方非常多，若客户一开始的需求不够明确，就很容易在制作过程中产生不断修改的问题，在这种不断修改的过程中会相对提高沟通成本、制作成本、时间成本和机会成本等。
主要工作事项如下。
1）网站规划与报价确认：逐条确认网站规划书与报价等内容。网站规划书阐明制作规格和工作范畴。
2）双方签约：由乙方（公司）准备装订完成的合约书（一式两份）、用印（加盖印章），连同第一期款项发票寄出。甲方（客户）收到合约用印后再寄回，并支付第一期款项。
2. 企划
企划（Planner）负责了解客户的需求与期许后，着手构思网站目标、分析现状、归纳方向、判断各种可行性，直到拟订策略、实施方案、追踪成效与评估成果等，最终整理出一份网站规划书。之后再将规划书交至团队其他成员，团队成员再根据规划书中各自负责的事项进行填写与设计，以组织出网站的内容与各种功能需求。
主要工作事项如下。
1）了解客户的需求：客户提出初步的网站设计需求、网站架构图、功能需求及相关网站风格的参考。
2）提供网站规划书及报价单：根据讨论的网站架构及功能需求，提供网站规划书、报价单等内容。网站规划应尽可能涵盖各个方面，可能包含的内容如下。
● 进行网站构建前的市场分析。
● 设定网站目的及功能定位。
● 网站技术解决方案。
● 网站内容规划。
● 网页设计及视觉美编。
● 网站维护与网站内容更新。
● 网站发布前的测试与调整修正。
● 网站优化与网站发布推广。
● 网站构建工作日程表。
● 网站构建费用明细。
以上为网站规划书中应该体现的主要内容，可以根据不同的需求、构建目的及内容再进行增减。在构建网站之初，一定要进行细致、详细的规划，尽可能避免各种不确定因素，这样才能如期完成项目，满足客户需求。
3. 设计
这里的设计是指视觉设计（Visual Designer，VD）。接手规划书后，与项目经理、企划讨论网站的细节，并着手进行界面设计、视觉风格、颜色搭配及心理分析等视觉设计。
视觉设计师除了要了解客户的行业类型，还要了解制作网页的主要用意，进而设计出符合客户需求的页面，设计师需具有独特的美感及创意，让网页能够两者兼备，创造出符合客户需求的网页。
主要工作事项如下。
1）网站风格讨论：双方进一步讨论网站视觉风格。讨论网站是否需遵循 CIS（企业识别系统）、VI（视觉识别）进行延伸设计。若无视觉系统，双方可共同讨论网站所使用的颜色、设计元素等需求。
2）首页版面设计：此阶段将根据所讨论的各种设计需求进行首页提案设计，并提供设计稿与客户讨论、调整并最终定稿。
3）图文资料：由客户提供内页所需的图片和文字，用于内页版面设计。设计师需要考虑如何将客户所提供的资料进行妥善编排与设计。
4）内页版面设计：以先前所定稿的首页版面设计为基础，进行各内页编排设计，并与客户逐项讨论确认。
4. 前端
前端工程师（Front-End Engineer，F2E）负责视觉设计，并整合后端工程师所开发出的各种内容与功能。其主要负责编写HTML、CSS、JavaScript与接收 API等内容，最终要确保网页程序的正确性与顺畅度，进而将完成的网页呈现到网络上。
主要工作事项如下。
1）切版与组版：接收视觉设计师裁切完毕的各种素材。根据整体的视觉样式利用HTML+CSS的方式进行网页切割与组装操作。
2）效果制作：各种网站模块、组件、CSS样式及定制化的程序设计，如Slider（图片轮播）、Accordion（可折叠式菜单）与图片特效等。
3）细部微调：切版的细节微调，如图片与文字尺寸的调整、文字的间距与行距的调整，以及网页图文内容的修订等。
4）内部测试：此阶段通过客户所提供的数据来检查网站的实用性，查看内容是否会造成跑版、字里行间是否容易阅读，以及数据是否按照既定的规则显示。“切版”就是将视觉设计师设计好的PSD设计文件切成HTML+CSS格式。切版需要具有一定的技巧与专业知识，比如适当的HTML语句tag（标签）及结构，用什么方式来组成内容可以比较好地呈现并具有较好的性能，CSS怎么编写比较好维护更新，跨浏览器时怎么取得最佳的平衡；跨平台时要不要设计可以变更尺寸的响应式设计等，这些都是在这一阶段就要决定的。
5. 后端
后端工程师（Back-End Engineer，B2E）根据网站规划书中所需的各项功能、数据库内容及后台管理系统等需求进行程序开发。同时需提供一种方式让前端工程师可以串接所开发出的功能，或是等前端工程师将网页设计完毕后交由后端工程师进行整合。
主要工作事项如下。
1）数据库内容：根据需求，开发出对应功能的字段内容与层次关系等。
2）后台管理系统：制作与数据库连接的管理页面，让客户可直接从网页上登录，以进行页面数据的添加、删除、查询和修改操作，而不是去修改程序代码与数据库内容。
3）功能制作：有些功能是前端与数据库相互连接后才能显示出的内容。例如首页的广告横幅（Banner），客户可直接从管理页面进行图片的替换，而前端工程师必须编写切换效果，以及从数据库中抓取指定的图片并显示出来，类似这部分的内容必须由后端工程师告诉前端工程师如何连接数据库。
6. 测试
待前端工程师与后端工程师将网页制作与整合完毕后，质量保证（Quality Assurance，QA）工程师根据网站规划书中的需要项目逐项检查内容与功能，借此建立和维持质量管理体系来确保网站质量没有问题。
主要工作事项如下。
1）初步校对：此阶段由客户浏览网站进行网页内容的校对，并列出问题列表，以便逐条进行修正和调整。
2）登录测试：此阶段由客户针对之后需自行使用的各项功能从网站后台进行登录测试，并参照提出的问题列表来进行修正和调整。
3）网页修正：由公司根据列表内容更正图文资料并修复互动功能上的错误。
4）多国语言版网站：在第一语言版本网站构建完成后，才会进行其他各语言版本网站的制作。此阶段由客户提供各个语言版本的翻译文稿，再进行其他语言版本网站的制作，各个语言的版式会根据实际情况进行版面的调整。
7. 上线
将通过测试的网站上线，让大众可以搜索与浏览。
主要工作事项如下。
1）上级的前置工作：准备DNS数据、主机连接数据及新主机环境检查测试。
2）网站上线：将网站转移至正式主机，等到DNS指向生效后，网站正式上线。一般而言，DNS指向需24～72小时。网站上线后，需进行网站的各项上线核查。例如，“联系人”窗体的邮件发送测试、网页目录安全性设置、加入Google分析和网站搜索引擎登录等。
3）整合Google分析：整合Google网页分析平台（Google Analytics，GA），客户可通过GA了解网站每日的访客数、所使用的搜索关键字及访客来源地区等用户信息，以调整网站经营的策略。
4）培训（网站交接）：此阶段将会由公司派专人为客户说明网站的操作和使用。同时也提供操作手册和网站后台登录数据，供客户日后用于网站的维护工作。
1.3 Web设计基础
1.3.1 Web设计原则
Web设计师需要研究如何布局、处理字体和颜色，以及空白的应用，并围绕要表达的信息把这些元素融为一体，构成一个网页乃至网站，从而形成自己的风格。
Web站点所要实现的目标是设计的最终方向，而页面的制作仅仅是设计的具体实现。Web站点的设计并不是通常认为的网页制作，而是一个融合了多种设计原则和设计过程的系统工程。
1. 明确站点类型
在开始设计工作之前，确定网站的类型（如销售类产品或形象宣传）是首要目标。从一个网站的内容和特性来看，网站的类型包括新闻或信息、企业、商业、政府、个人、社交、搜索网站等。一个成功的网站必须有自己明确的用户群、内容、功能，以及视觉和体验的独特性，才能在浩如烟海的站点中脱颖而出。
1）新闻资讯类站点，如新浪、搜狐等大型门户网站，主要向访问者提供大量的信息，涉及经济、政治、人文和生活等方面的内容，网站日访问量巨大，访问群体范围较广，其设计更注重信息覆盖的范围及受众的广泛性。因此需注意页面的分割、结构的合理、页面的优化及界面的亲和等问题。如新浪网的设计特别注重了信息的分类合理，导航清晰，使用户能迅速在众多信息中找到自己感兴趣的内容。同时，色彩选择较为平淡的基色调，以减少对用户的视觉刺激，增长用户浏览网页的时间。
2）资讯和形象相结合的网站，如政府网等，主要用于发布政策规章制度等信息，提供各种在线政务服务。因此，在布局设计上要求简单合理，使用户能够迅速找到所需信息。常用的功能应给予用户明确、快捷的链接，重要的功能应给予用户醒目的提示。在色彩的选择上，应使用中性、温和的色彩，颜色使用不宜过多和跳跃。整体色彩应给用户传递严谨、权威、庄重的心理感觉。
3）形象类网站，比如商业企业的对外宣传网站，是企业产品和形象宣传的重要窗口，主要为了让外界了解企业自身，树立良好企业形象，并适当提供一定的产品服务。因此，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。同时，设计方法也不拘一格，重点在于新颖、有特色，能够传递出强烈的企业文化信息。
除了上述网站类型外，还有一些网站具有更多的专业化设计。比如瑞丽女性网是为都市女性提供分享时尚与优质生活的多元化资讯及多样化服务的综合性网站。由于女性具有较高的审美需求和高敏感的颜色感应，所以在设计方面尽量以柔和、明快的暖色作为主色调，给女性浏览者以热情、柔美的感觉。在页面构成上，要选用大量清晰度高的图片给用户以视觉上的冲击。
2. 保持站点简洁明确
对于今天的许多企业而言，网站极有可能是他们和目标客户之间的第一联系方式。因此使客户能够清楚地认识网站所要表达的信息或提供的服务是至关重要的。一个好的网站设计应该做到主题鲜明突出，布局清晰简洁，能够以简单明确的语言和画面告诉访问者站点的主题，使用户能够容易地找到他所需的内容。
1）界面简洁：对内容文本进行精炼化，保留关键信息；使用一个醒目的标题，常常采用简洁的图形来表示；限制所用的字体和颜色的数目。
2）内容明确：使用清晰的消息标识，确保用户了解此页面的上下文；使导航元素保持一致，并且对访问率最高的区域进行明显的标记，使它们易于被用户找到；界面上的所有元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来；还要确保界面上的每一个元素都能让浏览者看到。
此外，为保持简单明确，设计网页时尽量减少浏览层次。
3. 网页设计的一致性
一致性的网页设计原则使得访问者容易理解站点的结构，否则可能导致访问者陷入困惑。例如，在不同的页面中使用同样的布局、字体、色彩和导航结构等表现元素，使得页面之间既能够保证协调，又不会因页面风格过于一致而产生视觉疲劳。对优秀的Web站点进行分析可以发现，优秀的网页虽然各有特色，但都遵守最基本的原则，即保持站点内部页面之间的一致性。
要保持一致性，可以从页面的结构排版入手。
● 通过定义一致的页面模板，各个页面使用相同的页边距。
● 文本和图形之间保持相同的间距。
● 主要图形、标题或符号旁边留下相同的空白。
● 如果在第一页的顶部放置了公司标志，那么在其他各页面中都放上这一标志；如果使用图标导航，则各个页面应当使用相同的图标来营造出一种熟悉感。
图1-2所示为当当网的二级栏目，图书频道和其首页导航条保持一致。这样使得这些页面呈现出的视觉形象就是相互联系的，也使用户感知到正在访问的页面与此前访问的该网站的网页是相互联系的。图1-2 当当网二级导航
除了保持布局的最大相似外，在界面元素的设计上，每个元素与整个页面及站点都应当具有相同的设计风格。有了结构和视觉的一致性，在用户的使用模式上保持站点的一致性对于改善用户的使用体验也是非常重要的。
4. 注重用户体验
用户体验是用户访问网站时的一种感觉。注重用户体验是Web站点设计时应考虑的一个重要方面，它要求把用户放在第一位，设计时既要考虑用户的共性，也要考虑他们的差异性。（1）研究用户
可以通过分析用户的群体特征，了解主要用户为什么使用网站，以及如何使用网站。例如，虽然在考虑用户阅读习惯设计时，大多数遵循Z字形设计或F形结构，但一些特殊文化，如阿拉伯语类的网站可能刚好相反。（2）有效的导航和位置设计
合理的导航可以对网站内容进行分类，每个网页除了应用同样的导航设计之外，还应当包括当前的位置提示设计及一些特殊位置的快速返回链接，如在导航或页面中设计从任何页面直接跳转到“首页”的链接。（3）保持整个网站一致性的设计
例如，统一的色彩方案、相似的页面模板，对于同样的操作、专业术语等前后保持一致的定义等。（4）清晰准确的内容设计
清晰准确的内容设计便于用户快速获得所需的信息。例如，通过对比设计使得文字内容突出、避免一页有太多的内容、对内容进行准确的分类和布局，以及使得重要的信息总在用户视觉最集中的地方、保持内容间的交叉连接并建立索引等。
这些最基本的准则虽然并不能解决所有问题，但注意它们并积累个人的设计经验有助于设计出好的网站，达到吸引用户多次访问的目的。
1.3.2 网站结构规划
Web站点由一组Web页面组成，而且这些Web页面具有一定的分层设计和组织。在规划设计Web界面时，第一个步骤就是明确网站的目标和用途（如产品销售），Web设计的布局、风格和内容等都要以这个目标为中心。所谓结构设计，就是考虑如何将内容划分为清晰合理的层次体系，建立组成Web站点的各个页面间的关联关系，构建一个组织优良的网站整体。
1. 网站栏目规划
明确划分信息群，不让读者产生迷惑，使之迅速找到所需要的信息，是栏目规划最重要的任务。栏目的整理决定了网页的可读性。事实上，网站栏目的规划对于网站来说是决定其成败的重要因素。栏目的实质是一个网站的大纲索引，其作用就如同一本书的目录一样，因此索引应该将网站的主体明确显示出来。
在制定栏目时，要仔细考虑，合理安排。好的栏目规划结构是网站内容的总体概述，它利用导航的形式予以表现，指引浏览者在页面间访问和跳转。
不同类型的网站其定位和功能也不同，具体问题具体分析，但通常遵循一些通行的准则。
1）栏目内容一定要紧扣主题。可以将网站的主题按照一定的方法分类作为网站的主栏目。同时要明确，主栏目的个数在整个栏目中应占有较大比重。
2）栏目的目录设计要求简洁，结构层次清晰，以方便网站的管理。不管网站的内容有多精彩，如果缺乏对内容的准确提炼和总结，不能清晰地告诉访问者所需的信息在哪里，则最终难以引起浏览者的关注。
3）栏目的内容要突出重点，对于用户经常要访问的内容应直接放入主栏目下。而对于其他的辅助内容，如关于本站、版权信息等可以不放在主栏目中，以免冲淡主题。尽可能删除与主题无关的栏目，尽可能将网站最有价值的内容列在栏目上。
4）为方便用户使用，一般情况下访问者应能够在单击3～5次后可查询到相关问题。因此应对栏目级数进行控制，网站的页面级数最多控制在三级，同时链接应当是清晰而准确的。
在基于通行准则的指导下，可以针对网站特点和性质具体确定栏目设计。栏目设计的基线应该是以用户为中心，以一种访问者容易、直观、可预期的方式来设计网站的结构。一般应该从网站的类型、希望表达的内容、信息的分类及同类网站的设计等方面考虑。
为了更好地进行栏目设计，需要收集大量的相关资料，并对其进行整理。整理以后再找出重点，根据重点及网站的侧重点，结合网站定位确定网站的分栏目需要有哪几项，可以参考其他类似网站的栏目，然后反复比较，最后确定网站相关的栏目，形成网站栏目的树状列表，用以清晰地表达站点结构。
2. 目录结构规划
网站目录是指建立网站时创建的目录。目录结构主要指网站包含的文件所存储的真实位置所表现出来的结构。目录结构往往是设计者容易忽略的问题。大多数初学者进行站点设计时都是未经规划随意创建子目录。事实上，目录结构的好坏对于网站的维护、内容的扩充和移植、搜索引擎的访问等都有重要的影响。（1）建立目录的建议
● 不要将所有文件都存放在根目录下。
● 按栏目内容建立子目录。
● 建立一些特定目录用于存放公共信息。例如，把图片文件存放在images目录中。（2）目录规划原则
● 目录的层次不要太深，建议不要超过3层。
● 不要使用中文目录，否则会影响对网址的正确显示。
● 不要使用过长的目录。
● 尽量使用意义明确的目录，如可以使用images、css、js和bbs等。
● 通常将首页命名为index，放在根目录下，每个栏目的首页也命名为index。
1.4 布局设计
1.4.1 布局设计原则
当Web站点的开发者完成了站点的栏目规划后，实际上就已经掌握了网站用户群体最希望看到的标题内容，接下来就是使用页面布局将这些内容以合理的方式展示给用户。
网页布局体现的是网页中各个模块的重要程度及用户可能的关注重点，合理的布局应能够将站点想要传达的信息快速而高效地提供给用户，因此布局是整个界面的核心。在布局时，一定要注意网页内容和形式的统一、协调和均衡。
通过对各种公司网站页面信息内容进行分析可以发现，大多数公司网站的网页上部主要放置公司的Logo和广告条，然后是一个横向导航条；中间大部分区域为内容信息区，由于这部分内容较多，又将其划分为左、中、右3部分，分别放置不同类型的信息内容；底部为页脚区域，主要放置公司的版权信息、底部导航等。这种就是标准的上中下的布局结构。
设计者应考虑如何使网页的布局与内容完美地结合。使得网站既能准确、快速地表达网站的主要内容，让用户把注意力集中到浏览内容上，还能够维持网页整体的稳定和美观。通常可以从以下几个大的方面考虑布局的基本设计原则。
1）网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式。网页中要展示的内容必须是依据站点的主要栏目进行规划的。同时可以将所要表达的相近栏目集中放在一个区域显现，构成一种群体效应。
2）网页布局应区分栏目模块的重要程度。区分开栏目的主次性，重要栏目以顶部、左侧排列，次要栏目以底部、右侧排列。即重要信息、重要功能模块遵循“靠上靠左”原则。
3）网页布局必须尊重用户习惯。不仅要考虑不同类型用户的使用习惯差异，还要考虑中、英文等不同语种用户的浏览习惯。
1.4.2 布局设计类型
1. 传统布局类型
网页布局大致可分为“国”字型、“匡”字型、标题正文型、框架型、封面型和变化型等。（1）“国”字型
也可以称为“同”字型，是一些大型网站常用的类型。即最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式和版权声明等。这种结构是最常见的一种结构类型，如新浪、搜狐、网易和腾讯等门户网站。（2）“匡”字型布局
这种结构与“国”字型其实只是形式上的区别，它去掉了“国”字型布局的最右（或左）边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左（或右）侧是一窄列链接等，右（或左）列是很宽的正文，最下面也是一些网站辅助信息。（3）标题正文型
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类型。（4）框架型
框架型可分为左右框架、上下框架及综合框架等几种。框架型网站的优势在于可以使网站的维护变得相对容易，但其不易被搜索引擎索引。框架结构的一个共同特点就是浏览方便、速度快，但结构变化不灵活，通常用于网站后台管理页面的布局。由于在最新的Web标准中不再被支持，所以要慎用。（5）封面型
这种类型基本上出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页中，处理好了会给人带来赏心悦目的感觉。（6）“三”或“川”字形布局“三”字形布局是一种简洁明快的网页布局，在国外用得比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。“川”字形布局的整个页面在垂直方向分为3列，网站的内容按栏目分布在这3列中，最大限度地突出主页的索引功能。
2. 网页设计趋势
移动设备的流行改变了整个网页设计的技术，同时也影响了设计风格。设计趋势每年都在改变，出于各种原因，有的设计趋势在演进中逐渐消失，有的则在大家的熟练运用过程中渐入佳境，甚至逐步变为主流。如今，响应式网页设计、全幅背景、滚动式与微动画等几种网页模式成了主流设计。（1）响应式网页设计
响应式网页设计是一种网页设计的技术方法，可使网站在多种设备上阅读和浏览。响应式网页可让同一个网页界面随着不同设备的尺寸调整网页的浏览方式，同一笔图文数据在计算机上为模式排列，当浏览器宽度缩减到手机尺寸时，则显示为竖直排列，即不会因设备尺寸不同而无法正常阅读。（2）全幅背景
随着屏幕尺寸越来越大及移动设备的盛行，可随屏幕缩放图片尺寸的全幅背景网页设计开始流行起来。全幅背景和传统固定宽度的横幅（Banner）场景图相比，更能凸显气势磅礴的形象。除使用图片外，还可以借助HTML5新增的视频（Video）标签实现全幅视频设计。（3）单页式网页
单页式网页也可称为“滚动式网页”，移动设备改变了人们浏览网页的方式，过去在使用台式机时常常希望网页不要有滚动条，有了平板电脑后反而开始习惯手滑屏幕来浏览网页，这时单页式网页设计就成了主流。
单页式网页设计近似于浏览幻灯片的概念，让用户一次专注于了解一件事情，不用再分心去看左右两边不相干的文章。过去一个页面塞满一堆信息的网页设计已经不再流行，在信息海量的时代，简单的区块式设计才能让用户专心阅读和理解想传达的信息。
单一网页越来越长已是很普遍的做法，尤其是在移动设备普及的时代，首页通常不设链接，改而将所有内容放在单一页面中，让低头族“滑上瘾”。比起在一堆链接中跳转，必须不断重新等待新的页面加载，信息通通放在单页的形式则更易于浏览，而且不再只是首页“变长”。其实about或描述产品的网页都能采取滚动到底的方式。例如，苹果公司的iPhone页面显示网页的方式就符合长网页的趋势，把所有规格与功能全部放在单一网页内，并且增添了一些精致的动画元素，吸引用户滚动全程的注意力。（4）固定式菜单
固定式的主菜单也是近年来流行的趋势之一，尤其是功能性菜单，大多会设计成固定式菜单。在早期，当逐步往下浏览网页内容时，最顶端的菜单其实早已看不到了，必须重新回到网页顶端后才可单击其他链接进行浏览。为了改善用户的体验，就会将菜单固定在网页的顶端，无论页面如何向下滚动，菜单依然存在。在网页下方加上“回到顶部（Back to Top）”的固定式按钮也是常见的解决方案。（5）扁平化设计
有别于过去讲求逼真立体感的设计，扁平化设计的核心在于简洁化，只保留必要的元素。扁平化的优势在于不仅让网页程序轻量化、提升网站速度，同时也能为用户带来清晰的视觉观感。（6）微动画
在Flash时代，企业网站充满各种酷炫的动画，如今随着网页的发展，取而代之的是简单、不影响阅读的微动画，如首页轮播（Slider）就是常见的做法。另外，用CSS3制作的颜色渐变按钮、主菜单特效等，都会让网站在体验上有画龙点睛的效果。（7）卡片式设计
卡片式设计也称为“砖墙式设计”或“瀑布流设计”，经常用于显示许多信息流的页面，例如用图片显示整个照片墙。卡片式设计由于可横排/竖排切换，因此也常见于响应式网页设计中。
此设计技巧不算新颖，但却是响应式网页设计的最佳实践。卡片式设计的优势是模块化，重新编排栏目也不会草率或紊乱，在浏览器中能浏览大量数据。（8）隐藏式菜单
有些网站选择把菜单隐藏起来，只有当用户单击或悬停在某个元素上时才会打开菜单，借此尽量维持画面的整洁，强调功能性。（9）超大的字体
有些设计师会跳脱平淡的做法，尝试将字体做不同的编排风格，使用较大的标题来排版以呈现简单、有力的视觉效果。（10）幽灵按钮
将按钮透明化，仅以能够识别的超细边框包裹着无衬线的字体，一方面减少了按钮与背景的突兀感，另一方面依然有清楚的指向。
页面的布局没有固定的方式方法，要针对具体问题具体分析，从而决定采用哪种类型，如果把上述几种类型相结合并做适当变化，就是变化型布局了。
1.4.3 布局设计元素
在网页文件中，会涉及很多页面元素。要想将这些页面元素有机地组合起来，达到满意的视觉效果，必须把这些元素放在合适的位置上，这就是网页元素的定位。
1. 页面规格
由于页面尺寸和显示器大小及分辨率有关，一般显示分辨率采用800×600、1024×768、1280×1024、1366×768和1920×1080等，所以实际设计的宽度一般采用减去右边浏览器滚动条宽度20像素就差不多了，但不可能为每种分辨率都设计一种规格，而高度设计时除封面型外，一般不考虑是否会超出一屏。
2. Logo设计
Logo代表整个网站乃至公司的形象，网页中的Logo基本上会出现在整个网站中的所有页面，其重要性不言而喻，现在的Logo越来越具有创意性，越来越简单、干净、直接，但这并不影响网站形象，这是互联网潮流趋势和设计理念的动向。好的Logo可以直接代表网站的灵魂，甚至延伸至产品、文化、精神和理念等，好的Logo也能刻画出作者的风范，甚至能体现出蕴藏在作者心中的寄托和心血。
常见的Logo类型有以下几种。
● 纯文字。最直接的表达方式，不作修饰和掩盖，如drupal.org网站。
● 文字加点缀。简洁的文字加上创意的矢量图形点缀，这类风格的Logo使用最广泛。
● 带3D元素和质感。3D质感的Logo相对比较少，除了流行趋势外，主要是和网络产品文化有关。
● 暖色简洁矢量。优秀Blog和个人站点比较常用的风格。
3. 页头
页头又可称为“页眉”，其作用是定义页面的主题。比如一个站点的名称多数都是显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它涉及下面的更多设计和整个页面的协调性。页头中常放置拥有站点名称的图片和公司标志，以及旗帜广告。
4. 文本
网页中的主要内容是文本，若排版不合理就容易产生视觉上的疲劳。在使用文本时，要注意正文字体最好使用默认，颜色要与背景色显示区别，合理使用行距。
5. 页脚
一般使用标准的页脚，提供版权信息、最后更新的日期和法律声明等，也可以加上导航栏。
6. 图片
图片是网页中除文本外用得最多的元素，它直接影响网站的浏览速度和浏览者的第一感觉，常用的格式有GIF、JPEG和PNG，还有SVG格式。GIF适用于透明背景的动画或字体图像等内容，保存的文件小，但颜色数只有256种。JPEG适用于不透明背景的、拥有丰富颜色的照片，但它是一种有损压缩保存的文件。PNG是一种支持无损压缩、可以透明背景和丰富颜色的新格式，但不支持动画。使用图片时要注意尽量使用图片的原始大小。
7. 多媒体
除文本与图片外，还有声音、动画和视频等其他媒体。原则上不使用自动背景音乐。
8. 留白
留白是指网页中元素之间的空白。可以利用留白来达到页面平衡，使整个页面布局松紧有度，形成虚实、浓淡、动静、轻重的效果，给人以跌宕起伏之感。留白可以是空白，也可以是大面积的单纯色彩，或是规则图形的组合，它使文字之间、图形之间形成页面节奏感、版块层次感、内容主次感。具体设计时要注意：网页顶部留白，保留传递网站的类型、风格的Logo和提供简单明了的导航链接；页面背景留白，去除阻碍视线顺畅流动的底纹等装饰性元素，根据实际需要设计好页面边空；简化标题表现，去除题花等装饰性元素，特别是头条、置顶和图版等，不做围框、流动和色彩变换等特效重复强调；版块分离用空白而不是表格或线条。
1.4.4 布局设计技术
1. TABLE表格布局
表格布局的优点是简单易用、所见即所得、设计速度快。但表格布局的代码可读性差、可维护性差、网页打开速度较慢。由于后台代码太多，导致网站打开速度慢。如果要考虑手机客户，请不要使用该布局。
2. DIV+CSS布局
DIV+CSS布局的优点为：DIV用于搭建网站结构、CSS用于实现网站表现，将表现与内容分离，便于大型网站的协作开发和维护；提高搜索引擎对网页的索引效率；缩短改版时间；大大缩减页面代码，提高页面浏览速度，缩减带宽成本；强大的字体控制和排版能力。
随着浏览器版本的标准化和制作工具的完善，该布局技术原来的缺点已经逐渐被克服了，建议使用。
3. 框架布局
框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常与表格配合使用，先用框架将页面划分为几个区域，然后再用表格实现各区域的精确局部，常用在网站系统的后台页面设计中。由于在HTML5标准中已经不推荐，所以该布局不建议使用。
4. 响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师开始采用这个技术，不仅看到很多的创新，还看到了一些成形的模式。这种布局主要是采用CSS3中的Media Query（媒体查询）来实现。
1.5 内容设计
1.5.1 文本
对于网页来说，最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。一个用户之所以访问网站，主要目的在于网站的内容，因此内容设计应当满足网站的目标，每个页面的内容应当得到良好的组织，适合网站的受众。
文本是网页中重要的设计元素之一。好的文本内容是专门为这个网页编写的，而不是简单地从一堆材料中复制过来的。对于网页设计初学者而言，了解和掌控网页设计中的文字排版设计显得尤为重要。
1. 文字的格式化
文字的格式化包括字号、字体、字间距和行距等。
文字的大小一般以像素（Pixel）px为单位，也可以用em、%等。
字体可以被网页设计者用来更充分地体现设计中要表达的情感。例如，粗体字强壮有力，有男性特点，适合机械、建筑等行业的内容；细体字高雅细致，有女性特点，更适合服装、化妆品或食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是怎么根据页面内容掌控这个比例。从加强平台无关性的角度考虑，正文内容最佳采用默认字体。因为浏览器是用本地计算机上的字体库显示页面内容的。如果有些标题确定要使用特殊字体，可以制成图像。
行距是指在两行文字之间间隔距离的大小，是从一行文字基线到另一行文字基线之间的距离。行距本身也是具有强表现力的设计语言。系统默认将行距设为文本尺寸的120%。适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。为了加强版式的装饰效果，可以有意识地加宽或缩减行距，体现独特的设计情趣。例如，加宽行距可以营造轻松、舒展的情绪，对娱乐性、抒情性的内容表现恰如其分。而宽、窄行距并存，可增加版面的空间层次与弹性，表现出独到之处。
2. 文字的强调
1）文字的强调。一般是对网站内容信息的一个加强手法。
2）行首的强调。可以将正文的第一个字或字母放大并做装饰性处理，嵌入段落的开头，在传统媒体版式设计中称为“下坠式”。这种方式可以起到吸引视线、装饰和活跃版面的作用。
3）引文的强调。在进行网页文字编排时，常常会碰到提纲挈领性的文字，即引文。引文可以概括一个段落、一个章节或全文大意，因此在编排上应给予特别的页面位置和空间来强调。引文的编排方式多种多样，如将引文嵌入正文的左右侧、上方、下方或中心位置等，并且能在字体或字号上和正文有差别而产生变化。
4）个别文字的强调。是将个别文字作为页面的诉求重点，能通过加粗、加框、加下画线、加指示性符号或倾斜字体等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。
3. 文字的颜色
在网页设计中，颜色的运用可以强调文字中特别的部分，还可以对整个文字内容的情感表达产生影响。设计者能为文字、文字链接、已访问链接和当前活动链接选用各种颜色。系统也会有一些默认的设置。使用不同颜色的文字能使想要表现的部分更加引人注目，但使用过多会影响阅读页面内容，使浏览者感到杂乱无章，不知所措。
1.5.2 多媒体
除了文本网页内容之外，还可以将一些图片、动画、声音和视频置入网页中，丰富一个页面的内容表达方式。
图片是网页设计时大量使用的一种信息表达工具。在网页制作时，既要保证页面的显示速度，又要保证画质的精美。最好能遵循一些图片的使用原则：要尽可能保证下载速度，特别是要兼容移动浏览器的网页；网页中所采用的每一张图片最好都设置width和height这两个CSS样式，以使网页数据下载过程更顺畅；将不同图片类型进行分类放置管理；将大图片分割；网页背景图要简单明快。
动画已经成为表现网页活力的标志，将这一技术与广告、卡通、MTV制作等配合使用，可以开拓发展无限的商业机会。
声音一般被嵌入到网页中，当用户打开页面时或用户主动点击时进行播放。一般可以插入到网页中的声音文件格式有MP3、WAV、WMA、MIDI和RM等；另外，视频也是网页中一种流行的元素。
在网页中插入多媒体元素时，可能遇到文件大小不符、格式不能播放等问题。因此，在网页中使用多媒体元素时，需要考虑显示效果、网络速度等因素。
1.5.3 内容排版
排版并不仅仅是只要做到整齐就足够了，还要有明确的分类，以及主题的适当规划。排版包括表格、框架的应用、文字缩排和段落等。
页面中的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。在对正文的排版上，需要注意以下问题：两端均齐的页面显得端正、严谨、美观；居中排列的页面使文字更加突出，产生对称的形式美感；左对齐或右对齐很容易与图形配合，这种编排方式有松有紧，有虚有实，跳动而飘逸，能产生节奏与韵律的形式美感，左对齐符合人们的阅读习惯，显得自然，而右对齐显得新颖；绕图排列方式令人感到图文融洽、自然。
把关联项在视觉上进行分组。对有关联的内容，如页面内的元素通过进行恰当的逻辑分组，使得页面间不同的内容通过留白进行区别，让用户能够知道不同的区域包含不同的内容，在结构上改善视觉效果。
创建视觉层次。有效地使用留白和逻辑分组可以给站点一个清晰的视觉层次。当然，站点的信息架构是有效地使用接近原则的基础。层次是靠把元素分成有继承关系的组来表达的。层次让用户明白他们在什么地方、要到什么地方去，从而实现站点交流的目的。列表就是视觉上表达层次关系的很好例子。有层次关系和逻辑分组的内容更容易阅读和查找。
利用三分法，确定表现重点位置。三分法有时也称为井字构图法，是一种在摄影、绘画和设计等艺术中经常使用的构图手段。在这种方法中，摄影师需要将场景用竖线和两条横线分别分割，就如同是书写中文的“井”字。这样就可以得到4个交叉点，然后再将需要表现的重点放置在4个交叉点中的一个即可。
1.6 风格设计
1.6.1 网页设计构成要素
网页设计的风格、图形和内容形式千变万化，构成图形图像的最基本的造型元素是点、线、面。点、线、面的变化组合构成网页实际的多样化，是与别具一格的独特性相联系的。点、线、面的变化是网页设计活力的体现，也是创造形式美的基本要求，使网页设计具有不同审美倾向的特征。如果以不同图形或者单位来划分点、线、面，又是相对的。例如，一个圆形就是一个点，一排圆形就是一条线，几排、几十排甚至几百排的圆形就组成了一个面。
1. 点的构成
在网页设计中，运用点的属性可以创造出千变万化的点造型。点是造型的最基本要素，也是构成中最简洁的形态。点在线、面里相对来说是最小的单位，依托无数的点可以形成线和面。
在视觉形态中，点具有形状、方向和大小等属性。点的概念是相对的，是与周围的视觉元素相比较而言的。点一般表示为圆形，但也可以是三角形、方形或无规则图形。作为视觉上的点，随着面积的扩大，趋于面的感觉就越强。点具有视觉集中的属性，具有强烈的视觉吸引力。当这些点大小不同时，人们在视觉上首先注意大的点，然后逐渐向较小的点移动。随着点的增加，人们的注意力也会逐渐分散。点的数量多会有生动感，如果大小不同，就丰富了视觉节奏韵律，增加了美感。点的连续会产生节奏、韵律和方向，疏密的点阵会产生空间感。点的形状、方向、大小、位置、聚集、发散、层叠或交错，能够给人带来不同的心理感受。
单纯由点构成的网页较少见到，一般总是和其他元素配合使用。这种版面往往轻松随意、生动活泼，给人印象深刻，休闲、娱乐类网站使用较多。
2. 线的构成
线是由点的移动或连续排列构成的，或者说由两点连接而成，是不占面积的。用线能表现作品的感情和抽象意义，页面的工整感和速度感也是靠线性来表现的。线在空间中具有方向性和运动感。
线分为直线和曲线两种。直线分为垂直线、斜线和水平线；曲线分为几何曲线和自由曲线。线的粗细、长短、形状的变化，在不同的环境中有各自的意义。直线有坚硬、力量、速度的感觉；曲线常常体现柔软、流畅、温和的女性特征。以两种或两种以上不同大小、颜色、
试读结束[说明：试读内容隐藏了图片]