《分析需求设计和制作网站》由会员分享，可在线阅读，更多相关《分析需求设计和制作网站（75页珍藏版）》请在金锄头文库上搜索。
1、分析需求，设计和制作网站分析需求，设计和制作网站分析需求，设计和制作网站分析需求，设计和制作网站 目录教学目标教学目标工作流程工作流程知识准备知识准备学习成果学习成果1.1.如何设计网站如何设计网站2.2.网站制作准备网站制作准备3.3.制作网站图像制作网站图像4.4.用用HTMLHTML制作网页制作网页5.5.网站测试网站测试教学目标网站设计步骤及原则；网站设计步骤及原则；网站网站CISCIS设计知识；设计知识；网页版面布局规则；网页版面布局规则；网站色彩知识；网站色彩知识；图像与多媒体知识；图像与多媒体知识；FireworksFireworks操作方法；操作方法；HTMLHTML技术；技术
2、；网站链接与外观测试方法；网站链接与外观测试方法；工作流程知识准备参考网站：参考网站：参考网站：参考网站：FireworkFirework视频教程：视频教程：http:/ http:/ http:/ 其他参考素材其他参考素材其他参考素材其他参考素材学习成果根据工作任务根据工作任务1 1中描述的公司概况、完成中描述的公司概况、完成的网站策划书、网站建设合同、网站需的网站策划书、网站建设合同、网站需求分析说明书、资料清单、资源与进度规求分析说明书、资料清单、资源与进度规划表，划表，进行网站设计，实现和测试网站进行网站设计，实现和测试网站进行网站设计，实现和测试网站进行网站设计，实现和测试网站 。独
3、立思考，真正理解所运用到的知识和所遵循独立思考，真正理解所运用到的知识和所遵循的工作过程，能够在反复的独立操作过程中记住这的工作过程，能够在反复的独立操作过程中记住这些工作流程和技能知识。疑难处咨询教师，让教师些工作流程和技能知识。疑难处咨询教师，让教师给予适当的指导。给予适当的指导。 上交作品时，包括上交作品时，包括XXXXXXXX公司网站设计说明书公司网站设计说明书和三个文件夹：网站文件夹、源文件夹、素材文和三个文件夹：网站文件夹、源文件夹、素材文件夹。件夹。 1.如何设计网站企业方作为需要建设网站的企业方，关注：作为需要建设网站的企业方，关注：u根据需求，进一步确定需要的、具体的功能效果
4、根据需求，进一步确定需要的、具体的功能效果和视觉效果？和视觉效果？u如何与对方沟通设计要求？如何与对方沟通设计要求？u对方完成设计后仔细阅读设计说明书，设计是否对方完成设计后仔细阅读设计说明书，设计是否能达到自身的要求？能达到自身的要求？目标目标目标目标：明确设计要求，协助网站公司完成设计：明确设计要求，协助网站公司完成设计1.如何设计网站网站公司作为网站建设公司，考虑：作为网站建设公司，考虑：uu根据对方的需求和设计要求，对方到底具体需要什么样的功能效果和根据对方的需求和设计要求，对方到底具体需要什么样的功能效果和视觉效果？视觉效果？uu网站设计师与业务顾问间如何衔接为企业方作好设计？网站设
5、计师与业务顾问间如何衔接为企业方作好设计？uu网站的设计过程与原则？网站的设计要素？网站的设计过程与原则？网站的设计要素？uu具体如何设计、如何创意？具体如何设计、如何创意？uu如何与对方沟通确认设计结果？谁与谁？什么时间地点？如何与对方沟通确认设计结果？谁与谁？什么时间地点？uu对方不满意如何进行修改，满意后如何签字确认？对方不满意如何进行修改，满意后如何签字确认？目标目标目标目标：网站设计师与业务顾问进行良好沟通，网站设计师掌握网站设计：网站设计师与业务顾问进行良好沟通，网站设计师掌握网站设计的方法，设计出符合客户要求，规范编写网站设计说明书，业务顾问再的方法，设计出符合客户要求，规范编写
6、网站设计说明书，业务顾问再与企业方沟通确认。与企业方沟通确认。1.如何设计网站设置工作情境u接着工作任务接着工作任务1 1中情境模拟的分组，继续扮演企业中情境模拟的分组，继续扮演企业方和网站建设公司，增加新的角色，商讨确定网站方和网站建设公司，增加新的角色，商讨确定网站的设计方案的设计方案u双方沟通设计细节，网站公司研究方案进行详细双方沟通设计细节，网站公司研究方案进行详细设计，形成网站设计说明书，最后确认签字设计，形成网站设计说明书，最后确认签字u角色交叉，继续完成角色交叉，继续完成目标目标目标目标：仿真模拟网站设计的过程，共同完成符合企：仿真模拟网站设计的过程，共同完成符合企业方要求的网站
7、设计说明书。业方要求的网站设计说明书。1.如何设计网站知识准备网站设计步骤及原则第1步：精心规划网站框架第2步：网站内容设计第3步：网站CIS设计第4步：网站版面设计学生练习：使用公司经营的产品或服务的对学生练习：使用公司经营的产品或服务的对象为关键词在互联网中搜索相应的企业网站，对象为关键词在互联网中搜索相应的企业网站，对比学习各网站框架、功能内容、比学习各网站框架、功能内容、CIS、版面设计、版面设计1.如何设计网站知识准备案例分析案例分析蚂蚁集团网站：蚂蚁集团网站：http:/ 蚂蚁搬家网站：蚂蚁搬家网站：http:/ 2、网站的目录结构和命名、网站的目录结构和命名（1 1）不要将所有文
8、件都放在根目录下）不要将所有文件都放在根目录下（2 2）按栏目内容建立子目录）按栏目内容建立子目录（3 3）在根目录和主栏目下建立）在根目录和主栏目下建立ImagesImages文件夹文件夹（4 4）目录的层次不要太深）目录的层次不要太深（5 5）不能使用过长的目录名和文件名）不能使用过长的目录名和文件名（6 6）不能使用中文目录名和文件名）不能使用中文目录名和文件名（7 7）使用意义明确的目录名和文件名）使用意义明确的目录名和文件名 1.如何设计网站知识准备网站网站CIS设计知识设计知识在网站在网站CISCIS设计中，通常以设计中，通常以“ “四标四标” ”来确定，来确定，即网站标识、网站标
9、语、标准颜色、标准字体即网站标识、网站标语、标准颜色、标准字体学生拓展任务：使用公司经营的产品或服学生拓展任务：使用公司经营的产品或服务的对象为关键词在互联网中搜索相应的企业务的对象为关键词在互联网中搜索相应的企业网站，对比学习各网站使用的标识、标语、标网站，对比学习各网站使用的标识、标语、标准颜色、标准字体准颜色、标准字体1.如何设计网站知识准备网站标识（网站标识（Logo）就如同商标一样，是网站特色和内涵的集中体现。在网站形象设计中，网站标识同网站名称一样重要，看见Logo就能使访问者联想起你的站点。 1.如何设计网站知识准备网站网站网站网站LogoLogo设计步骤与技巧如下：设计步骤与技
10、巧如下：设计步骤与技巧如下：设计步骤与技巧如下：（1 1）经过分析，提炼出核心词汇作为）经过分析，提炼出核心词汇作为LogoLogo的主体。的主体。（2 2）选择适宜的字体，多数时候人们都避免直接选用字库中的字体，字库）选择适宜的字体，多数时候人们都避免直接选用字库中的字体，字库中的字体是为了印刷、阅读而设计的，需将其图形化才符合中的字体是为了印刷、阅读而设计的，需将其图形化才符合LogoLogo的要求。的要求。（3 3）如果对字体的变形比较少，或者难于对字体进行变形，就需加上图形）如果对字体的变形比较少，或者难于对字体进行变形，就需加上图形来辅助。图形创意是一项有难度的工作，在进行图形创意的
11、时候，需要多参考别来辅助。图形创意是一项有难度的工作，在进行图形创意的时候，需要多参考别人的标志和图形设计。人的标志和图形设计。网站网站LogoLogo多采用卡通化的自由风格，但也有的企业网站采用企业多采用卡通化的自由风格，但也有的企业网站采用企业VIVI系统中系统中的标志图形，对于图形的选择需要与客户充分沟通，真正了解客户特点，理解企的标志图形，对于图形的选择需要与客户充分沟通，真正了解客户特点，理解企业文化。业文化。（4 4）如果企业）如果企业VIVI系统中已经指定了标准色，就按企业提供的标准色进行设系统中已经指定了标准色，就按企业提供的标准色进行设计，如果没有标准色作为参考，计，如果没有
12、标准色作为参考，LogoLogo色彩的选择就要符合客户的行业特征，如机色彩的选择就要符合客户的行业特征，如机械电子行业蓝色为主，食品行业嫩黄、金黄、巧克力色等为主，女性行业粉色、械电子行业蓝色为主，食品行业嫩黄、金黄、巧克力色等为主，女性行业粉色、紫、玫瑰等色为主，男性行业蓝色、深绿、黑色等为主，时尚行业使用现阶段的紫、玫瑰等色为主，男性行业蓝色、深绿、黑色等为主，时尚行业使用现阶段的世界流行色等。世界流行色等。1.如何设计网站知识准备网站标语网站标语网站标语网站标语可以是网站的精神、网站的目标、网站的经营理念，也可以可以是网站的精神、网站的目标、网站的经营理念，也可以是产品或活动等的宣传广告
13、语，用一句话甚至一个词来高度概括公司。是产品或活动等的宣传广告语，用一句话甚至一个词来高度概括公司。 1.如何设计网站知识准备网页版面布局规则网页版面的基本元素1.如何设计网站知识准备网页版面布局规则网页版面的基本元素1.如何设计网站知识准备网页版面布局规则网页版面布局规则页面的尺寸页面的尺寸 (1)(1)页面的安全宽度。当显示分辨率设置为页面的安全宽度。当显示分辨率设置为10247681024768，即浏览器的屏幕，即浏览器的屏幕最大宽度为最大宽度为10241024像素像素( (简写为简写为pxpx，像素是计算机屏幕上所能显示的最，像素是计算机屏幕上所能显示的最小单位小单位) )，因浏览器的
14、边框和垂直方向的滚动条占去，因浏览器的边框和垂直方向的滚动条占去2222像素，所以网像素，所以网页的安全宽度为页的安全宽度为10021002像素。所以页面的设计宽度最好限制在像素。所以页面的设计宽度最好限制在10021002像像素以内。不同计算机屏幕由于分辨率设置的不同，显示出像素的大小素以内。不同计算机屏幕由于分辨率设置的不同，显示出像素的大小也不同。也不同。问：问：问：问：80060008006000、12809601280960的分辩率页面的安全高度为的分辩率页面的安全高度为的分辩率页面的安全高度为的分辩率页面的安全高度为多少？多少？多少？多少？(2)(2)页面的最佳长度。页面长度定义很
15、宽松，要考虑整个网页的下载速页面的最佳长度。页面长度定义很宽松，要考虑整个网页的下载速度、浏览者的方便、信息含量、网站类型等因素，根据经验，中小型度、浏览者的方便、信息含量、网站类型等因素，根据经验，中小型网站的页面的最佳长度应在网站的页面的最佳长度应在1-21-2屏之间，大型网站在屏之间，大型网站在3-43-4屏左右。屏左右。问：问：问：问：80060008006000、 1024768 1024768 、12809601280960的分辩率页面的分辩率页面的分辩率页面的分辩率页面的最佳长度为多少？的最佳长度为多少？的最佳长度为多少？的最佳长度为多少？1.如何设计网站知识准备网页版面布局规则
16、常见的网页布局对称对比布局：对称对比布局：采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机的结合比较困难。 1.如何设计网站知识准备网页版面布局规则常见的网页布局同字型布局：同字型布局：页面上面有广告条+导航条，左面是链接，右面友情连接等，中间是主要内容。优点是充分利用版面，信息量大；缺点是页面拥挤，不灵活。回字型布局：回字型布局：在同字型的下面增加一个横向通栏，页脚充分利用起来。匡字型布局：匡字型布局：将回字型的右侧或左侧栏目去掉，改善回字型的封闭型结构。这三种结构及其变形应用广这三种结构及其变形应用广泛。泛。 1.如何设计网站知识准
17、备网页版面布局规则常见的网页布局自由式布局：自由式布局：将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位子，起装饰作用，这种结构在时尚类网站中使用的非常多。优点：富于美感，可以吸引大量的浏览者欣赏；缺点：文字过少，导航条的指引作用不明显。 1.如何设计网站知识准备网站色彩知识色彩的魔力 你夏天喜欢买百事可乐还是可口可乐？为什么？你夏天喜欢买百事可乐还是可口可乐？为什么？除了味道的区别外它们的包装对你有影响么？除了味道的区别外它们的包装对你有影响么？网站色彩知识色彩的魔力 你冬天喜欢家里是红色橙色等你冬天喜欢家里是红色橙色等颜色，还是深蓝深紫的颜色，颜色，还
18、是深蓝深紫的颜色，为什么？除了个人色彩习惯外为什么？除了个人色彩习惯外它们分别给你什么感觉？它们分别给你什么感觉？1.1.如何设计网站如何设计网站知识准备知识准备网站色彩知识色彩的魔力 你不开心的时候看到天气不好，灰蒙蒙的你怎么想，你不开心的时候看到天气不好，灰蒙蒙的你怎么想，要是看到阳光明媚又会要是看到阳光明媚又会 怎么想？怎么想？ 回忆你买过的女性用品比如化妆品和服饰商标和回忆你买过的女性用品比如化妆品和服饰商标和包装、广告的主要色彩特征？包装、广告的主要色彩特征？ 回忆你见过的男性用品比如剃须刀、打火机等的回忆你见过的男性用品比如剃须刀、打火机等的包装、商标、广告的主要色包装、商标、广告
19、的主要色 彩特征？彩特征？色彩的魔力就在于色彩的魔力就在于 它可以影响人的情绪！它可以影响人的情绪！1.1.如何设计网站如何设计网站知识准备知识准备随着人的经验、记忆、知识、修养、性格、生活环境、随着人的经验、记忆、知识、修养、性格、生活环境、 职业、时代、民族、年龄、性别等的不同，人对于色职业、时代、民族、年龄、性别等的不同，人对于色彩的联想也不同。我们设计搭配颜色，一定要符合对彩的联想也不同。我们设计搭配颜色，一定要符合对象的联想习惯，否则就会产生不良的联想。象的联想习惯，否则就会产生不良的联想。 1.1.如何设计网站如何设计网站知识准备知识准备1.1.如何设计网站如何设计网站知识准备知识
20、准备1.1.如何设计网站如何设计网站知识准备知识准备 光源色和物体色的三原色及其混合光源色和物体色的三原色及其混合对比比图网站色彩知识网站色彩知识色彩色彩1.1.如何设计网站如何设计网站知识准备知识准备色调(色相)、饱和度、色相分别等分为240来表示不同的颜色。色调在一个色调环上度量，从0到240分别表示从红、橙、黄、绿、青、蓝、紫再到红等色调，0和240都是红色调。饱和度最高为240表示最纯最艳丽，饱和度最低为0表示最暗。亮度最高为240得到纯白，亮度最低为0得到纯黑。 1.1.如何设计网站如何设计网站知识准备知识准备网站色彩知识网站色彩知识色彩色彩高纯度、中明度、只有高纯度、中明度、只有色
21、调变化的方案色调变化的方案 色调不变、纯度不变、只有色调不变、纯度不变、只有亮度变化的方案亮度变化的方案 色调和亮度不变、只有色调和亮度不变、只有饱和度变化的方案饱和度变化的方案 网站色彩知识网站色彩知识色彩色彩色彩调制练习色彩调制练习1.1.如何设计网站如何设计网站知识准备知识准备1.如何设计网站知识准备网站色彩网站色彩知识知识色彩色彩色彩调制色彩调制练习练习1.如何设计网站学习成果uXXXXXX公司网站设计商谈会议纪要公司网站设计商谈会议纪要 uXXXXXX公司网站构图设计公司网站构图设计uXXXXXX公司网站设计说明书公司网站设计说明书 说明书的规范化说明书的规范化 说明书的清晰性说明书
22、的清晰性 说明书的要素说明书的要素2.网站制作准备网站公司作为网站建设公司，考虑：作为网站建设公司，考虑：u让网站制作人员开始进行准备网站制作的工作让网站制作人员开始进行准备网站制作的工作u如何建立网站文件的目录结构？如何建立网站文件的目录结构？u如何将素材、源文件、网站正确区分？如何将素材、源文件、网站正确区分？u如何收集整理资料？如何收集整理资料？u前面已收集与整理过两次了，为什么还需收集整理？前面已收集与整理过两次了，为什么还需收集整理？u收集整理的方法在什么地方不同？收集整理的方法在什么地方不同？目标目标目标目标：作为网站设计师和网站的制作人员，与业务顾问和企业：作为网站设计师和网站的
23、制作人员，与业务顾问和企业方在考虑网站制作问题时是不同的，需对素材和资料进行加工，方在考虑网站制作问题时是不同的，需对素材和资料进行加工，对素材资料的要求也不同，为网站制作作为准备。对素材资料的要求也不同，为网站制作作为准备。2.网站制作准备企业方作为需要建设网站的企业方，关注：u网站制作的进展情况u在资料素材不满足制作时，给予协助目标目标：为网站制作作为准备。2.网站制作准备设置工作环境u作为网站建设公司，网站设计师及网站制作人员作为网站建设公司，网站设计师及网站制作人员作好环境等准备，为网站制作作为准备作好环境等准备，为网站制作作为准备u按实践操作步骤开始工作按实践操作步骤开始工作目标目标
24、目标目标：作好充分的网站制作准备：作好充分的网站制作准备2.网站制作准备学习成果 3.制作网站图像设置工作情境u网站建设公司的工作人员开始网站制作工作网站建设公司的工作人员开始网站制作工作u制作网页图像的软件对比，使用什么软件更合适制作网页图像的软件对比，使用什么软件更合适？u网页图像的设计和制作方法网页图像的设计和制作方法u网页图像的设计和制作技巧网页图像的设计和制作技巧u按实践操作步骤开始工作按实践操作步骤开始工作目标目标目标目标：网站设计师设计制作完成网站所需的图像，：网站设计师设计制作完成网站所需的图像，能达到要求能达到要求3.制作网站图像知识准备网页中图像设计技巧网页中图像设计技巧网
25、页中图像设计技巧网页中图像设计技巧（1 1）图文相辅相承，网站整体设计简洁、美观。）图文相辅相承，网站整体设计简洁、美观。（2 2）选择制作精致的图像，能够增强网页的美观程度。）选择制作精致的图像，能够增强网页的美观程度。（3 3）必须控制好文件尺寸与大小，减小网络流量，保证下载）必须控制好文件尺寸与大小，减小网络流量，保证下载速度，增强用户良好的浏览体验。速度，增强用户良好的浏览体验。（4 4）在网页中使用同一图像，一旦含有这一图像的网页被用）在网页中使用同一图像，一旦含有这一图像的网页被用户访问后，其他页面被访问时，这个图像就不会再次下载，户访问后，其他页面被访问时，这个图像就不会再次下载
26、，从而提高网站的访问速度。网站的页面背景尽可能采用相从而提高网站的访问速度。网站的页面背景尽可能采用相同的背景图，这不但可增加网页的一致性，树立统一风格，同的背景图，这不但可增加网页的一致性，树立统一风格，而且可以避免页面跳转时延长等待时间。而且可以避免页面跳转时延长等待时间。（5 5）必须为图像加文字注解，在图像没有下载完之前，用户）必须为图像加文字注解，在图像没有下载完之前，用户能够了解图像上的内容，避免长时间不明等待。能够了解图像上的内容，避免长时间不明等待。（6 6）可以将大的图像制作成尺寸、存储容量小的缩略图，链）可以将大的图像制作成尺寸、存储容量小的缩略图，链接到大的图像上。缩略图
27、的下载速度快，用户有兴趣再打接到大的图像上。缩略图的下载速度快，用户有兴趣再打开大的图像查看。开大的图像查看。网页中多媒体设计的技巧网页中多媒体设计的技巧网页中多媒体设计的技巧网页中多媒体设计的技巧（1 1）动态效果要为页面的整体布局服务，不能脱离整体风格而成为独立）动态效果要为页面的整体布局服务，不能脱离整体风格而成为独立的个体，在网页的设计中以静为主，辅以动态效果调剂。网页上的动态的个体，在网页的设计中以静为主，辅以动态效果调剂。网页上的动态效果应该少而精，一个页面中一般以效果应该少而精，一个页面中一般以1 12 2幅动画为宜，动画太多会使人幅动画为宜，动画太多会使人眼花缭乱，影响文字内容
28、的阅读，并难以形成和谐搭配。眼花缭乱，影响文字内容的阅读，并难以形成和谐搭配。（2 2）动画的位置一般在页面的页眉或广告位处。）动画的位置一般在页面的页眉或广告位处。（3 3）网页中动态效果用于传播特定信息的，动态效果与网页内容有机结）网页中动态效果用于传播特定信息的，动态效果与网页内容有机结合，不能滥用。对于内容严肃的页面更要慎用动态效果。合，不能滥用。对于内容严肃的页面更要慎用动态效果。（4 4）声音与视频（流媒体）的文件较大，会影响下载速度，根据内容需）声音与视频（流媒体）的文件较大，会影响下载速度，根据内容需要选择是否在网页中加入视频和声音。此外，元素尽量不用非通用的多要选择是否在网页
29、中加入视频和声音。此外，元素尽量不用非通用的多媒体。媒体。3.3.制作网站图像制作网站图像知识准备知识准备3.制作网站图像知识准备矢量图与位图矢量图与位图矢量图与位图矢量图与位图矢量图又叫向量图，是由点、线、面等来描述和记录的图，矢量图又叫向量图，是由点、线、面等来描述和记录的图，记录的是对象的几何形状、线条粗细、角度、圆弧、面积、填记录的是对象的几何形状、线条粗细、角度、圆弧、面积、填充、色彩等。生成的矢量图的文件存储量小，任意放大或缩小充、色彩等。生成的矢量图的文件存储量小，任意放大或缩小而不会出现图像失真现象，特别适用于文字设计、图案设计、而不会出现图像失真现象，特别适用于文字设计、图案
30、设计、版式设计、计算机辅助设计（版式设计、计算机辅助设计（CADCAD）等。但矢量图不易制作色）等。但矢量图不易制作色彩丰富的图像，并且在不同的软件之间交换数据也不太方便。彩丰富的图像，并且在不同的软件之间交换数据也不太方便。位图又叫点阵图或像素图，由多个像素的色彩组合就形成位图又叫点阵图或像素图，由多个像素的色彩组合就形成了图像，打印的图片或照片由墨点构成，计算机屏幕上的图是了图像，打印的图片或照片由墨点构成，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的。在处理位图图像时，编由屏幕上的发光点（即像素）构成的。在处理位图图像时，编辑的是像素，它的存储容量和质量取决于图像中的像素点的多辑的
31、是像素，它的存储容量和质量取决于图像中的像素点的多少，每单位尺寸中所含像素越多，图像越清晰，颜色之间的过少，每单位尺寸中所含像素越多，图像越清晰，颜色之间的过渡也越平滑。位图图像的主要优点在于表现力强、真实感强、渡也越平滑。位图图像的主要优点在于表现力强、真实感强、细腻、层次多。但在对图像进行拉伸、放大等处理时，其清晰细腻、层次多。但在对图像进行拉伸、放大等处理时，其清晰度和光滑度会因单位尺寸像素点的变化而受到影响。度和光滑度会因单位尺寸像素点的变化而受到影响。3.制作网站图像知识准备常用的位图图像格式常用的位图图像格式常用的位图图像格式常用的位图图像格式（1 1）GIFGIF：图像交换格式，
32、该格式能够支持少于或等于：图像交换格式，该格式能够支持少于或等于256256色的图像压缩格色的图像压缩格式，一般用于主要包含纯色的图像，支持透明和动画。式，一般用于主要包含纯色的图像，支持透明和动画。 （2 2）JPGJPG：又名：又名JPEGJPEG，支持，支持3232位颜色的图像，能以很高压缩比来保存图像而位颜色的图像，能以很高压缩比来保存图像而图像质量损失并不多，这在网页中的意义是显著的，既保留了漂亮的图像，图像质量损失并不多，这在网页中的意义是显著的，既保留了漂亮的图像，又不太影响访问者浏览网页。又不太影响访问者浏览网页。（3 3）PNGPNG：具备：具备GIFGIF和和JPEGJPE
33、G的优点，在压缩时不会影响图像品质，且在显示的优点，在压缩时不会影响图像品质，且在显示全彩图时可支持全彩图时可支持4848位色彩，在位色彩，在IE4.0IE4.0版后才支持此图像格式。版后才支持此图像格式。（4 4）BMPBMP：是：是WindowsWindows操作系统中的标准图像文件格式，这种格式的特点是操作系统中的标准图像文件格式，这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但缺点是占用磁盘空间过大。包含的图像信息较丰富，几乎不进行压缩，但缺点是占用磁盘空间过大。（5 5）TIF:TIFFTIF:TIFF是一种比较灵活的图像格式，支持是一种比较灵活的图像格式，支持256256色
34、、色、2424位真彩色、位真彩色、3232位位色、色、4848位色等，同时支持位色等，同时支持GRBGRB、CMYKCMYK等多种色彩模式，支持多平台等，文件等多种色彩模式，支持多平台等，文件体积较大，适用于印刷。体积较大，适用于印刷。（6 6）WBMPWBMP：是移动计算机设备使用的标准图像格式，这种格式特定使用于：是移动计算机设备使用的标准图像格式，这种格式特定使用于WAPWAP网页中，支持网页中，支持1 1位颜色，只包含黑色和白色像素，但版幅较小，多用于位颜色，只包含黑色和白色像素，但版幅较小，多用于WAPWAP网站中的网页。网站中的网页。通过软件操作进行对比通过软件操作进行对比通过软件
35、操作进行对比通过软件操作进行对比3.制作网站图像知识准备网页图像格式的选择网页图像格式的选择网页图像格式的选择网页图像格式的选择当需要透明图像、动画图像、颜色数少、空间很低的时候选择当需要透明图像、动画图像、颜色数少、空间很低的时候选择GIFGIF格式；当需要简单的动画时使用格式；当需要简单的动画时使用GIFGIF动画格式。当需要相片、有渐变色的动画格式。当需要相片、有渐变色的图像、颜色丰富的图像、需要大量压缩图像存储容量时选择图像、颜色丰富的图像、需要大量压缩图像存储容量时选择JPGJPG格式。压格式。压缩时在图像处理软件中可以设置压缩品质的值。在网页中较少使用缩时在图像处理软件中可以设置压
36、缩品质的值。在网页中较少使用BMPBMP和和TIFFTIFF格式。格式。PNGPNG是是FireworksFireworks可编辑的源文件，也可以导出可编辑的源文件，也可以导出PNGPNG格式的文件，格式的文件，PNG8PNG8、PNG24PNG24、PNG32PNG32表示图像颜色数多少表示图像颜色数多少, ,导出后的导出后的PNGPNG不是不是FireworksFireworks的源文件。不要在网页中直接使用的源文件。不要在网页中直接使用FireworksFireworks的源文件，因其不的源文件，因其不具有隐私性。但如果是其他软件（如具有隐私性。但如果是其他软件（如PhotoShopPh
37、otoShop）处理）处理PNGPNG格式是被当作格式是被当作与与GIFGIF和和JPGJPG类似的文件。另外，类似的文件。另外，PNGPNG源文件和导出文件都不具备源文件和导出文件都不具备GIFGIF的动的动画功能。画功能。3.制作网站图像知识准备常用多媒体格式有常用多媒体格式有常用多媒体格式有常用多媒体格式有3 3种。种。种。种。（1 1）声音格式：有）声音格式：有WAVWAV、MP3MP3、MIDIMIDI、WMAWMA、RARA、AUAU等格等格式，它们是以不同的方式模拟声音，经抽样、量化和编码后式，它们是以不同的方式模拟声音，经抽样、量化和编码后得到不同的格式，都由表示声音强弱的数据
38、序列组成。得到不同的格式，都由表示声音强弱的数据序列组成。（2 2）视频格式：可分为适合本地播放的本地影像视频（如）视频格式：可分为适合本地播放的本地影像视频（如AVIAVI、MOVMOV、MPEGMPEG等）和适合在网络中播放的网络流媒体影等）和适合在网络中播放的网络流媒体影像视频（像视频（RMRM、MOVMOV、ASFASF、FLVFLV等）两大类。后者在播放的等）两大类。后者在播放的稳定性和播放画面质量上可能没有前者优秀，但网络流媒体稳定性和播放画面质量上可能没有前者优秀，但网络流媒体（声音、动画、视频等）的高速传播使之被广泛应用于视频（声音、动画、视频等）的高速传播使之被广泛应用于视频
39、点播、网络演示、远程教育、网络视频广告等互联网信息服点播、网络演示、远程教育、网络视频广告等互联网信息服务领域。务领域。（3 3）动画格式：制作动画的软件有很多，在网站中最常用）动画格式：制作动画的软件有很多，在网站中最常用的动画是的动画是GIFGIF动画和动画和FlashFlash动画，动画格式和视频格式之间可动画，动画格式和视频格式之间可以进行转换和压缩。以进行转换和压缩。 3.制作网站图像知识准备FireworksFireworks简介简介简介简介FireworksFireworks是用来设计制作专业化网页图像的应用软件，可是用来设计制作专业化网页图像的应用软件，可以有效地帮助网页设计和
40、开发人员解决一些的特殊问题。以有效地帮助网页设计和开发人员解决一些的特殊问题。 FireworksFireworks与与AdobeAdobe公司的其他产品（如公司的其他产品（如DreamweaverDreamweaver、FlashFlash、PhotoshopPhotoshop、IllustatorIllustator）一起提供了一个完备的）一起提供了一个完备的WebWeb集成解决方案。本教材主要以集成解决方案。本教材主要以AdobeFireworksCS3AdobeFireworksCS3版版本为参照进行讲解。本为参照进行讲解。 FireworksFireworks的工作界面由四部分组成：
41、视图面板、功能面板、的工作界面由四部分组成：视图面板、功能面板、工具箱面板、属性面板。工具箱面板、属性面板。首首页页图图像像分分解解图图3.3.制作网站图像制作网站图像实践指导实践指导次次级级页页面面图图像像分分解解图图3.3.制作网站图像制作网站图像实践指导实践指导3.制作网站图像实践指导详细操作见详细操作见详细操作见详细操作见“ “操作演示视频操作演示视频操作演示视频操作演示视频” ”。重点提示：重点提示：图像上的特殊字体，需要在到网上下载字体（如：大宝库图像上的特殊字体，需要在到网上下载字体（如：大宝库http:/http:/ “控制面板控制面板” ”的的“ “字体字体” ”窗口中，就能
42、在各软件中使用。对于不常用的字体，要窗口中，就能在各软件中使用。对于不常用的字体，要能正常显示只能用图像的形式。能正常显示只能用图像的形式。显示器分辩率的默认值为显示器分辩率的默认值为7272像素像素/ /英寸，不用更改，表示显示器每英寸英寸，不用更改，表示显示器每英寸为为7272个像素点（个像素点（pxpx），而网页的图像是相对于显示器屏幕进行显示的，），而网页的图像是相对于显示器屏幕进行显示的，教程中所有图像都是为网页设计制作的，后续所有的分辨率都不进行教程中所有图像都是为网页设计制作的，后续所有的分辨率都不进行修改，后续图像制作过程不再详述此步骤。而图像打印机打印图像时修改，后续图像制作
43、过程不再详述此步骤。而图像打印机打印图像时分辨率是不同的，打印尺寸固定，分辨率越高，打印的图像清晰度越分辨率是不同的，打印尺寸固定，分辨率越高，打印的图像清晰度越高，但在显示器上看图像，分辨率越高图像就越大，但这并不表示打高，但在显示器上看图像，分辨率越高图像就越大，但这并不表示打印尺寸会变大。印尺寸会变大。 切片是将图像分割成多个小区域，从而实现对大图像的无损分割。当切片是将图像分割成多个小区域，从而实现对大图像的无损分割。当包含此图像的网页被访问时，能实现边下载边呈现的显示效果，而不包含此图像的网页被访问时，能实现边下载边呈现的显示效果，而不会出现页面长时间没有变化的情形。会出现页面长时间
44、没有变化的情形。GIFGIF动画是一种图像格式，原理很简单：把几幅图像不停地轮流播放。动画是一种图像格式，原理很简单：把几幅图像不停地轮流播放。它的优点是体积小，利于网络快速传输。它的优点是体积小，利于网络快速传输。 3.制作网站图像学习成果完成网站所需的所有图像4、用HTML制作网页设置工作情境u网站建设公司的工作人员进行网页制作工作uHTML标记和语法是否熟记、清晰u使用HTML制作网页的方法u使用HTML制作网页技巧u按实践操作步骤开始工作目标目标：网站设计师（网页制作人员）设计制作完成网站所需的网页，能达到要求4、用HTML制作网页知识准备认识认识认识认识HTMLHTML访问访问访问访
45、问WWWWWW打开打开IEIE浏览器，在地址栏输入：浏览器，在地址栏输入：http:/http:/访问访问WWWWWW的过程：用户通过浏的过程：用户通过浏览器将期望访问的览器将期望访问的URLURL发向互发向互联网，由互联网确定相应的服联网，由互联网确定相应的服务器，并将访问请求传送到这务器，并将访问请求传送到这一服务器，服务器找到到信息一服务器，服务器找到到信息后以文件的形式通过互联网传后以文件的形式通过互联网传回用户的计算机，最后由浏览回用户的计算机，最后由浏览器将信息呈现出来。器将信息呈现出来。认识认识认识认识HTMLHTML查看查看查看查看HTMLHTML文档文档文档文档打开打开IEI
46、E浏览器，打开百度网站的主页后，点选浏览器，打开百度网站的主页后，点选IEIE浏览器的菜浏览器的菜单命令单命令“ “查看查看”/“”/“源文件源文件” ”，会弹出如下图所示的窗口：，会弹出如下图所示的窗口：4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备认识认识认识认识HTMLHTML什么是什么是什么是什么是HTMLHTMLhtmlhtml文件的结构：文件的结构：文件的结构：文件的结构：HTMLHTML文件文件开始开始文件头开文件头开始始网页的标题网页的标题网页的标题网页的标题文件头结文件头结束束 文件体开文件体开始始网页的内容网页的内容网页的内容网页的内容区区文件体结文件体结束
47、束HTMLHTML文文件结束件结束注意：网页文件的扩展名为：*.HTML或*.HTM4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备操作演示简单网页的制作过程操作演示简单网页的制作过程认识认识HTML什么是什么是HTMLHTMLHTML（Hyper Text Markup LanguageHyper Text Markup Language，超文本标记语言），超文本标记语言）是一种用来制作超文本文档的简单标记语言，它通过标记是一种用来制作超文本文档的简单标记语言，它通过标记式指令将影像、声音、图片和文字等边接起来。几乎所有式指令将影像、声音、图片和文字等边接起来。几乎所有的网页都
48、是由的网页都是由HTMLHTML或以其他程序语言嵌套在或以其他程序语言嵌套在HTMLHTML中编写的。中编写的。HTMLHTML不是程序语言，而是一种结构语言，它具有平台无关不是程序语言，而是一种结构语言，它具有平台无关性的特点。无论用户使用何种操作系统，只要有浏览器，性的特点。无论用户使用何种操作系统，只要有浏览器，就可以运行就可以运行HTMLHTML文档。文档。浏览器是一种应用软件，用于与浏览器是一种应用软件，用于与WWWWWW建立连接，并与之进建立连接，并与之进行通信，在行通信，在WWWWWW中根据链接确定信息资源的位置，并把信中根据链接确定信息资源的位置，并把信息资源取回来，对网页文件
49、进行解释，然后将文字、图像、息资源取回来，对网页文件进行解释，然后将文字、图像、多媒体等信息还原出来。多媒体等信息还原出来。屏幕上看到的网页是浏览器对网页文件的翻译。屏幕上看到的网页是浏览器对网页文件的翻译。4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备URLURLURLURL如何表示如何表示如何表示如何表示什么是什么是什么是什么是URLURLURLURLURLURL：即统一资源定位符：即统一资源定位符(Uniform/Universal (Uniform/Universal Resource Locator)Resource Locator)，也被称为网页地址，用来作为，也被
50、称为网页地址，用来作为万维网的地址。万维网的地址。网页文件的链接和图像、动画、视频等的调用都使网页文件的链接和图像、动画、视频等的调用都使用用URLURL表示，表示，URLURL分为绝对地址和相对地址。分为绝对地址和相对地址。网页文件中的图像不是网页的一部分（图像是独立网页文件中的图像不是网页的一部分（图像是独立的），而是被网页文件调用。浏览器从的），而是被网页文件调用。浏览器从HTMLHTML代码中代码中读取图像的位置，然后把图像放在网页上。读取图像的位置，然后把图像放在网页上。与此相似，音频或视频文件也被与此相似，音频或视频文件也被HTMLHTML文件调用，然文件调用，然后被浏览器组装。后
51、被浏览器组装。访问过程演示4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备URLURLURLURL如何表示如何表示如何表示如何表示绝对地址绝对地址绝对地址绝对地址1 1）绝对地址）绝对地址（1 1） 外部站点：外部站点：http:/http:/主机名或主机名或IPIP地址地址: :端口号端口号/ /路径名路径名/ /文件名文件名 如：如：http:/ /文件名是信息资源在服务器上存放的路径和文件名。文件名是信息资源在服务器上存放的路径和文件名。在使用默认路径和默认文档时可省略。在使用默认路径和默认文档时可省略。（2 2） 局域网内计算机：局域网内计算机：/计算机名计算机名/ /盘
52、符盘符/ /路径名路径名/ /文件名文件名（3 3） 本地文件：盘符本地文件：盘符/ /路径名路径名/ /文件名文件名4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备URLURL如何表示如何表示相对地址相对地址2 2）相对路径，所要链接或嵌入到当前网页文档的文）相对路径，所要链接或嵌入到当前网页文档的文件与当前文件的相对位置所形成的路径。件与当前文件的相对位置所形成的路径。（1 1）链接到同一目录内的文件：文件名）链接到同一目录内的文件：文件名（2 2）链接到下一级目录内的文件：下一级目录名）链接到下一级目录内的文件：下一级目录名/ /文件名文件名（3 3）链接到上一级目录内的文
53、件：）链接到上一级目录内的文件：././文件名文件名操作演示举例说明绝对址与相对地址的区别操作演示举例说明绝对址与相对地址的区别4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备用记事本程序编写、保存、修改网页文档用记事本程序编写、保存、修改网页文档用记事本程序编写、保存、修改网页文档用记事本程序编写、保存、修改网页文档1 1）编写网页）编写网页点选点选“ “开始开始”/“”/“程序程序”/“”/“附件附件”/“”/“记事本记事本” ”，输入，输入HTMLHTML语句，点选语句，点选“ “文文件件”/“”/“保存保存” ”或或“ “另存为另存为” ”，“ “文件名文件名” ”中输入
54、文件名，扩展名一定要是中输入文件名，扩展名一定要是“HTML”“HTML”或或“HTM”“HTM”，点，点“ “保存保存” ”按钮。按钮。2 2）浏览网页（浏览本地文档，非域名访问方式）浏览网页（浏览本地文档，非域名访问方式）方法一：通过方法一：通过“ “我的电脑我的电脑” ”或或“ “资源管理器资源管理器” ”找到要浏览的网页文件，双击找到要浏览的网页文件，双击打开它即浏览网页；打开它即浏览网页；方法二：打开方法二：打开IEIE浏览器，点选浏览器，点选“ “文件文件”/“”/“打开打开” ”，找到文件打开，即浏览，找到文件打开，即浏览网页；网页；方法三：打开方法三：打开IEIE浏览器，在浏览
55、器，在“ “地址地址” ”栏上输入文件的路径及文件的名称，回栏上输入文件的路径及文件的名称，回车确定。车确定。3 3）修改网页）修改网页方法一：打开记事本，点选方法一：打开记事本，点选“ “文件文件”/“”/“打开打开” ”，找到文件打开，即能修改，找到文件打开，即能修改，修改后必须重新保存（仍要注意保存文件的扩展名），回到浏览器窗口点选刷新修改后必须重新保存（仍要注意保存文件的扩展名），回到浏览器窗口点选刷新按钮（按钮（F5F5）。）。方法二：浏览要修改的网页时，点选方法二：浏览要修改的网页时，点选“IE“IE浏览器浏览器”/“”/“查看查看”/“”/“源文件源文件” ”，自动调出记事本及网
56、页文件，即能修改，修改后必须重新保存（仍要注意保存文自动调出记事本及网页文件，即能修改，修改后必须重新保存（仍要注意保存文件的扩展名），回到浏览器窗口点选刷新按钮（件的扩展名），回到浏览器窗口点选刷新按钮（F5F5），或再按上面（），或再按上面（2 2）方法浏）方法浏览。览。4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备操作演示举例说明操作演示举例说明html的语法规则的语法规则htmlhtml的标记有下列四种表示方法：的标记有下列四种表示方法： 文字或其它内容文字或其它内容 文字或其它内容文字或其它内容 4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备HTMLH
57、TML语法规则语法规则语法规则语法规则 正常情况下，正常情况下，HTMLHTML文件以纯文本形式存放，扩展名为文件以纯文本形式存放，扩展名为“.HTM”“.HTM”或或“.HTML”“.HTML”。若系统为。若系统为UNIXUNIX，扩展名必须为扩展名必须为“.HTML”“.HTML”。在。在WindowsWindows系统中使用时请保持只使用其中一种，避免混淆。系统中使用时请保持只使用其中一种，避免混淆。 htmlhtml文件由标记或被标记的内容组成；网页中所有的显示内容都应该受限于一个或多个标记，文件由标记或被标记的内容组成；网页中所有的显示内容都应该受限于一个或多个标记，尽量避免有游离于
58、标记之外的文字或图像等以免产生错误。尽量避免有游离于标记之外的文字或图像等以免产生错误。 每个标记都用每个标记都用标识，以表示这是标识，以表示这是HTMLHTML代码而非普通文本，需要注意的是代码而非普通文本，需要注意的是和标记之和标记之间不能有空格或其它字符；标记分为单标记和双标记，双标记必须有结束标记间不能有空格或其它字符；标记分为单标记和双标记，双标记必须有结束标记 ，双标识，双标识占大多数，单标记只有几个；标记不分大小写，但要区分全半角。占大多数，单标记只有几个；标记不分大小写，但要区分全半角。 一个标记可以有多个属性，一个标记可以有多个属性， 属性属性值属性属性值 合起来构成一个完整
59、的属性，各个属性用空格分开，合起来构成一个完整的属性，各个属性用空格分开，属性及其属性值不分大小写，但也要区分全半角，根据需要可以用该标记的所有属性，也可只用属性及其属性值不分大小写，但也要区分全半角，根据需要可以用该标记的所有属性，也可只用需要的几个或一个或不用属性，在使用时属性之间没有顺序。需要的几个或一个或不用属性，在使用时属性之间没有顺序。 对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果，多数对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果，多数HTMLHTML标记可以嵌标记可以嵌套，但不可以交叉。套，但不可以交叉。 HTMLHTML文件一行可以写多个标记
60、，一个标记可以分多行书写，不用任何续行符号。文件一行可以写多个标记，一个标记可以分多行书写，不用任何续行符号。HTMLHTML源文件源文件中的换行、回车符和多个连续空格中的换行、回车符和多个连续空格( (半角空格半角空格) )在显示中是无效的，多个连续空格只显示一个。换在显示中是无效的，多个连续空格只显示一个。换行、分段都有专有标记，空格有转义符。行、分段都有专有标记，空格有转义符。 提供注释语句，格式：提供注释语句，格式：!-。注释语句可放在任何地方，注释内容不在浏览器中显。注释语句可放在任何地方，注释内容不在浏览器中显示。（有时客户端脚本和示。（有时客户端脚本和CSSCSS样式等也加上样式
61、等也加上“”“”，是为了避免浏览器不支持这些代码时而，是为了避免浏览器不支持这些代码时而在浏览器中把这些代码显示出来）在浏览器中把这些代码显示出来）HTMLHTML语言并不要求在书写时缩进。若为了程序的易读性，可使标记的首尾对齐，内部的内容向语言并不要求在书写时缩进。若为了程序的易读性，可使标记的首尾对齐，内部的内容向右缩进几格。右缩进几格。HTMLHTML的语法并不像其它语言要求严格，语法或语句不正确一般只影响显示效果。还的语法并不像其它语言要求严格，语法或语句不正确一般只影响显示效果。还要注意少量标记和属性对不同的浏览器的支持能力是不同的，后面章节主要讲述要注意少量标记和属性对不同的浏览器
62、的支持能力是不同的，后面章节主要讲述IEIE能支持的标记能支持的标记和属性。和属性。4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备HTMLHTML规范与版本规范与版本规范与版本规范与版本不同公司的浏览器或者同一浏览器的不同版本都存在着不兼容问题。不同公司的浏览器或者同一浏览器的不同版本都存在着不兼容问题。因为不同公司的浏览器软件开发人员为了实现一些特殊效果，浏览因为不同公司的浏览器软件开发人员为了实现一些特殊效果，浏览器可接受的网页中引入一些特殊标签和属性，而另外版本及另外公器可接受的网页中引入一些特殊标签和属性，而另外版本及另外公司的浏览器并不知道特殊标签和属性的含义，因此就
63、出现了不兼容司的浏览器并不知道特殊标签和属性的含义，因此就出现了不兼容问题。为了解决兼容性和互用性问题，需要一些组织和机构来制定问题。为了解决兼容性和互用性问题，需要一些组织和机构来制定HTMLHTML规范和标准。规范和标准。早期的早期的HTMLHTML是非常简单的，被称为是非常简单的，被称为HTML1.0HTML1.0，由，由IEFTIEFT（负责有关（负责有关InternetInternet的各种技术标准及接口规范的制定的国际民间组织）修改为的各种技术标准及接口规范的制定的国际民间组织）修改为HTML2.0HTML2.0，再由，再由W3CW3C（WWWWWW联盟）发展为现在的联盟）发展为现
64、在的HTML4.01HTML4.01，这，这也是也是HTMLHTML规范的最终版本，规范的最终版本，HTMLHTML将被将被XHTMLXHTML（可扩展超文本标识（可扩展超文本标识语言）取代。但这个取代还需要很长一段时间，语言）取代。但这个取代还需要很长一段时间，HTMLHTML仍然要继续使仍然要继续使用，并且用，并且HTMLHTML是是XHTMLXHTML的基础，学习的基础，学习HTMLHTML仍非常必要。仍非常必要。在网页文档的开头可添加一个文档类型定义标签，用于说明在网页文档的开头可添加一个文档类型定义标签，用于说明HTMLHTML的的规范，即指定当前网页文件所使用的规范，即指定当前网页
65、文件所使用的HTMLHTML语言版本及定义该语言版语言版本及定义该语言版本的规范文件的位置。例如使用本的规范文件的位置。例如使用HTML4.01HTML4.01的规范，代码如下：的规范，代码如下：!DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01 http:/www.w3.org/TR/html4/loose.dtd4 4、用、用HTMLHTML制作网页制作网页知识准备知识准备4、用HTML制作网页实践指导首首页页的的表表格格排排版版次次级级页页面面的的表表格格排排版版4 4、用、用HTMLHTML制作网页制作网页实践指导实践指导4、用HTML制作网页实践指导详细
66、操作见详细操作见“ “操作演示视频操作演示视频” ”。重点提示：重点提示：使用浮动框架与不使用浮动框架相比其优点在于链接的页使用浮动框架与不使用浮动框架相比其优点在于链接的页面是从浮动框架区域打开，而不是从浏览器窗口重新打开面是从浮动框架区域打开，而不是从浏览器窗口重新打开一个网页，节约编写代码的时间，运行时下载速度较快。一个网页，节约编写代码的时间，运行时下载速度较快。框架网页将浏览器拆分成若干个窗口，拆分方式由主框架框架网页将浏览器拆分成若干个窗口，拆分方式由主框架网页决写，在每一个窗口各链接一个普通网页；浮动框架网页决写，在每一个窗口各链接一个普通网页；浮动框架是在普通网页中作为一个网页
67、元素方式插入网页的某一个是在普通网页中作为一个网页元素方式插入网页的某一个区域。它们之间的共同点是大部分区域可固定，某一区域区域。它们之间的共同点是大部分区域可固定，某一区域作为链接变化的区域，节约编写代码的时间，运行时下载作为链接变化的区域，节约编写代码的时间，运行时下载速度较快。但是框架网页在排版时存在一定的缺陷和搜索速度较快。但是框架网页在排版时存在一定的缺陷和搜索引擎不识别框架的问题，现在框架网页用得越来越少了。引擎不识别框架的问题，现在框架网页用得越来越少了。4、用HTML制作网页学习成果完成网站中的所有网页的制作。5.网站测试设置工作情境u网站建设公司的相关工作人员开始网站的测试工
68、作；网站建设公司的相关工作人员开始网站的测试工作；u必须明确测试的必要性和重要性；必须明确测试的必要性和重要性；u掌握测试的方法；掌握测试的方法；u掌握测试的技巧；掌握测试的技巧；u注意很容易把测试看做一个没有技术含量的体力活，但是注意很容易把测试看做一个没有技术含量的体力活，但是很多网站在交付后仍出现各种各样的问题，这就是在网站实很多网站在交付后仍出现各种各样的问题，这就是在网站实现完成后没有进行全面的测试。现完成后没有进行全面的测试。目标目标目标目标：网站设计师（及网站测试人员）细心、耐心、专心完：网站设计师（及网站测试人员）细心、耐心、专心完成全面的测试，消除成全面的测试，消除BUGBU
69、G，提高网站的质量。，提高网站的质量。5.网站测试知识准备一旦网站出现一旦网站出现“ “访问速度太慢访问速度太慢” ”、“ “链接错误链接错误” ”、“ “查看的网页不存查看的网页不存在在” ”等问题时，浏览者就可能离开转向其他网站。因此在网页发布前后均等问题时，浏览者就可能离开转向其他网站。因此在网页发布前后均应对网站及网页进行全面的测试，尽可能多地发现问题，并及时处理，以应对网站及网页进行全面的测试，尽可能多地发现问题，并及时处理，以保证发布的网站能正常访问。保证发布的网站能正常访问。1 1链接测试链接测试检查网页中否有超链接无效的情况，包括页面、图像和多媒体文件等，检查网页中否有超链接无
70、效的情况，包括页面、图像和多媒体文件等，造成此类问题通常是文件名不正确、文件路径不正确等原因造成的。造成此类问题通常是文件名不正确、文件路径不正确等原因造成的。2 2外观测试外观测试检查网页在浏览时能否按预想的布局效果进行显示，外观测试包含整检查网页在浏览时能否按预想的布局效果进行显示，外观测试包含整体界面、导航、图像、文字、内容等。体界面、导航、图像、文字、内容等。3 3兼容性测试兼容性测试（1 1）分辨率测试：每个客户在浏览网站时，其电脑显示器会设置为不）分辨率测试：每个客户在浏览网站时，其电脑显示器会设置为不同的分辨率，不同的客户会用不同的分辨率访问网站，所以测试网站时要同的分辨率，不同
71、的客户会用不同的分辨率访问网站，所以测试网站时要检查不同分辨率下网页是否正常显示。检查不同分辨率下网页是否正常显示。（2 2）浏览器测试：虽然）浏览器测试：虽然HTMLHTML有规范和标准，但不同的浏览器间、同有规范和标准，但不同的浏览器间、同一浏览器的不同版本间存在着差异，可能部分导致兼容性问题，因此需要一浏览器的不同版本间存在着差异，可能部分导致兼容性问题，因此需要对不同的浏览器环境测试所有网页是否正常显示。对不同的浏览器环境测试所有网页是否正常显示。5.网站测试实践指导搭建测试环境搭建测试环境下载下表中列出的访问者最常用的浏览器并安装。常用浏览器及使用人数比序号序号浏览浏览器名称和版本器
72、名称和版本使用人数比（使用人数比（% %）1 1IEIE浏览浏览器器32322 2傲游傲游浏览浏览器器14143 3火狐火狐浏览浏览器器13134 4360360安全安全浏览浏览器器1616链接测试链接测试链接测试链接测试：测试所有链接是否按指示的那样确实链接测试所有链接是否按指示的那样确实链接到了该链接的页面；测试所链接的页面是否存在；保证网站到了该链接的页面；测试所链接的页面是否存在；保证网站中没有孤立页面，所谓孤立页面是指没有链接指向的页面。中没有孤立页面，所谓孤立页面是指没有链接指向的页面。第第1 1步：检查网站各栏目文件夹中的网页是否有无用的网步：检查网站各栏目文件夹中的网页是否有无
73、用的网页，如果有，则将之剪切至删除文件夹，最后统一删除，避页，如果有，则将之剪切至删除文件夹，最后统一删除，避免误删除。免误删除。第第2 2步：检查根图像文件夹、各栏目文件夹中的图像文件步：检查根图像文件夹、各栏目文件夹中的图像文件夹是否有无用的图像，如果有，则将之剪切至删除文件夹，夹是否有无用的图像，如果有，则将之剪切至删除文件夹，最后统一删除，避免误删除。最后统一删除，避免误删除。第第3 3步：分别运行每一个网页，然后单击每个网页上的每步：分别运行每一个网页，然后单击每个网页上的每一个超链接，检查是否出现无法显示网页、链接的内容不正一个超链接，检查是否出现无法显示网页、链接的内容不正确等信
74、息。检查文件路径和文件名是否正确，检查页面是否确等信息。检查文件路径和文件名是否正确，检查页面是否输入内容时错误等，对存在的问题进行修改。输入内容时错误等，对存在的问题进行修改。第第4 4步：修改后再进行链接测试确认，检查每个网页的每步：修改后再进行链接测试确认，检查每个网页的每一个超链接，直至完成。一个超链接，直至完成。5.5.网站测试网站测试实践指导实践指导5.网站测试实践指导外观测试：外观测试：外观测试：外观测试：运行网站检查每个网页的外观，检查整体界面效果、导航、图像、运行网站检查每个网页的外观，检查整体界面效果、导航、图像、表格、文字、内容等。找到原因，将外观修改正确。表格、文字、内
75、容等。找到原因，将外观修改正确。 整体界面测试：整体界面是指整个网站的风格及页面结构，应该是统一的风整体界面测试：整体界面是指整个网站的风格及页面结构，应该是统一的风格和模式。格和模式。 导航测试：导航描述了用户在一个页面内操作的方式，在不同的用户接口控导航测试：导航描述了用户在一个页面内操作的方式，在不同的用户接口控制之间，例如按钮、对话框、列表和窗口等，保证不同的连接页面之间具有正制之间，例如按钮、对话框、列表和窗口等，保证不同的连接页面之间具有正确的导航外观。确的导航外观。 图像测试：要确保图像有明确的用途，图片或动画不要胡乱地堆在一起，以图像测试：要确保图像有明确的用途，图片或动画不要
76、胡乱地堆在一起，以免浪费传输时间。图片存储容量要尽量地小，一般采用免浪费传输时间。图片存储容量要尽量地小，一般采用JPGJPG或或GIFGIF压缩，最好能压缩，最好能使图片的大小减小到使图片的大小减小到30KB30KB以下，并且要能清楚地说明某件事情，或者能起到装以下，并且要能清楚地说明某件事情，或者能起到装饰美化作用，或者能链接到某个具体的页面。检查背景图像是否显示或溢出。饰美化作用，或者能链接到某个具体的页面。检查背景图像是否显示或溢出。 表格测试：需要验证表格是否设置正确，如表格的行间距、宽、高等。表格测试：需要验证表格是否设置正确，如表格的行间距、宽、高等。 文字测试：验证所有页面字体
77、的风格是否一致。验证文字回绕是否正确，不文字测试：验证所有页面字体的风格是否一致。验证文字回绕是否正确，不要因为使用图片而使窗口和段落排列错位或者出现孤行。背景颜色应该与字体要因为使用图片而使窗口和段落排列错位或者出现孤行。背景颜色应该与字体颜色和前景颜色相搭配，相同栏目和类型的文字效果是否一致。颜色和前景颜色相搭配，相同栏目和类型的文字效果是否一致。 浏览器标题栏：是否显示正确的标题内容。浏览器标题栏：是否显示正确的标题内容。 内容测试：检验网站所提供信息的正确性、准确性和相关性。内容测试：检验网站所提供信息的正确性、准确性和相关性。5.网站测试实践指导兼容性测试兼容性测试兼容性测试兼容性测
78、试第第1 1步：分别用不同的显示器的分辨率（步：分别用不同的显示器的分辨率（14409001440900、1280102412801024、12808001280800、12807681280768、10247681024768、800600800600）运行每个网页，查看每一个页面的外观，发现外）运行每个网页，查看每一个页面的外观，发现外观异常的网页，修改正确。修改后的页面需用之前运行过的观异常的网页，修改正确。修改后的页面需用之前运行过的分辨率再检查直到都显示正确为止。分辨率再检查直到都显示正确为止。第第2 2步：分别用各种浏览器运行每个网页，查看每一个步：分别用各种浏览器运行每个网页，查
79、看每一个页面的外观，发现外观异常的网页，进行修改。修改后的页页面的外观，发现外观异常的网页，进行修改。修改后的页面需用之前运行过的浏览器重新运行查看是否出现异常，如面需用之前运行过的浏览器重新运行查看是否出现异常，如果有异常继续修改，直到以上四种浏览器都显示正常为止。果有异常继续修改，直到以上四种浏览器都显示正常为止。 用火狐浏览器测试网页时的界面会出问题，解决问题的方法是使用CSS（级联样式表）定义文字大小 5.5.网站测试网站测试实践指导实践指导5.网站测试学习成果测试并修改后无BUG的网站。技能拓展拓展拓展1 1：搜索自己喜欢的网站，查看网站的：搜索自己喜欢的网站，查看网站的LogoLo
80、go、宣传标语、布、宣传标语、布局、色彩、字体等设计，找出各网站的特点，总结网站设计方式。局、色彩、字体等设计，找出各网站的特点，总结网站设计方式。拓展拓展3 3：分别用色彩块组合表示出各种词语：春、夏、秋、冬、：分别用色彩块组合表示出各种词语：春、夏、秋、冬、酸、甜、苦、辣、欢乐酸、甜、苦、辣、欢乐+ +积极、忧伤积极、忧伤+ +消沉、拉萨、江南、重庆、夏消沉、拉萨、江南、重庆、夏威夷、幼稚、成熟、古朴、现代、阳刚、阴柔。威夷、幼稚、成熟、古朴、现代、阳刚、阴柔。拓展拓展4 4：特殊文字格式的处理，如：特殊文字格式的处理，如ax2+bx+c=0ax2+bx+c=0、abab等。等。拓展拓展5
81、 5：如何在网页加入：如何在网页加入FlashFlash动画、音乐和视频？动画、音乐和视频？拓展拓展6 6：有一个很长的网页，是屏幕高度的：有一个很长的网页，是屏幕高度的3 3倍，如何在该网页的倍，如何在该网页的底部加一个超链接能返回顶部？底部加一个超链接能返回顶部？拓展拓展7 7：地图热点如何使用？给欢迎页面：地图热点如何使用？给欢迎页面“ “进入首页进入首页” ”处和首页处和首页的的“ “产品链接产品链接” ”处设置地图热点。处设置地图热点。拓展拓展8 8：如何给网站制作其他更美观的：如何给网站制作其他更美观的GIFGIF动画？动画？拓展拓展9 9：如何使用：如何使用FireworksFireworks批量处理照片（例如批量缩小照片，批量处理照片（例如批量缩小照片，批量压缩照片存储容量）？批量压缩照片存储容量）？拓展拓展1010：如何将数码相机照得比较暗的图像调得亮一些？：如何将数码相机照得比较暗的图像调得亮一些？
