网页设计与制作第10章

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

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

3、的设置概要。单击“完成”完成设置。6、单击“确定”，“站点”面板现在显示当前站点的新本地根文件夹，同时显示一个图标允许您以分层树视图查看所有本地磁盘。7、点击菜单“站点/编辑站点” 或点击站点面板的站点选项卡上“站点/编辑站点”。都会出现编辑站点对话框，选中“5D多媒体”站点，再点击“编辑”按钮，即会出现“站点定义”对话框，单击“高级”选项卡，在“默认图像文件夹”的对话框中输入“D:/5dname/pictrue”或者通过浏览指定，先点击“确认”按钮后再点击“完成”按钮。步骤二：制作首页1、右键单击“站点”面板中的根目录，在弹出的菜单中选择“新建文件”命令，把新建的文件名称改为“index.h

4、tm”。2、双击“index.htm”，进入页面编辑状态。3、启动FIREWORKS，新建一个宽和高都为6像素，背景色为白色的文件；在状态栏上将视图缩放比率设为800%，（或点击菜单命令“视图/缩放比率”，再或用快捷键Ctrl+8）；用工具栏上的矩形工具，画一个宽和高都为5像素的矩形，X和Y（起始点坐标）都为0，在属性面板上能看到宽和高、X和Y，将矩形的填充颜色设为#EFEFEF，边框颜色设为没有（一根红色的斜线）；最后点击菜单命令“文件/导出”，选择导出地址为你站点文件夹下的图片文件夹，如：本例“D:/5dname/pictrue”，文件名如：bg.gif（注意扩展名为gif）。4、切换到D

5、reamweaver，在页面空白处单击鼠标右键，选择“页面属性”命令，在弹出的页面属性对话框中定义左边界、顶部边界都为0，将刚才制作的图片设置为背景图像，在页面属性对话框中的背景图像文本框中输入“pictrue/bg.gif”，或者点击其后的“浏览”按钮，选择“D:/5dname/pictrue”文件夹中的bg.gif。5、下面的操作从步骤三到步骤六是对整个网页进行布局和排版，通过插入4个边框为0的表格对页面各元素进行定位。注：网页的布局可以使用表格的标准模式和布局模式，读者可以自行选择；下面步骤用的是标准模式。下面图示只是为了说明各表格的宽高，各表格中单元格的宽高及合并情况；4个表格边框粗细

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

7、、次级选取工具、文字工具、变形扭曲工具、圆形工具等绘制书上P337的网站徽标。3、绘制完成后，点击菜单命令“文件/导出图像”，选择文件类型“GIF图像（*.gif）”，选择导出文件夹位置“D:/5dname/pictrue”，输入文件名“logo”。4、切换到Dreamweaver，将鼠标定位在表格的左边单元格中，点击菜单命令“插入/图像”，选择D:/5dname/pictrue/logo.gif，或者从站点面板的图像文件夹中将该图像直接拖到单元格中。（二）制作广告条方法一：用FLASH制作广告条1、切换到FLASH，新建一个文件，点击菜单命令“修改/影片”，修改文档宽470px、高64px，

8、背景色为白色。2、在图层一的第一帧用矩形工具画一个矩形，在属性面板中将宽设为468px、高设为62px、X设为1，Y设为1，再将矩形的填充设置为没有填充色（一根红色的斜线），边框线色为黑色、实线、粗细为1。在第40帧插入帧（F5）。3、新建一个图层二，在第一帧里输入文字“建网站 不求人”，设置文字颜色为#9C6262、字体隶书、字号56，选中文字按下F8将文字转换为图形元件。4、分别在第20帧和第40帧插入关键帧（F6）。5、选中第20帧中的元件实例，Ctrl+T弹出变形面板（Transform）将其放大2倍，在属性面板中的颜色选项中选择Alpha（透明度）设为0%。6、分别选中第1帧和第20

