网页设计期末练习解析.docx

1、网页设计期末练习解析实训1 页面控制实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性、如何在网页中添加背景音乐等操作。素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训内容创建站点：设置外观：设置标题：设置标题/编码：设置跟踪颜色：设置颜色：设置窗口大小：添加背景音乐：实训要求实训步骤在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。定义站点：设置 站点名称，命名为 mysite;设置本地根文件夹,指定为E盘下的root文件夹;设置 HTTP地址为localhost。创建与设置文档的页面属性：新建一个页面，设置文

2、档页面属性：标题设置为我的班级，背景图像设置为image 0l.jpg图像，左边界、边界宽带、顶部边界以及边界高度分别设置为20设置页面中文字的字体、字体大小：选择文字部分，在属性面板设置字体及字体的大小。添加背景音乐：为整个页面添加一个背景音乐。在代码视图下在和之间如下添加代码：保存文件，预览文件效果。实训过程注意事项在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；所有的图片文件单独放在image文件夹内。背景音乐必须放在站点文件内。页面效果图图1-1实训2 文本操作实训目的为了让学生能熟练掌握在Dreamweaver中如何输入文本

3、，调整设置文本的格式；如何插入特殊字符、文本列表、水平线、时间、注释的方法。素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训内容输入文本：调整文本：插入特殊字符：插入文本列表：插入水平线：插入时间：插入注释：设置文本格式：实训要求要求学生掌握在Dreamweaver中输入文本、设置文本格式、插入特殊字符、项目符号等操作。实训步骤打开上次实训所做的页面文件；输入文本，调整文本的间距，设置文本的格式；通过“属性”面板中的“格式”和“颜色”等参数，将文字设为标题格式，并改变其颜色；输入一段不带格式的文字，选择“常用”工具栏上的“文本”单选项目，利用换行按钮对文本进行换行处理，实现分段的效

4、果；插入特殊字符、项目符号、水平线、时间、注释等内容；实训过程注意事项在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去，不能全部选取再添加；当输入文本时要插入多个连续的空格，必须要“编辑”菜单下的“首选参数”中设置；换行的几种方式：自行换行；按ENTER强行换行；按SHIFT+ENTER换行操作；页面效果图图1-2实训3 图像操作实训目的为了让学生熟练掌握在Dreamweaver中插入图像，学会设置图像属性；如何插入鼠标经过图像、插入图像占位符的方法，掌握图文混排的技巧等操作。素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训内容插入图像：设置图像属性：插入鼠标经过图像：

5、插入图像占位符：图文混排操作：实训要求要求学生掌握在Dreamweaver中如何插入图像、设置图像的格式；如何插入鼠标经过图像、图像占位符；掌握图文混排等操作。实训步骤打开上次实训所做的页面文件；插入图像，在属性面板对图像的格式进行设置；插入鼠标经过图像、图像占位符；将图片和文字进行混合排版；保存文件，预览文件效果；实训过程注意事项插入的图像必须放在站点文件夹下的image文件夹内；设置图片的热点区域可选任意的工具；图1-3实训4 表格布局实训目的为了让学生熟练掌握在Dreamweaver中插入表格，学会设置表格的各项属性；并掌握如何在表格中插入文本、插入图像的操作方法和步骤。素材准备准备制作

6、网页所需的文字素材、图像素材、音乐素材。实训内容插入表格，并选择表格和单元格：设置单元格属性：调整表格结构、大小：格式化表格：表格中插入文本，表格中插入图像：实训要求要求学生掌握在Dreamweaver如何插入表格、设置表格和单元格的格式；如何调整表格的结构大小；掌握表格中如何插入文字及图像等操作。实训步骤新建一个页面，在页面中插入一个6行7列的表格，并在其中输入相应的文字；选择表格利用“格式化表格”命令来对表格格式进行修改，使其更美观；根据要求对部分单元格进行拆分或合并操作；设置文字的对齐方式，通过对边框、填充和间距进行设置；保存文件，预览文件效果；实训过程注意事项插入表格时要注意：单元格的

7、边距和单元格的间距值的设置；表格边框线精细为0像素的特殊用途；插入的图像必须放在站点文件夹下的image文件夹内；实训思考如何折分和合并单元格？如何设置表格的背景？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-4如下图所示的表格布局图1-5实训5 框架网页实训目的为了让学生掌握如何创建框架；设定框架的内容和样式；学会制作浮动的框架等操作。素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训内容创建框架设定框架内容和样式，保存框架设置无框架内容制作浮动框架实训要求要求学生能利用框架来进行布局网页，设定框架内容和样式；设置框架的内容；制作可以浮动的框

