《简单网页制作小步骤》由会员分享,可在线阅读,更多相关《简单网页制作小步骤(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键观看效果。