9、帧，点击鼠标右键，创建补间动画。（Creat Motion Tween）7、点击菜单命令“文件/导出影片”，选择文件类型“FLASH影片（*.swf）”，选择导出文件夹位置“D:/5dname/pictrue”，输入文件名“banner”。（banner.swf）8、切换到Dreamweaver，将鼠标定位在表格的右边单元格中，点击菜单命令“插入/媒体/FLASH”，选择D:/5dname/pictrue/banner.swf，或者从站点面板的图像文件夹中将该FLASH影片直接拖到单元格中。方法二：用Fireworks制作广告条1、切换到Fireworks，新建一个文件宽470px、高64px

10、，背景色为白色。 2、输入文字“建网站 不求人”，设置文字颜色为#9C6262、字体隶书、字号56。 3、点击“窗口/帧”，打开帧面板，点击右上角的三角形按钮弹出下拉菜单，“添加帧”，在该帧之后添加1帧，输入文字“5D多媒体 来帮忙”，设置文字颜色为黑色、字体华文楷体、字号56，描边颜色为白色，在效果面板中选择“阴影和光晕”，“投影”。 4、回到帧面板，双击帧1右边“7”，将其改为100（100/100秒，相当于1秒）。将帧2改为200即2秒。 5、点击菜单命令“文件/导出预览”，在“格式”中选择“GIF动画”，“导出”，选择导出文件夹位置“D:/5dname/pictrue”，输入文件名“b

11、anner”。（banner.gif） 6、切换到Dreamweaver，将鼠标定位在表格的右边单元格中，点击菜单命令“插入/图像”，选择D:/5dname/pictrue/banner.gif，或者从站点面板的图像文件夹中将该图片直接拖到单元格中。步骤四：制作网页上面地址栏的基本元素1、插入一个2行1列的表格，在“插入表格”对话框中设置“宽”为778像素，“填充”、“间距”、“边框”值都设为0，将“属性”窗口中表格属性的“高”设置为75像素、“对齐”设置为水平居中，背景颜色设置为白色。2、将鼠标定位在表格的上边一行单元格中，将“属性”窗口中单元格属性的“高”设为25像素，下边一行单元格的宽设

12、为50像素。（一）制作第1幅图片1、切换到FIREWORKS，新建一个宽为778、高为25像素、背景色为白色的文件。2、在状态栏上将视图缩放比率设为100%，（或点击菜单命令“视图/缩放比率”，再或用快捷键Ctrl+8）。3、用直线工具画一根直线，颜色为黑色，粗细为1，线条类型为“铅笔/1像素”，宽为120px、高（粗细）为1px、X为1、Y为24（在属性面板上修改）；再画一根直线，颜色、粗细、线条类型一样，宽为618px、高（粗细）为1px、X为160、Y为1，再用直线工具将两条直线连起来。4、用矩形工具，画一个宽72、高为18像素的矩形、X为200、Y为3（在属性面板上修改），制作按钮，将

13、矩形的填充颜色设为#88EE66，边框颜色设为没有（一根红色的斜线），将属性面板上的矩形圆度设为100。5、选中矩形，调整属性面板上的效果选项，执行其中的“斜角和浮雕/内斜角”，设置“斜角边缘形状”为“平滑”、宽度为6、对比度为30%、柔化为2、角度为135；选择“阴影与晕光”中的“投影”，颜色为黑色、距离为3、不透明度为65%、柔化2，角度为315。6、选中矩形，按下Ctrl+Shift+D，克隆一个矩形，选中克隆的这个矩形，将颜色设置为#FFFF00，选中属性面板中效果项，点击“”按钮将其删除，再将其宽设为46、高为6px、X为203、Y为12，在属性面板中选择边缘选项中的羽化，羽化度设为

