网页工作设计与制作第10章.pdf

第 10 章 制作一个完整的网站 一、知识要点 1、制作一个完整网站的过程 2、结合 Firewors、FLASH 制作网页图片和动画 3、CSS 样式 4、使用模板制作与更新大量网页 二、例题分析 例 10.1：5Dmedia 步骤一：定义站点：设置本地站点 1、在D 或 E 盘上新建一个文件夹“5dname”，在该文件夹中再建一个文件夹“pictrue”。（注意：文件夹 名、文件名（不管是图片还是网页）必须为英文字母或数字，不能为汉字） 2、 在“站点”菜单中选择“新建站点”，即会出现“站点定义”对话框。如果对话框显示的是“高级” 选项卡，则单击“基本”。 出现“站点定义向导”的第一个屏幕，要求您为站点输入一个站点名称 “5D多媒 体”。 3、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技术。选择“否， 我不想使用服务器技术”选项指示目前该站点是一个静态站点，没有动态页。 4、 单击“下一步”进入下一个步骤。 出现向导的下一个屏幕，询问要如何使用文件。选择标有“编辑 我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。在“您将把文件存储在计算机中的什么 位置？”文本框中输入“D:/5dname”，或者通过浏览指定。 5、单击 “下一步”进入下一个步骤。 出现向导的下一个屏幕，询问如何连接到远程服务器。现在，从 弹出菜单中选择 “无”。单击 “下一步”进入下一个步骤。 该向导的下一个屏幕将出现，其中显示您的设置 概要。单击“完成”完成设置。 6、单击“确定”，“站点”面板现在显示当前站点的新本地根文件夹，同时显示一个图标允许您以分层树 视图查看所有本地磁盘。 7、点击菜单“站点/编辑站点” 或点击站点面板的站点选项卡上“站点/编辑站点”。都会出现编辑站点 对话框，选中 “5D多媒体”站点，再点击“编辑”按钮，即会出现“站点定义”对话框，单击“高级”选项 卡，在“默认图像文件夹”的对话框中输入 “D:/5dname/pictrue”或者通过浏览指定，先点击“确认”按钮 后再点击“完成”按钮。 步骤二：制作首页 1、右键单击“站点”面板中的根目录，在弹出的菜单中选择“新建文件”命令，把新建的文件名称改为 “index.htm”。 2、双击“index.htm”，进入页面编辑状态。 3、启动FIREWORKS，新建一个宽和高都为 6 像素，背景色为白色的文件；在状态栏上将视图缩放比率设 为 800%，（或点击菜单命令“视图/缩放比率”，再或用快捷键Ctrl+8）；用工具栏上的矩形工具，画一个宽和 高都为 5 像素的矩形，X 和 Y （起始点坐标）都为0，在属性面板上能看到宽和高、X 和 Y，将矩形的填充颜 色设为#EFEFEF，边框颜色设为没有（一根红色的斜线）；最后点击菜单命令 “文件/导出”，选择导出地址为 你站点文件夹下的图片文件夹，如：本例“D:/5dname/pictrue”，文件名如：bg.gif （注意扩展名为gif）。 4、切换到Dreamweaver，在页面空白处单击鼠标右键，选择“页面属性”命令，在弹出的页面属性对话 框中定义左边界、顶部边界都为 0，将刚才制作的图片设置为背景图像，在页面属性对话框中的背景图像文 本框中输入 “pictrue/bg.gif”，或者点击其后的 “浏览”按钮，选择 “D:/5dname/pictrue”文件夹中的 bg.gif。 5、下面的操作从步骤三到步骤六是对整个网页进行布局和排版，通过插入 4 个边框为 0 的表格对页面各 元素进行定位。 注：网页的布局可以使用表格的标准模式和布局模式，读者可以自行选择；下面步骤用的 是标准模式。 下面图示只是为了说明各表格的宽高，各表格中单元格的宽高及合并情况；4 个表格边框 粗细都为 0；表格与表格之间没有间隙，在Dreamweaver 中应该是紧挨在一起。 步骤三：制作网页顶部横标题的基本元素 1、插入一个 1 行 2 列的表格，在 “插入表格”对话框中设置 “宽”为 778 像素，“填充”、“间距”、“边 框”值都设为 0，将“属性”窗口中表格属性的“高”设置为 100 像素、“对齐”设置为水平居中，背景颜色 设置为白色。 2、将鼠标定位在表格的左边一列单元格中，将“属性”窗口中单元格属性的“宽”设为 200 像素，右边 一列单元格的宽设为 578 像素。 （一）制作网站徽标 1、启动 FLASH，新建一个文件，点击菜单命令