网页设计与制作第10章节2.docVIP

第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）Dreamweaver中应该是紧挨在一起。 步骤三：制作网页顶部横标题的基本元素 1、插入一个1行2列的表格，在“插入表格”对话框中设置“宽”为778像素，“填充”、“间距”、“边框”值都设为0，将“属性”窗口中表格属性的“高”设置为100像素、“对齐”设置为水平居中，背景颜色设置为白色。 2、将鼠标定位在表格的左边一列单元格中，将“属性”窗口中单元格属性的“宽”设为200像素，右边一列单元格的宽设为578像素。 （一）制作网站徽标 1、启动FLASH，新建一个文件，点击菜单命令“修改/影片”，修改文档宽200px、高100px，背景色为白色。 2、通过矩形工具、选择工具、次级选取工具、文字工具、变形扭曲工具、圆形工具等绘制书上P337的网站徽标。 3、绘制完成后，点击菜单命令“文件/导出图像”，选择文件类型“GIF图像（*.gif）”，选择导出文件夹位置“D:/5dname/pictrue”，输入文件名“logo”。 4、切换到Dreamweaver，将鼠标定位在表格的左边单元格中，点击菜单命令“插入/图像”，选择D:/5dname/pictrue/logo.gif，或者从站点面板的图像文件夹中将该图像直接拖到单元格中。 （二）制作广告条 方法一：用FLASH制作广告条 1、切换到FLASH，新建一个文件，点击菜单命令“修改/影片”，修改文档宽470px、高64px，背景色为白色。 2、在图层一的第一帧用矩形工具画一个矩形，在属性面板中将宽设为468px、高设为62px、X设为1，Y设为1，再将矩形的填充设置为没有填充色（一根红色的斜线），边框线色为黑色、实线、粗细为1。在第40帧插入帧（F5）。 3、新建一个图层二，在第一帧里输入文字“建网站 不求人”，设置文字颜色为#9C6262、字体隶书、字号56，选中文字按下F