网页设计实训指导书.doc

《网页设计实训指导书.doc》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、网页设计实训指导书　　1（机房/Dreamweaver）掌握在DreamweaverMX中定义CSS的方法和技巧。　　使你的网页真正“美”起来。　　1.区块2.盒子1.区块样式一设置“字母间距”为1象素。　　设置“文字缩进”为2字体高。　　样式二设置“文本对齐”为“两端对齐”。　　2.盒子样式一设置“填充”“上”为6象素，“全部相同”。　　应用到表格。　　样式二设置“浮动”为“右对齐”、“填充”为6象素。　　应用到图片。　　过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到熟练应用CSS等。　　以及举一反三，融会贯通等给出成绩。　　2（机房/Dreamweaver）掌

2、握表格在网页布局中的特点及应用；掌握如何通过表格来布局一个完整的界面。　　通过表格构建完整的页面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%

3、的表格。　　4)在右边单元格插入一个7行1列，宽为90%的表格。　　5)分别进行简单设置。　　创建网页的“尾部分”。　　1)插入一个2行2列，宽为760象素，边框及边距均为0的表格。　　2)进行简单设置。　　2．3．过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到布局美观的效果。　　以及举一反三，融会贯通等给出成绩。　　3（机房/Dreamweaver）了解表单网页的初步知识　　2、能够制作简单的表单网页制作一个表单1）将插入点放在希望表单出现的位置。　　选择“插入”>“表单”，或选择“插入”栏上的“表单”类别，然后单击“表单”图标。　　2）将插入点放在红色的表单中

4、，单击“插入”栏“常用”类别中的“表格”按钮。　　3）在“插入表格对话框中，设置行数11，列数2。　　4）在表格中，左边一列的单元格中输入文字，右边一列中插入“文本字段”。　　5）选中右边一列中的“文本字段”，在属性面板上，为“文本字段”输入和左边一列单元格中相同的文字。　　6）重复输入文字和插入“文本字段”，给文本字段命名。　　按住ctrl键，选中最下面一行的两列，合并单元格。　　7）在最下面一列，插入两个“按钮”。　　8）选中右边一个按钮，在属性面板上，动作选择为“重设表单”。　　9）选中文档左下角“标签选择器”上的form标签，在属性面板上，动作中输入mailto:网站管理员的电

5、子信箱地址，在方法中选择POST。　　10）继续选中form标签，打开“标签检查器”面板，在enctype属性中，单击右边的下拉箭头，选择text/plain类型。　　过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到布局美观的效果。　　以及举一反三，融会贯通等给出成绩。　　4（机房/Dreamweaver）掌握层面板的使用方法，能够使用层进行页面布局。　　使用层进行页面布局1）新建一个网页。　　2）选择“插入”－》“布局对象”－》“层”。　　3）这时候在区域中就会新建了一个层，先将创建的第一个层放置在左上角（默认），然后点击该层的边框。　　4）在下面的属性检查器中，

6、把“背景颜色”填写green。　　5）然后重复刚才的步骤，选择“插入”－》“布局对象”－》“层”。　　6）我们建立的第2个层也会默认在左上角的，所以我们要把它拖动到我们的想要放置的位置，即右上角。　　7）同理，我们建立多2个层，然后把他们分别设置颜色为红色和黑色，分别在颜色中填入red和black，然后分别拖动到左下角和右下角。　　然后保存。　　8）然后我们分别在绿色层、蓝色层、红色层和黑色层中输入“我是绿色”，“我是蓝色”，“我是红色”，“我是黑色”，字体颜色都设置为白色。　　保存后，预览。　　过程考核根据例子，通过学生对本例做的效果如是否严格按照要求；是否达到布局美观的效果。　　以

7、及举一反三，融会贯通等给出成绩。　　5（机房/Dreamweaver）了解模板在网页设计中的地位与作用；掌握模板的创建与方法；掌握模板的应用方法。　　运用模板设计网页　　（1）在站点“site”根文件夹中新建一个子文件夹“实训4”　　（2）分析两个页面在结构布局上的共同点　　（3）打开"资源"面板--"模板"---"新建",创建一个名为moban.dwt的模板文件　　（4）moban.dwt的内容,按网页设计的方法,对模板进行设计(同网页设计的