14、25。7、点击工具栏中文字工具输入文字“域名注册”，字号12，字体宋体、颜色白色，放在绿色矩形的中间位置，选择“填充选项”中的边缘设置为“实边”，调整属性面板上的效果选项，执行其中“阴影与晕光”中的“投影”，颜色为黑色、距离为1、不透明度为65%、柔化0，角度为315，再执行其中“阴影与晕光”中的“发光”，颜色为黑色、宽度为1、不透明度为85%、柔化0，位移为0。8、将绿色矩形黄色矩形与文字用黑色箭头工具同时选中按下Ctrl+G，将其群组。9、选中群组对象，将其克隆6次，分别向右边拖动，Y都为3，最右边的组合对象的X为670，将7个组合对象同时选中，执行菜单命令“修改/对齐/均分宽度”，对象就

15、排列整齐。10、用白色箭头（部分选择工具）选中文字，再用文字工具将后6个组合对象的文字改成网页需要的。11、最后点击菜单命令“文件/导出”，选择导出地址为你站点文件夹下的图片文件夹，如：本例“D:/5dname/pictrue”，文件名如：address.gif（注意扩展名为gif）。12、切换到Dreamweaver，将鼠标定位在第1行的单元格中，点击菜单命令“插入/图像”，选择D:/5dname/pictrue/address.gif，或者从站点面板的图像文件夹中将该图像直接拖到单元格中。13、选中上一步中插入的图片，在地图属性面板中选择“矩形热点工具”，在图片上要建超链接的区域绘制矩形，

16、共绘制7个矩形，选中矩形，在热点面板中“链接”文本框中输入或通过浏览按钮设置超链接地址，或通过“指向文件”按钮向站点面板拖动并指向你所要链接的网页文件。（二）制作第2幅图片1、切换到FIREWORKS，新建一个宽为778、高为50像素、背景色为白色的文件。2、在状态栏上将视图缩放比率设为100%，（或点击菜单命令“视图/缩放比率”，再或用快捷键Ctrl+8）。3、用工具栏上的矩形工具，画一个宽778、高为47像素的矩形、X为0、Y为0（在属性面板上修改），边框颜色设为没有（一根红色的斜线），点击填充选项设置为线型渐变，渐变色为#88EE66#FFFFFF，选中矩形会显示出填充调节柄，调整调节柄

17、，使矩形的填充渐变色变成从下到上渐变填充，调节柄的黑色圆在上端，黑色方在上端。4、选中矩形，调整属性面板上的效果选项，执行其中“阴影与晕光”中的“投影”，颜色为黑色、距离为3、不透明度为65%、柔化3，角度为265。5、点击工具栏中文字工具输入文字“http:/5”，字号12，字体宋体、颜色黑色，放在绿色渐变矩形的左下角位置，调整属性面板上的效果选项，执行其中“阴影与晕光”中的“投影”，颜色为白色、距离为1、不透明度为65%、柔化0，角度为315，再执行其中“阴影与晕光”中的“发光”，颜色为白色、宽度为1、不透明度为85%、柔化0，位移为0。6、点击工具栏中文字工具输入文字“

18、你的位置：首页”，字号12，字体宋体、颜色黑色，放在绿色渐变矩形的右下角位置，选择“填充选项”中的边缘设置为“实边”，调整属性面板上的效果选项，执行其中“阴影与晕光”中的“投影”，颜色为白色、距离为1、不透明度为65%、柔化0，角度为315，再执行其中“阴影与晕光”中的“发光”，颜色为白色、宽度为1、不透明度为85%、柔化0，位移为0。7、最后点击菜单命令“文件/导出”，选择导出地址为你站点文件夹下的图片文件夹，如：本例“D:/5dname/pictrue”，文件名如：top01.gif（注意扩展名为gif）。8、切换到Dreamweaver，将鼠标定位在第2行的单元格中，点击菜单命令“插入/

