网页设计与制作第10章

《网页设计与制作第10章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章制作一个完整的网站一、知识要点1、制作一个完整网站的过程2、结合Firewors、FLASH制作网页图片和动画3、CSS样式4、使用模板制作与更新大量网页二、例题分析例10.1：5Dmedia43步骤一：定义站点：设置本地站点1、在D或E盘上新建一个文件夹“5dname”，在该文件夹中再建一个文件夹“pictrue”。（注意：文件夹名、文件名（不管是图片还是网页）必须为英文字母或数字，不能为汉字）2、在“站点”菜单中选择“新建站点”，即会出现“站点定义”对话框。如果对话框显示的是“高级”选项卡，

2、则单击“基本”。出现“站点定义向导”的第一个屏幕，要求您为站点输入一个站点名称“5D多媒体”。3、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技术。选择“否，我不想使用服务器技术”选项指示目前该站点是一个静态站点，没有动态页。4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问要如何使用文件。选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。在“您将把文件存储在计算机中的什么位置？”文本框中输入“D:/5dname”，或者通过浏览指定。5、

3、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问如何连接到远程服务器。现在，从弹出菜单中选择“无”。单击“下一步”进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。单击“完成”完成设置。6、单击“确定”，“站点”面板现在显示当前站点的新本地根文件夹，同时显示一个图标允许您以分层树视图查看所有本地磁盘。7、点击菜单“站点/编辑站点”或点击站点面板的站点选项卡上“站点/编辑站点”。都会出现编辑站点对话框，选中“5D多媒体”站点，再点击“编辑”按钮，即会出现“站点定义”对话框，单击“高级

4、”选项卡，在“默认图像文件夹”的对话框中输入“D:/5dname/pictrue”或者通过浏览指定，先点击“确认”按钮后再点击“完成”按钮。步骤二：制作首页1、右键单击“站点”面板中的根目录，在弹出的菜单中选择“新建文件”命令，把新建的文件名称改为“index.htm”。2、双击“index.htm”，进入页面编辑状态。3、启动FIREWORKS，新建一个宽和高都为6像素，背景色为白色的文件；在状态栏上将视图缩放比率设为800%，（或点击菜单命令“视图/缩放比率”，再或用快捷键Ctrl+8）；用工具栏上

5、的矩形工具，画一个宽和高都为5像素的矩形，X和Y（起始点坐标）都为0，在属性面板上能看到宽和高、X和Y，将矩形的填充颜色设为#EFEFEF，边框颜色设为没有（一根红色的斜线）；最后点击菜单命令“文件/导出”，选择导出地址为你站点文件夹下的图片文件夹，如：本例“D:/5dname/pictrue”，文件名如：bg.gif（注意扩展名为gif）。4、切换到Dreamweaver，在页面空白处单击鼠标右键，选择“页面属性”命令，在弹出的页面属性对话框中定义左边界、顶部边界都为0，将刚才制作的图片设置为背景图像

6、，在页面属性对话框中的背景图像文本框中输入“pictrue/bg.gif”，或者点击其后的“浏览”按钮，选择“D:/5dname/pictrue”文件夹中的bg.gif。5、下面的操作从步骤三到步骤六是对整个网页进行布局和排版，通过插入4个边框为0的表格对页面各元素进行定位。注：网页的布局可以使用表格的标准模式和布局模式，读者可以自行选择；下面步骤用的是标准模式。下面图示只是为了说明各表格的宽高，各表格中单元格的宽高及合并情况；4个表格边框粗细都为0；表格与表格之间没有间隙，在Dreamweaver中应

7、该是紧挨在一起。43步骤三：制作网页顶部横标题的基本元素1、插入一个1行2列的表格，在“插入表格”对话框中设置“宽”为778像素，“填充”、“间距”、“边框”值都设为0，将“属性”窗口中表格属性的“高”设置为100像素、“对齐”设置为水平居中，背景颜色设置为白色。2、将鼠标定位在表格的左边一列单元格中，将“属性”窗口中单元格属性的“宽”设为200像素，右边一列单元格的宽设为578像素。（一）制作网站徽标1、启动FLASH，新建一个文件，点击菜单命令“修改/影片”，修改文档宽200px、高100px，背景

8、色为白色。2、通过矩形工具、选择工具、次级选取工具、文字工具、变形扭曲工具、圆形工具等绘制书上P337的网站徽标。3、绘制完成后，点击菜单命令“文件/导出图像”，选择文件类型“GIF图像（*.gif）”，选择导出文件夹位置“D:/5dname/pictrue”，输入文件名“logo”。4、切换到Dreamweaver，将鼠标定位在表格的左边单元格中，点击菜单命令“插入/图像”，选择D:/5dname/pictrue/logo.gif，或者从