02 第二模块 简单网页制作

1第二模块简单网页制作课题一网页基本元素的添加实训目标1.掌握页面属性的设置方法；2.掌握文本、水平线的添加及属性设置方法；3.掌握图像、图像查看器的添加及属性设置方法4.掌握Flash动画的添加方法。实训课时4课时实训准备1.DreamweaverCS32.“快乐班级”网站素材、“天使宝贝摄影网站”网站素材实训过程任务一：完成“快乐班级”网站引导页1.创建目录结构：在E盘下建立“myclass”文件夹，将本单元“任务一”素材文件夹中的“images”和“flash”文件夹复制到该文件夹下。2.定义站点：（1）打开Dreamweaver软件，在Dreamweaver中定义站点名称为“快乐班级10级11班”，本地根文件夹为“E:\myclass”。（2）右击“文件”面板中的“站点-快乐班级10级11班”，选择“新建文件”命令，将该文件命名为“default.htm”，按回车键完成。3.设置页面属性：在“文件”面板中双击打开“default.htm”文件，在编辑区上方的标题框中输入标题为“快乐班级10级11班”，选择“修改”→“页面属性”命令，设置文本大小为12像素，文本颜色为“#FFFFFF”，背景图像为images文件夹中的“bg1.gif”，单击“确定”按钮。4.添加图像并进行相应设置：（1）选择“插入”→“图像”命令，将images文件夹中的“main.gif”图像插入到光标所在处。（2）单击选中该图片，在属性面板中单击“居中对齐”按钮。5.插入水平线并进行相应设置：（1）选择“插入”→“HTML”→“水平线”命令，在光标所在处插入水平线。（2）选中该水平线，在属性面板中“宽”右侧文本框中输入200，设置对齐方式为“居中对齐”。6.添加文本并进行相应设置：（1）将光标定位于水平线右侧，按回车键。打开“txt”文件夹，将“引导页”文本文件中的文本复制粘贴到光标所在处。（2）将光标定位在文本末，插入images文件夹下的“line.gif”图像。7.完成“底部版权”的设置：（1）在水平线下方输入“版权所有：快乐班级10.11QQ：1234567890”。2（2）在“QQ”文本前插入images文件夹下的“email4.gif”图像。8.保存并按F12快捷键预览页面，查看预览效果。拓展任务：完成“天使宝贝摄影网站”网站主页小提示：此次实训必须保证计算机的显示分辨率为1024X768像素。1.创建目录结构：在E盘下建立“myshow”文件夹，将本单元“拓展任务”素材文件夹中的“flash”和“images”文件夹复制到“myshow”文件夹。2.定义站点：站点名为“天使宝贝”，本地根文件夹为“E:\myshow”，新建“index.htm”文件。3.设置页面属性：网页标题为“天使宝贝摄影网站”，文本大小为12像素，背景图像为images文件夹中的“beijing.jpg”文件。4.添加文本并进行相应设置：（1）将光标定位在文档窗口中，输入文本“欢迎来到‘天使宝贝’摄影网站！”，在属性面板中单击“居中对齐”按钮，选中“天使宝贝”文本，设置文本颜色为“#FF6633”，粗体。（2）按回车键，注意将光标定位在深红色背景处，复制“txt”文件夹中“页面上方”文件中的文本内容。在属性面板中单击“居中对齐”按钮，文本颜色为“#FFFFFF”。5.添加图像并进行相应设置：（1）按回车键，将images文件夹中的“b1.jpg”图像插入到光标所在处。（2）选中该图像，在属性面板中，单击“居中对齐”按钮。6.插入水平线并进行相应设置：在该图像下方插入一条“宽”为800像素的水平线，设置为“居中对齐”。7.插入Flash动画并进行相应设置：（1）在水平线下方输入文本“[作品欣赏]”。将光标定位于“[作品欣赏]”之前，选择“插入”→“HTML”→“特殊字符”→“不换行空格”命令，可插入一个空格。参照样例，插入多个空格来调整“[作品欣赏]”文本的位置，并设置为粗体。（2）将光标定位在“[作品欣赏]”下方，选择“插入”→“媒体”→“Flash”命令，在“选择文件”对话框中选择“flash”文件夹中的“1.swf”文件，单击“确认”按钮。（3）行路插入的flash，在属性面板中，设置对齐方式为“左对齐”，水平边距为100。单击属性面板中的“播放”按钮查看其效果。8.参照样例完成“[优惠活动]”、“[新闻动态]”、“[套系价格]”、“[宝贝常识]”、“[关于我们]”的相应设置。9.添加图像查看器并进行相应设置：3（1）将光标定位在“[关于我们]”右侧，选择“插入”→“媒体”→“图像查看器”命令，插入一个图像查看器。（2）这时打开“保存flash元素”对话框，在该对话框中选择保存位置为“flash”文件夹，并输入文件名“”2.swf，单击“保存”按钮。（3）选中该图像查看器，在属性面板中设置对齐方式为“右对齐”，水平边距为100。（4）在右侧的“标签查看器”面板中进行以下设置：①单击“imagesURLs”右侧的“编辑数组值”按钮，打开“编辑imagesURLs”对话框，单击‘img1.jpg’处，再单击右侧的文件夹图标，在弹出的“选择文件”对话框中，选择images文件夹下的“d1.jpg”，单击“确定”按钮。②同理，依次添加“d2.jpg”、“d3.jpg”文件。③单击“编辑imagesURLs”对话框左上角的“+”按钮，继续添加“d4.jpg”、“d5.jpg”“d6.jpg”、“d7.jpg”“d8.jpg”、“d9.jpg”“d10.jpg”，单击“确定”按钮。④在“标签查看器”面板中进行以下设置：slideAutoPlay（自动播放）：是slideDelay（延时）：2slideLoop（循环）：是title（标题）：周岁宝宝秀titleColor（标题颜色）：#FF0000（红色）单击属性面板中的“播放”按钮查看其效果。10.完成“底部版权”的设置：（1）在页面下方，插入一条宽800像素，对齐方式为“居中对齐”的水平线。（2）在该水平线的下方，参照样例，输入相应的内容，并设置对齐方式为“居中对齐”。（3）保存并按F12快捷键预览页面，查看预览效果。实训评价对学生的学习态度、操作能力、参与度及完成情况进行考核评估，由教师评估给分，得到学生的实训成绩。实训总结根据学生实训过程中出现的问题，引导学生对整个实训的实施过程进行总结，并提出下一步训练要求。45课题二表格的插入与设置实训目标1.了解一些表格常用的设计技巧；2.掌握对表格、行、列、单元格的基本操作；3.掌握嵌套表格的插入与设置；4.掌握在表格中添加文字、图像、Flash动画等的方法；5.了解表格对网页布局设计的应用。实训课时6课时实训准备1.DreamweaverCS32.“快乐班级”网站素材实训过程任务一：创建“班级首页”（index.htm）中的表格1.设置页面属性：（1）在Dreamweaver中打开实训一中的“快乐班级10级11班”站点，新建“index.htm”文件。（2）设置“index.htm”文件的网页标题为“欢迎来到快乐班级10.11”，选择“修改”→“页面属性”命令，设置页面字体大小为“12像素”，文本颜色为“#333333”，背景图像为images文件夹中的“bg1.gif”，上、下、左、右边距为0像素。2.创建Banner表格：（1）将光标定位在文档窗口中，选择“插入”→“表格”命令，在打开的表格对话框中，参数为1行1列，宽为750像素，边框粗细1像素，单元格边距、单元格间距都为0像素，单击“确定”按钮。（2）在编辑窗口左下方单击table标签，选中整个表格，在属性面板中设置其高为164像素，并设置表格id为“banner”，对齐方式为“居中对齐”，边框颜色为“#368ce2”，背景图像为images文件夹中的“head.jpg”。（3）在该表格中插入flash文件夹中的“head.swf”.（4）选中该Flash，单击属性面板的“参数”按钮，在弹出的“参数”对话框中输入参数为“wmode”,值为“transparent”，单击“确定”按钮。3.创建导航daohang表格：（1）将光标定位在banner表格之后，继续插入表格，参数为2行1列，宽750像素，边框粗细1像素，单元格边距、单元格间距都为0像素，高为30像素，表格id为“daohang”，对齐方式为“居中对齐”，边框颜色为“#368ce2”，背景颜色为“#FFFFFF”。（2）将光标定位在banner表格第一行中，在属性面板中设置第一行行高为25像素，参照样例输入“班级首页∣班级简介∣班级新闻∣学生作品∣教师风采∣会员注册”内容。在属性面板中设置文字及竖线的颜色为“#03a2d0”。（3）将光标定位在banner表格第二行中，设置背景色为“#368ce2”，并插入images文件夹中的“spacer.gif”文件。4.创建主体zhuti表格：（1）将光标定位在daohang表格之后，继续插入表格，参数为1行2列，宽750像素，边框粗细1像素，单元格边距、单元格间距都为0像素，表格id为“zhuti”，6对齐方式为“居中对齐”，背景颜色为“#f7f9fd”，边框颜色为“#368ce2”。（2）将光标定位在zhuti表格第一列中，在属性面板中设置列宽为250像素。创建主体zhuti表格左边区域：（3）在zhuti表格的第一列中插入一个嵌套表格，参数为6行1列，宽为245像素，边框粗细1像素，单元格边距、单元格间距都为0像素，表格id为“z1”。并按住Ctrl键单击选中第1、3、5行，设置行高为30像素，背景颜色为“#f7f9fd”；同理设置第2、4、6行的行高为200像素。（4）将光标定位在z1表格的第6行中，单击属性面板中的“拆分单元格为行或列”按钮，将该单元格拆分为6行。用拖曳选择的方法选中这6行，然后在属性面板中设置各行高为40像素，边框色为“#cccccc”。创建主体zhuti表格右边区域：（5）在zhuti表格的第二列中插入一个嵌套表格，参数为14行1列，宽为500像素，边框粗细1像素，单元格边距、单元格间距都为0像素，表格id为“z2”。并设置第1、10行的行高为35像素，背景为images文件夹中的“title4.gif”；设置第2—9行的行高为30像素。（6）将z2表格的第11—14行分别拆分为2列。5.创建底部bottom表格：在“zhuti”表格之下继续插入表格，参数为1行1列，宽为500像素，边框粗细1像素，单元格边距、单元格间距都为0像素，表格id为“bottom”。对齐方式为“居中对齐”，背景颜色为“#368ce2”，边框颜色为“#ffffff”。6.保存并按F12快捷键预览页面，查看预览效果。任务二：向“班级首页”主页表格中添加内容1.向zhuti表格中的左侧嵌套表格z1添加内容：（1）在嵌套表格z1的第1行中插入images文件夹中的“img_1.gif”文件，并输入班级公告。（2）参照步骤（1）及样例，在表格z1的第3行和第5行，插入“img_2.gif”、“img_4.gif”文件及内容“比赛图片”、“友情链接”。（3）在嵌套表格z1的第2行内，复制粘贴“txt”文件夹中“班级公告”文件中的文本内容。选中“班级公告”内容，单击属性面板中的“项目列表”按钮。（4）在嵌套表格z1的第4行内，插入images文件夹中的“xw4.jpg”文件并选中图像，在属性面板中设置宽为240、高为200像素。（5）在嵌套表格z1的第6—10行内，依次复制粘贴“txt”文件夹中“友情链接”文件中的文本内容。2.向zhuti表格中的右侧嵌套表格z2添加内容：（1）在嵌套表格z2的第1行中输入“班级新闻”，将光标定位在“班级新闻”前，插入3个空格。（2）参照样例，在表格z2的第10行，插入3个空格和“学生作品”文本内容。7（3）参照样例，在表格z2的第2—9行，依次插入images文件夹中的“img_3.gif”图像，并依次复制粘贴“txt”文件夹中“班级新闻”文件中横线以上的文本内容。（