19、图像”，选择D:/5dname/pictrue/top01.gif，或者从站点面板的图像文件夹中将该图像直接拖到单元格中。步骤五：编辑网页中间主体内容部分1、在第二个表格之后插入第三个表格，2行5列，在“插入表格”对话框中设置“宽”为778像素，“填充”、“间距”、“边框”值都设为0，将“属性”窗口中表格属性的“高”设置为700像素、“对齐”设置为水平居中，背景颜色设置为白色。2、分别将各个单元格的“属性”窗口中单元格属性的“垂直”对齐方式设为“顶端”对齐。将第一行的高度设为600像素，第二行的高度设为100像素；将第1列的两个单元格进行上下合并；再将第2列的两个单元格进行上下合并；再将第2行

20、的第3、4、5单元格横向合并；将第1行各单元格从左到右宽度分别设为226像素、1像素、356像素、1像素、194像素；将第2行左边单元格设为226像素，右边3个合成1个的单元格宽度设置为551像素。再将第1列2个单元格的背景颜色设置为#e7e7e7。3、切换到FIREWORKS ，新建一个宽为1、高为5像素、背景色为白色的文件；在状态栏上将视图缩放比率设为800%；用直线工具画一根直线，颜色为黑色，粗细为1，线条类型为“铅笔/1像素”，宽（粗细）为1px、高为5px、X为0、Y为0（在属性面板上修改）；点击菜单命令“文件/导出”，选择导出地址为你站点文件夹下的图片文件夹，文件名body01.g

21、if。4、切换到Dreamweaver MX，将鼠标定位到第2列（宽度为1px高度为700px，上下单元格合并了的）的单元格中，插入上步制作的图片body01.gif，在属性面板中将该图片的高度设置为700px，宽度为1px不变。5、切换到FIREWORKS ，新建一个宽为1、高为600像素、背景色为白色的文件；在状态栏上将视图缩放比率设为200%；用直线工具画一根直线，颜色为黑色，粗细为1，线条类型为“铅笔/彩色铅笔”，宽（粗细）为1px、高为600px、X为0、Y为0（在属性面板上修改）；单击“笔触选项”，再单击其上的“高级”按钮，弹出“编辑笔触”对话框，在其“选项”选项卡中将“间距”设为

22、300%；在“形状”选项卡中取消正方形复选框即显示圆形，大小为1边缘1方向100角度270，点击“确定”按钮；点击菜单命令“文件/导出”，选择导出地址为你站点文件夹下的图片文件夹，文件名body04.gif。6、切换到Dreamweaver ，将鼠标定位到第1行第4列（宽度为1px高度为600px）的单元格中，插入上步制作的图片body04.gif，图片高度和宽度的设置不变（1px*600px）。7、切换到FIREWORKS ，新建一个宽为551、高为20像素、背景色为白色的文件；在状态栏上将视图缩放比率设为100%；用直线工具画一根直线，颜色为黑色，粗细为1，线条类型为“铅笔/1像素”，宽为

23、551px、高（粗细）为1px、X为0、Y为19（在属性面板上修改）；用矩形工具，画一个宽551、高为15像素的矩形、X为0、Y为15，边框颜色设为没有（一根红色的斜线），填充色为#e7e7e7；点击工具栏中文字工具输入文字“成功案例”，字号18，字体方正姚体、颜色#006600，位置：X为44、Y为-3，选择“填充选项”中的边缘设置为“实边”，调整属性面板上的效果选项，执行其中“阴影与晕光”中的“投影”，颜色为白色、距离为1、不透明度为65%、柔化1，角度为315，再执行其中“阴影与晕光”中的“发光”，颜色为白色、宽度为1、不透明度为85%、柔化0，位移为0；点击菜单命令“文件/导出”，选择

24、导出地址为你站点文件夹下的图片文件夹，文件名body033.gif。8、切换到Dreamweaver ，将鼠标定位到第2行中3列合并了的单元格（宽度为551px）中，插入上步制作的图片body033.gif。9、下面的操作将在单元格：第1行第1列（宽226高700）、第1行第3列（宽356高600）、第1行第5列（宽194高600）中插入表格，即表格的嵌套来对页面进行布局。（一）制作第1行第1列（宽226高700）上的表格1、插入如上图所示的两个表格，修改单元格高度属性，再制作图片，插入对应的单元格，输入文字。2、点击菜单命令“文本/CSS样式/新建CSS样式”，在“类型”单选项中选择“重定义

