Dreamweaver+CS4+网页设计与制作指南 第16章

1、第16章公司网站制作案例本章案例以制作一个电力公司的网站和主导，系统讲解如何实现客户的需求，在整个过程中，按照“新建站点”|“制作模板”|“制作首页文件”|“制作子页文件”|“案例扩展分析”的流程，全面分析制作网站的过程。本章重要知识点：了解企业网站的制作流程掌握制作模板的流程掌握新建和修改CSS样式表的技巧熟悉走马灯的网页特效制作16.1策划构思思及设计计流程在正式制制作网站站之前，先要了了解客户户的需求求，网站站终归是是为了客客户的需需求而定定制，为为网站设设计一个个整体的的策划书书，这一一点至关关重要，很多人人可能会会忽略这这一点。16.1.1客户需求求在客户的的需求中中，已详详细说明明

2、了网站站的栏目目分配。16.1.2网站策划划根据客户户所提供供的网站站结构和和需求，策划将将网站的的栏目分分为“公公司简介介”、“电力动动态”、“用电电法规”、“业业务公开开”、“交流合合作”、“多种种产业”几类。整个页页面以淡淡雅为主主，主色色调定为为淡蓝绿绿色，突突出电力力安全、电力为为民的主主题。16.1.3网站结构构规划一般的企企业网站站会有一一个引导导页，可可以用图图片或动动画来制制作，但但是电力力行业的的网站，一般都都是直奔奔主题，避免太太多的繁繁杂环节节，主要要体现了了便民的的特色，该网站站就简单单地左右右分栏，清晰、简洁、明了，将网站站的内容容展示出出来，因因而在制制作时一一次

3、性通通过了客客户的验验收。16.1.4准备所需需素材在制作网网站之前前，先要要准备制制作网站站所需的的图片和和文字资资料，以以及制作作Banner中所使用用的素材材，包括括体现的的主题、文字、制作好好的图片片和动画画素材都都放在images下。16.2制作过程程为尊重客客户的意意见及所所有权，这里将将网站名名称和Logo用别的名名称代替替。本案案例将详详细讲解解制作电电力企业业网站中中，要注注意的问问题及要要掌握的的一些技技巧。16.2.1网站首页页设计首先在Photoshop中，使用用客户提提供的图图片及相相关参照照网址，设计出出网站的的首页图图片小样样。16.2.2将图片切切割为网网页启动

4、ImageReady程序，将将设计好好的首页页图片，依据网网页设计计布局切切割制作作成网页页，对于于图片的的分割，要尽量量控制图图片的大大小在10KB以内，在在保证图图片质量量的前提提下，尽尽量减少少切割数数量，在在图片导导出之前前，先要要进行优优化，这这是非常常必要的的操作，这样可可以大大大减小图图片的容容量。16.3建立站点点在使用分分割的图图片制作作网页之之前，首首先需要要建立一一个新的的站点，方便网网站文件件的操作作。16.3.1新建站点点新建站点点的具体体操作步步骤如下下：（1）选择菜菜单命令令“站点点”|“新建站点点”，弹弹出“站站点定义义为”对对话框，并切换换到“高高级”选选项卡

5、，在对话话框左侧侧分类下下面的列列表中“本地信信息”所所对应的的选项中中进行详详细设置置。（2）单击“确定”按钮，本例的的站点成成功建立立完成。16.3.2新建站点点文件夹夹在站点中中先创建建如下文文件夹，用来放放置相关关的文件件：images：用来放放置站点点中的所所有图片片。style：用来放放置站点点使用的的CSS样式表文文件。html：用来放放置站点点中的所所有HTML文件。flash：用来放放置站点点中的动动画文件件。temp：用来放放置站点点中的图图片及动动画源文文件。16.4创建CSS样式在制作首首页之前前，要根根据界面面的风格格创建相相应的CSS样式。首首先创建建基本的的标签样

6、样式，如如body、table、td、p、input以及链接接的基本本样式。16.5制作网站站首页在站点的的“文件件”面板板中，选选中文件件夹html，单击鼠鼠标右键键，新建建一个文文件，命命名为index.htm，再结合合CSS样式表的的使用，创建一一个与网网页效果果图相对对应的首首页文件件。16.5.1导入外部部样式表表（1）打开“文件”面板，双击index.htm名称，在在文档窗窗口中编编辑文件件。（2）在制作作之前先先要从外外部引入入CSS样式。（3）打开“CSS样式”面面板，并并在空白白处单击击鼠标右右键，在在弹出的的菜单中中选择“附加样样式表”命令；或单击击“附加加样式表表”按钮钮

7、，弹出出“链接接外部样样式表”对话框框。16.5.1导入外部部样式表表（4）单击“浏览”按钮，选择CSS样式文件件所有路路径，导导入CSS样式表文文件，并并选中“添加为为”之后后的“链链接”单单选按按钮。（5）单击“确定”按钮，即成功功在文件件中导入入了CSS样式表。16.5.2设置网页页标题首先设置置网页的的标题，在文档档头部输输入标题题的名称称。16.5.3设置页面面属性选择菜单单命令“修改”|“页面属性性”，弹弹出“页页面属性性”对话话框，从从中设置置跟踪图图像。设置跟踪踪图像，可以使使界面在在制作过过程中布布局分配配更加合合理科学学。16.5.4制作头部部表格首页界面面是按800*60

