网页设计实训指导书.doc

网页设计实训指导书 1（机房/Dreamweaver）掌握在Dreamweaver MX中定义CSS的方法和技巧。 使你的网页真正“美”起来。 1.区块2.盒子1.区块样式一设置“字母间距”为1象素。 设置“文字缩进”为2字体高。 样式二设置“文本对齐”为“两端对齐”。 2.盒子样式一设置“填充”“上”为6象素，“全部相同”。 应用到表格。 样式二设置“浮动”为“右对齐”、“填充”为6象素。 应用到图片。 过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到熟练应用CSS等。 以及举一反三，融会贯通等给出成绩。 2（机房/Dreamweaver）掌握表格在网页布局中的特点及应用；掌握如何通过表格来布局一个完整的界面。 通过表格构建完整的页面1创建网页的“头部分”。 1)插入一个1行2列，宽为760象素，边框及边距均为0的表格。 2)插入一个1行1列，宽为760象素，边框及边距均为0的表格。 3)插入一个1行2列，宽为760象素，边框及边距均为0的表格。 4)分别进行简单设置。 创建网页的“主体部分”。 1)插入一个1行3列，宽为760象素，边框及边距均为0的表格，这个表格将放置页面的主体内容。 2)在左边单元格中插入一个12行1列，宽为90%的表格。 （表格的嵌套）3)在中间单元格插入一个4行1列，宽为95%的表格。 4)在右边单元格插入一个7行1列，宽为90%的表格。 5)分别进行简单设置。 创建网页的“尾部分”。 1)插入一个2行2列，宽为760象素，边框及边距均为0的表格。 2)进行简单设置。 23过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到布局美观的效果。 以及举一反三，融会贯通等给出成绩。 3（机房/Dreamweaver）了解表单网页的初步知识 2、能够制作简单的表单网页制作一个表单1）将插入点放在希望表单出现的位置。 选择“插入”“表单”，或选择“插入”栏上的“表单”类别，然后单击“表单”图标。 2）将插入点放在红色的表单中，单击“插入”栏“常用”类别中的“表格”按钮。 3）在“插入表格对话框中，设置行数11，列数2。 4）在表格中，左边一列的单元格中输入文字，右边一列中插入“文本字段”。 5）选中右边一列中的“文本字段”，在属性面板上，为“文本字段”输入和左边一列单元格中相同的文字。 6）重复输入文字和插入“文本字段”，给文本字段命名。 按住ctrl键，选中最下面一行的两列，合并单元格。 7）在最下面一列，插入两个“按钮”。 8）选中右边一个按钮，在属性面板上，动作选择为“重设表单”。 9）选中文档左下角“标签选择器”上的form标签，在属性面板上，动作中输入mailto:网站管理员的电子信箱地址，在方法中选择POST。 10）继续选中form标签，打开“标签检查器”面板，在enctype属性中，单击右边的下拉箭头，选择text/plain类型。 过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到布局美观的效果。 以及举一反三，融会贯通等给出成绩。 4（机房/Dreamweaver）掌握层面板的使用方法，能够使用层进行页面布局。 使用层进行页面布局1）新建一个网页。 2）选择“插入”“布局对象”“层”。 3）这时候在区域中就会新建了一个层，先将创建的第一个层放置在左上角（默认），然后点击该层的边框。 4）在下面的属性检查器中，把“背景颜色”填写green。 5）然后重复刚才的步骤，选择“插入”“布局对象”“层”。 6）我们建立的第2个层也会默认在左上角的，所以我们要把它拖动到我们的想要放置的位置，即右上角。 7）同理，我们建立多2个层，然后把他们分别设置颜色为红色和黑色，分别在颜色中填入red和black，然后分别拖动到左下角和右下角。 然后保存。 8）然后我们分别在绿色层、蓝色层、红色层和黑色层中输入“我是绿色”，“我是蓝色”，“我是红色”，“我是黑色”，字体颜色都设置为白色。 保存后，预览。 过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到布局美观的效果。 以及举一反三，融会贯通等给出成绩。 5（机房/Dreamweaver）了解模板在网页设计中的地位与作用；掌握模板的创建与方法；掌握模板的应用方法。 运用模板设计网页 （1）在站点“site”根文件夹中新建一个子文件夹“实训4” （2）分析两个页面在结构布局上的共同点 （3）打开资源面板-模板-新建,创建一个名为moban.dwt的模板文件 （4）moban.dwt的内容,按网页设计的方法,对模板进行设计(同网页设计的方法) （5）在模板中将应用到网页后需要修改的部分定义为可区域 （6）保存模板 （7）新建网页index.htm,选择模板moban.dwt,应用到网页后修改相应部分 (8)按同样的方法设计网页fq.htm过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到布局美观的效果。 以及举一反三，融会贯通等给出成绩。 6（机房/Dreamweaver）了解在网页设计中运用框架技术的优势与弊端；掌握框架的拆分与属性设置。 能将超链接和框架结合起来设计网页。 将超链接和框架结合起来设计网页 （1）在站点“site”根文件夹中新建一个子文件夹“实训5” （2）分别页面上部、左部、top.htm,left.htm,bottom.htm,1.htm,2.htm,3.htm,4.htm,5.htm （3）建立框架结构 （4）利用“框架”面板选择相应的框架，topframe,leftframe,mainframe,bottomframe （5）在“文件”菜单中选择“框架集另存为”将整个框架集保存为index.htm(框架集的作用是用于保存整个框架集结构及每个框架的设置） （6）利用框架面板选择框架topframe,在属性面板中将其源文件设置为网页top.htm （7）利用框架面板选择框架leftframe,在属性面板中将其源文件设置为网页left.htm (8)利用框架面板选择框架bottomframe,在属性面板中将其源文件设置为网页bottom.htm （9）利用框架面板选择框架mainframe,在属性面板中将其源文件设置为网页gxlc.htm （10）对各框架的源文件设置完成后，观察各框架内网页间的距离。 若不合适，可通过在“页面属性”中设置各网页的边距来调整（若框架mainframe不能全部显示其内的网页，则将给框架设置滚动条） （11）选择leftframe框架内网页中的图片“工作流程”，给其设置链接，链接文件为gzlc.htm,目标为mainframe （12）选择leftframe框架内网页中的图片“经典案例”，给其设置链接，链接文件为jdal,目标也为mainframe （13）按同样的方法给其它项目设置超链接，但要注意它们的链接文件打开目标位置都为mainframe下部和中间部分的内容设计为网页给各框架分别命名为过程考核根据例子，通过学生对本例做的效果7如是否严格按照要求；是否达到布局美观的效果。 以及举一反三，融会贯通等给出成绩。 （有音箱机房/Dreamweaver）掌握在Dreamweaver MX中定义行为的方法和技巧。 使你的网页真正“动”起来。 1.变色按钮的制作。 2.如何在页面中播放声音。 1.变色按钮的制作。 1)插入一个4行1列的表格，宽为150象素，边框为1象素。 2)在单元格中输入文本，设置链接。 3)修改源代码，命名标签DIV。 4)设置行为属性。 2如何在网页中播放声音。 1)选中选项，在行为菜单中选择“播放声音”。 2)选择素材声音文件，设置触发条件onload.3)设置播放属性。 过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到完全理解行为的工作原理和过程等。 以及举一反三，融会贯通等给出成绩。 8（能连INTERNET机房/Dreamweaver,CuteFTP,WS_FTP PRO）掌握利用Dreamweaver MX和其他应用软件设置站点并上传站点的功能。 1Dreamweav