1.1基本概念
上网冲浪时（即浏览网页），呈现在人们面前的漂亮页面就是网页，是网络内容的视觉呈现。网页是怎样制作的呢？网页的主体是一个HTML代码创建的文本文件，使用HTML中的相应标签，即可将文本、图像、动画及音乐等内容包含在网页中，再通过浏览器的解析，多姿多彩的网页内容就呈现出来了。
网页中可以包含很多的内容作为网页的元素，最基本的元素是文字、链接、表单。此外还包括静态的图形、动画、声音、视频等其他形式的多媒体文件。最终目的是向访问者传达有价值的信息，并留下深刻的印象。
网页不是由一个单独的文件构成。
浏览器和服务器的概念
互联网--世界各地的计算机相互连接而成一个网络。
浏览网页，实际上是从远程的计算机上读取一些内容，然后在本地计算机上显示出来。
浏览器发出请求，对应服务器将信息传送至用户的计算机上，浏览器再负责解析出网页的内容，并展示出来。
互联网--“万维网”，WWW--“World Wide Web”简称Web。发源于欧洲量子物理实验室。
实际上是一个大型的相互连接的文件所组成的集合体。
1.2 HTML介绍
HTML(Hyper Text Markup Language)，中文通常称为“超文本标记语言”，是因特网上编写网页的主要语言。通过HTTP协议，使HTML文件可以在互联网上进行跨平台的文件交换。
HTML文档的主要特点：
1、容易创建。
2、文件占用空间小，能够尽快地在网络环境下传输和显示。
3、平台无关性。HTML独立于操作系统平台，能对多平台兼容。
4、简单易学，不需要很深的编程知识。
5、可扩展性好。
HTML的简单发展历史
1993.6 HTML1.0 互联网工程工作小组（IETF）工作草案发布
1995.11 HTML2.0 发布
1996.1 HTML3.2 W3C推荐标准
1997.12 HTML4.0 W3C推荐标准
1999.12 HTML4.01 W3C推荐标准
2008.8 HTML5.0 W3C工作草案
1.3网页的设计与开发过程
1）明确网站定位
应清楚建立站点的目标定位，确定它将提供什么样的服务，应该提供哪些内容。确定站点目标定位，从三个方面考虑：
A、网站的整体定位，如大型商用网站、小型电子商务网站，门户网站、个人主页、科研网站、交流平台、企业介绍性网站、服务性网站。对网站的整体进行一个客观的评估。以发展的眼光看待问题。否则将带来许多升级和更新方面的不便。
B、网站的主要内容。如果是综合性网站，便会涉及新闻、邮件、电子商务、论坛等内容，就要求网页结构紧凑、美观大方；对于侧重于某一方面的网站，如书籍网站、游戏网站、音乐网站等，则往往对网页的美工要求较高，使用模板较多，更新网页和数据库较快；如果是个人网站或介绍性网站，则更新速度较慢，浏览率低，链接较少，内容也不如其他网站丰富，但对美工要求更高一些，可使用较鲜艳、明亮的颜色，同时添加动画等，使网页更具动感、充满活力，否则网站就没有吸引力。
C、网站浏览者的教育程度。对于不同的浏览人群，网站的吸引力是截然不同的，如针对少年儿童的网站，卡通和科普性的内容更符合其浏览品味，也能达到寓教于乐的目的；针对学生网站，往往对网站的动感程度和特效技术要求更高一些；对于商务浏览者，网站的安全性和易用性更为重要。
2）收集信息和素材（前期策划中最为关键的一步）栏目的设置有规划
创建目录，放置网站文件，文件名最好用英文。
A、文本内容素材的收集文本素材内容既要丰富，又要便于组织。
B、艺术内容素材的收集只有文本内容的网站，是枯燥乏味、缺乏生机的。多种媒体内容，会使网页充满动感与生机。
3）策划栏目结构（确定重点）栏目归类根据主题、功能或内容分类
合理组织站点结构，能够加快对站点的设计，提高工作效率，节省工作时间。
4）设计页面图像方案美术设计师（美工）拿出几个不同风格的方案，考虑公司整体形象 Logo、标准色彩、导航条、首页布局等。
5）制作页面版面布局
版面，是指在浏览器中看到的完整的一个页面的大小。因显示器分辨率不同，同一个页面的大小可能出现不同的尺寸。640*480 800*600 1024*768 实际设计时，限制在778以内
布局，是指以最适合的方式将图片和文字排放在页面的不同位置。这是一个创意的过程，需要一定的经验与灵感。
页面制作复杂而细致的过程，按先大后小、先简单后复杂的顺序。灵活运用模板与库，提高制作效率。
静态页面的构建，注意页面之间的逻辑关系静态与动态部分的区分
6）实现后台功能编程实现
留言板、搜索功能、新闻发布、购物网站、聊天室
7）整合、测试与发布
将网站内容上传至服务器之前，应先在本地站点进行完整测试，以保证页面外观和效果、链接和页面下载时间等与设计相同。
站点测试主要包括检测站点在各种浏览器中的兼容性、检测站点中是否有失效的链接。发现包含在网页中的错误。
发布。用软件工具，上传至服务器。
1.4 网页设计的基本原则
明确主题页面都围绕这个内容来制作
首页很重要反应整个网站给人的整体感觉，能否吸引访问者，全在于首页的设计效果。条理清楚，类别选项人性化，能让人快速找到目标。
分类如按主题分类、按性质分类、按组织结构分类、按人的思考方式分类等。
互动性好的网站必须与访问者有良好的互动关系，包括整体呈现、界面引导等。
图像应用技巧具备醒目、吸引人和传达信息的功能。用得好会给网页增色，用不好适得其反。
避免滥用技术技术是让人着迷的东西。好的技术运用会使页面栩栩如生，给人全新的感觉，不恰当的使用会起相反的效果，让人失去兴趣。
及时更新和维护访问者希望看到新鲜的东西，没人对过时的信息感兴趣。
1.5 网页设计的成功要素
整体布局网页设计作为一种视觉语言，讲究编排和布局。就干净整洁、条理清楚。过多的闪烁、色彩、图片只能会让访问者无所适从。
信息提供有价值的内容
下载速度是吸引访问者的关键因素，如果20－30秒还不能打开，一般人会没有耐心。图像大小应控制在6－8k为宜。
图像和版面设计关系到第一印象，图像应集中反映主页所传达的主要信息内容。
文字的可读性主要是选择字体，通用字体最易阅读，特殊字体用于标题效果较好。颜色也很重要。
多媒体功能的运用可吸引访问者的注意力，但要考虑传输速度。
导向清晰使访问者能在网站上自由地前进或后退。人们习惯于从上到下，从左到右阅读，主要导航条应放置在左边，长页面底面设置简单导航。
1.6 设计网页的三要素
结构Structure、表现Presentation、行为Behavior。
是什么什么样子做什么
HTML CSS JavaScript
三者分离，是一个重要的思想。
1.7 与设计相关的技术因素
1）屏幕分辨率 pixel 1024*786 1280*1024 1280*800 1440*900
2）浏览器类型 IE firefox Opera Mozilla Safari Chrome