第二模块 简单网页制作

1、第二个模块是简单的网页制作主题1:添加网页的基本元素训练目的1.掌握页面属性的设置方法；2.掌握添加文本和水平线以及设置属性的方法；3.掌握添加图像和图像查看器以及设置属性的方法4.掌握Flash动画的添加方法。培训时间4课时培训准备1.Dreamweaver CS32.“快乐课堂”网站资料，“天使宝贝摄影网站”网站资料实践训练已经结束了任务1:完成“快乐课堂”网站的指南页面1.创建目录结构：在e盘下创建一个“myclass”文件夹，并将本单元“task 1”素材文件夹中的“images”和“flash”文件夹复制到该文件夹中。2.定义站点：(1)打开Dreamweaver软件，在Dreamw

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

3、击选择图片，然后单击属性面板中的“居中对齐”按钮。5.插入水平线并进行相应设置：(1)选择命令“插入”“html”“水平线”,在光标所在位置插入一条水平线。(2)选择水平线，在属性面板“宽度”右侧的文本框中输入200，将对齐方式设置为“居中对齐”。6.添加文本并进行相应设置：(1)将光标放在水平线的右侧，然后按回车键。打开“txt”文件夹，将“指南页面”文本文件中的文本复制并粘贴到光标处。(2)将光标放在文本的末尾，并在图像文件夹中插入“line.gif”图像。7.完成“底部版权”的设置：(1)在水平线下输入“版权所有：快乐课堂10.11 QQ:”(2)在“QQ”文本前的图像文件夹下插入“em

4、ail4.gif”图像。8.保存并按F12快捷键预览页面并检查预览效果。拓展任务：完成“天使宝贝摄影网站”主页提示：本培训必须确保计算机的显示分辨率为1024X768像素。1.创建目录结构：在e盘下创建一个“myshow”文件夹，并将本单元“扩展任务”材料文件夹中的“flash”和“images”文件夹复制到“myshow”文件夹中。2.定义站点：站点名称为“天使宝贝”，本地根文件夹为“E:myshow”，并创建一个新的“index.htm”文件。3.设置页面属性：网页标题为“天使宝贝摄影网站”，文本大小为12像素，背景图片为图片文件夹中的“北京. jpg”文件。4.添加文本并进行相应设置：(

5、1)将光标放在文档窗口，输入文本“欢迎来到天使宝贝摄影网站！”，单击属性面板中的“居中对齐”按钮，选择“天使宝贝”文本，并将文本颜色设置为粗体“#FF6633”。(2)按回车键，注意将光标定位在深红色背景上，并将“页面顶部”文件中的文本内容复制到“txt”文件夹中。单击属性面板中的中心对齐按钮，文本颜色为#FFFFFF。5.添加图像并进行相应设置：(1)按回车键将图像文件夹中的“b1.jpg”图像插入光标。(2)选择图像，然后单击属性面板中的“居中对齐”按钮。6.插入一条水平线并进行相应设置：在图像下方插入一条“宽度”为800像素的水平线，并将其设置为“中心对齐”。7.插入Flash动画并进行

6、相应设置：(1)在水平线下输入文本“作品欣赏”。将光标置于“作品欣赏”前，选择命令“插入”“超文本标记语言”“特殊字符”“不换行”插入空格。参考示例，插入多个空格来调整“作品欣赏”文本的位置，并将其设置为粗体。(2)将光标置于【作品欣赏】下，选择“插入”“媒体”“flash”命令，在“选择文件”对话框的“Flash”文件夹中选择“1.swf”文件，点击“确认”按钮。(3)对于道路上插入的闪光灯，在属性面板中，将对齐方式设置为“左对齐”，水平边距设置为100。单击属性面板中的播放按钮查看其效果。8.参照示例完成“优惠活动”、“新闻趋势”、“套餐价格”、“宝贝常识”和“关于我们”的相应设置。9.添

