第1篇第1章网页制作基础知识

1、第第1篇第篇第1章章 网页制作基础知识网页制作基础知识第第1 1篇篇 第第1 1章章 网页设计与制作根底网页设计与制作根底1.1 网络根底网络根底1.1.1 网络与网页网络与网页1.1.2 HTML语言与语言与XHTML语言语言1.2 网站建立流程网站建立流程1.2.1 分析阶段分析阶段1.2.2 设计阶段设计阶段1.2.3 制作阶段制作阶段1.2.4 测试阶段测试阶段1.2.5 发布与维护阶段发布与维护阶段思考题思考题1.1 网络根底网络根底1.1.1 网络与网页网络与网页Internet效劳：效劳：www效劳网页浏览效劳、电子邮件效劳网页浏览效劳、电子邮件效劳、网上传呼效劳、网上传呼ICQ

2、传呼、文件传输、在线聊天、传呼、文件传输、在线聊天、网上购物、网络炒股、联网游戏、虚拟空间等网上购物、网络炒股、联网游戏、虚拟空间等图图1-11.1.1 网络与网页网络与网页浏览器：是获取浏览器：是获取www效劳的根底，它的根本功能就效劳的根底，它的根本功能就是显示网页。是显示网页。统一资源定位符统一资源定位符URLUniform Resource Locator图图1-21.1.2 HTML语言与语言与XHTML语言语言主页主页Home Page首页：是整个网站的起始点和首页：是整个网站的起始点和汇总点，是用户开场浏览网站的入口。汇总点，是用户开场浏览网站的入口。 HTMLHyper Tex

3、t Markup Language 即超文即超文本标记语言，是用于在网络上发布信息的符号语言。本标记语言，是用于在网络上发布信息的符号语言。XHTMLExtensible Hyper Text Markup Language为可扩展超文本标记语言为可扩展超文本标记语言 。 HTML是纯文本文件是纯文本文件(ASCII码文件码文件)，可以用任何文，可以用任何文本编辑器编辑，如记事本。扩展名为本编辑器编辑，如记事本。扩展名为htm或或html。1.1.2 HTML语言与语言与XHTML语言语言HTML的根本格式：的根本格式：双标签双标签 受影响的内容受影响的内容 单标签不需要成对标记单标签不需要成

4、对标记 表示换行，表示换行，1.1.2 HTML语言与语言与XHTML语言语言【例【例1-2】在】在Dreamweaver 8环境下制作例环境下制作例1-1的界面，分析系统生成的的界面，分析系统生成的XHTML代码代码 。 欢送欢送1.1.2 HTML语言与语言与XHTML语言语言热烈欢送新同学热烈欢送新同学 2007年年9月月1日日HTML与与XHTML区别区别XHTML的主体的主体局部比局部比HTML简洁得多简洁得多 页面的首部有不同的文档类型说明页面的首部有不同的文档类型说明。XHTML的标记和属性名称只能用小写，而的标记和属性名称只能用小写，而HTML代码不区分大小写。代码不区分大小写

5、。XHTML代码所有的属性值都要用引号引起来，而代码所有的属性值都要用引号引起来，而HTML代码不要求。代码不要求。XHTML代码的单标签，如代码的单标签，如: 、等都要在后面加等都要在后面加 /斜杠前加空格斜杠前加空格来完毕，如来完毕，如，而，而HTML代码只需写单标签本身代码只需写单标签本身。1. 2 网站建立流程网站建立流程1.2.1 分析阶段分析阶段这一阶段的主要任务是收集、研究用户需求，这一阶段的主要任务是收集、研究用户需求，讨论讨论Web内容，制定方案。内容，制定方案。 任务任务 主题主题 内容内容 1.2.2 设计阶段设计阶段1站点风格：信息式、画廊式。站点风格：信息式、画廊式。

6、2网络技术：网络技术：网络上的运行速度。网络上的运行速度。 浏览器脚本兼容性。会影响某些网页效果不能正常显浏览器脚本兼容性。会影响某些网页效果不能正常显示。示。页面对屏幕分辨率的适应。网页页面的大小应尽量适页面对屏幕分辨率的适应。网页页面的大小应尽量适应流行屏幕的分辨率。随着显示器分辨率的提高，应流行屏幕的分辨率。随着显示器分辨率的提高，网页设计标准也会提高。网页设计标准也会提高。网页是否需要交互操作。在网页中参加网页是否需要交互操作。在网页中参加JavaScript脚脚本，或在效劳器端提供本，或在效劳器端提供CGI、ASP或或PHP支持。支持。安装插件。如果网页中使用了安装插件。如果网页中使

