网站 空谷幽兰首页的制作步骤.doc

“空谷幽兰”首页的制作步骤单击起始页“创建新项目”下的“HTML”（如图1所示），创建1个空白静态页面，保存到d:/kgyl下，命名为index.html。图1 创建HTML静态页面单击“修改”|“页面属性”，在页面属性对话框中，选择“标题/编码”，在“编码”下拉列表中选择“Unicode(utf-8)”。在“标题”文本框中输入“空谷幽兰首页”。在“布局”面板中单击“表格”按钮，插入1个3行2列、宽为780像素、边框粗细为0的表格。在表格的属性面板中，设置对齐为“居中对齐”。插入的表格如图2所示。图2 插入3行2列表格先将该表格的第2行、第3行的2个单元格分别合并为1个单元格（按鼠标左键拖动选中相应单元格，右击，在弹出菜单中选择“表格”下的“合并单元格”命令），再在第3行的单元格中插入1个1行8列、宽度为100%、高度为40像素、边框粗细为0的嵌套表格，适当调整行高和列宽，调整后如图3所示。图3 调整后的表格将光标放在第1行的第1个单元格中，单击“插入”|“图像”，选择images目录下的logo.gif。调整该列宽和插入的图片宽度保持一致。用同样的方法，在第1行的第2个单元格中插入images/huiqiao.gif。将光标放在第2行中，切换到代码视图，将该行对应代码修改如下： 将光标放在第3行的单元格中，在单元格的属性面板中，设置背景颜色为“#483C30”，输入导航文本，在文本的属性面板中，设置大小为“18”像素、颜色为“#FFFFFF”、加粗、居中显示。如图4所示。图4 导航文本在“布局”面板中单击“表格”按钮，插入1个1行2列、宽为780像素、边框粗细为0的表格。在表格的属性面板中，设置对齐为“居中对齐”。适当调整行高和列宽。单击第1个单元格，在单元格的属性面板中，设置该单元格中的内容在垂直方向上“顶端”对齐，在第1个单元格中插入1个6行1列的嵌套表格，宽为100%、边框粗细为0。拖动嵌套表格每行的边框适当调整行高，如图5所示。图5 首页中间布局表格单击“插入”|“图像”，在嵌套表格的第1、3、4、5、6行中分别插入images/gonggao.jpg、 images/link.jpg、images/shqzww.jpg、images/zhaq.gif、images/dzzz.gif，并调整各行行高略高于该行中插入的图像高度，列宽和最大图像宽度一致。在嵌套表格的第2行中输入3段文本（文本内容是关于宋慧乔的新闻，文本格式字体为宋体、大小为12像素），不同段之间用shift+Enter换行，每段文字的开头都插入图像images/fk.gif，同时设置该单元格中的内容在垂直方向上“顶端”对齐。拖动鼠标选中嵌套表格第2行中的3段文本（包括图像），单击“插入”|“标签”，在“标签选择器”对话框中，在左边选择HTML标签，在右边列表中选择marquee，先单击“插入”按钮，再单击“关闭”按钮，如图6所示。图6 标签选择器切换到“设计”视图，单击选择 标签，单击“标签检查器”面板的名称展开该面板，单击“属性”选项卡，单击“未分类”前的加号，设置“behavior”为“scroll”、“direction”为“up”、“loop”为“-1”、“scrolldelay”为“5”，插入向上循环滚动的字幕。单击“行为”选项卡，在第1列相应单元格中单击后在列表中选择事件名称，在相应的第2列中输入行为，添加两个行为如图7所示。图7 添加行为按“F12”预览，可看到信息公告和友情链接的效果如图8所示。将鼠标指针移到滚动字幕上时，字幕将停止滚动，当鼠标指针移开时，字幕开始滚动。图8 信息公告和友情链接的效果单击“插入”|“图像”，在中间表格的第2列中插入images/introduction.jpg。单击选中图像后，拖动其水平方向的尺寸柄调整图像的宽度，使中间表格的宽度保持为780。插入1个1行1列、宽为780像素、边框粗细为0的表格，设置对齐为“居中对齐”。在表格中输入2行文本，设置文本格式为宋体、大小12像素、居中对齐，如图9所示。图9 所有表格为导航文本和导航图片创建超链接。首页超链接说明如表1所示。表1 首页超链接说明源链接目标首页index.html_self照片photo.html_self音乐music.html_self视频video.html_self动画flash.html_self文章wenzhang.html_self粉丝fans/fans.html_self留言liuyanban/liuyan.php_self后台管理liuyanban/admin.php_mailto:_self宋惠乔中文网（图片）/_blank上海行（图片）/bbs/forumdisplay.php?fid=919_blank电子杂志（图片）/bbs/forumdisplay.php?fid=536_blank为文本或图像建立超链接，选中文本或图像，在其属性面板中在“链接”后输入链接内容，在“目标”下拉列表框中选择目标打开的方式，如图10所示。图10 建立超链接在“布局”面板中单击“绘制层”按钮，在空谷幽兰的图像上绘制1个同样大小的图层，如图11所示。图11 绘制图层在图层中，单击“插入”| “媒体”|“Flash”，选择flash目录下的transparent.swf，单击“确定”按钮。拖动flash的尺寸柄调整其大小和huiqiao.gi