02 第二模块 简单网页制作

《02 第二模块 简单网页制作》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第二模块简单网页制作课题一网页基本元素的添加实训目标1.掌握页面属性的设置方法；2.掌握文本、水平线的添加及属性设置方法；3.掌握图像、图像查看器的添加及属性设置方法4.掌握Flash动画的添加方法。实训课时4课时实训准备1.DreamweaverCS32.“快乐班级”网站素材、“天使宝贝摄影网站”网站素材实训过程任务一：完成“快乐班级”网站引导页1.创建目录结构：在E盘下建立“myclass”文件夹，将本单元“任务一”素材文件夹中的“images”和“flash”文件夹复制到该文件夹下。2.定义站点：（1）打开Dreamweaver软件，在Dreamweaver中定义

2、站点名称为“快乐班级10级11班”，本地根文件夹为“E:myclass”。（2）右击“文件”面板中的“站点-快乐班级10级11班”，选择“新建文件”命令，将该文件命名为“default.htm”，按回车键完成。3.设置页面属性：在“文件”面板中双击打开“default.htm”文件，在编辑区上方的标题框中输入标题为“快乐班级10级11班”，选择“修改”→“页面属性”命令，设置文本大小为12像素，文本颜色为“#FFFFFF”，背景图像为images文件夹中的“bg1.gif”，单击“确定”按钮。4.添加图像并进行相应设置：（1）选择“插入”→“图像”命令，将images

3、文件夹中的“main.gif”图像插入到光标所在处。（2）单击选中该图片，在属性面板中单击“居中对齐”按钮。5.插入水平线并进行相应设置：（1）选择“插入”→“HTML”→“水平线”命令，在光标所在处插入水平线。（2）选中该水平线，在属性面板中“宽”右侧文本框中输入200，设置对齐方式为“居中对齐”。6.添加文本并进行相应设置：（1）将光标定位于水平线右侧，按回车键。打开“txt”文件夹，将“引导页”文本文件中的文本复制粘贴到光标所在处。（2）将光标定位在文本末，插入images文件夹下的“line.gif”图像。7.完成“底部版权”的设置：28（1）在水平线下方输入“

4、版权所有：快乐班级10.11QQ：1234567890”。（2）在“QQ”文本前插入images文件夹下的“email4.gif”图像。8.保存并按F12快捷键预览页面，查看预览效果。拓展任务：完成“天使宝贝摄影网站”网站主页小提示：此次实训必须保证计算机的显示分辨率为1024X768像素。1.创建目录结构：在E盘下建立“myshow”文件夹，将本单元“拓展任务”素材文件夹中的“flash”和“images”文件夹复制到“myshow”文件夹。2.定义站点：站点名为“天使宝贝”，本地根文件夹为“E:myshow”，新建“index.htm”文件。3.设置页面属性：网页

5、标题为“天使宝贝摄影网站”，文本大小为12像素，背景图像为images文件夹中的“beijing.jpg”文件。4.添加文本并进行相应设置：（1）将光标定位在文档窗口中，输入文本“欢迎来到‘天使宝贝’摄影网站！”，在属性面板中单击“居中对齐”按钮，选中“天使宝贝”文本，设置文本颜色为“#FF6633”，粗体。（2）按回车键，注意将光标定位在深红色背景处，复制“txt”文件夹中“页面上方”文件中的文本内容。在属性面板中单击“居中对齐”按钮，文本颜色为“#FFFFFF”。5.添加图像并进行相应设置：（1）按回车键，将images文件夹中的“b1.jpg”图像插入到光标所在处

6、。（2）选中该图像，在属性面板中，单击“居中对齐”按钮。6.插入水平线并进行相应设置：在该图像下方插入一条“宽”为800像素的水平线，设置为“居中对齐”。7.插入Flash动画并进行相应设置：（1）在水平线下方输入文本“[作品欣赏]”。将光标定位于“[作品欣赏]”之前，选择“插入”→“HTML”→“特殊字符”→“不换行空格”命令，可插入一个空格。参照样例，插入多个空格来调整“[作品欣赏]”文本的位置，并设置为粗体。（2）将光标定位在“[作品欣赏]”下方，选择“插入”→“媒体”→“Flash”命令，在“选择文件”对话框中选择“flash”文件夹中的“1.swf”文件，单击

7、“确认”按钮。（3）行路插入的flash，在属性面板中，设置对齐方式为“左对齐”，水平边距为100。单击属性面板中的“播放”按钮查看其效果。8.参照样例完成“[优惠活动]”、“[新闻动态]”、“[套系价格]”、“[宝贝常识]”、“[关于我们]”的相应设置。289.添加图像查看器并进行相应设置：（1）将光标定位在“[关于我们]”右侧，选择“插入”→“媒体”→“图像查看器”命令，插入一个图像查看器。（2）这时打开“保存flash元素”对话框，在该对话框中选择保存位置为“flash”文件夹，并输入文件名“”2.swf，单击“保存”按钮。（3）选