8、0的分辩率率设计的的，所以以表格的的宽度，都是按按照界面面中的设设计设置置为778px。16.5.5制作公告告栏在头部表表格下制制作公告告栏，作作为紧急急通知公公告栏，并做成成走马灯灯的样式式。16.6制作正文文表格在公告栏栏制作完完毕后，开始制制作正文文表格部部分，正正文表格格按照界界面的设设置，主主要分为为左右两两个栏目目，再从从右侧分分为上、左、右右的格式式。16.6.1左侧栏的的制作详细操作作步骤如如下：（1）建立一一个2列1行的表格格。（2）设置2列表格垂垂直对齐齐为“顶顶端”，第1列表格设设置宽度度为“195px”。制作“用用电业务务指南”表格制作“站站内搜索索”表格格制作“用用电

9、报装装流程图图”表格格16.6.2制作Banner将正文表表格的右右侧分为为3个部分，上部为为Banner区；下部部分为左左右，制制作栏目目内容。16.6.3制作行业业动态接上面的的操作步步骤继续续制作正正文部分分。16.6.4制作停电电公告（1）在行业业动态表表格下方方，制作作停电公公告的表表格。（2）合并第第1行中的两两个单元元格，插插入停电电公告的的图片。（3）设置第第2行第1列的单元元格为水水平居中中，宽度度为“135px”，并插入入图片“mt_0.jpg”。16.6.4制作停电电公告（4）设置第第2行第2列垂直对对齐为“顶端”，通过过插入表表格设置置最新的的8条停电公公告。（5）表格

10、的的设置同同“行业业动态”，不同同的是在在偶数的的单元格格中的细细条的图图片、奇奇数条数数前的小小图片，以及代代表“更更多”的的图片。16.6.5制作相关关法规在Banner下方的表表格的第第2列单元格格中，设设置相关关法规的的表格。16.6.6制作电力力行业相相关链接接在相关法法规下面面制作“相关链链接”的的表格，此处与与整体界界面风格格统一，制作方方法同“相关法法规”。这样正文文部分的的表格全全部制作作完成。16.7制作尾部部版权制作尾部部版权部部分，也也采用清清新简洁洁的样式式。16.8调整页面面通过上面面几节，页面已已基本制制作完成成，但是是在浏览览器中查查看效果果时，发发现页面面的整

11、体体效果不不是太理理想，主主要是下下部分的的表格在在底端没没有对齐齐。16.9.1创建模板板应用制作作好的首首页创建建该站点点的模板板。16.9.2使用库在模板中中，导航航栏是不不可编辑辑区域，可以在在二级模模板或其其他的模模板中使使用，为为了方便便日后的的调用，在此将将导航栏栏创建为为库。16.10应用模板板创建子子栏目由制作好好的模板板创建子子栏目页页面，流流程是：从模板板新建网网页|编辑可编编辑区域域。16.10.1从模板新新建网页页具体操作作步骤如如下：（1）选择菜菜单命令令“文件件”|“新建”，弹出“新建文文档”窗窗口，左左侧选择择第3项|“模板中的的页”，在站点点所在下下拉列表表中

12、选择择当前站站点的名名称，并并在站点点的模板板下拉列列表中选选择index，并选中中右下角角“当模模板改变变时更新新页面”复选框框。（2）单击“创建”按钮，应用模模板创建建了一个个未命名名的文件件“Untitled-1”文档，将将其保存存为intro.htm。16.10.2编辑左栏栏可编辑辑区域在左侧的的可编辑辑区域设设置页面面。16.10.3编辑右栏栏可编辑辑区域在右部的的可编辑辑区域进进行界面面的修饰饰，以及及栏目内内容的设设置。16.11应用模板板制作三三级页面面同上一节节的制作作方法，应用模模板制作作三级页页面，三三级页面面左侧可可编辑区区域与子子栏目相相同，在在右侧的的可编辑辑区域有有所区别别，三级级页面保保存为intro_info.htm。16.12.1准备相关关素材本案例是是一个电电力行业业方面的的企业网网站，大大家可以以亲手根根据讲解解制作网网站的模模板，以以及在制制作过程程中遇到到的CSS样式表。在制作作过程中中，需要要用到的的图片、文字、Flash动画，应应根据界界面的设设计先制制作好，特别是是在Flash动画中用用到的图图片更是是要精雕雕细琢，精细中中更见设设计者的的制作水水平。16.12.2定制CSS样式在制作之之初，不不可能一一下子将将所有的的CSS样式全部部想到，而会在在制作过过程中，随时增增加和修修改CSS样式，此此时应注注意样式式，尽