25、HTML标签”，在“定义在”单选项中选择“公对该文档”，在“标签”下拉列表中选择“td”，单击“确定”，在“分类”中选择“类型”，“大小”中选择“12px”。所有“td”标签所标记的文字就都是这个样式了。3、点击菜单命令“文本/CSS样式/编辑样式表”，再单击“新建”按钮，在“类型”单选项中选择“使用CSS选择器”，在“定义在”单选项中选择“公对该文档”，在“选择器”下拉列表中选择“a:link”，单击“确定”，在“分类”中选择“类型”，“颜色”中输入“#336699”，“修饰”中只选择“下划线”；同样方法选择a:visited、a:active设置颜色#336699并加下划线，a:hover

26、设置颜色#FF6600并在“修饰”中只选择“无”。所有“a”标签所标记的文字都是上面定义的样式了。（二）制作第1行第3列（宽356高600）上的表格1、按上图所示插入表格，修改单元格宽度和高度属性，在第二个表格的的第二行再插入一个宽340高300像素的表格，注意单元格间距的用法。2、在对应的单元格中插入图片、表单对象，输入文字，文字为上（一）步定义的CSS样式，注意插入表单对象时“是否添加表单标签？”即时否插入。3、在嵌套表格的宽240高54的5个单元格中加入特效，鼠标放在单元格上背景会变色，鼠标离开颜色恢复，先将这5个单元格的“背景颜色”改为#FFEEBB，再在标记中加入以下代码：onmou

27、seover=this.style.backgroundColor=#ddffcc onmouseout=this.style.backgroundColor=#ffeebb（三）制作第1行第5列（宽194高600）上的表格1、如上图所示，插入5个表格，修改单元格的宽度和高度，再制作图片，插入对应的单元格，输入文字，文字为上（一）步定义的CSS样式，插入表单对象，注意插入表单对象时“是否添加表单标签？”即时否插入，再修改文本域的“字符宽度”为12。2、用Fireworks或其他图形处理软件制作一个宽194像素高110像素的圆角矩形图片。3、选中第一个宽194像素高110像素的表格，将“背景图像

28、”设置为上一步所制作的图片。步骤六：制作网页下面信息说明部分的基本元素1、再最后插入一个2行1列的表格，在“插入表格”对话框中设置“宽”为778像素，“填充”、“间距”、“边框”值都设为0，将“属性”窗口中表格属性的“高”设置为55像素、“对齐”设置为水平居中，背景颜色设置为白色。2、将鼠标定位在表格的上边一行单元格中，将“属性”窗口中单元格属性的“高”设为25像素，下边一行单元格的宽设为30像素。分别将三个单元格的“属性”窗口中单元格属性的“水平”对齐方式设为“水平居中”。3、切换到FIREWORKS ，新建一个宽为778、高为25像素、背景色为白色的文件；在状态栏上将视图缩放比率设为100%；用矩形工具，画一个宽780、高为24像素的矩形、X为-1、Y为1（在属性面板上修改），将矩形的填充颜色设为#AAFF66，边框颜色设为黑色，粗细为1，线条类型为“铅笔/1像素”；最后点击菜单命令“文件/导出”，选择导出地址为你站点文件夹下的图片文件夹，如：本例“D:/5dname/pictrue”，文件名如：bottom.gif（注意扩展名为gif）。4、切换到Dreamweaver ，将鼠标定位在第1行的单元格中，将单元格的背景颜色设置为#AAFF66，将背景图片设置为pictrue/bottom.gif。5、在第1行的单元格中输入文字及“|”（“”的上