简单网页制作小步骤.docVIP

上机练习三 注：在Dreamweaver中建立“花园草地”和“个人站点”站点。 1. 段落首字下沉效果 （1）新建HTML网页文档，在空白页面中输入文本，并且保存该文档。 （2）在【窗口】菜单中打开【CSS样式】（或Shift+F11），单击右下角的【新建CSS样式】按钮，设置【选择器类型】为【类（可应用于任何标签）】，名称为.font1，【定义在】为【仅对该文档】，单击确定按钮弹出【.font1的CSS样式定义】对话框。在改对话框中选择【背景】，设置【背景颜色】为#DCF2FC。 （3）在对话框中选择【类型】，设置字体为【黑体】，【大小】为36，【粗细】为特粗，【样式】为斜体，【行高】为26，【颜色】为#003366。 （4）在对话框中选择【方框】，设置【浮动】为左对齐，单击【确定】。 （5）在页面中选中段落的第一个子，在下方的【属性面板】中选择【样式】为.font即可。保存预览。如下图所示： 2.利用CSS样式将表格的外边框设置成虚现状，如下图： （1）打开“个人站点”内的“个人简介.html”，在【新建CSS规则】对话框中，点选【标签（重新定义特定标签的外观）】单选按钮，在【标签】下拉列表中选择“table”。 （2）在【table的CSS规则定义】对话框中设置参数如下： （3）单击“确定”按钮，表格的边框自动更改成虚边框的样式。 3.利用CSS的FlipV滤镜使图片产生垂直翻转效果。 （1）打开个人站点内的“turn.html”文档，在【CSS样式】面板中单击按钮，打开【新建CSS规则】对话框，在【选择器类型】选项组中点选【类（可应用于任何标签）】单选按钮，在【名称】下拉列表框中输入“turn”，在【定义在】选项组中点选【仅对该文档】单选按钮，如下图所示。 （2）单击按钮，打开【.turn的CSS规则定义】对话框，在【分类】列表中选择【扩展】选项，在【滤镜】下拉列表中选择“FlipV”，然后单击按钮，如下图所示： （3）选择图片，在【属性】面板的【类】下拉列表中选择“turn”，保存后，按F12键预览，可以再浏览器中看到图片的翻转效果。 4.用插件播放WMV格式文件。 （1）打开个人站点内的“风采.html”。 （2）将鼠标光标置于单元格内，执行【插入】|【媒体】|【插件】命令，在打开的【选择文件】对话框中，选择“0001.wmv”文件，然后单击按钮。 （3）此时在单元格中插入一个占位符，单击占位符，然后在【属性】面板中将【宽】和【高】都设置为“400”像素。 （4）单击按钮，打开【参数】对话框，添加自动播放参数“autoStart” ，并设置其值为“1”，然后单击按钮退出。 （5）保存后，按F12观看放映。 5.创建和应用模板，在可编辑区域插入一张图片，并将logo图标保存为库项目。 （1）打开“花园草地”站点内的“moban.html”文档，执行【文件】|【另存为模板】命令，打开【另存为模板】对话框，在【另存为】文本框中输入模板名称moban后，单击按钮，此时弹出信息提示框，询问是否更新链接，单击“是”按钮，这样即可将当前文档保存为扩展名为“.dwt”的模板文档。 （2）将鼠标光标置于需要定义为可编辑区域的单元格中，执行【插入】|【模板对象】|【可编辑区域】命令。打开【新建可编辑区域】对话框，在【名称】文本框中将可编辑区域命名为“content”，然后单击按钮。按Ctrl+S保存。 （3）新建一个页面，保存为index.html，展开【资源】面板，应用“moban”模板。 （4）在编辑区删除可编辑区域名称，插入一张图片。 （5）将“index.html”文档的Logo图标保存为库项目。展开【资源】面板，切换到库项目列表，选中网站标志图片，按住鼠标左键拖曳图片到库项目列表，并更名为“logo”。 6. 为“花园草地”站点内的主页“index.html”添加一个弹出信息对话框，如下图所示： （1）单击body标签后，添加【弹出信息】行为，在打开的【弹出信息】对话框中输入如下图所示的文字: (2)将事件设置为“onLoad”，保存后预览。 7. 用关键帧方法创建时间轴动画。 （1）打开“花园草地”站点内的“moving_Layer.html”文档，按Alt+F9组合键展开【时间轴】面板。 （2）选中层右击，选择【添加到时间轴】，可将层添加到时间轴上。拖动动画条右侧的关键帧标记到第35帧处，可延长动画的播放时间。 （3）单击第35帧上的关键帧，然后再编辑窗口将层拖动一段距离，可以看到层的起始位置和结束位置之间出现一条直线，这就是层的移动轨迹。 （4）在时间轴中单击选中该层的动画条，按住Ctrl键后，鼠标指针变成小圆圈状，在第20帧处单击鼠标左键，在改位置出现了一个小圆圈，表示插入了一个关键帧，如下图所示。 （5）此