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

第16章　公司网站制作案例本章案例以制作一个电力公司的网站和主导，系统讲解如何实现客户的需求，在整个过程中，按照“新建站点”|“制作模板”|“制作首页文件”|“制作子页文件”|“案例扩展分析”的流程，全面分析制作网站的过程。本章重要知识点：了解企业网站的制作流程掌握制作模板的流程掌握新建和修改CSS样式表的技巧熟悉走马灯的网页特效制作16.1 策划构思及设计流程在正式制作网站之前，先要了解客户的需求，网站终归是为了客户的需求而定制，为网站设计一个整体的策划书，这一点至关重要，很多人可能会忽略这一点。16.1.1 客户需求在客户的需求中，已详细说明了网站的栏目分配。16.1.2 网站策划根据客户所提供的网站结构和需求，策划将网站的栏目分为“公司简介”、“电力动态”、“用电法规”、“业务公开”、“交流合作”、“多种产业”几类。整个页面以淡雅为主，主色调定为淡蓝绿色，突出电力安全、电力为民的主题。16.1.3 网站结构规划一般的企业网站会有一个引导页，可以用图片或动画来制作，但是电力行业的网站，一般都是直奔主题，避免太多的繁杂环节，主要体现了便民的特色，该网站就简单地左右分栏，清晰、简洁、明了，将网站的内容展示出来，因而在制作时一次性通过了客户的验收。16.1.4 准备所需素材在制作网站之前，先要准备制作网站所需的图片和文字资料，以及制作Banner中所使用的素材，包括体现的主题、文字、制作好的图片和动画素材都放在images下。16.2 制作过程为尊重客户的意见及所有权，这里将网站名称和Logo用别的名称代替。本案例将详细讲解制作电力企业网站中，要注意的问题及要掌握的一些技巧。16.2.1 网站首页设计首先在Photoshop中，使用客户提供的图片及相关参照网址，设计出网站的首页图片小样。16.2.2 将图片切割为网页启动ImageReady程序，将设计好的首页图片，依据网页设计布局切割制作成网页，对于图片的分割，要尽量控制图片的大小在10KB以内，在保证图片质量的前提下，尽量减少切割数量，在图片导出之前，先要进行优化，这是非常必要的操作，这样可以大大减小图片的容量。16.3 建立站点在使用分割的图片制作网页之前，首先需要建立一个新的站点，方便网站文件的操作。16.3.1 新建站点新建站点的具体操作步骤如下：（1）选择菜单命令“站点”|“新建站点”，弹出“站点定义为”对话框，并切换到“高级”选项卡，在对话框左侧分类下面的列表中“本地信息”所对应的选项中进行详细设置。（2）单击“确定”按钮，本例的站点成功建立完成。16.3.2 新建站点文件夹在站点中先创建如下文件夹，用来放置相关的文件：images：用来放置站点中的所有图片。style：用来放置站点使用的CSS样式表文件。html：用来放置站点中的所有HTML文件。flash：用来放置站点中的动画文件。temp：用来放置站点中的图片及动画源文件。16.4 创建CSS样式在制作首页之前，要根据界面的风格创建相应的CSS样式。首先创建基本的标签样式，如body、table、td、p、input以及链接的基本样式。16.5 制作网站首页在站点的“文件”面板中，选中文件夹html，单击鼠标右键，新建一个文件，命名为index.htm，再结合CSS样式表的使用，创建一个与网页效果图相对应的首页文件。16.5.1 导入外部样式表（1）打开“文件”面板，双击index.htm名称，在文档窗口中编辑文件。（2）在制作之前先要从外部引入CSS样式。（3）打开“CSS样式”面板，并在空白处单击鼠标右键，在弹出的菜单中选择“附加样式表”命令；或单击“附加样式表”按钮，弹出“链接外部样式表”对话框。16.5.1 导入外部样式表（4）单击“浏览”按钮，选择CSS样式文件所有路径，导入CSS样式表文件，并选中“添加为”之后的“链接” 单选按钮。（5）单击“确定”按钮，即成功在文件中导入了CSS样式表。16.5.2 设置网页标题首先设置网页的标题，在文档头部输入标题的名称。16.5.3 设置页面属性选择菜单命令“修改”|“页面属性”，弹出“页面属性”对话框，从中设置跟踪图像。设置跟踪图像，可以使界面在制作过程中布局分配更加合理科学。16.5.4 制作头部表格首页界面是按800*600的分辩率设计的，所以表格的宽度，都是按照界面中的设计设置为778px。16.5.5 制作公告栏在头部表格下制作公告栏，作为紧急通知公告栏，并做成走马灯的样式。16.6 制作正文表格在公告栏制作完毕后，开始制作正文表格部分，正文表格按照界面的设置，主要分为左右两个栏目，再从右侧分为上、左、右的格式。16.6.1 左侧栏的制作详细操作步骤如下：（1）建立一个2列1行的表格。（2）设置2列表格垂直对