7、加图像查看器并进行相应设置：(1)将光标放在“关于我们”的右侧，选择命令“插入”“媒体”“图像查看器”以插入图像查看器。(2)此时，打开“保存flash元素”对话框，在对话框中选择“flash”文件夹，输入文件名“2.swf”，点击“保存”按钮。(3)选择图像查看器，在属性面板中将对齐方式设置为“右对齐”，水平边距为100。(4)在右侧的“标签查看器”面板中进行以下设置：单击图像列表右侧的编辑数组值按钮，打开编辑图像列表对话框，单击img1.jpg，然后单击右侧的文件夹图标。在弹出的选择文件对话框中，选择图像文件夹下的d1.jpg，然后单击确定。同样，依次添加“d2.jpg”和“d3.jpg”

8、文件。单击“编辑图像列表”对话框左上角的按钮，继续添加d4.jpg、d5.jpg、d6.jpg、d7.jpg、d8.jpg、d9.jpg和d10.jpg，然后单击“确定”。在“标签查看器”面板中进行以下设置：幻灯片自动播放：是幻灯片延迟：2幻灯片循环：是标题：标题一岁婴儿节目的颜色：#FF0000(红色)单击属性面板中的播放按钮查看其效果。10.完成“底部版权”的设置：(1)在页面底部插入一条宽度为800像素的水平线，对齐方式为“居中对齐”。(2)在水平线下，参照样品，输入相应的内容，将对齐方式设置为“中心对齐”。(3)保存并按F12快捷键预览页面，检查预览效果。实践培训和评估对学生的学习态度

9、、操作能力、参与度和完成度进行评价，教师打分，得出学生的实训效果。实践训练的一般结论根据学生实训中存在的问题，引导学生总结整个实训过程，提出下一步的实训要求。主题2中形式的插入和设置训练目的1.了解一些常用的表格设计技巧；2.掌握表格、行、列和单元格的基本操作；3.掌握嵌套表的插入和设置；4.掌握添加文字、图片、Flash动画等方法。到桌子上；5.了解表单在网页布局设计中的应用。培训时间6课时培训准备1.Dreamweaver CS32.“快乐课堂”网站材料实践训练已经结束了任务1:在“班级主页”(index.htm)中创建一个表格1.设置页面属性：(1)在Dreamweaver的培训1中打开

10、“快乐课堂10级和11级”站点，并创建一个新的“index.htm”文件。(2)将“index.htm”文件的标题设置为“欢迎使用快乐班10.11”，选择“修改”“页面属性”命令，将页面字体大小设置为“12像素”，文本颜色设置为“#”，在图像文件夹中将背景图像设置为“bg1.gif”，将上下左右边距设置为0像素。2.创建横幅表格：(1)在文档窗口中定位光标，选择命令“插入”“表格”，在打开表格对话框中，参数为1行1列，宽度为750像素，边框厚度为1像素，单元格边距和单元格间距均为0像素，点击“确定”按钮。(2)单击编辑窗口左下方的标签，选择整个表格，在属性面板中将其高度设置为164像素，并将表

11、格id设置为“横幅”，将对齐方式设置为“居中对齐”，将边框颜色设置为“#368ce2”，并将图像文件夹中的背景图像设置为“head.jpg”。(3)将闪存文件夹中的“head.swf”插入表格。(4)选择闪存，点击属性面板中的“参数”按钮，在弹出的“参数”对话框中输入参数“wmode”和“透明”值，点击“确定”。3.创建导航导航导航表：(1)将光标定位在横幅表格上后，继续插入表格。参数为2行1列，宽度为750像素，边框厚度为1像素，单元格边距和单元格间距为0像素，高度为30像素。表格标识为“倒行”，对齐方式为“居中对齐”，边框颜色为“#368ce2”，背景颜色为“#FFFFFF”(2)将光标定

