dreamweaver+cs4+网页设计跟制作指南 第16节.pptVIP

第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 制作正文表格 在公告栏制作完毕后，开始制作正文表格部分，正文表格按照界面的设置，主要分为左右两个栏目，再从右侧分为上、