8、架。实训步骤在新建文档对话框的“框架集”类型中，选择左侧固定上方嵌套的框架模式，创建一个新的框架页；插入图片和按钮，以及相关的文字内容；在属性面板中设置文字和图片的格式属性；在左侧列出导航链接，制作链接对应的子页面，最终实现点击左侧框架的链接，右面的框架会跳转到相应的子页面；保存文件，一定要分别保存框架的各个部分，每一部分为一个HTML文件，总的框架是一个HTML文件，预览文件效果；实训过程注意事项插入的图像必须放在站点文件夹下的image文件夹内；框架的保存分几个部分；实训思考框架的保存应注意有几个文件要保存？如何设置框架中的链接？图1- 6实训6 超级链接实训目的为了让学生掌握如何利用超级

9、链接来制作页面；了解主页的创作步骤；掌握链接各种方式的制作方法与步骤。素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训内容插入横向导航条设置文本链接插入左置导航栏创建外部超级链接创建内部超级链接创建E-MAIL链接创建锚点链接创建下载文件的链接创建空链接创建脚本链接实训要求要求学生能利用链接来制作网页；掌握链接几种设置的方法和步骤；制作主页的步骤和要求等内容。实训步骤创建一个上方固定左侧嵌套的框架页面；在框架的上部分插入相关的图片或网站的LOGO及BANNER；左侧插入相关的文字，作为左侧导航栏，右侧框架页面中输入相关文字；在右侧框架页面中，分别以3段文本段落标题作为锚点，在页面上

10、部设置锚记链接；在左下部设置“友谊链接”到相关的网站，设置“联系我们”的E-MAIL链接；创建“下载”到下载文件的链接；保存文件，预览文件效果；实训过程注意事项导航栏要注意分类，避免重复出现；锚点的名称要注意不能重名。图1-9实训7 表单网页实训目的为了让学生掌握如何创建表单网页；了解各个表单对象属性的设置；熟练掌握各个表单对象不同的使用范围。素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训内容插入表单插入表单对象：文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单实训要求要求学生能利用表单来创建网页；掌握设定表单的内容和表单对象；掌握设置各个表单对象的属性值等内容

11、。实训步骤打开02.html页面，按图11所示，分别合并前两行单元格和中间两列单元格，在合并后的单元格内插入一个表单，为插入的表单命名为login；在表单中插入文字内容及对应的表单对象：文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单设置各个表单对象的属性值:将客户姓名、E-MAIL、具体地址的文本域依次命名为name、email、address；字符宽度和最多字符数分别为12、12，24、24，30和30，类型都为单行文本域；最后一个文本域输入框命名为jianyi，类型为多行文本域，字符宽度和行数依次为50、8，文本域载入时显示值为“请在此输入你的建议”设置表单中的客户姓名

12、为必填项，E-MAIL为必填项且必为邮件地址；设置表单以邮件发送的方式发送到邮箱zzyan;保存文件，预览文件效果；实训过程注意事项在一个网页中只能插入一个表单，但在一个网页中可以有多个表单对象；各个表单对象注意在属性面板中定义其名称。实训思考表单对象中的插入两个单选按钮，如何命名？如何设置密码域？文本字段与文本区域如何转换？如何设置检查表单的行为？页面效果图图1-11实训8 美化网页实训目的为了让学生了解使用CSS样式来美化网页的方法，掌握创建CSS样式的方法和步骤，以及利用CSS滤镜来制作文字特效等操作。素材准备准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实训课时：2学时实训

13、内容CSS样式的新建：CSS样式的编辑与修改：CSS样式的应用：利用CSS滤镜来特效文字效果：制作光晕字、阴影字、遮罩字、动感字实训要求要求学生掌握CSS样式的制作方法；掌握CSS样式的应用与修改操作；了解利用CSS样式来制作文字特效等操作。实训步骤打开02.html 页面，在此页面中创建CSS样式：以css-01为名保存，设置字体为隶书，字号为16点数，颜色为CC66FF，带下划线。 对页面中左、右两部分文字分别设置空链接。使用CSS样式：对左边的链接文字套用此样式。修改CSS样式：对表格的框线、背景图片、链接样式等进行设置，并重新应用到所指定的部分；运用CSS滤镜来制作文字特效：光晕字、阴影字、遮罩字、动感字的制作；保存页面，预览效果图；实训过程注意事项CSS样式应保存到网站站点目录下；CSS样式的名称应注意不能同名；页面效果图图1-13