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