7、用了flash动画、动画、Shockwave媒体对象、媒体对象、Real视频等，需要相应的插视频等，需要相应的插件，应考虑用户获取插件的途径件，应考虑用户获取插件的途径 。1.2.2 设计阶段设计阶段3规划站点构造与导航方式规划站点构造与导航方式规划网站目录构造规划网站目录构造目录名与文件名不能过长，也不能用中文。目录名与文件名不能过长，也不能用中文。文件名中可以包含数字或下划线，但不能含文件名中可以包含数字或下划线，但不能含“减减号号。例如可以写但不能写。例如可以写但不能写。主页的文件名应为或系统默认的主页名称。主页的文件名应为或系统默认的主页名称。主页文件放在站点根目录下，其余文件均应主页

8、文件放在站点根目录下，其余文件均应归类到相应的子目录下。归类到相应的子目录下。1.2.2 设计阶段设计阶段【例【例1-3】 规划规划?家畜生家畜生产学产学?教学网站教学网站的目录构造。的目录构造。养猪生产、养养猪生产、养禽生产、养牛禽生产、养牛生产、养羊生生产、养羊生产产4个模块，可个模块，可以建立目录构以建立目录构造如右图。造如右图。 1.2.2 设计阶段设计阶段设计站点导航设计站点导航 导航设计的原那么是：导航设计的原那么是：通过最少的点击次数到达目的地。通过最少的点击次数到达目的地。整个网络的导航风格应该一致，否那么浏览整个网络的导航风格应该一致，否那么浏览者会误解为已离开本网站。者会误

9、解为已离开本网站。导航系统应一目了然，又必须尽量少占用页导航系统应一目了然，又必须尽量少占用页面空间。面空间。1.2.2 设计阶段设计阶段【例【例1-4】?家畜生产学家畜生产学?教学网站的导航系统教学网站的导航系统1.2.2 设计阶段设计阶段设计各级页面的版式：设计各级页面的版式：原那么一：原那么一：统一：设计作品的整体性，一致性。同一统一：设计作品的整体性，一致性。同一级页面的版式应该一样，不同级页面的版级页面的版式应该一样，不同级页面的版式应有所区别。式应有所区别。连贯：页面相互有关系。连贯：页面相互有关系。分割：将页面分成假设干小块，小块之间分割：将页面分成假设干小块，小块之间有视觉上的

10、不同，可以使用户一目了然。有视觉上的不同，可以使用户一目了然。比照：通过矛盾和冲突，使设计更加富有比照：通过矛盾和冲突，使设计更加富有生气。生气。和谐：整个页面符合美的法那么，浑然一和谐：整个页面符合美的法那么，浑然一体。体。 1.2.2 设计阶段设计阶段原那么二原那么二3C原那么：原那么：Content内容：主页简明，内容明确。内容：主页简明，内容明确。Clarify清晰性：文字不能太多，字体大小一致，统一设计风格。清晰性：文字不能太多，字体大小一致，统一设计风格。Color色彩：具有一致性和可读性。一致性指色调一致，色彩不宜太多；可读性指色彩搭配恰当，色彩：具有一致性和可读性。一致性指色调

11、一致，色彩不宜太多；可读性指色彩搭配恰当，文字与底图比照鲜明。文字与底图比照鲜明。1.2.2 设计阶段设计阶段1.2.3 制作阶段制作阶段 网站建立的第三阶段是具体实施设计网站建立的第三阶段是具体实施设计的方案，将站点中的网页按照设计方案制的方案，将站点中的网页按照设计方案制作出来。本篇以下各章节将教授这方面的作出来。本篇以下各章节将教授这方面的知识。知识。 Dreamweaver允许用面向对象的方允许用面向对象的方法法“搭建搭建页面，也允许直接编程制作页面，也允许直接编程制作Web页面。页面。1.2.4 测试阶段测试阶段 在所有影响页面显示的各种环境下进展在所有影响页面显示的各种环境下进展测试，然后对网页进展修改测试，然后对网页进展修改不同系统平台不同系统平台不同连接速度不同连接速度不同访问方法局域网、调制解调器、不同访问方法局域网、调制解调器、ISDN等等不同浏览器种类或版本不同浏览器种类或版本不同