12、位在横幅表格的第一行，在属性面板中将第一行的高度设置为25像素，并参照示例输入“班级主页、班级简介、班级新闻、学生作品、教师风格、成员注册”的内容。在属性面板中将文本和竖线的颜色设置为“#03a2d0”。(3)将光标放在标题表格的第二行，将背景颜色设置为“#368ce2”，并将“spacer.gif”文件插入图像文件夹。4.创建主主表：(1)将光标定位在道行表上后，继续插入表格。参数为1行2列，750像素宽，1像素边框厚，0像素单元格边距和单元格间距，表格id中的“zhuti ”,对齐中的“center alignment ”,背景中的“#f7f9fd”和边框颜色中的“#368ce2”。(2)

13、将光标定位在zhuti表的第一列，并在属性面板中将列宽设置为250像素。创建主体主表的左侧区域：(3)在zhuti表格的第一列插入一个嵌套表格，参数为6行1列，宽度为245像素，边框厚度为1像素，单元格边距和单元格间距为0像素，表格标识为“z1”。按住Ctrl键并单击选择第一、第三和第五行，并将行高设置为30像素，背景颜色设置为“# F7F 9fd”；同样，将第2、4和6行的行高设置为200像素。(4)将光标放在z1表格的第6行，单击属性面板中的“将单元格拆分为行或列”按钮，将单元格拆分为6行。通过拖动和选择来选择这6条线，然后在属性面板中将每条线的高度设置为40像素，并将边框颜色设置为“#”

14、cccccccc。创建主体主表的右边区域：(5)在zhuti表的第二列插入一个嵌套表，参数为14行1列，宽度为500像素，边框厚度为1像素，单元格边距和单元格间距为0像素，表id为“z2”。将第1行和第10行的行高设置为35像素，背景在图像文件夹中为“title 4 . gif”；将第2-9行的行高设置为30像素。(6)将z2表的第11-14行分别分成两列。5.创建底部表格：继续将表格插入“zhuti”表格下。参数为1行1列，宽度为500像素，边框厚度为1像素，单元格边距和单元格间距为0像素，表格id为“底部”。对齐方式为“居中对齐”，背景颜色为“#368ce2”，边框颜色为“#ffffff”

15、。6.保存并按F12快捷键预览页面并检查预览效果。任务2:向“班级主页”主页表添加内容1.将内容添加到zhuti表中左侧的嵌套表z1中：(1)在嵌套表z1的第一行的images文件夹中插入“img_1.gif”文件，并输入班级公告。(2)参考步骤(1)和示例，在表z1的第三和第五行插入“img_2.gif”和“img_4.gif”文件和内容“竞赛图片”和“友谊链接”。(3)复制并粘贴嵌套表z1第二行“txt”文件夹中的“班级公告”文件中的文本内容。选择“课程公告”内容，然后单击属性面板中的“项目列表”按钮。(4)在嵌套表z1的第四行，在images文件夹中插入“xw4.jpg”文件，选择图像，

16、并在属性面板中设置240的宽度和200像素的高度。(5)将“友谊链接”文件中的文本内容复制并粘贴到嵌套表z1的第6-10行的“txt”文件夹中。2.将内容添加到zhuti表的右侧嵌套表z2中：(1)在嵌套表z2的第一行输入“类别新闻”，将光标放在“类别新闻”前面，并插入3个空格。(2)参考样本，在表z2的第10行插入三个空格和“学生作品”的文本内容。(3)参照示例，依次将图像“img_3.gif”插入到表z2第2-9行的图像文件夹中，并依次将文本复制粘贴到txt文件夹中Class News文件水平线上方。(4)将光标置于“请抓紧准备”后，输入文本.更多”，以粗体显示，并参考示例“调整”.在这条线的最右边有一个空格。(5)将“new.gif”文件插入图像文件夹的第二行到第四行文本之后。(6)在嵌套表格z2的第11行的第1和第2个单元格中输入文本“3ds Works”和“Photoshop Works”，并将文本设置为居中对齐。(7)在嵌套表格z2的第13行的第1和第2个单元格中输入文本“flash Works”和“Anime Drawing Works”，并将文本设置为居中对齐。(8)将“图像”文件夹中的“s_3ds1.jpg”和“s_ps1.jpg”图像插入嵌套表z2第12行的第一个和第二个单元格中。在第14行的第