工作任务2 分析需求，设计与制作网站
2.1 任务分析
1.任务描述
（1）阅读网站需求分析说明书，进行网站的总体设计，确定网站的主题、风格、栏目、结构等，完成网站设计说明书。
（2）按网站设计说明书和需求分析说明书中的网站解决方案、需求规定、网站建设规划、网站设计策略，收集整理相关资料，完成图像和网页的设计及制作。
（3）完成网站发布前的测试，确保网站发布后正常运行。
2.任务实施流程
任务实施流程如图2-1所示。
图2-1 任务流程图
2.2 业务咨询
该部分介绍网站设计步骤及原则、网站结构、网站CIS、布局、色彩、图像、多媒体等知识，到HTML技术、Fireworks技术、网页测试技术的综合应用方法，为学习者完成工作任务2做准备。
2.2.1 网站设计步骤及原则
电子商务网站不仅是企业的网络门户，也是企业永不停息的营销人员。公司网页不仅要以优美的设计吸引顾客的眼球，更需要以超值的服务回报顾客的到访。在设计网页时，应当统筹规划，增强网站的价值。
第1步：精心规划网站框架
网站结构是指以企业营销为核心的主题层次划分、栏目设置、链接顺序等。
（1）网站主题应突出企业的经营理念、规模实力、行业特点和产品（服务）特色等。
（2）网站框架包括主页、企业介绍、产品和服务、信息反馈、信息发布、营销活动等。
（3）在内容分类上加大主题的渲染，在页面顺序上考虑主题优先。
（4）合理组织要发布信息，以便浏览者能快速、准确地检索到所需的信息。
第2步：网站内容设计
网站内容是网站框架的具体表现，是访问者的目标所在，网站应易于漫游，确保浏览者在失去耐心前找到关注的内容。内容还应易于更新和扩展，文字务求准确、精练。
第3步：网站CIS设计
CIS（Corporate Identity System，企业形象识别系统）是企业形象的视觉标识，应体现企业的文化内涵和经营理念。具有创意的CIS能对网站的宣传和推广起着重要的作用，可以使用企业原有CIS，也可根据企业特点及网站定位进行重新设计。
第4步：网站版面设计
网站版面能给访问者带来最直接的视觉感受，是吸引访问者的关键。应当将文字与图形、文学与美术、信息技术与营销策略进行巧妙结合。
重点提示：
蚂蚁集团和蚂蚁搬家网站案例分析
蚂蚁集团是一家与国际接轨的专业物流供应链服务商，从1996年仅拥有一台车、六名员工的单一的搬家业务，现已迅速发展成拥有近千辆车、近3088名员工，先后在全国各地开设多家子公司，物流综合年产值突破2个亿。
蚂蚁集团网站：www.chinaant.com。该网站突出集团公司的经营领域和发展计划主题，内容上体现物流、搬家搬运、快递、城市配送、仓储货运、多式联运、包装、流通加工、展览展示为一体的大型、专业、综合型物流服务，未来计划建立300亩现代化的西部物流基地，已与淘宝网和百度进行了深度合作，展示了集团的规模和实力以及企业未来的发展方向，从而反映其在行业中的优势，吸引更多合作商。
蚂蚁搬家网站：www.chinaant.net。该网站是集团的搬家搬运业务的分公司，以服务客户为主题，内容上从服务项目、搬家常识、起重安装、车辆展示、业务流程、服务质量、在线客户咨询与意见等方面全方位地展示企业的服务内容和服务品质，吸引更多顾客选择该公司的服务。
企业形象识别系统用于企业对外宣传，包括工作室、工作车辆、工作人员服装等，并把该形象应用于集团网站与分公司网站。以蚂蚁的各种工作形态作为形象标志设计，穿着黄色工作服的“蚂蚁”走遍城市的大街小巷，如表2-1所示为各种蚂蚁的形象标志。“蚂蚁虽小，服务更好”体现其及时、正确的服务，并使每个客户满意，如图 2-2 所示为网站的宣传标语。
表2-1 蚂蚁形象标志
图2-2 蚂蚁网站宣传标语
集团网站首页采用方框构图，使用大面积图象、结构清晰、色彩鲜明，其他区域色彩上采用浅灰色和白色，以衬托色彩鲜艳的配图，配以高明度导航条小色块，构图简洁明快。分公司网站首页采用三栏设计，圆角矩形使栏目分明，整洁清晰。
2.2.2 网站结构设计规则
1.网站链接结构
网站的链接结构是页面间链接关系的结构，反映了页面间的层次关系，也称为网站的逻辑结构。逻辑结构设计的目的在于合理使用链接、提高导航效率。
（1）平铺型结构，如图2-3所示。
图2-3 平铺型网站链接结构
（2）树形结构，如图2-4所示。
图2-4 树形网站链接结构
（3）平铺型和树形结合，如图2-5所示。
图2-5 混合型网站链接结构
2.网站的目录结构和命名
目录结构称为物理结构。目录结构是否合理对浏览者没有太大的影响，几乎感觉不到，但它对于站点本身的上传、维护等有着重要影响。一般按以下原则来组织目录结构。
（1）不要将所有文件都放在根目录下。将所有文件都放在根目录下会造成管理困难，影响工作效率。如果所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将文件检索一遍，建立新的索引文件，文件量越大，等待时间将越长。
（2）按栏目内容建立子目录。一般按主菜单栏目建立子目录。也可将一些相关性较强不需要经常更新的栏目放在根目录下或者合并放在统一目录下，如将需要下载的内容放在一个目录下。
（3）在根目录和子目录下建立images文件夹。images目录用来存储图像，建立专门的图像文件夹是为了方便管理。
（4）目录的层次不要太深。目录的层次建议不要超过3层，以维护管理方便。
（5）避免使用过长的目录名和文件名。长名称不便于记忆，也可能导致服务器无法识别。
（6）避免使用中文目录名和文件名。网络中使用中文目录名和文件名有些障碍，对中文目录下的文件和中文文件名的文件的显示造成困难。用英文字母、数字和规定能用的特殊字符组成的名称。
（7）使用意义明确的目录名和文件名。不要用拼音目录名和文件名，要使用一个实际存在的英文单词或者英文词组作为目录名和文件名，英文词组的单词间一般要使用“-”或“_”进行分隔，不要用空格进行分隔。
2.2.3 网站CIS设计知识
CIS 是发端于 20 世纪中期的商业利器，在企业的营销传播过程中起到标识自身和强化形象的重要作用。企业营销传播有着明确的目的指向，而CIS作为企业自身形象的基础识别系统，构建了其所有营销传播活动的目标平台，其最重要的元素就是标志和维系消费者与企业关系的品牌。
在网站CIS设计中，通常以“四标”来确定，即网站标识、网站标语、标准颜色、标准字体。
1）网站标识
网站标识（Logo）就如同商标一样，是网站特色和内涵的集中体现。在网站形象设计中，网站标识同网站名称一样重要，看见Logo就能使访问者联想起对应的站点。Logo创意来自网站的名称和内容，标志可以是中文、英文字母或其变形，也可以是符号、图案，可以是植物、动物或者人物等，还可以是有代表型的物品等构成，色彩要单纯、强烈、醒目。
图2-6所示为一些网站Logo设计范例，新浪网用字母sina（加眼睛）作为标志，用眼睛看世界；动感一百手机网运用手机卡通化图案来表现，烘托出网站的灵气而又直观地体现了网站的类型；游多多旅行网的标志有一只多多鸟，群友们深深爱着能带来友情的鸟儿，在山山水水中，她和群友们一起快乐地飞翔。
图2-6 网站Logo设计范例
网站Logo设计步骤与技巧如下：
（1）经过分析，提炼出核心词汇作为Logo的主体。
（2）选择适宜的字体，多数时候人们都避免直接选用字库中的字体，字库中的字体是为了印刷、阅读而设计的，需将其图形化才符合Logo的要求。
（3）如果对字体的变形比较少，或者难于对字体进行变形，就需加上图形来辅助。图形创意是一项有难度的工作，在进行图形创意的时候，需要多参考别人的标志和图形设计。
网站Logo多采用卡通化的自由风格，对于图形的选择需要与网站建设企业充分沟通，真正了解企业特点，理解企业文化。
（4）如果企业CIS系统中已经指定了标准色，就按企业提供的标准色进行设计，如果没有标准色作为参考，Logo 色彩的选择就要符合网站建设企业的行业特征，如机械、电子行业蓝色为主，食品行业嫩黄、金黄、巧克力色等为主，女性行业粉色、紫、玫瑰等色为主，男性行业蓝色、深绿、黑色等为主，时尚行业使用现阶段的世界流行色等。
2）网站标语
网站标语可以是网站的精神、网站的目标、网站的经营理念，也可以是产品或活动等的宣传广告语，用一句话甚至一个词来高度概括公司。
比如，新浪：一切由你开始（世界在你眼中、你的网上新世界）；格力空调：好空调，格力造（格力掌握核心科技，引领中国创造）；阿里巴巴：让天下没有难做的生意；淘宝网：淘！我喜欢；微软：挖掘你的潜能，释放我们的激情（Your Potential，Our Passion）。
3）网站的标准色彩
网站的色彩应能产生视觉冲击，不同的色彩搭配会产生不同的效果。标准色彩是指能体现网站形象和延伸内涵的色彩，标准色彩反映出网站的文化内涵，并可影响到访问者的情绪。一个网站的标准色彩不超过3种，太多的颜色则会使网页显得凌乱，影响网页主题的有效展现。标准色彩主要用于网站的标志、标语、主菜单和主色块，应形成整体统一的视觉效果，其他色彩作为点缀和衬托。
比如，新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致；国富投资公司使用得明亮的蓝色使网站显得整洁自然、底蕴深厚；2009 快乐女生使用女性化的粉、紫色，展示女性的时尚与魅力；可口可乐使用的红色调体现出狂野、充沛、动感、激情；NBA网站使用灰黑色背景配以橘红显示独特的个性。
4）网站的标准字体
中文网站中一般内容文字使用宋体，为了体现站点的特色，标志、标题、主菜单等处根据需要选择一些特别的字体。在互联网上可以下载几百种中英文字体，但只有客户端安装了的字体才能被显示出来，因此对不常用的字体只能用图像的形式，才能保证页面正常浏览。
2.3.4 网页版面布局规则
1.网页版面的基本元素
一般网页的基本内容包括网站页眉、导航、主体内容、页脚等，如图2-7所示。
图2-7 网页元素构成展示
（1）页眉。页眉是在页面的上端部分，在此放置网站标识和网站宗旨、宣传口号、广告语，有的网页也设计为广告出租。
（2）导航。导航位置一般有四种标准显示位置：左侧、右侧、顶部和底部。有的站点运用多种导航，如在页面顶部设置主菜单，在页面左侧建立了二级栏目条，又在页面的右侧设置了多种超链接，都是为了增强网页可访问性。
（3）主体内容。主体内容可以是二级链接内容的标题，或者是内容的摘要，或者是内容的全部，表现手法一般是图像和文字相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是从左到右、从上到下的顺序排列，所以重要的内容一般安排在页面的左上位置，次要的内容安排在右下方向。
（4）页脚。通常用来标注站点所属单位的名称、地址、网站版权、电子邮箱等，从而让访问者了解该站点所有者的一些情况。
2.页面的尺寸
（1）页面的安全宽度。当显示分辨率设置为1024×768，即浏览器的屏幕最大宽度为1024像素（简写为px，像素是计算机屏幕上所能显示的最小单位），因浏览器的边框和垂直方向的滚动条占去22像素，所以网页的安全宽度为1002像素。所以页面的设计宽度最好限制在1002像素以内。不同计算机屏幕由于分辨率设置的不同，显示出像素的大小也不同。
（2）页面的最佳长度。页面长度定义很宽松，要考虑整个网页的下载速度、浏览者的方便、信息含量、网站类型等因素。根据经验，中小型网站的页面的最佳长度应在1～2屏之间，大型网站在3～4屏左右。
3.常见的网页布局
网页的构图布局和平面设计构图布局有相似之处，但因技术的限制，网页构图不如平面设计那样随意灵活。网站的布局已从单一、刻板转向多元化、人性化、富有亲和力的复合型设计，风格独特、创意新奇更能吸引人们的注意力。常见的网页布局有对称对比、同字形、回字形、匡字形、自由式、三字形等，如图2-8～图2-11所示。
图2-8 对称对比布局的网页
对称对比布局：采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机的结合比较困难。
图2-9 同字形布局的网页
同字形布局：页面上面有广告条+导航条，左面是链接，右面是友情链接等，中间是主要内容。优点是充分利用版面，信息量大；缺点是页面拥挤，不灵活。
回字形布局：在同字形的下面增加一个横向通栏，页脚充分利用起来。
匡字形布局：将回字形的右侧或左侧栏目去掉，改善回字形的封闭型结构。
这三种结构及其变形应用广泛。
图2-10 自由式布局的网页
自由式布局：将图像、Flash 动画或者视频作为主体内容，其他的文字说明及栏目条均分布到不显眼的位置，起装饰作用，这种结构在时尚类网站中使用非常多。优点是富于美感，可以吸引大量的浏览者欣赏；缺点是文字过少，导航条的指引作用不明显。
图2-11 三字形布局的网页
三字形布局：通过横向色块，将页面整体分割为三部分，色块中大多放广告条。优点是将同字形和自由式的特点充分结合，大幅色彩丰富图像使网页具有美感，又有比较适中的信息量，不显拥挤；缺点是上下比例不易协调，大幅图像的色彩和构图是网页布局的关键。
2.2.5 网站色彩知识
1.色彩的魔力
下面用几个小问题说明色彩的魔力。
（1）冬天喜欢家里是红色、橙色等颜色，还是深蓝、深绿的颜色，为什么？除了个人色彩习惯外它们分别给你什么感觉？
（2）不开心的时候看到天气不好，灰蒙蒙的，你怎么想？要是看到阳光明媚又会怎么想？（3）回忆见过的女性用品（比如化妆品和服饰）的商标、包装、广告的主要色彩特征。
（4）回忆见过的男性用品（比如剃须刀、打火机等）的包装、商标、广告的主要色彩特征。
色彩的魔力就在于可以影响人的情绪。根据人的经验、记忆、知识、修养、性格、生活环境、职业、时代、民族、年龄、性别等方面的不同，对于色彩的联想也不同。设计搭配颜色，一定要符合主体浏览对象的联想习惯，否则就会产生负面效果。
2.颜色
颜色的种类主要分为光源色和物体色。会发光的太阳、灯和从内部发出颜色的电视机、显示器等属于光源色。光照射到某一物体后经过反射或穿透显示出的效果就是物体色。
原色是指无法通过混合其他颜色得到的颜色。不同的颜色类型配色原理是不相同。光源色的三原色是红色（Red）、绿色（Green）、蓝色（Blue），显示器的色彩是由光构成的，因此设计软件中颜色的数值是由 RGB 三者的数值构成。而物体的三原色是洋红（Magenta）、黄色（Yellow）和青色（Cyan），也简称其为红黄蓝三原色。印刷时的油墨由物体的三原色加黑色组成，因此印刷色数值由CMYK四者的数值构成（K就是黑色，black）。
图2-12 光源色和物体色的三原色及其混合对比图
另外，根据人类心理的角度和人眼对光的感受对颜色进行分类，称为用户直观颜色模式，又名HSB模式。在此模式中，所有的颜色都用色相或色调（H）、饱和度或纯度（S）、亮度或明度（B）三个特性来描述。色相就是色彩的相貌，红黄蓝紫青等就是色彩相貌的表述，金银黑白灰这五种颜色属于无彩色，不存在色相属性。饱和度也就是颜色鲜艳的程度，或者说颜色的纯净程度（即色调中灰色成分所占的比例），饱和度高色彩较艳丽，饱和度低色彩就接近灰色。亮度就是颜色的明暗程度，亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。
图2-13是Windows中“画图”程序的颜色拾取器，将色调（色相）、饱和度、色相分别等分240等份来表示不同的颜色。色调在一个色调环上度量，从0到240分别表示从红、橙、黄、绿、青、蓝、紫再到红等色调，0和240都是红色调。饱和度最高为240表示最纯最艳丽，饱和度最低为0表示最灰暗。亮度最高为240得到纯白，亮度最低为0得到纯黑。
图2-13 色彩三要素的混合
重点提示：
HSB模式调色练习。使用Windows中的“画图”程序可绘制一组矩形，调出以下颜色方案中的所有颜色，感知颜色属性并进行对比。
高纯度、中明度、只有色调变化的方案：
H=0，S=240，B=126；H=45，S=240，B=126；H=85，S=240，B=126；H=131，S=240， B=126；H=203，S=240，B=126；H=240，S=240，B=126
色调不变、纯度不变、只有亮度的变化的方案：
H=0，S=240，B=240；H=0，S=240，B=201；H=0，S=240，B=155；H=0，S=240，B=105；H=0，S=240，B=55
色调和亮度不变、只有饱和度变化的方案：
H=0，S=240，B=126；H=0，S=201，B=126；H=0，S=162，B=126；H=0，S=113，B=126；H=0，S=64，B=126；H=0，S=15，B=126
3.数码色彩
数码色彩是通过由0和1构成的数字信号显示出的颜色，是通过数据流交换数据的所有设备中显示的颜色。在网络中，即使是相同的颜色也会因显示设备、操作系统、显示卡以及浏览器的不同可能产生不同的显示效果，其中显示卡的影响最大。在显示器的屏幕内侧均匀分布着红色、绿色、蓝色的荧光粒子，8位真彩色是将红、绿和蓝的荧光粒子数的多少分成0到8，最后形成8×8×8=256 种颜色，24 位真彩色是将三种色阶分别分配为256 种亮度值，即256 ×256×256=16 777 216种颜色。同一图像会因不同真彩色而有明显的显示效果差异。
网页颜色采用RGB色彩模式（rrggbb），以6位16进制代码表示（数字从0-9，字母从A-F）。常用颜色表示为：#000000（黑色）、#FFFFFF（白色）、#FF0000（红色）、#00FF00（绿色）、#0000FF（蓝色）、#FFFF00（黄色）、#FF00FF（洋红）、#00FFFF（青色）。
2.2.6 图像与多媒体知识
1.图像设计知识
最初的互联网上只有纯文本信息，但随着网络技术的发展，图像使网页显得更生动。图像在网页上除了有网页装饰作用外，还有发布信息的作用。按图像的来源可分为两种类型：照片类和绘图类，照片类图像由数码相机、扫描仪等获得，绘图类由软件制作或对照片进行处理获得。由于图像标准种类很多，不同图像处理软件有不同的格式。
2.多媒体设计知识
在一个全部是静态元素组成的页面中添加一些动态效果，当浏览该页面时，视线的焦点就会落在动态的内容上，在互联网上，网络广告商将自己的宣传标语、标识图案、栏目标题、按钮等制作成动态形式，突出其重要性和独特性，达到吸引访问者的宣传效果。多媒体包含声音、视频、Flash动画等。
2.2.7 Fireworks简介
Fireworks 是用来设计制作专业化网页图像的应用软件，可以有效地帮助网页设计和开发人员解决一些的特殊问题。使用Fireworks可以在一个专业化的环境中创建和编辑网页图像、对其进行动画处理、添加高级交互功能以及优化图像。在Fireworks中，可以在单个应用程序中同时处理创建和编辑位图与矢量图。Fireworks与Adobe公司的其他产品（如Dreamweaver、Flash、Photoshop、Illustator）一起提供了一个完备的 Web 集成解决方案。本教材主要以Adobe Fireworks CS3版本为参照进行讲解。
Fireworks的工作界面由四部分组成：视图面板、功能面板、工具箱面板、属性面板。
1.视图模式
Fireworks提供了四种视图模式，其切换按钮如图2-14所示。使用者在编辑网页图像时可直观地预览图像的显示效果，并可预知图像的网络下载速度。通过视图面板可以完成视图间的切换。
图2-14 Fireworks的四种视图
（1）原始视图：当新建或者打开一个文件时，系统就直接进入原始视图模式。只有在该模式下才能创建新图像，并对图像进行编辑。
（2）预览视图：在此视图模式下，可以利用“优化”面板呈现图像在不同图像格式下的效果，以便选择效果更好的输出图像类型。
（3）2幅视图：可以直接对比优化图像与原始图像的区别。
（4）4幅视图：可以直接对比多种不同优化图像与原始图像的区别。
2.工具栏
通过“窗口”菜单命令可以控制工具栏的显示或隐藏，下面介绍常用的工具栏。
（1）“主要”工具栏
“主要”工具栏如图2-15所示，从左向右分别是新建、打开、保存、导入图像、导出图像、打印等文件相关操作的图标，其后还有恢复、撤销、重做、剪切、复制、粘贴等编辑相关操作的图标。这些图标的功能和用法基本同Office系列办公软件。
图2-15 “主要”工具栏
（2）“修改”工具栏
“修改”工具栏如图2-16所示，主要包括处理图像时常用的命令和操作，包括：组合、取消组合、合并、拆分、移到最前、前移、后移、移到最后、对齐、逆时针旋转 90°、顺时针旋转90°、水平翻转、垂直翻转。
图2-16 “修改”工具栏
3.面板组
面板用于编辑文档中所选对象或元素的各个方面。通过“窗口”菜单命令可以控制面板组的显示或隐藏，每个面板都是可拖动的，可以按自己喜欢的排列方式将面板组合到一起。默认情况下，某些面板不会显示出来或未与其他面板组合在一起，但是如果需要，可以显示它们或者将它们任意组合，还可以修改出现在面板组标题栏中面板组的名称。
4.工具箱
Fireworks工具箱包括选择、位图、矢量、Web、颜色和视图工具箱。
5.属性面板
属性面板可用于编辑当前选定内容、工具或文档的属性。属性面板一般放在工作区的底部，可全部折叠；也可以半高方式打开，只显示两行属性；还可以全高方式打开，显示四行属性。
图2-17 属性面板
2.2.8 HTML技术
1.认识HTML
1）访问WWW
打开IE浏览器，在地址栏输入：www.baidu.com，按Enter键后就可显示网页。访问WWW的过程是：用户通过浏览器将欲访问的URL（Uniform Resource Location，统一资源定位器）发向互联网，由互联网确定相应的服务器，并将访问请求传送到这一服务器，服务器找到信息后以文件的形式通过互联网传回用户的计算机，最后由浏览器将信息呈现出来。URL指出了资源文件所在的位置，其格式为“协议//地址”。其中最常用的协议是HTTP（Hypertext Transfer Protocol，超文本传输协议）、FTP（File Transfer Protocol，文件传输协议）。
2）查看HTML文档
打开IE浏览器，打开Google网站的主页后，单击IE浏览器的菜单命令“查看”→“源文件”，记事本程序打开网页代码。
HTML（Hyper Text Markup Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言，它通过标记式指令将影像、声音、图像和文字等链接起来。几乎所有的网页都是由HTML或嵌套在HTML中的其他程序语言编写的。HTML并不是一种程序语言，而是一种结构语言，它具有平台无关性特点。无论用户使用何种操作系统，只要有相应的浏览器程序，就可以运行HTML文档。
一般来讲，一个网页文件应具有下面的结构：
<html> HTML文件开始
<head> 文件头开始
<title>网页的标题</title> 网页的标题
</head> 文件头结束
<body> 文件体开始
网页的内容 网页的内容区
</body> 文件体结束
</html> HTML文件结束
文件头描述浏览器所需的信息，常有<title>…</title>、<meta>、<script>…</script>、<style>…</style>、<base>、<link>等内容。文件体是展示网页效果的区域。
2.URL如何表示
网页文件的链接和图像、动画、视频等的调用都使用URL表示，URL分为绝对地址和相对地址。
1）绝对地址
即完全的URL地址。
（1）外部站点：http://主机名或IP地址:端口号/路径名/文件名。
例如：www.google.com.cn/intl/zh-CN/adwords/reseller.html。
主机名或IP地址表示Internet的服务器名。
端口号是指不同应用程序所对应的不同的端口协议，用来识别计算机主机申请的服务。一般在默认的情况下都是使用默认的端口号，可省略。
路径名/文件名是信息资源在服务器上存放的路径和文件名。在使用默认路径和默认文档时可省略。
（2）局域网内计算机：//计算机名或IP地址/盘符/路径名/文件名。
（3）本地文件：盘符/路径名/文件名。
2）相对路径
所要链接或嵌入到当前网页文档的文件与当前文件的相对位置所形成的路径为相对路径。
（1）链接到同一目录内的文件：文件名。
（2）链接到下一级目录内的文件：下一级目录名/文件名。
（3）链接到上一级目录内的文件：../文件名。
3.用记事本程序编写、保存、修改网页文档
例如，编写如下HTML文件。
<html>
<head>
<title>科源|联想笔记本|联想台式机电脑|联想电脑周边|联想数码产品</title>
</head>
<body background="images/welcome-bg.jpg">
<bgsound src="images/welcome.mp3">
<div align="center">
<a href="index.htm">
<img src="images/welcome-main.jpg" alt="欢迎" border="0">
</a>
</div>
</body>
</html>
1）编写HTML文件
单击“开始”→“程序”→“附件”→“记事本”，输入HTML语句，单击“文件”→“保存”或“另存为”命令，在“文件名”框中输入文件名，扩展名一定要是“html”或“htm”，单击“保存”按钮。
2）怎样浏览网页（浏览本地文档，非域名访问方式）
方法1：通过“我的电脑”或“资源管理器”找到要浏览的网页对应的HTML文件，双击打开它即可浏览网页。
方法2：打开IE浏览器，选择“文件”→“打开”命令，找到对应的HTML文件打开，浏览网页。
方法3：打开IE浏览器，在地址栏上输入文件的路径及文件的名称，单击Enter键确定。
图2-18 示例网页效果图
3）如何修改网页
方法1：打开记事本程序，选择“文件”→“打开”命令，找到文件打开，修改后必须重新保存，回到浏览器窗口，单击“刷新”按钮（或快捷键F5）查看修改结果。
方法 2：浏览要修改的网页时，选择 IE 浏览器的“查看”→“源文件”命令，自动打开记事本程序显示网页文件的代码，即能修改，修改后必须重新保存（仍要注意保存文件的扩展名），回到浏览器窗口单击“刷新”按钮（F5）查看修改结果。
4.HTML的语法规则
HTML的标记有下列四种表示方法：
（1）<标记>文字或其他内容</标记>
（2）<标记 属性1="属性值" 属性2="属性值" … >文字或其他内容</标记>
（3）<标记 />
（4）<标记 属性1="属性值" 属性2="属性值" 属性3="属性值" … />
正常情况下，HTML文件以纯文本形式存放，扩展名为“.htm”或“.html”。若系统为UNIX，扩展名必须为“.html”。在Windows系统中使用时请保持只使用其中一种，避免混淆。
HTML文件由标记或被标记的内容组成；网页中所有的显示内容都应该受限于一个或多个标记，尽量避免有游离于标记之外的文字或图像等，以免产生错误。
每个标记都用“<”和“>”标识，以表示这是HTML代码而非普通文本，需要注意的是“<”和标记之间不能有空格或其他字符；标记分为单标记和双标记，双标记必须有结束标记</标记>，双标识占大多数，单标记只有几个；标记不分大小写，但要区分全角和半角。
一个标记可以有多个属性，各个属性用空格分开，属性及其属性值不分大小写，但也要区分全角和半角，根据需要可以用该标记的所有属性，也可只用需要的几个或不用属性，在使用时可按任意顺序排列属性。
对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果，多数 HTML 标记可以嵌套，但不可以交叉。
HTML文件一行可以写多个标记，一个标记可以分多行书写，不用任何续行符号。HTML源文件中的换行、回车符和多个连续空格（半角空格）在显示中是无效的，多个连续空格只显示一个。换行、分段都有专有标记，空格有转义符。
HTML语言提供注释语句，格式：<!--注释文字-->。注释语句可放在任何地方，注释内容不在浏览器中显示。（有时客户端脚本和CSS样式等也加上“<!-- -->”，是为了避免浏览器不支持这些代码时而在浏览器中把这些代码显示出来）。
HTML语言并不要求在书写时缩进。若为了程序的易读性，可使标记的首尾对齐，内部的内容向右缩进几格。HTML的语法并不像其他语言要求严格，语法或语句不正确一般只影响显示效果。需注意少量标记和属性对不同的浏览器的支持能力是不同的。
5.HTML规范与版本
早期的HTML是非常简单的，被称为HTML 1.0，由IEFT（负责有关Internet的各种技术标准及接口规范的制定的国际民间组织）修改为HTML 2.0，再由W3C（WWW联盟）发展为现在的HTML 4.01，这也是HTML规范的最终版本，HTML将被XHTML（可扩展超文本标记语言）取代。但这个取代还需要很长一段时间，HTML 仍然要继续使用，并且 HTML 是XHTML的基础，学习HTML仍非常必要。
在网页文档的开头可添加一个文档类型定义标签，用于说明 HTML 的规范，即指定当前网页文件所使用的HTML语言版本及定义该语言版本的规范文件的位置。例如使用HTML 4.01的规范，代码如下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2.2.9 网站链接与外观测试
一旦网站出现“访问速度太慢”、“链接错误”、“查看的网页不存在”等问题时，浏览者就可能离开转向其他网站。因此在网页发布前后均应对网站及网页进行全面的测试，尽可能多地发现问题，并及时处理，以保证发布的网站能正常访问。
1.链接测试
检查网页中否有超链接无效的情况，包括页面、图像和多媒体文件等，造成此类问题通常是文件名不正确、文件路径不正确等原因造成的。
2.外观测试
检查网页在浏览时能否按预想的布局效果进行显示，外观测试包含整体界面、导航、图像、文字、内容等。
3.兼容性测试
（1）分辨率测试：每个客户在浏览网站时，其电脑显示器会设置为不同的分辨率，不同的客户会用不同的分辨率访问网站，所以测试网站时要检查不同分辨率下网页是否正常显示。
（2）浏览器测试：虽然 HTML 有规范和标准，但不同的浏览器间、同一浏览器的不同版本间存在着差异，可能部分导致兼容性问题，因此需要对不同的浏览器环境测试所有网页是否正常显示。
2.3 实践操作
在了解相关的知识和技术之后，根据任务1中需求分析说明书的要求进行网站的设计，设计完成后，制作和测试网站。
2.3.1 分析网站需求，完成网站设计说明书
1.分析网站需求说明书
网站设计人员认真阅读网站需求分析说明书，重点从网站定位、网站功能需求、网站CIS需求、网站非功能性需求方面进行分析，确定网页设计说明书，双方签字确认后再制作网站。
2.设计网站构图
按需求分析说明书绘制草图，如图 2-19 所示。网站设计师再根据草图用图像处理软件实现页面图案，规整构图、搭配颜色等，最终绘制成网站构图。
图2-19 手工绘制的页面草图
3.完成网站设计说明书
科源信息技术有限公司宣传网站设计说明书
1 引言
1.1 编写目的
该文档描述科源信息技术有限公司宣传网站总体设计，包括网站的形象设计、风格设计、标准字体设计、总体布局设计、结构设计等方面。
1.2 适用范围
项目负责经理网站设计师、业务顾问、网站优化师、网站运营维护工程师、客户代表。
1.3 术语和缩写
科源信息技术有限公司宣传网站经营产品以电脑产品为主，缩写为ky-computer。
2 网站设计策略
2.1 网站概述
该网站栏目包括：首页、公司介绍、新闻动态、产品服务、维护保养、在线咨询。内容突出产品服务和维护保养内容，让用户能最方便地查看公司联系方式和营销业务流程。
2.2 使用技术
本网站将使用静态网页技术。
2.3 设计约束
遵循HTML编码规范和Fireworks图像处理规范。
2.4 网站的链接结构设计
2.5 网站整体风格
网站外观设计的指导思想为版式活泼、基调明快，访问网站像是阅读一份杂志。
2.6 网站Logo设计
网站面向的对象是在校的学生，以学习为主，以知识专有代表物品“书”作为设计的蓝本，将“书”抽象为符号，再在“书”的封面加上公司名称“科源”的拼音缩写“KY”，表示知识和科学技术的重要性，学生学习计算机知识，为适应社会增强就业竞争力。
2.7 宣传标语的设计
用公司的理念“科源，科学技术的源泉|用科技创造顾客价值！”和服务宗旨“无忧服务”、“准确、及时、有效、周到”，作为网站的宣传标语。
2.8 网站色彩的设计
销售产品以电脑为主，采用电脑的蓝色作为主色调给人专业、科技、理智的感觉，用蓝色的对比色——橙色作为辅助色调给人以轻快、欢欣、热烈、时尚的感觉，而黑色作为主要文字内容的色调。
2.9 网站的字体设计
中文网站中的一般文字采用宋体小五号（12像素），Logo、栏目标题采用黑体16像素到20像素不等，宣传标语需突出，使用如方正稚艺简体、方正毡笔黑简体等字体。
2.10 网站布局的设计
网站首页采用左右不对称结构；网站次级页面采用匡形结构。网页布局的宽度800像素，高度在700像素到1000像素之间，屏幕的1～2屏，兼容1024×768及以上的分辨率。
2.11 网站首页和次页构图设计
按照网站的设计思路，用图形软件构画出页面草图，提交用户讨论，直到用户满意为止。
3 签署确认
委 托 方：科源信息技术有限公司 开 发 方：好3721信息服务公司
授权签名：
授权签名：
签署日期：2006.1.11 签署日期：2006.1.11
4.对方沟通和确认
（1）业务顾问给科源公司客户代表打电话或发电子邮件，约定需要沟通确认的事项、时间和地点、参与的人员。
注意事项：要约科源公司负责人或决策者。地点最好是科源公司，提倡上门服务。
（2）在约定的时间和地点，业务顾问向科源公司负责人讲述设计方案，然后双方进行沟通。
注意事项：提前做好准备带齐资料；准时到达约定地点，把握时间，不能太短也不能太长；营造愉快、欢畅的气氛和环境；寻找思想共识，包括风格、结构、布局、色彩等的统一；多倾听，少辩解，求同存异，避免一个问题反复讨论，说服多于说明，逐渐解决分歧。
（3）如果还需修改，修改后重新约定确认时间，如果无须修改，科源公司负责人在设计说明书上签字确认。
注意事项：让科源公司负责人仔细阅读网站设计说明书，业务顾问不得做说明书以外的私下承诺。
2.3.2 建立网站目录结构，收集整理素材和资料
1.建立网站目录结构
接照结构设计规则和网站的栏目和链接设计，完成对应目录和文件设置，如图2-20所示。
图2-20 网站目录结构图
用记事本程序新建网页文件，并输入如下代码，保存格式为“*.htm”，在对应文件夹建立系列内容为空的网页，各网页文件可以通过复制后重命名的方式快速建立。后续制作网页时主要在<body>标记间加入内容的代码。这些网页中都添加网页规范标准HTML 4.01，都具有文件头（meta）信息，分别表示文档类型和编码、关键字、描述、允许搜索引擎检索和探找、网页作者、版权信息。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Keywords" content="计算机，联想，笔记本，台式机电脑，数码产品">
<meta name="Description" content="这是一个专业水平的联想品牌电脑、数码产品的销售及维护
为主营业务的公司。">
<meta name="Robot" content="all">
<meta name="Author" content="好3721信息服务公司">
<meta name="Copyright" content="科源信息技术有限公司">
<title>科源|联想笔记本|联想台式机电脑|联想电脑周边|联想数码产品</title>
</head>
<body>
…
</body>
</html>
在ky-computer的同级目录处建立两个文件夹：“源文件夹”用于存放设计的图像和动画源文件，“素材文件夹”用于存放从企业收集的相关素材和资料文件。
2.收集整理素材和资料文件
在“素材文件夹”中建立4个子文件夹，分别命名为“公司介绍”、“新闻动态”、“产品服务”、“维护保养”，将收集的文字和图像信息保存到对应的文件夹中。
对4个子文件夹中的内容进行整理，包括：分别按顺序号或日期号命名文字和图像文件，文字与图像文件对应的编号一致；将文字和图像资料对应到每个网页文件，每个网页都要具备有价值的内容，让用户的单击有意义；不要把太多的内容放在网页中，避免用户难以快速准确地找到需要的信息，为每个网页中准备的内容不能超过3屏，1～2屏最合适。
2.3.3 分析网站构图设计，制作网站图像
1.网站构图分析
（1）首页和次级页面有相似的地方，尽量做到“代码重用”和“图像重用”，尽可能地增加灵活性与适应性。
（2）首页页面划分8个区域：头部（header）、导航栏（navigator）、广告条（banner）、产品链接（link-product）、内容链接 1 区（container1）、内容链接 2 区（container2）、友情链接（friendlink）、页脚（footer），如图2-21所示。
图2-21 首页布局规划图
（3）次级页面划分为 8 区域：头部（header）、导航栏（navigator）、次级页面广告条（banner-sub）、链接区（link）、联系我们（contract）、标题和内容、友情链接（friendlink）、页脚（footer）。如果划分得更细些就是12个区域，可将链接区（link）、标题和内容分为link-top、link-bg、link-bottom、内容标题（title_xxx）、内容区，如图2-22所示。
图2-22 次级页面布局规划图
（4）完全重用区域包括头部（header）、导航栏（navigator）、友情链接（friendlink）、页脚（footer）。其他区域的部分图像可重用。
重点提示：
1）网页中图像设计技巧
（1）图文相辅相成，网站整体设计简洁、美观。
（2）制作精致的图像，能够增强网页的美观程度。
（3）必须控制好文件尺寸与大小，减小网络流量，保证下载速度，增强用户良好的浏览体验。
（4）在网页中使用同一图像，一旦含有这一图像的网页被用户访问后，其他页面被访问时，这个图像就不会再次下载，从而提高网站的访问速度。网站的页面背景尽可能采用相同的背景图，这不但可增加网页的一致性，树立统一风格，而且可以避免页面跳转时延长等待时间。
（5）必须为图像加文字注解，在图像没有下载完之前，用户能够了解图像上的内容，避免长时间不明等待。
（6）可以将大的图像制作成尺寸、存储容量小的缩略图，链接到大的图像上。缩略图的下载速度快，用户有兴趣再打开大的图像查看。
2）网页中多媒体设计的技巧
（1）动态效果要为页面的整体布局服务，不能脱离整体风格而成为独立的个体，在网页的设计中以静为主，辅以动态效果调剂。网页上的动态效果应该少而精，一个页面中一般以1～2幅动画为宜，动画太多会使人眼花缭乱，影响文字内容的阅读，并难以形成和谐搭配。
（2）动画的位置一般在页面的页眉或广告位处。
（3）网页中动态效果用于传播特定信息的，动态效果与网页内容有机结合，不能滥用。对于内容严肃的页面更要慎用动态效果。
（4）声音与视频（流媒体）的文件较大，会影响下载速度，根据内容需要选择是否在网页中加入视频和声音。此外，元素尽量不用非通用的多媒体。
2.头部（header）区域制作
1）新建图像
启动Fireworks，执行“新建Fireworks文档（PNG）”命令，出现如图2-23所示的“新建文档”对话框，设置画布宽800像素、高85像素，画布颜色为白色，单击“确定”按钮建立了“未命名- 1.png”的图像。单击“文件”→“保存”命令，在“保存”对话框中选择路径“源文件夹”，命名为 header.png，单击“保存”按钮完成图像存储，也可使用快捷键 Ctrl+S 保存文件。文件未保存时在文件名后会出现*号
，保存后*号自动消失（后面的操作完成后将不再提示保存文档）。
图2-23 “新建文档”对话框
重点提示：
显示器分辩率的默认值为72像素/英寸，不用更改，表示显示器每英寸为72个像素点（px），而网页的图像是相对于显示器屏幕进行显示的，教程中所有图像都是为网页设计制作的，后续所有的分辨率都不进行修改，后续图像制作过程不再详述此步骤。而图像打印机打印图像时分辨率是不同的，打印尺寸固定，分辨率越高，打印的图像清晰度越高，但在显示器上看图像，分辨率越高图像就越大，但这并不表示打印尺寸会变大。图 2-24 所示为打印尺寸、像素尺寸和分辩率的比较。
图2-24 打印尺寸、像素尺寸和分辨率比较
2）绘制Logo图标
（1）绘制“书封面”的蓝色矩形。选择工具箱中的矢量矩形工具，在画布区域绘制宽40px、高50px的矩形，在属性面板可查看和修改其宽、高和XY位置，输入数字后回车修改矩形的宽、高和位置属性，如图2-25所示。
图2-25 矩形属性
给矩形填充颜色。用指针工具选中矩形，选择填充类别
，修改为“线性渐变”。单击填充颜色滑块
，设置渐变颜色为从#2485C5到#026BAD，如图2-26所示。选中矩形，拖动渐变填充柄的两个端点，将其从上下渐变调整为左右渐变，如图2-27所示，笔触（边线）为无
。
图2-26 线性渐变填充
图2-27 改变渐变填充方式
图2-28 多边形工具设置
（2）绘制“KY”符号。使用快捷键Ctrl+4将视图放大4倍。选择多边形工具
，修改多边形工具属性值，形状为多边形，边为3，如图2-28所示，绘制一个三角形，通过工具箱的缩放工具
旋转，在属性面板中修改宽 7px、高 22px，填充类别为实心，填充颜色为白色，笔触（边线）为无
。
选中刚绘制的三角形，使用快捷键 Ctrl+Shift+D 复制一个相同的三角形，使用快捷键Ctrl+Shift+T，弹出数值变形对话框，将宽和高都放大到200%，往下拖放至合适的位置，选择“视图”→“标尺”命令，打开标尺，在上方标尺任意位置按住鼠标左键不放往下拖动辅助线（绿色）到大三角形中线位置，选择工具箱的刀子工具
，沿辅助线“切”一刀，大三角形分成了上下两部分，删除下半部分。
绘制三角形，宽 20px、高 15px，填充白色，笔触（边线）无
，然后复制一个，修改为红色并移至上方，按下 Shift 键的同时用鼠标单击两个三角形同时选中它们，选择“修改”→“组合路径”→“打孔”命令，得到“V”形效果。
绘制宽6px、高27px的矩形，选择倾斜工具，如图2-29所示，将矩形底部向右倾斜，直到合适的角度，用刀子工具把矩形上部多余的部分切开后删除，完成“KY”符号。
图2-29 选择倾斜工具
图2-30 绘制“KY”符号的过程
（3）完成“书”的形态。同时选中“书封面”的五个对象，使用快捷键 Ctrl+G 组合五个对象。绘制“书底”的矩形，设置为灰色填充、笔触无。移动辅助线，参照辅助线缩放和倾斜组合对象及灰色的矩形，如图 2-31 所示。选择“窗口”→“层”命令打开层面板，选中矩形对象移动到“组合：5对象”的下方，如图2-32所示。调整灰色矩形的位置，将灰色矩形和“组合：5对象”一起再组合为一个对象，组合后的对象在属性面板上调整X位置15、Y位置9。移开辅助线，用快捷键Ctrl+1将视图恢复到正常比例。
图2-31 倾斜后的效果
图2-32 层面板中对象的上下层次移动
（4）公司名绘制。选择工具箱中的文字工具
，分别输入“科源信息技术有限公司”和“Keyuan Information Technology Co.， Ltd”，设置两个文字对象属性：填充黑色、笔触无、黑体字，中文文字大小 20px、字间距 2
，英文文字大小 14px、字间距-9
，移动文字对象使其与“书”的距离协调。
3）完成宣传标语
选择工具箱的文字工具，输入：“科源，科学技术的源泉|用科技创造顾客价值！”，设置其属性：方正稚艺简体、黑色、22px，将文字对象移动到合适的位置。
重点提示：
方正稚艺简体为特殊字体，需要在到网上下载字体（如：字体下载大宝库网站 font.knowsky.com），下载后的字体解压缩后（
）复制到“控制面板”的“字体”窗口中，就能在各软件中使用。对于不常用的字体，要能正常显示只能用图像的形式。
4）制作顶部的装饰条
（1）绘制装饰条的基本形状态。先绘制一个矩形，填充颜色为#008ADC，笔触（边线）无。再绘制一个矩形，矩形圆度为70，从上到下线性渐变填充#008ADC→#009CFB →#21ADFF（在填充颜色滑块条上单击增加一个颜色滑块，颜色滑块能左右滑动从而修改渐变效果），笔触（边线）设置为类型1像素柔化
，笔尖大小为1px，颜色为#008ADC，如图2-33和图2-34所示。
图2-34 装饰条的基本形状
图2-33 两个矩形的属性
（2）改变圆角矩形的形状。使用工具箱中的部分选定工具
，在圆角矩形的任意一个控制点上单击，弹出编辑控制点的确认对话框，如图 2-35 所示，单击“确定”按钮后就能通过修改控制点改变矩形的形状。使用快捷键Ctrl+8视图放大8倍，用部分选定工具选中圆角矩形左上控制点向左移动，将圆角矩形右上控制点向右移动，如图2-36所示，使用快捷键Ctrl+1使视图恢复正常比例。
图2-35 矩形控制点编辑确认框
图2-36 控制点的移动
5）导出图像
导出与保存是不同的，保存后重新打开时能再进行矢量编辑，导出后为位图，不能进行矢量编辑。选择“文件”→“图像预览”命令，在“图像预览”对话框中将格式改为 JPEG、品质 100%，如图 2-37 所示，单击“导出”按钮，在“导出”对话框中选择导出路径为“ky-computer/images”，文件名为“header.jpg”。
图2-37 “图像预览”对话框
重点提示：
1）矢量图与位图
矢量图又叫向量图，是由点、线、面等来描述和记录的图，记录的是对象的几何形状、线条粗细、角度、圆弧、面积、填充、色彩等。生成的矢量图的文件存储量小，任意放大或缩小而不会出现图像失真现象，特别适用于文字设计、图案设计、版式设计、计算机辅助设计（CAD）等。但矢量图不易制作色彩丰富的图像，并且在不同的软件之间交换数据也不太方便。
位图又叫点阵图或像素图，由多个像素的色彩组合就形成了图像，打印的图片或照片由墨点构成，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的。在处理位图图像时，编辑的是像素，它的存储容量和质量取决于图像中的像素点的多少，每单位尺寸中所含像素越多，图像越清晰，颜色之间的过渡也越平滑。位图图像的主要优点在于表现力强、真实感强、细腻、层次多。但在对图像进行拉伸、放大等处理时，其清晰度和光滑度会因单位尺寸像素点的变化而受到影响。
2）常用的位图图像格式
（1）GIF：图像交换格式，该格式能够支持少于或等于256色的图像压缩格式，一般用于主要包含纯色的图像，支持透明和动画。
（2）JPG：又名JPEG，支持32位颜色的图像，能以很高压缩比来保存图像而图像质量损失并不多，这在网页中的意义是显著的，既保留了漂亮的图像，又不太影响访问者浏览网页。
（3）PNG：具备GIF和JPEG的优点，在压缩时不会影响图像品质，且在显示全彩图时可支持48位色彩，在IE 4.0版后才支持此图像格式。
（4）BMP：是 Windows 操作系统中的标准图像文件格式，这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但缺点是存储容量过大。
（5）TIF:TIFF是一种比较灵活的图像格式，支持256色、24位色、32位色、48位色等，同时支持GRB、CMYK等多种色彩模式，支持多平台等，文件体积较大，适用于印刷。
（6）WBMP：是移动计算机设备使用的标准图像格式，这种格式特定使用于WAP网页中，支持1位颜色，只包含黑色和白色像素，但版幅较小，多用于WAP网站中的网页。
3）网页图像格式的选择
当需要透明图像、动画图像、颜色数少、空间很低的时候选择GIF格式；当需要简单的动画时使用GIF动画格式。当需要相片、有渐变色的图像、颜色丰富的图像、需要大量压缩图像存储容量时选择JPG格式。压缩时在图像处理软件中可以设置压缩品质的值。在网页中较少使用BMP和TIFF格式。
PNG是Fireworks可编辑的源文件，也可以导出PNG格式的文件，PNG8、PNG24、PNG32表示图像颜色数多少，导出后的PNG不是Fireworks的源文件。不要在网页中直接使用Fireworks的源文件，因其不具有隐私性。但如果是其他软件（如PhotoShop）处理PNG格式是被当作与GIF和JPG类似的文件。另外，PNG源文件和导出文件都不具备GIF的动画功能。
3.导航栏（navigator）区域制作
（1）新建文件，宽800px、高35px，画布为白色，保存在“源文件夹”中，名为“navigator.png”。
（2）绘制导航栏的基本形态。绘制矩形，矩形圆度 40，从上到下线性渐变填充#05A6E8→#0795D1→#0086BE，笔触类型柔化线段、笔触颜色#006CBD、笔尖大小 1px，在滤镜选项处单击“+”号按钮添加投影效果，设置如图2-38所示。
图2-38 导航栏矩形和投影属性
（3）绘制导航栏底部体现立体效果的横线。使用直线工具
，按下Shift键的同时，绘制一根横线，笔触类型为柔化线段，笔尖大小1px、颜色#06A8E6，属性如图2-39所示。
图2-39 导航栏底部横线的属性
（4）绘制导航栏目分隔条。为了体现立体感，由两根斜线紧挨着形成，左边的斜线颜色浅些，为#41C7FA，右边的斜线颜色要深些，为#006CBD，调整好后同时选中两根斜线组合。复制四份，在导航栏上把最左和最右的分隔条位置确定后，选中所有分隔条，选择“修改”→“对齐”子菜单的“均分宽度”命令和“水平居中”命令，分隔条分散排列整齐。
（5）导出图像。选择“文件”→“图像预览”命令，选择JPEG格式、品质100%，将其导出到“ky-computer/images”文件夹中，命名为“navigator.jpg”。
4.广告条（banner）、产品链接（link-product）、内容链接1区（container1）、内容链接2区（container2）的制作
这4个区域分别由4个圆角矩形组成，矩形之间都有间距，效果如图2-40所示，这四个区域统一绘制完成后，将其分隔为四幅图像后导出。
图2-40 确定四个区域的位置的效果图
（1）新建文件，宽800px、高500px、画布白色，保存在“源文件夹”中，名为“content.png”。
（2）绘制 4 个圆角矩形确定四个区域的位置，如图 2-40 所示。4 个区域的笔触类型为 1像素柔化、颜色#CCCCCC、笔尖大小1px。“广告条和内容链接1区”的矩形从左到右线性渐变填充#FD7704→#FFC801。“产品链接”的矩形实心填充#F3F3F3。“内容链接 2 区”的两个矩形无填充，如图2-41至图2-44所示。
图2-41 “广告条和内容链接1区”的矩形属性
图2-42 “产品链接”的矩形属性
图2-43 “内容链接2区”的左边矩形属性
图2-44 “内容链接2区”的右边矩形属性
（3）将四个区域分层，分层是因为后续处理时对象太多，分了层各区域的对象能更好地分开管理。选择“窗口”→“层”命令打开层面板，单击“新建层”按钮命令
3次，然后分别命名，如图2-45所示，拖动矩形对象到对应的层，“内容链接1区”暂未切割出来，该层暂无对象。分别锁定“产品链接”层和“内容链接2区”层，锁定的目的是避免误修改。
图2-45 四个区域分层管理
重点提示：
图层是组成图像的基本元素，将图像的每一个部分分别置于不同的层中，这些图层叠放在一起形成完整的图像效果。一个文档可以包含很多层，而每个层又可以包含很多对象，在层面板会列出层以及每一层包含的对象，利用层面板不仅可以合并位图、重命名等，还可以进行层管理，具体如下：
可视/隐藏，在层面板第一列的任意行的“眼睛”图标消失表示该对象或该层被隐藏，再单击一次隐藏被取消，对象或层又出现。默认为可视。
锁定/不锁定，在层面板的第二列的任意行单击显示锁形图标表示该对象或该层被锁定，不能再编辑，再单击一次取消锁定。默认为不锁定。
该层处理编辑状态，只在对应层出现，该图标出现表示对应层正在编辑状态，或者说该层中的对象正处于选中状态，该层被称为活动图层。
折叠层/展开层，单击此按钮层被折叠，折叠后再点击按钮
层又展开。
新建层。
新建子层。
删除层。
（4）将“广告条”和“内容链接1区”分开。选中广告条层中的矩形复制一份，将辅助线从水平标尺上拖动到Y坐标210像素的位置（通过垂直标尺确定），选中复制后的矩形，用刀子工具沿辅助线切开，切开后删除上半部分，下半部分改成实心白色填充，打开层面板，拖放到“内容链接1区”层，单击可视/隐藏工具隐藏“内容链接1区”层。选中“广告条”层中的矩形，用刀子工具沿辅助线切开，切开后删除下半部分。取消“内容链接1区”层的隐藏，锁定它。
（5）完善“广告条”。锁定“广告条”层的圆角矩形对象。
① 绘制圆环效果。选择圆环工具
绘制一个圆环，鼠标拖动调节圆环的内径控制柄，将内径值调大，环变细，圆环填充白色、无笔触。选中圆环，复制一个，使用快捷键Ctrl+Shift+T数值变形，宽高都缩小到60%。再复制一个小圆环，宽高缩放到30%，拖动调整最小圆环的内径，使其变成一个小圆形。组合三个圆环，调整不透明度为20，复制6个，任意放大或缩小，协调地拖放到“广告条”画布区域各方位（圆环的部分可以超出画布区域，在导出时超出部分不会被导出到图像中，对图像无影响），调整好大小和位置后组合、锁定所有圆环对象，如图2-46所示。
图2-46 绘制圆环过程
② 处理位图图像。选择“文件”→“导入”命令，导入“素材文件夹”中准备的广告区的图像，导入后的图像有白色背景，不是透明的，与橙色广告条不能融为一体。删除导入的图像，选择“文件”→“打开”命令打开电脑图像，选择魔术棒工具
，调整工具属性，如图2-47所示，在电脑图像的白色区域单击，白色区域被框选中，按下Delete键删除框选的白色区域，使用快捷键Ctrl+D取消选区，修改画布为红色，仔细检查图像上是否有“脏点”（白色或灰色的边、阴影等），视图放大后用橡皮擦工具
擦除脏点，如图2-48所示。按以上同样的方法处理广告条区域其他产品图像。将擦除了白色背景的多个电脑图像复制到“content.png”，缩放后移动到合适的位置。
图2-47 魔术棒工具属性
图2-48 删除白色背景选区
重点提示：
为了增强设计的效果和提高创作效率，需要引入多元化的图像素材。导入文件是将其他程序创建的图像文件插入到当前图像中，可以导入图像格式有BMP、GIF、JPEG、PNG、TIFF、PSD等。
③ 使用文字工具输入“无忧服务”广告语，填充白色、字体为方正毡笔黑简体、大小36px、字间距66px，调整好位置。锁定广告条层。
（6）完善“内容链接1区”。取消“内容链接1区”层的锁定。
① 水平分隔条。使用直线工具，按下 Shift 键的同时画直线，三根直线的属性如图 2-49所示，笔触类型为1像素实边、笔尖大小1px、颜色#CCCCCC。
② 链接区数字装饰图案。绘制一个圆角矩形，宽25px、高14px，填充颜色#4856AF，无笔触。其他三个圆角矩形的属性除了位置和颜色不同，其他均相同，复制后通过鼠标拖动使高度协调，填充颜色分别为 #11ABB7 、#F09C00、 #7BC500。用文字工具分别输入“1”、“2”、“3”、“4”，文字字体Arial Black、大小12px、白色，调整位置与圆角矩形协调，将其各自组合，效果如图2-50所示。锁定内容链接1区层。
图2-50 内容链接1区完成后的效果
图2-49 内容链接1区的三个分隔条属性
（7）完善“产品链接”。取消产品链接层的锁定。
① 上下装饰条。绘制宽120px、高12px的矩形，矩形圆度100，填充#04B4F4，无笔触。用刀子工具剖成两半，下半部分放在顶部做装饰，上半部分放在底部做装饰，如图2-51所示。
图2-51 装饰条圆角矩形制作过程
② 四个产品目录矩形。绘制宽210px、高50px的矩形，矩形圆度为30，填充颜色白色，笔触类型 1 像素柔化、颜色#CCCCCC、笔尖大小 1px。复制三个后，拖动矩形确定好顶部和底部的位置，再同时选中四个矩形，选择“修改”→“对齐”子菜单中的“水平居中”命令和“均分高度”命令，四个白色的目录型圆角矩形排列整齐，如图2-52所示。
图2-52 四个目录型圆角矩形排列
③ 产品目录完善。在产品目录矩形上输入目录文字“笔记本电脑”、“台式电脑”、“电脑周边”、“数码产品”，文字字体黑体、16px，填充颜色#EC6404，通过拖放调整好位置。
从“素材文件夹”中找到与产品目录主题相同的4幅图像，不用去掉背景，只需裁剪，打开图像，使用裁剪工具
选择需要的区域，选择完毕以后，输入回车后，不需要的区域被裁剪掉。将裁剪完毕后的图像复制至“content.png”，通过缩放、拖动等操作排列好图像。
绘制宽22px、高20px的椭圆，填充颜色#04B4F4，无笔触，在椭圆位置输上文字“go”，字体Arial Black、大小12px、白色，两者组合后，复制三个，通过拖放协调好位置。（注意：如果通过拖放还是觉得不能排列整齐，建议先确定顶部对象和底部对象的位置，再选择“修改”→“对齐”子菜单中的“垂直居中”、“水平居中”、“左对齐”、“右对齐”、“顶对齐”、“底对齐”、“均分高度”、“均分宽度”等命令，也可通过修改工具栏的相关工具完成）。最后锁定产品链接区。
（8）完善“内容链接2区”。取消“内容链接2区”层的锁定。需绘制以下两个图形，如图2-53所示，都有文字、直线、带箭头的矩形，文字黑体、16px、填充颜色#008DE8、无笔触，直线笔触类型柔化线段、笔尖大小 6px、颜色#008DE8，左边和右边宽度不相同。带箭头的矩形宽16px、高16px、圆度40、填充#008DE8、无笔触，箭头由三根直线绘制拼接而成，笔触类型1像素柔化、笔尖大小1px、白色，调整好位置后组合。锁定“内容链接2区”层。
图2-53 内容链接2区需要完善的内容
（9）分别导出四个区域的图像。
① 绘制切片。用工具箱中的切片工具
绘制4个切片，分别对应“广告条”、“产品链接”、“内容链接1区”、“内容链接2区”，如图2-54所示，4个切片的属性如图2-55所示。切片在网页层，可改变宽、高，可删除，也可锁定或隐藏。
图2-54 绘制的切片
图2-55 4个切片的属性
② 导出切片。选中“广告条”区域的切片，打开优化面板，选择 JPEG 较高品质，如图2-56 所示，选中切片，单击鼠标右键，在快捷菜单中选择“导出所选切片”命令，如图 2-57所示，在“导出”对话框中选择存储路径“ky-computer/images”，文件名为“banner.jpg”，“广告条”即成功导出，按此方法依次导出“产品链接”、“内容链接1区”、“内容链接2区”的图像，分别命名为“link-product.jpg”、“container1.jpg”、“containner2.jpg”。
图2-56 优化面板
图2-57 选择“导出所选切片”命令
重点提示：
切片是将图像分割成多个小区域，从而实现对大图像的无损分割。当包含此图像的网页被访问时，能实现边下载边呈现的显示效果，而不会出现页面长时间没有变化的情形。图像切片的优点如下。
（1）使用切片工具对图像进行切割后，各部分图像可以单独优化，以获得最佳的图像文件存储大小和质量，可以以不同的图像格式输出，利用不同图像格式的显示优点。
（2）如果图像的一部分需要经常更新，则替换需更新部分就行，而不必对整个图像进行更新。在网页中，创建对图像的链接通常比使用图像映射更容易一些。
（3）对图像进行切片操作可使得多个页面间公用某些小图像，不但可以减少网页存储空间，而且能够加快网页的下载速度。
5.友情链接（friendlink）区域制作
（1）新建文件，宽800px、高65px、画布白色，保存在“源文件夹”中，名为“friendlink.png”。
（2）绘制圆角矩形，属性如图2-58所示，填充#008DE8，笔触#0075C4，用刀子工具剖成两半（左宽右窄），左边部分属性保持不变，右边部分填充改为#F3F3F3，笔触类型为1像素实边、笔尖大小1、颜色#CCCCCC，位置移动至最左端，如图2-59所示。
图2-58 圆角矩形属性
图2-59 剖开圆角矩形
（3）绘制三根直线，两横、一竖，使图形封闭，直线笔触类型1像素实边、笔尖大小1、颜色#CCCCCC，如图2-60所示。
图2-60 绘制的三根直线的宽、高和位置示意效果
（4）输入文字“友情链接”，单击文字方向按钮
，设置为“垂直方向从左向右”，如图2-61所示，填充白色，属性设置如图2-62所示。
图2-61 更改文字方向
图2-62 “友情链接”文字属性
（5）导出图像。选择“文件”→“导出”命令，存储在“ky-computer/images”文件夹中，命名为“friendlink.gif”。
6.页脚（footer）区域制作
（1）新建文件，宽800px、高60px、画布白色，保存在“源文件夹”中，名为“footer.png”。
（2）从源文件夹中打开“header.png”，将Logo和顶部装饰条复制到“footer.png”中，隐藏Logo图象。装饰条从顶部移动到底部，其中，圆角矩形部分使用“修改”→“垂直翻转”命令将其翻转，宽度修改为210px、高度40px，此时圆角弧度太小需调整，如图2-63所示。放大视图，使用部分选定工具对圆角矩形圆弧控制点进行移动调整，直到得到合适的圆弧为止，调整前后的节点变化如图2-64所示。
图2-63 底部装饰条的圆角弧度调整前后对比
图2-64 圆弧控制点进行移动调整前后对比
（3）取消Logo对象隐藏，缩小Logo，公司中英文名改为白色，拖放在装饰条矩形上。
（4）导出图像。选择“文件”→“图像预览”命令，将其存储在“ky-computer/images”中，命名为“footer.jpg”。
7.次级页面广告条（banner-sub）区域制作
完成两种“次级页面广告条”效果，一种与首页中的广告条基本相同，背景填充为渐变，导出格式为JPG，另外一种背景填充橙色不渐变，有文字变化的动画效果，导出格式为GIF动画。后续操作中，更改首页“广告条”的图像，增加宽度、减少高度，完成第一种JPG格式图像，再通过修改第一种图像生成GIF动画。
重点提示：
GIF动画是一种图像格式，原理很简单：把几幅图像不停地轮流播放。它的优点是体积小，利于网络快速传输。在Fireworks动画中的每一幅图像都以一个单独的帧存在，这里的帧与组成电影胶片的单张底片非常相似，它们按照所表现主题的时间顺序来组织，但每个帧上的图像在处理上是独立的。导出时需选择导出类型“GIF动画”。
（1）新建文件，宽800px、高180px、画布白色，保存在“源文件夹”中，名为“banner-sub.png”。
（2）在源文件夹中打开“content.png”文件，打开层面板，隐藏网页层，取消广告条层的锁定，将广告条层的所有对象复制到“banner-sub.png”文件中。
（3）重新绘制橙色背景的圆角矩形，宽790px、高170px，垂直水平居中，填充渐变颜色不变，笔触不变，添加滤镜阴影，将阴影属性中的距离设置为1、黑色。再复制若干圆环，通过放大缩小、改变位置调整圆环。从“素材文件夹”中找到对应计算机产品的图像，使用魔术棒和橡皮擦工具去除产品图像的背景，复制到该文件中，缩小、调整好位置。更改“无忧服务”文字为“准确、及时、有效、周到”，文字大小稍微调小一些。效果如图2-65所示。
图2-65 次级页面广告条JPG格式效果
（4）导出JPG图像。选择“文件”→“图像预览”命令，将其存储在“ky-computer/images”中，命名为“banner-sub.jpg”。JPG格式的图像处理完成。
（5）制作GIF动画。橙色背景的圆角矩形填充修改成实心填充#FFAA00。打开帧面板，默认情况下只有一帧，7表示帧延时7/100秒，永久表示永久循环，可设置无循环或者循环的次数。单击帧面板的菜单选项
，选择“重制帧”命令，弹出“重制帧”对话框，设置数量5，选择“插入新帧在当前帧之前”，表示复制5个与第1帧相同的帧在第1帧前插入。选中每一帧，更改文字内容和文字效果，每帧具体的文字如图2-66所示。双击每一帧的帧延时按钮，修改每帧的延时值。如图 2-67 所示。在视图区域的底部单击播放按钮
，预览动画。
图2-66 次级页面广告条GIF动画格式效果
图2-67 通过帧面板制作动画过程
（6）导出GIF动画图像。选择“文件”→“图像预览”命令，在“图像预览”对话框中设置格式为GIF动画，将其导出存储在“ky-computer/images”文件夹中，命名为“banner-sub.gif”。
8.次级页面：链接区（link）、联系我们（contract）、内容区（tiltle-xxx）的制作
图2-68 次级页面的链接区、联系我们、内容区图像效果
仔细分析三个区域的图像，这些元素在首页都出现过，全是“Content.png”文件中的对象元素，另外绘制切片，导出它们完成图像。
（1）从“源文件夹”中打开“content.png”，删除网页层中的切片，隐藏“内容链接2区”的“维护保养”圆角矩形、“产品链接”的四个产品目录，（隐藏了的对象在导出切片时是不会被导出的）。重新绘制切片，如图2-69所示，五个切片的属性如图2-70所示，依次为链接区顶部（link-top）、链接区背景（link-top）、链接区底部（link-bottom）、内容标题（title-xxx）、联系我们（contract）。注意：链接区高度不固定，link-bg的高度也是不固定的，切片的高度只设置10像素，在网页制作过程中利用网页中背景图像的自动平铺功能。
图2-69 重新绘制切片后
图2-70 五个切片的属性
（2）导出切片图像，存储在“ky-computer/images”文件夹中，分别命名为“link-top.gif”、“link-bg.gif”、“link-bottom.gif”、“title-maitain.gif”、“contract.gif”。
（3）导出内容区其他标题图像，隐藏“内容标题（title-xxx）”切片，使用文字工具将“维护保养”更改为“新闻动态”，取消“内容标题（title-xxx）”切片的隐藏，选中该切片，并导出命名为“title-post.gif”。将标题文字分别再改为“产品服务”、“公司介绍”，导出切片时分别命名为“title-product.gif”“title-introduce.gif”。
9.其他一些小图像（more、arrow1、arrow2、arrow3）的制作
仔细分析图 2-71 所示的图像，都是一些形状简单、尺寸很小、颜色鲜艳但色彩单调的图像，在网站中放于文字内容区域，起着点缀美化的作用，让网站显得不枯燥，这种图像高度通常在15px以下，宽度在40px到10px像素之间，其上的文字为9px到12px，通常为GIF格式或 GIF 动画格式，做成 GIF 动画格式时会有简单的闪烁效果，在软件中制作时需要把视图放大到8倍以上，逐像素的调整效果。
图2-71 小图像
“more”小图像的难点在于，文字“more”的细线清晰效果。默认情况下，像素较小的文字晕化、不清晰，要达到细线清晰效果，需要修改文字的填充选项，如图 2-72 所示，将边缘选项消除锯齿值改为实边。箭头3的箭头是可以直接绘制的，在矩形工具组中有箭头工具
，可拖动其黄色的控制柄调整箭头的形态。箭头1的白色细线箭头是3根白色直线拼接而成。
图2-72 文字填充选项属性框
10.欢迎页面使用的图像
（1）新建文件，宽1200px、高800px、画布白色，保存在“源文件夹”中，名为“welcome.png”。
（2）绘制矩形，宽1200px、高800px，从上到下线性渐变填充#FD7704→#FFC801，覆盖整个画布。打开banner.png文件，将其中的圆环复制到“welcome.png”，复制若干个，放大或缩小，拖动分散到各处，组合所有圆环和矩形。
（3）打开header.png，将Logo复制到import.png，放大两倍，公司中英文名改成白色。
（4）输入公司理念：“科源，科学技术的源泉 用科技创造顾客价值”，回车分成三行，属性：文字方向垂直从右往左、字体为书体仿米芾体、36px、白色。
（5）从“素材文件夹”打开计算机产品的位图图像，使用魔术棒和橡皮擦工具擦除产品图像的背景，缩小后调整好位置。
（6）输入文字“进入首页”，设置字体属性黑色、黑体、24px，复制一个制作倒影效果，选择“修改”→“变形”→“垂直翻转”命令，设置文字为上到下线性渐变填充，渐变颜色均为黑色，渐变的不是颜色，而是“不透明度”，单击渐变色条左上方的按钮，弹出不透明度调节器，如图2-73所示，不透明度从100调到7，用同样的方法调整右上方的不透明度为50，倒影效果制作完成，效果如图2-74所示。
图2-73 渐变填充的颜色不透明度值设置
图2-74 欢迎页面效果图
（7）导出切片图像。绘制两个切片，如图2-75所示。导出切片将其存储在“ky-computer/images”文件夹中，分别命名为“welcome-bg.jpg”和“welcome-main.jpg”。
图2-75 用切片导出欢迎页面需要的两个图像
11.框架网页的图像制作
框架网页是指将浏览器分隔为多个区域，即在同一浏览器窗口中显示多个相互隔离的网页的结构，每个区域显示一个网页。如图2-76所示，浏览器窗口分成了上中下3个区域，中间区域又分成了左右2个区域，上区域为头部和导航条，下区域为页脚，中左区域为链接区，中右区域为正文内容。浏览器放大缩小时各分隔区域也随着放大缩小，换句话说，头部、导航条、页脚的背景图像宽度是可伸缩的，需制作适应于浏览器窗口宽度和高度变化时框架网页不变形效果所使用的图像。
图2-76 框架网页效果
（1）将“源文件夹”中的“header.png”打开，绘制三个切片，如图 2-77 所示，其中，左边切片宽270px，右边切片宽480px，中间切片宽5px，作为自动平铺的背景而实现网页效果的自动伸缩。导出切片存储在“ky-computer/images”文件夹中，分别命名为“header-left.jpg”、“header-bg.jpg”和“header-right.jpg”。
图2-77 头部（header）的切片应用于框架网页
（2）打开“源文件夹”中的“footer.png”，绘制两个切片，如图2-78所示，其中，左边切片宽230px，右边切片宽5px，作为自动平铺的背景而实现网页效果的自动伸缩。导出切片存储在“ky-computer/images”文件夹中，分别命名为“footer-left.jpg”和“footer-bg.jpg”。
图2-78 页脚（footer）的切片应用于框架网页
（3）打开“源文件夹”中的“navigator.png”，绘制两个切片，如图 2-79 所示，其中，左边切片的宽度为 780px，右边切片的宽度为 20px。导出切片存储在“ky-computer/images”文件夹中，分别命名为“navigator-left.jpg”、“navigator-right.jpg”。删除两个切片，重新绘制一个切片，如图2-80所示，切片的宽度为5px，作为自动平铺的背景而实现网页效果的自动伸缩，导出切片命名为“navigator-bg.jpg”。
图2-80 页脚（footer）的切片应用于框架网页
图2-79 页脚（footer）的切片应用于框架网页
2.3.4 依据网站功能设计，使用HTML技术制作网页
1.欢迎页面的制作
欢迎页面的效果如图2-74所示。
（1）用记事本程序打开“ky-computer”文件夹中的“default.htm”文件，显示在建立目录和文件时已输入的网页代码。
（2）在欢迎页面添加进入和离开时的圆形收缩（Transition=2）和圆形放射（Transition=3）的过渡特效。在网页<head>部分添加如下代码。
<meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0，Transition=2)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3.0，Transition=3)">
（3）加入背景图像“welcome-bg.jpg”，修改<body>部分的代码如下，直接保存网页，通过IE浏览器查看网页，显示背景图像在网页中自动平铺了。
<body background="images/welcome-bg.jpg">
</body>
重点提示：
background="images/welcome-bg.jpg"是<body>的标记的属性，属性值是要显示的背景图像的路径和文件名，图像是被网页文档调用的，图像不是网页的一部分，而是独立的文档，使用URL来表示对其的调用，“images/welcome-bg.jpg”就是URL，使用的是相对地址（相对于当前网页的地址）表示方法，背景图像相对于“default.htm”存储于“images文件夹”中。相对地址更方便管理，当网站位置移动或将网站复制到其他位置时，图像的相对的位置关系没有变化，网页图像才能正常显示。相对地址和绝对地址的概念请参见HTML技术。
（4）加入欢迎主图像“welcome-main.jpg”，修改<body>部分的代码如下，保存网页后，通过IE浏览器查看欢迎页面效果，如图2-81所示。
图2-81 加上欢迎主图像后的欢迎页面效果
<body background="images/welcome-bg.jpg">
<img src="images/welcome-main.jpg" alt="欢迎">
</body>
重点提示：
没有给图像指定宽度和高度，用其默认的图像大小显示，如果强制改变图像的宽和高，图像反而会变得不清晰。alt属性用于在进入浏览器后当图像无法显示时在图像位置显示的文字。
（5）欢迎页面中的主图像位置水平居左对齐了，不够美观。设置主图像居中，代码如下。
<body background="images/welcome-bg.jpg">
<div align="center"><img src="images/welcome-main.jpg" alt="欢迎"></div>
</body>
重点提示：
图像的<img>标记也有align属性，为什么不用呢？<img>标记中的align属性设置图像与旁边对象之间的对齐方式，而图像的布局设置方法有：<p align= left/right/center><img src=URL></p>、<div align= left/right/center><img src=URL></div>、<center><img src=URL></center>。注：只有专门的<center>标记，没有left、right标记。
（6）设置主图像进入首页的超链接，链接到“index.htm”，加入代码如下，通过IE浏览器观看网页，单击图像确定链接到“index.htm”页面，如图2-82所示。
图2-82 欢迎主图像设置超链接后的效果
<body background="images/welcome-bg.jpg">
<div align="center">
<a href="index.htm"><img src="images/welcome-main.jpg" alt="欢迎"></a>
</div>
</body>
重点提示：
href="index.htm"是<a>标记的属性，属性值是要链接的 URL，这里使用的是相对地址，“index.htm”是相对于“default.htm”网页的地址，在同一个文件夹中。网站中的网页要链接自身网站内部的资源都使用相对地址，要链接外部资源（比如要链接到太平洋电脑网中的一个网页）就使用 http://desktops.pconline.com.cn/testing/1002/2051840.html 这样的完整地址，称为绝对地址。
（7）设置超链接后的欢迎页面中图像有蓝色的边，影响了美观效果，图像加入网页后默认有2px的边，在未给图像设置超链接时图像的边是透明的，在设置超链接时图像的边则是呈蓝色的，将图像的边框设置为0去除蓝边，修改代码如下。
<body background="images/welcome-bg.jpg">
<div align="center">
<a href="index.htm"><img src="images/welcome-main.jpg" alt="欢迎" border="0"></a>
</div>
</body>
（8）添加背景音乐，将“素材文件夹”中的准备的音乐文件复制到 images 文件夹中，修改代码如下，欢迎页面完成。
<body background="images/welcome-bg.jpg">
<bgsound src="images/welcome.mp3">
<div align="center">
<a href="index.htm"><img src="images/welcome-main.jpg" alt="欢迎" border="0"></a>
</div>
</body>
重点提示：
常用多媒体格式有3种。
（1）声音格式：有 WAV、MP3、MIDI、WMA、RA、AU 等格式，它们是以不同的方式模拟声音，经抽样、量化和编码后得到不同的格式，都由表示声音强弱的数据序列组成。
（2）视频格式：可分为适合本地播放的本地影像视频（如 AVI、MOV、MPEG 等）和适合在网络中播放的网络流媒体影像视频（RM、MOV、ASF、FLV等）两大类。后者在播放的稳定性和播放画面质量上可能没有前者优秀，但网络流媒体（声音、动画、视频等）的高速传播使之被广泛应用于视频点播、网络演示、远程教育、网络视频广告等互联网信息服务领域。
（3）动画格式：制作动画的软件有很多，在网站中最常用的动画是GIF动画和Flash动画，动画格式和视频格式之间可以进行转换和压缩。
2.首页制作
（1）首页排版分析。内容的排版需要使用表格，8个区域、6个表格，表格的顺序以及宽和高的设置如图 2-83 所示。图示只是为了说明各表格中单元格的宽和高及合并情况；表格边框粗细都为0，表格与表格之间没有间隙，在网页中是紧挨在一起。
图2-83 首页的表格排版
（2）用记事本程序打开“ky-computer”文件夹中的“index.htm”文件。不改变<head>部分的代码，显示内容都加入<body>部分中。
（3）设置首页的背景与文字大小，背景颜色为#006699，左右上下边距为0，文字字体为2号字（12px）。代码如下。其中<basefont>设置基准字体，表示在该标记之后的文字都是以2号字为基准。<!--注释文字-->表示对HTML代码的注释，不会在网页中显示。
<body bgcolor="#006699" leftmargin="0"topmargin="0">
<basefont size=2><!--基准字体大小2号字-->
</body>
（4）制作header表格。
① 表格水平居中、背景为白色，代码如下，网页保存后的效果如图2-84所示。其中表格的边框粗细为1，目的是能确定各单元格的位置，当整个表格设置完成后，再将表格粗细改为0。
图2-84 header表格初步形态
<body bgcolor="#006699" leftmargin="0"topmargin="0">
<basefont size=2><!--基准字体大小2号字-->
<!--header表格-->
<table width="800" height="85" border="1" align="center" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF">
<tr>
<td width="530" height="30">1</td>
<td width="270" height="30">1</td>
</tr>
<tr>
<td width="530" height="55">1</td>
<td width="270" height="55">1</td>
</tr>
</table>
</body>
重点提示：
如果不将单元格边距（cellpadding）和间距（cellspacing）设置为0，要列入表格总的宽和高的计算，表格宽=所有单元格的宽+所有单元格的边距+所有单元格的间距+所有单元格的边框+表格的边框，高度的算法与宽度一样。
② 设置header表格背景图像为“header.jpg”，加入白色的“加入收藏”、“设为主页”、“特别公告”文本，去掉定位文字“1”换成“ ”(空格)，代码如下，效果如图2-85所示。
图2-85 header表格
<body bgcolor="#006699" leftmargin="0"topmargin="0">
<basefont size=2><!--基准字体大小2号字-->
<!--header表格-->
<table width="800" height="85" border="1" align="center" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF" background="images/header.jpg">
<tr>
<td width="530" height="30"> </td>
<td width="270" height="30">
<font color="#ffffff">加入收藏</font>
<font color="#ffffff">设为主页</font>
<font color="#ffffff">特别公告</font>
</td>
</tr>
<tr>
<td width="530" height="55"> </td>
<td width="270" height="55"> </td>
</tr>
</table>
</body>
重点提示：
“ ”；表示空格转义符，占半个汉字宽、1个英文字符宽。HTML源文件中的换行、回车符和多个连续半角空格在显示中是无效的，多个连续空格只显示一个。换行、分段都有专有标记，空格有转义符。
③ 分别给“加入收藏”、“设为主页”、“特别公告”设置特效和超链接，表格边框设置为0，代码如下。
<body bgcolor="#006699" leftmargin="0"topmargin="0">
<basefont size=2><!--基准字体大小2号字-->
<!--header表格-->
<table width="800" height="85" border="0" align="center" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF" background="images/header.jpg">
<tr>
<td width="530" height="30"> </td>
<td width="270" height="30">
<a href="#" onclick="javascript:window.external.addFavorite
('http://keyuan.hkk.hk'，'科源信息技术有限公司');">
<font color="#ffffff">加入收藏</font></a>
<a href=# onClick="this.style.behavior='url(#default#homepage)';
this.setHomePage('keyuan.hkk.hk');">
<font color="#ffffff">设为主页</font></a>
<a href="post/post-special.htm">
<font color="#ffffff">特别公告</font></a>
</td>
</tr>
<tr>
<td width="530" height="55"> </td>
<td width="270" height="55"> </td>
</tr>
</table>
</body>
重点提示：
“加入收藏”和“设为主页”的链接地址为“#”（表示该网页），目的是该文字看起像超链接、鼠标变手形、以方便单击，起作用的是“onclick”赋予的Javascript代码，“onclick”表示鼠标单击事件，当鼠标单击时就会调用 Javascript代码从而调用浏览器对象的方法和属性，进而实现加入收藏和设为主页的功能。加入收藏使用的方法的两个参数为'http://keyuan.hkk.hk'和'科源信息技术有限公司'，分别表示添加到收藏夹的网址和名称，这两个参数可修改。设为主页使用的是属性，参数'keyuan.hkk.hk'表示设置为主页的网址。
<font>标记嵌套在<a>标记之内才能实现超链接的文字为<font>标记指定的颜色，反之超链接文字为默认的蓝色，不美观。在<a></a>标记内除了链接文字不要添加多余的空格，否则会引起超链接的下画线超出文字。
（5）制作 navigator 表格，代码加在 header 表格之后。表格的背景图像为导航条图像“navigator.jpg”；“在线咨询”链接能弹出QQ临时对话框，与设置的QQ号“1299498043”进行QQ在线交流。在每个单元格中加入align="center"，使每个导航栏目的文字居中。
<!--navigator表格-->
<table width="800" height="35" border="0" align="center" cellpadding="0" cellspacing="0"
background="images/navigator.jpg" bgcolor="#FFFFFF">
<tr>
<td width="133" align="center">
<a href="index.htm"><font color="#ffcc66">首 页</font></a>
</td>
<td width="133" align="center">
<a href="introduce.htm"><font color="#ffffff">公司介绍</font></a>
</td>
<td width="133" align="center">
<a href="post.htm"><font color="#ffffff">新闻动态</font></a>
</td>
<td width="133" align="center">
<a href="product.htm"><font color="#ffffff">产品服务</font></a>
</td>
<td width="133" align="center">
<a href="maitain.htm"><font color="#ffffff">维护保养</font></a>
</td>
<td width="135" align="center">
<a href="tencent://message/?uin=1299498043&Site=keyuan.hkk.hk&Menu=yes">
<font color="#ffffff">在线咨询</font></a>
</td>
</tr>
</table>
（6）制作container1表格。
① container1表格代码加在navigator表格之后，效果如图2-86所示。
图2-86 container1表格
<!--container1表格-->
<table width="800" height="320" border="1" align="center" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF">
<tr>
<td width="545" height="210"> </td>
<td width="255" height="320" rowspan="2" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="545" height="110"> </td>
</tr>
</table>
② 将container1表格的边框设置为0。在container1表格中加入图像：第一行第一列的单元格插入广告条图像“banner.jpg”，设置链接“product.htm”；设置第二行第一列的单元格的背景图像为“内容链接 1 区”图像“container1.jpg”；将第二列的第一和第二行合并，并在合并后的单元格插入产品链接图像“link-product.jpg”，设置图像链接到“product.htm”，代码如下。
<!--container1表格-->
<table width="800" height="320" border="0" align="center" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF">
<tr>
<td width="545" height="210">
<a href="product.htm"><img src="images/banner.jpg" alt="广告" border="0"></a>
</td>
<td width="255" height="320" rowspan="2" bgcolor="#FFFFFF">
<a href="product.htm"><img src="images/link-product.jpg" alt="产品链接" border="0"></a>
</td>
</tr>
<tr>
<td width="545" height="110" background="images/container1.jpg">
<!--在这个单元格中将插入一个表格-->
</td>
</tr>
</table>
重点提示：
在单元格中插入图像、单元格背景图像、表格背景图像的区别在于在单元格中插入图像后该图像的上方不能再加入文字、其他图像等网页元素，而表格或单元格设置了背景图像后，表格或单元格中仍然能再加入各种网页元素。
③ 表格嵌套。在“内容链接1区”所在单元格加入表格，加入这个表格的目的是将动态新闻链接分成四行两列，行列间距合适，两列对齐更美观。代码如下，表格边框先设置为1时，明确行列的宽和高，然后再将表格边框设为0，效果如图2-87所示。
<td width="545" height="110" background="images/container1.jpg">
<!--在链接1区单元格中插入一个表格，网页更美观-->
<table width="545" height="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="25"> </td>
<td width="360" height="25"><a href="post/2006-2-10.htm"><font color="#000000">科源祝各位新
老客户新年快乐，合家欢乐!</font></a>/td>
<td width="145" height="25">2006-02-10</td>
</tr>
<tr>
<td width="40" height="25"> </td>
<td width="360" height="25"><a href="post/2006-2-3.htm"><font color="#000000">科源服务维修承
诺</font></a></td>
<td width="145" height="25">2006-02-03</td>
</tr>
<tr>
<td width="40" height="25"> </td>
<td width="360" height="25"><a href="post/2006-2-1.htm"><font color="#000000">科源网站开通，
专业技术团队为您服务！</font></a></td>
<td width="145" height="25">2006-02-01</td>
</tr>
<tr>
<td width="40" height="25"> </td>
<td width="360" height="25"><a href="post/2006-1-31.htm"><font color="#000000">科源人才招聘
公告</font></a></td>
<td width="145" height="25">2006-01-31</td>
</tr>
<tr>
<td width="40" height="10"></td>
<td width="360" height="10"></td>
<td width="145" height="10"></td>
</tr>
</table>
</td>
图2-87 嵌套表格边框设置的对比效果
重点提示：
为什么要在单元格中插入的表格中加入动态新闻链接？试试不用表格的效果，进行对比。
第1种：使用换行，效果如图2-88所示。
图2-88 加入换行的文字效果
<td width="545" height="110" background="images/container1.jpg">
科源祝各位新老客户新年快乐，合家欢乐！<br>
科源服务维修承诺<br>
科源网站开通，专业技术团队为您服务!<br>
科源人才招聘公告<br>
</td>
第2种：使用分段，效果如图2-89所示。
<td width="545" height="110" background="images/container1.jpg">
<p>科源祝各位新老客户新年快乐，合家欢乐！</p>
<p>科源服务维修承诺</p>
<p>科源网站开通，专业技术团队为您服务!</p>
<p>科源人才招聘公告</p>
</td>
对比结果：换行与分段之间的间距无法控制，换行间距太小，分段间距太大。另外，如果不使用表格排版，左边使用空格使文本缩进，右边的日期也要使用空格分开，但很难对齐，用表格对齐就比较容易了。
（7）container2表格。在container1表格的后面加入container2表格，代码如下。
<!--container2表格-->
<table width="800" height="180" border="0" align="center" cellpadding="0" cellspacing="0"
background="images/container2.jpg" bgcolor="#FFFFFF">
<tr>
<td width="30" height="40"> </td>
<td width="500" height="40"align="right">
<a href="maitain.htm"><img src="images/more.gif" alt="更多" border="0"></a>
</td>
<td width="30" height="40"> </td>
<td width="225" height="40" align="right">
<a href="introduce.htm"><img src="images/more.gif" alt="更多" border="0"></a>
</td>
<td width="15" height="40" align="right"> </td>
</tr>
<tr>
<td width="30" height="20"> </td>
<td width="500" height="20"><a href="maitain/main.htm"><font color="#000000">笔记本电脑维
护手册——液晶显示屏篇</font></a></td>
<td width="30" height="20"> </td>
<td width="235">地 址:科源市高新区高新大道88号</td>
<td width="15" height="20"> </td>
</tr>
<tr>
<td width="30" height="20"> </td>
<td width="500" height="20"><a href="maitain/battery.htm"><font color="#000000">笔记本电脑
维护手册——电池问题篇</font></a></td>
<td width="30" height="20"> </td>
<td width="235">邮 编:888888</td>
<td width="15" height="20"> </td>
</tr>
<tr>
<td width="30" height="20"> </td>
<td width="500" height="20"><a href="maitain/crust.htm"><font color="#000000">笔记本电脑维
护手册——外壳篇</font></a></td>
<td width="30" height="20"> </td>
<td width="235">联系人:黄经理</td>
<td width="15" height="20"> </td>
</tr>
<tr>
<td width="30" height="20"> </td>
<td width="500" height="20"><a href="maitain/mouse.htm"><font color="#000000">笔记本电脑
维护手册——鼠标键盘篇</font></a></td>
<td width="30" height="20"> </td>
<td width="235">电 话:088-8888880</td>
<td width="15" height="20"> </td>
</tr>
<tr>
<td width="30" height="20"> </td>
<td width="500" height="20"><a href="maitain/cdrom.htm"><font color="#000000">笔记本电脑
维护手册——光驱篇</font></a></td>
<td width="30" height="20"> </td>
<td width="235">传 真:088-88888888</td>
<td width="15" height="20"> </td>
</tr>
<tr>
<td width="30" height="20"> </td>
<td width="500" height="20"><a href="maitain/hardd.htm"><font color="#000000">笔记本电脑维
护手册——硬盘篇</font></a></td>
<td width="30" height="20"> </td>
<td width="235"> 邮 箱 :<a href="mailto:keyuan94@126.com"><font
color="#000000"> keyuan94@126.com</font></a></td>
<td width="15" height="20"> </td>
</tr>
<tr>
<td width="30" height="20"> </td>
<td width="500" height="20"><a href="maitain/other.htm"><font color="#000000">笔记本电脑维
护手册——其他注意事项篇</font></a></td>
<td width="30" height="20"> </td>
<td width="235">业务QQ：1299498043</td>
<td width="15" height="20"> </td>
</tr>
</table>
（8）friendlink表格。在container2表格后面加入friendlink表格，代码如下。友情链接使用的图像需要到链接网站下载其Logo，用Fireworks缩小Logo图像的宽高，锁定纵横比，宽度为122px以下，高度为65像素以下，保持图像清晰。
<!--friendlink表格-->
<table width="800" height="65" border="0" align="center" cellpadding="0" cellspacing="0"
background="images/friendlink.gif" bgcolor="#FFFFFF">
<tr>
<td width="38"> </td>
<td width="122" align="center"><a href="hp://twww.lenovo.com.cn/" target="_blank">
<img src="images/lenovo-Logo.jpg" border="0" alt="友情链接-联想"></a>
</td>
<td width="122" align="center"><a href="http://www.pconline.com.cn/" target="_blank">
<img src="images/pconline-Logo.jpg" border="0" alt="友情链接-太平洋电脑"></a>
</td>
<td width="122" align="center"><a href="http://www.zol.com.cn/" target="_blank">
<img src="images/zol-Logo.jpg" border="0" alt="友情链接-中关村在线"></a>
</td>
<td width="122" align="center"><a href="http://www.pcpop.com/" target="_blank">
<img src="images/pcpop-Logo.gif" border="0" alt="友情链接-泡泡网"></a>
</td>
<td width="122" align="center"><a href="http://www.google.cn/" target="_blank">
<img src="images/google-Logo.gif" border="0" alt="友情链接-谷歌"></a>
</td>
<td width="122" align="center"><a href="http://www.baidu.com/" target="_blank">
<img src="images/baidu-Logo.gif" border="0" alt="友情链接-百度"></a>
</td>
<td width="30"> </td>
</tr>
</table>
重点提示：
<a>标记的 target 属性表示打开窗口的方式。其中，_blank 将链接的页面在打开的新的浏览器窗口中显示；_self（默认值）将链接的页面显示在当前窗口中。
（9）footer表格。在friendlink表格的后面加入footer表格，代码如下。
<!--footer表格-->
<table width="800" height="60" border="0" align="center" cellpadding="0" cellspacing="0"
background="images/footer.jpg" bgcolor="#FFFFFF">
<tr>
<td width="280"> </td>
<td width="520"><font color="#666666">CopyRight 2006-2010 科源信息技术有限公司版
权所有<br>技术支持:<a href="http://www.hao3721.com.cn" target="_blank"><font color="#666666">好3721信息服 务 公 司 </font></a> <a href= "mailto:zxnetwork@126.com"><font color="#666666">zxnetwork@126.com</font></a> 088-66666666
</td>
</tr>
</table>
3.次级页面分析
（1）分析次级页面的排版布局。表格 header、navigator、freindlink、footer 重用首页中的代码，其他区域代码重建，如图2-90所示。其中，link（链接表格）针对产品介绍、新闻动态、产品服务、维护保养栏目使用不同的链接形式，不仅在内容上不同，在技术上也不同，会使用不同的知识点。
图2-90 次级页面的表格排版
（2）新建记事本程序文件，保存为sub.txt，完成次级页面能复用的banner-sub表格和main表格，在sub.txt中输入如下代码。
<!--banner-sub表格-->
<table width="800" height="180" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/banner-sub.gif" alt="广告"></td>
</tr>
</table>
<!--main表格-->
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="255" valign="top">
<!--link(链接)表格插入区域，在不同栏目的网页此区的设置不同-->
<!--contact(联系我们)表格插入区域-->
</td>
<td width="545" align="center" valign="top">
<!--content(内容)表格插入区域-->
</td>
</tr>
</table>
（3）进一步完善main表格，代码如下。
<!--main表格-->
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="255" valign="top">
<!--link(链接)表格的插入区域，不同栏目的网页此区域的设置不同-->
<!--contact(联系我们)表格-->
<table width="255" height="180" border="0" cellpadding="0" cellspacing="0"
background="images/contract.gif">
<tr>
<td width="10" height="20"> </td>
<td width="245" height="20"> </td>
</tr>
<tr>
<td width="10" height="20"> </td>
<td width="245" height="20"> </td>
</tr>
<tr>
<td width="10" height="20"> </td>
<td width="245" height="20">地 址:科源市高新区高新大道88号</td>
</tr>
<tr>
<td width="10" height="20"> </td>
<td width="245" height="20">邮 编:888888</td>
</tr>
<tr>
<td width="10" height="20"> </td>
<td width="245" height="20">联系人:黄经理</td>
</tr>
<tr>
<td width="10" height="20"> </td>
<td width="245" height="20">电 话:088-88888888</td>
</tr>
<tr>
<td width="10" height="20"> </td>
<td width="245" height="20">传 真:088-88888888</td>
</tr>
<tr>
<td width="10" height="20"> </td>
<td width="245"height="20"> 邮 箱:<a href="mailto:keyuan94@126.com">
<font color="#000000">keyuan94@126.com</font></a>
</td>
</tr>
<tr>
<td width="10" height="20"> </td>
<td width="245" height="20">业务QQ:1299498043</td>
</tr>
</table>
</td>
<td width="545" align="center" valign="top">
<!--content(内容)表格-->
<table width="530" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40">
<img src="images/title-xxx.gif" alt="内容标题"><!--使用内容标题图像-->
</td>
</tr>
<tr>
<td align="left" valign="top">
<!--各栏目内容区，不同的栏目不同的显示方式-->
</td>
</tr>
</table>
</td>
</tr>
</table>
4.公司介绍页面
该公司介绍页面只有一页，没有其他相关内容链接，在 main 表格的 link（链接）区使用产品链接“link-product.jpg”图像，内容标题使用“title-introduce.gif”图像，内容区为公司概况、理念、组织机构和业务流程。
（1）用记事本程序打开“ky-computer”文件夹中的“introduce.htm”文件，再用记事本程序打开“ky-computer”文件夹中的“index.htm”文件，将index文件中的<body>标记、<basefont>标记、header表格、navigator表格、friedlink表格、footer表格的内容复制到“introduce.htm”文件的<body>部分。
（2）打开“sub.txt”文件，复制其banner-sub表格和main表格到“introduce.htm”文件的navigator和friedlink两个表格之间。
（3）在main表格中找到<img src="images/title-xxx.gif"><!--使用内容标题图像-->，将图像文件名修改为“title-introduce.gif”。
（4）插入产品链接图像，在main表格中找到<!—link（链接）表格的插入区域，不同栏目的网页此区域的设置不同-->，输入如下代码。
<a href="product.htm"><img src="images/link-product.jpg" border="0" alt="产品链接"></a>
（5）在内容区表格中输入公司介绍内容，在 content 表格中找到<!--各栏目内容区域，不同的栏目不同的显示方式-->，输入代码，公司介绍页面完成。
5.新闻动态系列页面
新闻动态主页面是“post.htm”，在main表格的链接区是新闻内容的相关链接，相关链接页面存储在post文件夹中，内容标题使用“title-post.gif”图像，内容区为相关的新闻公告内容。链接区链接的新闻标题太多，链接区过长影响美观，采用从下往上方式滚动、鼠标停在链接区上滚动停止、鼠标离开滚动区滚动继续的特效。链接区使用表格，表格分为三行，第一行中插入图像“link-top.gif”，第二行单元格设置背景图像为“link-bg.gif”自动平铺，第三行中插入图像“link-bottom.gif”，在第二行插入一个表格（嵌套的第三层表格），插入新闻标题，设置新闻内容的超链接，对这个表格设置从下往上滚动的特效。
（1）制作新闻动态主页面（post.htm），制作步骤与公司介绍页的（1）、（2）、（3）步相同。链接区不同， 在main表格中找到<!—link（链接）表格的插入区域，不同栏目的网页此区域的设置不同-->，输入如下代码。
<!--link(链接)表格-->
<table width="255" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20"><img src="images/link-top.gif" alt="链接区装饰顶部"></td>
</tr>
<tr>
<td height="300" background="images/link-bg.gif">
<marquee direction="up" scrollamount="3" height="300" width="255"
onMouseOver="javascript:this.stop()" onMouseOut="javascript:this.start()">
<table width="245"border="0"cellpadding="0"cellspacing="0">
<tr>
<td width="35" height="34" align="center">
<img src="images/arrow2.gif" alt="装饰小图标"></td>
<td width="210" height="34">
<a href="post/2006-2-10.htm">
<font color="#000000">科源祝各位新老客户新年快乐，合家欢乐!</font>
</a>
</td>
</tr>
……………………(其他若干行标闻标题链接，省略)
</table>
</marquee>
</td>
</tr>
<tr>
<td height="25"><img src="images/link-bottom.gif" alt="链接区装饰底部"></td>
</tr>
</table>
在内容区表格加入公司最新新闻，在 content 表格中找到<!--各栏目内容区域，不同的栏目不同的显示方式-->，输入表格代码，宽530像素，高570像素，3行2列，左列是图像，右列是新闻简述。其中，新闻图像是在新闻中用到的图像，从“素材文件夹”打开处理后存储在“post/images”文件夹中。
（2）完成新闻相关内容链接页面。
① 将“post.htm”另存为“2006-2-10.htm”（链接区的新闻标题链接中的一个文件名），路径为“ky-computer\post”。
② 存储在“post”目录中的新闻内容网页的图像和链接的相对地址都发生了变化，需进行修改，将图像地址“images/”修改为“../images/”（在相对路径中，..表示上一级目录），可通过记事本程序的替换功能完成。导航条的栏目链接地址加上“../”，链接区的链接地址删除“post/”。删除content表格中的公司最新新闻表格。
③ 修改完成的网页另存为多个新闻网页，路径为“ky-computer\post”，文件名为链接区的新闻标题链接中的所有文件名。修改所有新闻内容网页的新闻内容。
6.产品服务系列页面
产品服务系列页面采用浮动框架技术实现，页面的效果图如文前彩页所示。产品服务主页面是“product.htm”，在main表格的链接区是产品服务内容的相关链接，相关链接页面存储在product文件夹中，内容标题使用“title-product.gif”图像，内容区为相关的产品服务详细内容。链接区使用链接表格，与新闻动态页面的链接表格类似，不同的是产品服务主页面没有从下往上滚动的特效，链接需要添加对浮动框架的目标链接。内容区采用浮动框架方式显示具有产品详细内容网页。
（1）制作产品服务主页面（product.htm），制作步骤与公司介绍页的（1）、（2）、（3）步相同。链接区不同，在main表格中找到<!--link(链接)表格的插入区域，不同栏目的网页此区域的设置不同-->，输入如下代码。其中，target="product-frame"，表示链接目标是下一步要插入的浮动框架。
<!--link(链接)表格-->
<table width="255" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20"><img src="images/link-top.gif" alt="链接区装饰顶部"></td>
</tr>
<tr>
<td background="images/link-bg.gif">
<table width="255" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45"height="20"align="center">
<img src="images/arrow3.gif" alt="装饰小图片">
</td>
<td width="210"height="20"><b>笔记本电脑</b></td>
</tr>
<tr>
<td width="45" height="20" align="center"> </td>
<td width="210"height="20">
<a href="product/lenovo-G.htm" target="product-frame">
<font color=”#000000”>lenpvo G 系列</font>
</a>
</td>
</tr>
<tr>
<td width="45" height="20" align="center"> </td>
<td width="210" height="20">
<a href="product/ideapad-Y.htm" target="product-frame">
<font color="#000000">ideapad Y 系列</font>
</a>
</td>
</tr>
……………………(其他若干行产品链接，省略) </td>
</table>
</tr>
<tr>
<td height="25">
<img src="images/link-bottom.gif"alt="链接区装饰底部"></td>
</tr>
</table>
在内容区表格中插入浮动框架。在 content 表格中找到<!--各栏目内容区域，不同的栏目不同的显示方式-->，输入如下代码。其中，src="product/main.htm"代码表示浮动框架中默认显示的网页，name="product-frame"为浮动框架名称作为链接的目标。
<iframe name="product-frame" frameborder="0" scrolling="auto" width="530" height="600"
src="product/main.htm"></iframe>
重点提示：
使用浮动框架与不使用浮动框架相比其优点在于链接的页面是从浮动框架区域打开，而不是从浏览器窗口重新打开一个网页，节约编写代码的时间，运行时下载速度较快。
（2）完成产品服务内容链接的相关页面。
每个页面只包含宽530px、高570px、3行2列的表格。用记事本程序新建网页，路径为“ky-computer\product”，文件名为“main.htm”、“ideapad-S.htm”等产品服务主页面链接区中的链接文件名。产品服务的相关网页在浮动框架中显示。
其中，网页中的产品图像需从“素材文件夹”取出进行处理后存储在“product /images”文件夹中。另外，“product-bg.gif”是产品表格的背景，作用是虚线分隔线效果，该图像宽530px、高570px，白色背景，在垂直方向190px和380px处各绘制一条宽530px直线作为分隔，笔触选项：实边破折线、1px、#C4C4C4，高级选项中的虚线的开关都设置为5。
7.维护保养系列页面
维护保养系列网页使用框架网页技术实现，效果如图2-76所示。
重点提示：
框架网页将浏览器拆分成若干个窗口，拆分方式由主框架网页决写，在每一个窗口各链接一个普通网页；浮动框架是在普通网页中作为一个网页元素方式插入网页的某一个区域。它们之间的共同点是大部分区域可固定，某一区域作为链接变化的区域，节约编写代码的时间，运行时下载速度较快。但是框架网页在排版时存在一定的缺陷和搜索引擎不识别框架的问题，现在框架网页用得越来越少了。
（1）用记事本程序打开“ky-computer”文件夹中的“maintain.htm”文件，删除<body></body>，输入如下代码。
<frameset rows="120，*，60" frameborder="no" framespacing="0" border="0">
<frame src="maitain/top.htm" scrolling="no" name="top">
<frameset cols="255，*" frameborder="no" framespacing="0" border="0">
<frame src="maitain/left.htm" scrolling="auto" name="left">
<frame src="maitain/main.htm" scrolling="auto" name="main">
</frameset>
<frame src="maitain/bottom.htm" scrolling="no" name="bottom">
</frameset>
重点提示：
rows="120，*，60" 表示先把浏览器窗口拆分为三行，第一行 120px，第三行 60px，浏览器剩余的高度属于第二行。cols="255，*" 表示将第二行拆分为两列，左边一列宽 255px，浏览器剩余的宽度属于第二列。
frameborder="no" framespacing="0" border="0" 表示将拆分浏览器窗口的边、空距都设置为0，让框架网页更美观。
scrolling="auto" 表示窗口中的网页超过窗口区域显示滚动条。scrolling="no"表示不管窗口中的网页是否超过区域都不显示滚动条，如果值为“yes”显示滚动条。
name="main" 表示拆分后的某一窗口的名称，当超链接的网页要在某一窗口显示，则设置<a>标记的taget属性的值为该窗口的名称。
（2）用记事本程序新建框架顶部窗口的网页，路径为“ky-computer\maintain”，文件名为“top.htm”，输入如下代码。其中，<head>部分省略，参照前面网页添加。注意：导航条区域超链接标记均设置了属性target="_top"，表示链接的网页在浏览器窗口除去框架后显示。
<body leftmargin="0" topmargin="0">
<basefont size="2">
<table width="100%"height="80" border="0"cellpadding="0"cellspacing="0">
<tr>
<td width="270" background="../images/header-left.jpg"></td>
<td background="../images/header-bg.jpg"> </td>
<td width="480" background="../images/header-right.jpg">
<table width="100%"height="80" border="0"cellpadding="0"cellspacing="0">
<tr>
<td width="200" height="25"> </td>
<td>
<a href="#" onclick="javascript:window.external.addFavorite
('http://keyuan.hkk.hk'，'科源信息技术有限公司');">
<font color="#ffffff">加入收藏</font></a>
<a href="#"onClick="this.style.behavior='url(#default#homepage)';
this.setHomePage('keyuan.hkk.hk');">
<font color="#ffffff">设为主页</font></a>
<a href="post/post-special.htm">
<font color="#ffffff">特别公告</font></a>
</td>
</tr>
<tr>
<td height="55" colspan="2"> </td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%"height="35" border="0"cellpadding="0"cellspacing="0">
<tr>
<td width="780" background="../images/navigator-left.jpg">
<table width="780"height="35" border="0"cellpadding="0"cellspacing="0">
<tr align="center">
<td width="130"><a href="../index.htm" target="_top">
<font color="#ffffff">首 页</font></a>
</td>
<td width="130"><a href="../introduce.htm" target="_top">
<font color="#ffffff">公司介绍</font></a>
</td>
<td width="130"><a href="../post.htm" target="_top">
<font color="#ffffff">新闻动态</font></a>
</td>
<td width="130"><a href="../product.htm" target="_top">
<font color="#ffffff">产品服务</font></a>
</td>
<td width="130"><a href="../maitain.htm" target="_top">
<font color="#FFCC66">维护保养</font></a>
</td>
<td width="130"><a href="tencent://message/?uin=1299498043&
Site= keyuan.hkk.hk&Menu=yes">
<font color="#ffffff">在线咨询</font></a>
</td>
</tr>
</table>
</td>
<td background="../images/navigator-bg.jpg"> </td>
<td width="20">
<img src="../images/navigator-right.jpg" alt="导航背景右图像">
</td>
</tr>
</table>
</body>
重点提示：
在“top.htm”网页中header表格宽度设置为100%，表示表格的宽度与浏览窗口的宽度一致，header 表格被分成三列，第一列宽 270px，恰好是 header-left.jpg 图像的宽度，第三列宽480px，恰好是header-righ.jpg图像的宽度，第二列没有设置宽度，header-bg.jpg自动平铺，第二列不设置宽度是为了与表格 100%的宽度配合，完成适应于浏览器窗口宽度变化时框架网页不变形效果。同样，导航条表格的宽度设置为100%，其倒数第二列也没有设置宽度。
（3）用记事本程序新建框架底部窗口的网页，路径为“ky-computer\maintain”，文件名为“bottom.htm”，输入如下代码。其中，<head>部分省略，参照前面网页添加。
<body leftmargin="0"topmargin="0">
<basefont size="2">
<table width="100%"height="60" border="0"cellpadding="0"cellspacing="0">
<tr>
<td width="230"background="../images/footer_left.jpg"> </td>
<td background="../images/footer_bg.jpg">CopyRight 2006-2012科源信息技术有限公司版
权所有<br>技术支持:<a href="http://www.hao3721.com.cn" target="_blank"><font color="#666666">好3721信息服 务 公 司 </font></a> <a href= "mailto:zxnetwork@126.com"><font color="#666666">zxnetwork@126.com</font></a> 088-66666666
<td>
</tr>
</table>
</body>
（4）用记事本程序新建框架左部窗口的网页，路径为“ky-computer\maintain”，文件名为“left.htm”，输入如下代码。其中，<head>部分省略，参照前面网页添加。注意：使用的链接表格、维护保养常识的标题名称设置的超链接都设置了属性target="main"，表示链接的网页在名main的框架窗口显示。
<body leftmargin="0" topmargin="0">
<basefont size="2">
<table width="255" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20"><img src="../images/link-top.gif" alt="链接区装饰顶部"></td>
</tr>
<tr>
<td height="300" background="../images/link-bg.gif">
<table width="255" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="35" height="34" align="center">
<img src="../images/arrow2.gif" alt="装饰小图片">
</td>
<td width="210" height="34">
<a href="main.htm"target="main">
<font color="#000000">笔记本电脑维护手册——液晶显示屏篇</font></a>
</td>
<td width="10" height="34"> </td>
</tr>
<tr>
……………………(还可以加入其他若干行维护保养链接，省略)
</table>
</td>
</tr>
<tr>
<td height="25"><img src="../images/link-bottom.gif" alt="链接区装饰底部"></td>
</tr>
</table>
</body>
（5）完成维护保养内容链接的相关页面。用记事本程序新建若干个网页，路径为“ky-computer\maintain”，文件名为“main.htm”等链接表格中的链接文件名，在相关链接网页输入代码完成内容的排版。
2.3.5 搭建测试环境，测试网站
很容易把测试看做一个没有技术含量的体力活，但是很多网站在交付后仍出现各种各样的问题，这就是在网站实现完成后没有进行全面的测试，需重视网站的测试，测试时需要细心、耐心、专心。
1.搭建测试环境
下载表2-2列出的访问者最常用的浏览器并安装。
表2-2 常用浏览器及使用人数比
2.测试网站
（1）链接测试：测试所有链接是否按指示的那样确实链接到了该链接的页面；测试所链接的页面是否存在；保证网站中没有孤立页面，所谓孤立页面是指没有链接指向的页面。
第1步：检查网站各栏目文件夹中的网页是否有无用的网页，如果有，则将之剪切至删除文件夹，最后统一删除，避免误删除。
第2步：检查根图像文件夹、各栏目文件夹中的图像文件夹是否有无用的图像，如果有，则将之剪切至删除文件夹，最后统一删除，避免误删除。
第3步：分别运行每一个网页，然后单击每个网页上的每一个超链接，检查是否出现无法显示网页、链接的内容不正确等信息。检查文件路径和文件名是否正确，检查页面是否输入内容时错误等，对存在的问题进行修改。
第4步：修改后再进行链接测试确认，检查每个网页的每一个超链接，直至完成。
（2）外观测试：运行网站检查每个网页的外观，检查整体界面效果、导航、图像、表格、文字、内容等。找到原因，将外观修改正确。
① 整体界面测试：整体界面是指整个网站的风格及页面结构，应该是统一的风格和模式。
② 导航测试：导航描述了用户在一个页面内操作的方式，保证不同的连接页面之间具有正确的导航外观。
③ 图像测试：要确保图像有明确的用途，图像或动画不要胡乱地堆在一起，以免浪费传输时间。图像存储容量要尽量地小，一般采用 JPG 或 GIF压缩，最好能使图片的大小减小到30KB以下，并且要能清楚地说明某件事情，或者能起到装饰美化作用，或者能链接到某个具体的页面。检查背景图像是否显示或溢出。
④ 表格测试：需要验证表格是否设置正确，如表格的间距、宽、高等。
⑤ 文字测试：验证所有页面字体的风格是否一致。验证文字回绕是否正确，不要因为使用图像而使窗口和段落排列错位或者出现孤行。背景颜色应该与字体颜色和前景颜色相搭配，相同栏目和类型的文字效果是否一致。
⑥ 浏览器标题栏：是否显示正确的标题内容。
⑦ 内容测试：检验网站所提供信息的正确性、准确性和相关性。
（3）兼容性测试
第1步：分别用不同的显示器的分辨率（1440×900、1280×1024、1280×800、1280×768、1024×768、800×600）运行每个网页，查看每一个页面的外观，发现外观异常的网页，修改正确。修改后的页面需用之前运行过的分辨率再检查直到都显示正确为止。
第2步：分别用各种浏览器运行每个网页，查看每一个页面的外观，发现外观异常的网页，进行修改。修改后的页面需用之前运行过的浏览器重新运行查看是否出现异常，如果有异常继续修改，直到以上四种浏览器都显示正常为止。
用火狐浏览器测试网页时发现文字大小改变了，首页中container2区的文字超出表格宽度，产品服务页面的浮动框架出现了水平滚动条，问题界面如图 2-91 所示。解决问题的方法是使用CSS（级联样式表）定义文字大小。
图2-91 用火狐浏览器测试网页时的问题界面
2.4 技能拓展
拓展1：搜索自己喜欢的网站，查看网站的Logo、宣传标语、布局、色彩、字体等设计，找出各网站的特点，总结网站设计方式。
拓展2：教师提供色彩图，练习在Fireworks软件中用HSB模式调出色彩图中的所有色彩块，并标识HSB色彩的数值。
拓展 3：分别用色彩块组合表示出各种词语：春、夏、秋、冬、酸、甜、苦、辣、欢乐+积极、忧伤+消沉、拉萨、江南、重庆、夏威夷、幼稚、成熟、古朴、现代、阳刚、阴柔。
拓展4：特殊文字格式的处理，如ax2+bx+c=0、a<b等。
拓展5：如何在网页加入Flash动画、音乐和视频？
拓展6：有一个很长的网页，是屏幕高度的3倍，如何在该网页的底部加一个超链接能返回顶部？
拓展7：地图热点如何使用？给欢迎页面“进入首页”处和首页的“产品链接”处设置地图热点。
拓展8：如何给网站制作其他更美观的GIF动画？
拓展9：如何使用Fireworks批量处理照片（例如批量缩小照片，批量压缩照片存储容量）？
拓展10：如何将比较暗的图像调得亮一些？
参考网站：
Firework视频教程：www.enet.com.cn/eschool/zhuanti/fireworks
Firework文字教程：school.gaoshou.net/3/7/index.html
HTML视频教程：www.dreamdu.com/xhtml/video
publish.it168.com/2008/0528/20080528017101.shtml
图像素材下载网站：模板王 www.mobanwang.com
懒人图库 www.lanrentuku.com
字体下载网站：字体下载大宝库font.knowsky.com
2.5 巩固训练
根据工作任务1巩固训练中完成的需求分析说明书，进行网站设计，实现和测试网站。要求：
（1）独立思考，设计和制作网站，需掌握的内容：网站设计，HTML网页开发技巧，能应用Fireworks设计网页图像。真正理解所运用到的知识和所遵循的工作过程，能够在反复的独立操作过程中记住这些工作流程和技能知识。疑难处咨询教师，让教师给予适当的指导。
（2）网站讲解与演示，学生完成以后用5分钟演示和讲解自己的网站，教师根据网站的讲解和演示提问，并对网站进行点评。
（3）上交作品时，包括设计说明书和三个文件夹：网站文件夹、源文件夹、素材文件夹。
2.6 评价与总结
2.6.1 综合评价
2.6.2 工作总结
要求：教师对学生完成工作进行评价后，学生根据评价反馈进行工作总结。
（1）在网站设计、制作、测试过程中学会了什么？
（2）个人能力有何提高？自己在哪些方面存在不足？如何改进？
