网页实训指导书.doc

实训指导书目录第一部分实训指导书1实训1 页面控制1实训目的1实训环境1素材准备1实训课时1实训内容1实训要求1实训步骤1实训过程注意事项2实训思考2书写实训报告要求2页面效果图2实训2 文本操作3实训目的3实训环境3素材准备3实训课时3实训内容3实训要求3实训步骤3实训过程注意事项4实训思考4书写实训报告要求4页面效果图4实训3 图像操作5实训目的5实训环境5素材准备5实训课时5实训内容5实训要求5实训步骤5实训过程注意事项5实训思考6书写实训报告要求6页面效果图6实训4 表格布局6实训目的6实训环境6素材准备7实训课时7实训内容7实训要求7实训步骤7实训思考7书写实训报告要求7页面效果图7实训5 布局表格8实训目的8实训环境8素材准备8实训课时8实训内容8实训要求8实训步骤8实训过程注意事项9实训思考9书写实训报告要求9页面效果图9实训6 框架网页9实训目的9实训环境9素材准备10实训课时10实训内容10实训要求10实训步骤10实训过程注意事项10实训思考10书写实训报告要求10页面效果图11实训7 层的布局11实训目的11实训环境11素材准备11实训课时11实训内容12实训要求12实训步骤12实训过程注意事项12实训思考12书写实训报告要求12页面效果图12实训8 模板和库13实训目的13实训环境13素材准备13实训课时13实训内容13实训要求14实训步骤14实训过程注意事项14实训思考14书写实训报告要求14页面效果图14实训9 超级链接15实训目的15实训环境15素材准备15实训课时15实训内容16实训要求16实训步骤16实训思考16书写实训报告要求16页面效果图16实训10 动感网页17实训目的17实训环境17素材准备17实训课时17实训内容17实训要求18实训步骤18实训过程注意事项18实训思考18书写实训报告要求18页面效果图18实训11 表单网页19实训目的19实训环境19素材准备19实训课时19实训内容19实训要求20实训步骤20实训过程注意事项20实训思考20书写实训报告要求20页面效果图20实训12 HTML语言21实训目的21实训环境21素材准备21实训课时21实训内容21实训要求22实训步骤22实训过程注意事项22实训思考22书写实训报告要求22页面效果图22实训13 美化网页23实训目的23实训环境23素材准备23实训课时23实训内容23实训要求23实训步骤24实训过程注意事项24实训思考24书写实训报告要求24页面效果图24实训14 JavaScript技术25实训目的25实训环境25素材准备25实训课时25实训内容25实训要求25实训步骤25实训过程注意事项26实训思考26书写实训报告要求26页面效果图26实训15 网页设计27实训目的27实训环境27素材准备27实训课时27实训内容27实训要求27实训步骤27实训过程注意事项28实训思考28书写实训报告要求28实训16 特效制作28实训目的28实训环境28素材准备28实训课时28实训内容29实训要求29实训步骤29实训过程注意事项31实训思考31书写实训报告要求31页面效果图：31实训17 应用行为32实训目的32实训环境32素材准备32实训课时32实训内容32实训要求32实训步骤33实训过程注意事项33实训思考33书写实训报告要求33页面效果图33实训18 应用插件34实训目的34实训环境34素材准备34实训内容34实训要求34实训步骤34实训过程注意事项35实训思考35书写实训报告要求35页面效果图35实训19网站开发综合实训3519.1实训意义3519.2实训目的3619.3实训要求3619.4实训步骤3719.5评分标准3719.6实训参考题38第二部分网站开发案例392.1规划网站392.2准备素材432.3创建网站442.4网站首页的设计与制作452.5制作二级栏目网页和内容网页532.6设置首页的超级链接592.7制作首页弹出式菜单602.8查看与设置站点地图632.9测试网站652.10发布网站65第一部分实训指导书实训1 页面控制实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性、如何在网页中添加背景音乐等操作。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容创建站点：设置外观：设置标题：设置标题/编码：设置跟踪颜色：设置颜色：设置窗口大小：添加背景音乐：实训要求要求学生能掌握如何创建站点，新建网页对页面进行外观、标题的设置；设置页面的背景颜色、背景图像或背景音乐等操作。实训步骤在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。定义站点：设置 站点名称，命名为 mysite;设置本地根文件夹,指定为E盘下的root文件夹;设置 HTTP地址为localhost。创建与设置文档的页面属性：新建一个页面，设置文档页面属性：标题设置为我的班级，背景图像设置为image 0l.jpg图像，左边界、边界宽带、顶部边界以及边界高度分别设置为20设置页面中文字的字体、字体大小：选择文字部分，在属性面板设置字体及字体的大小。添加背景音乐：为整个页面添加一个背景音乐。在代码视图下在和之间如下添加代码：保存文件，预览文件效果。实训过程注意事项在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；所有的图片文件单独放在image文件夹内。背景音乐必须放在站点文件内。实训思考如何制作无缝页面？如何设置背景音乐自动反复播放？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-1实训2 文本操作实训目的为了让学生能熟练掌握在Dreamweaver mx中如何输入文本，调整设置文本的格式；如何插入特殊字符、文本列表、水平线、时间、注释的方法。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容输入文本：调整文本：插入特殊字符：插入文本列表：插入水平线：插入时间：插入注释：设置文本格式：实训要求要求学生掌握在Dreamweaver mx中输入文本、设置文本格式、插入特殊字符、项目符号等操作。实训步骤打开上次实训所做的页面文件；输入文本，调整文本的间距，设置文本的格式；通过“属性”面板中的“格式”和“颜色”等参数，将文字设为标题格式，并改变其颜色；输入一段不带格式的文字，选择“常用”工具栏上的“文本”单选项目，利用换行按钮对文本进行换行处理，实现分段的效果；插入特殊字符、项目符号、水平线、时间、注释等内容；实训过程注意事项在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去，不能全部选取再添加；当输入文本时要插入多个连续的空格，必须要“编辑”菜单下的“首选参数”中设置；换行的几种方式：自行换行；按ENTER强行换行；按SHIFT+ENTER换行操作；实训思考如何插入版权符号？如何插入特殊字符“￥”？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-2实训3 图像操作实训目的为了让学生熟练掌握在Dreamweaver mx中插入图像，学会设置图像属性；如何插入鼠标经过图像、插入图像占位符的方法，掌握图文混排的技巧等操作。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容插入图像：设置图像属性：插入鼠标经过图像：插入图像占位符：图文混排操作：实训要求要求学生掌握在Dreamweaver mx中如何插入图像、设置图像的格式；如何插入鼠标经过图像、图像占位符；掌握图文混排等操作。实训步骤打开上次实训所做的页面文件；插入图像，在属性面板对图像的格式进行设置；插入鼠标经过图像、图像占位符；将图片和文字进行混合排版；保存文件，预览文件效果；实训过程注意事项插入的图像必须放在站点文件夹下的image文件夹内；设置图片的热点区域可选任意的工具；实训思考如何设置图片超链接，链接到指定的页面文件？如何设置图片的热点区域？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-3实训4 表格布局实训目的为了让学生熟练掌握在Dreamweaver mx中插入表格，学会设置表格的各项属性；并掌握如何在表格中插入文本、插入图像的操作方法和步骤。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容插入表格，并选择表格和单元格：设置单元格属性：调整表格结构、大小：格式化表格：表格中插入文本，表格中插入图像：实训要求要求学生掌握在Dreamweaver mx中如何插入表格、设置表格和单元格的格式；如何调整表格的结构大小；掌握表格中如何插入文字及图像等操作。实训步骤新建一个页面，在页面中插入一个6行7列的表格，并在其中输入相应的文字；选择表格利用“格式化表格”命令来对表格格式进行修改，使其更美观；根据要求对部分单元格进行拆分或合并操作；设置文字的对齐方式，通过对边框、填充和间距进行设置；保存文件，预览文件效果；实训过程注意事项插入表格时要注意：单元格的边距和单元格的间距值的设置；表格边框线精细为0像素的特殊用途；插入的图像必须放在站点文件夹下的image文件夹内；实训思考如何折分和合并单元格？如何设置表格的背景？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-4实训5 布局表格实训目的为了让学生熟练掌握在Dreamweaver中绘制布局表格和单元格；学会设置布局表格的属性；学会调整布局表格和布局单元格；掌握在布局表格中插入文本和图像的方法。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容绘制布局表格和单元格，清除布局单元格高度：设置布局表格宽度：调整布局表格和布局单元格：布局表格中插入文本和图像：实训要求要求学生掌握在Dreamweaver中绘制布局表格和单元格；了解设置布局表格的操作；学会在布局表格中插入文本和图像的技巧等操作。实训步骤新建一个页面，切换至布局模式下，使用布局表格和绘制布局单元格来创建表格，制作一个国字型页面版式；回到标准模式下，观察表格，为每个表格添加背景颜色；在表格中添加文字，完成整个页面的制作，保存文件，预览文件效果；实训过程注意事项插入的图像必须放在站点文件夹下的image文件夹内；表格布局和布局表格的区别；实训思考如何折分和合并单元格？如何设置表格的背景？表格布局和布局表格异同点？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-5实训6 框架网页实训目的为了让学生掌握如何创建框架；设定框架的内容和样式；学会制作浮动的框架等操作。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容创建框架设定框架内容和样式，保存框架设置无框架内容制作浮动框架实训要求要求学生能利用框架来进行布局网页，设定框架内容和样式；设置框架的内容；制作可以浮动的框架。实训步骤在新建文档对话框的“框架集”类型中，选择左侧固定上方嵌套的框架模式，创建一个新的框架页；插入图片和按钮，以及相关的文字内容；在属性面板中设置文字和图片的格式属性；在左侧列出导航链接，制作链接对应的子页面，最终实现点击左侧框架的链接，右面的框架会跳转到相应的子页面；保存文件，一定要分别保存框架的各个部分，每一部分为一个HTML文件，总的框架是一个HTML文件，预览文件效果；实训过程注意事项插入的图像必须放在站点文件夹下的image文件夹内；框架的保存分几个部分；实训思考框架的保存应注意有几个文件要保存？如何设置框架中的链接？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1- 6实训7 层的布局实训目的为了让学生掌握如何利用层来布局网页，掌握层的插入，设置层的各项属性，利用层与行为的应用来创建层动画等操作。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容使用层排版设置层文本显示隐藏层拖动层调整层的大小层的对齐实训要求要求学生能利用层来进行布局网页，了解层的属性的设置，掌握在层中插入相关的图片或文字，并掌握层与行为的综合使用。实训步骤新建一个页面，在页面中插入三个不同的层；在各个层中分别插入不同的图片，并设置Layer1显示属性为可见, Layer2 、Layer3显示属性为隐藏性；利用层与行为来制作显示与隐藏层动画：选择Layer1，添加一个“显示隐藏层”行为，设置Layer1隐藏，Layer2 、Layer3显示，事件改为onmouseover；利用同样的道理，设置当事件为onmouseout时显示Layer2 ，隐藏Layer1、 Layer3的行为。利用层与行为来制作拖动层动画：新建一个层，在层中插入一张图片，并调整图片与层的大小。选择层，添加一个“拖动层”行为，设置层移动的目标处，事件为onmouseover；调整页面中所有层的大小，选择对齐层命令来调整页面中层的对齐方式。保存文件，预览文件效果；实训过程注意事项插入的图像必须放在站点文件夹下的image文件夹内；利用层与行为制作动画首先应选中对应层。实训思考行为由哪两部分组成？如何设置行为中的事件更多？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-7实训8 模板和库实训目的为了让学生掌握如何利用模板和库来制作网页；掌握模板的创建与编辑；掌握创建可编辑区域、可选区域、重复区域；掌握模板的保存与应用操作；了解如何创建库项目及插入库项目等操作。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容创建模板定义可编辑区域定义可选区域定义重复区域设置可编辑标签属性应用模板调整模板创建库插入库调整库实训要求要求学生能利用模板和库来制作网页；设置模板的可编辑区域、可选区域和重复区域；掌握库的应用与编辑修改等操作。实训步骤新建一个模板页面，编辑模板页面；在模板中插入可编辑区域并保存；新建一个基于模板的页面，修改模板文件，所有基于此模板的页面都会被修改；新建一个空白页，套用上一实例中的模板；打开上一实例基于模板的页面，选择插入菜单中的模板对象，选择创建嵌套模板，制作新的嵌套模板，加入第2个可编辑区域并保存，最终生成嵌套模板；制作一个包含图像的网页，选中图像并拖动到库中；新建一个空白文档，从库中将图像拖到空白页面中；打开库项目，对其添加链接，保存库文件，提示更新相关页面，打开包含被修改库项目的页面文档，完成更新；保存文件，预览文件效果；实训过程注意事项插入的图像必须放在站点文件夹下的image文件夹内；模板的保存注意扩展名。实训思考如何套用模板到页面？如何在模板中添加重复区域？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-8实训9 超级链接实训目的为了让学生掌握如何利用超级链接来制作页面；了解主页的创作步骤；掌握链接各种方式的制作方法与步骤。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容插入横向导航条设置文本链接插入左置导航栏创建外部超级链接创建内部超级链接创建E-MAIL链接创建锚点链接创建下载文件的链接创建空链接创建脚本链接实训要求要求学生能利用链接来制作网页；掌握链接几种设置的方法和步骤；制作主页的步骤和要求等内容。实训步骤创建一个上方固定左侧嵌套的框架页面；在框架的上部分插入相关的图片或网站的LOGO及BANNER；左侧插入相关的文字，作为左侧导航栏，右侧框架页面中输入相关文字；在右侧框架页面中，分别以3段文本段落标题作为锚点，在页面上部设置锚记链接；在左下部设置“友谊链接”到相关的网站，设置“联系我们”的E-MAIL链接；创建“下载”到下载文件的链接；保存文件，预览文件效果；实训过程注意事项导航栏要注意分类，避免重复出现；锚点的名称要注意不能重名。实训思考锚点在同一个文件中是否可以重名？如何设置链接到指定的网站？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-9实训10 动感网页实训目的为了让学生掌握在网页中如何插入FLASH动画、按钮、文本、视频、音频、JAVA APPLET 及ActiveX控件等内容，以便实现动感网页的制作。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实训课时2学时实训内容插入FLASH动画插入FLASH按钮插入FLASH文本插入FLASH视频插入音频、视频插入Java Applet插入ActiveX控件实训要求要求学生掌握在网页中插入动画、按钮、文本、视频、音频、Java Applet及ActiveX控件等内容，实现网页的动画效果。实训步骤新建页面，对整个页面进行布局，在页面的顶端部分和中间部分分别插入FLASH，选择要插入的FLASH动画，网页编辑窗口中会显示一个FLASH电影图标；在左侧添加一个图层，在层中插入如图10所示的图片和文字，在下面插入一个FLASH按钮，在对话框中选择需要的样式，输入所要显示的文字，指定按钮的链接地址，将背景颜色设置与主页中的背景色相同；将插入的按钮复制并粘贴多个，分别更改其显示的文本和链接的网页，组成导航条；插入FLASH文本及Java Applet及ActiveX控件设置文本的各项属性值；保存文件，预览文件效果；实训过程注意事项插入的FLASH文件必须将其复制到站点文件夹内；插入的按钮必须要更改各个按钮的存储名称，否则网页中显示的将是同一个按钮；实训思考如何设置按钮的背景色与网页中的背景色一致？在Fireworks中制作的图形要在网页中引用应如何操作？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-10实训11 表单网页实训目的为了让学生掌握如何创建表单网页；了解各个表单对象属性的设置；熟练掌握各个表单对象不同的使用范围。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。实训课时2学时实训内容插入表单插入表单对象：文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单实训要求要求学生能利用表单来创建网页；掌握设定表单的内容和表单对象；掌握设置各个表单对象的属性值等内容。实训步骤打开02.html页面，按图11所示，分别合并前两行单元格和中间两列单元格，在合并后的单元格内插入一个表单，为插入的表单命名为login；在表单中插入文字内容及对应的表单对象：文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单设置各个表单对象的属性值:将客户姓名、E-MAIL、具体地址的文本域依次命名为name、email、address；字符宽度和最多字符数分别为12、12，24、24，30和30，类型都为单行文本域；最后一个文本域输入框命名为jianyi，类型为多行文本域，字符宽度和行数依次为50、8，文本域载入时显示值为“请在此输入你的建议”设置表单中的客户姓名为必填项，E-MAIL为必填项且必为邮件地址；设置表单以邮件发送的方式发送到邮箱;保存文件，预览文件效果；实训过程注意事项在一个网页中只能插入一个表单，但在一个网页中可以有多个表单对象；各个表单对象注意在属性面板中定义其名称。实训思考表单对象中的插入两个单选按钮，如何命名？如何设置密码域？文本字段与文本区域如何转换？如何设置检查表单的行为？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-11实训12 HTML语言实训目的为了让学生掌握HTML中的基本标签，如何定义标题、段落、表格及标记文字的显示格式等操作。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实训课时2学时实训内容在HTML代码中编辑头内容在HTML代码中编辑页面属性在HTML代码中编辑文本在HTML代码中编辑图像在HTML代码中插入表格在HTML代码中编辑框架在HTML代码中编辑超级链接在HTML代码中插入表单对象在HTML代码中插入多媒体元素在HTML代码中编辑模板和库实训要求要求学生掌握利用HTML代码来实现各种动态网页的制作，了解HTML中的各种标签值，如何设置标签值等操作。实训步骤打开03.html页面，利用HTML标记，输入页面的标题“班级网站”，在“班级网站导航栏”中输入每行的文本；在主页面中插入一个两行一列的表格：确定了一个表格，其中border、height、width属性确定的表格的大小。利用HTML语言在页面中制作带有图片的页面：标签引用图片，指定图片的绝对路径，在页面上画了一条水平线添加背景图片及设置链接文本：引用了一张图片作为背景图片，定义了超文本链接；表单的插入：定义了一个表单，其action用来指定处理这个表单的后端支持程序，为一个输入字段；实训过程注意事项各个标签值的属性应熟记，不要混淆；HTML代码编写的源文件可以利用记事本或WORD来进行编辑，保存为HTML文件才能在网页制作编辑器中打开。实训思考利用HTML语言练习制作一个简单的网页：字体、颜色的设置；标题的设置；页面属性的设置？如何利用HTML在网页中添加背景音乐？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-10实训13 美化网页实训目的为了让学生了解使用CSS样式来美化网页的方法，掌握创建CSS样式的方法和步骤，以及利用CSS滤镜来制作文字特效等操作。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实训课时：2学时实训课时2学时实训内容CSS样式的新建：CSS样式的编辑与修改：CSS样式的应用：利用CSS滤镜来特效文字效果：制作光晕字、阴影字、遮罩字、动感字实训要求要求学生掌握CSS样式的制作方法；掌握CSS样式的应用与修改操作；了解利用CSS样式来制作文字特效等操作。实训步骤打开02.html 页面，在此页面中创建CSS样式：以css-01为名保存，设置字体为隶书，字号为16点数，颜色为CC66FF，带下划线。 对页面中左、右两部分文字分别设置空链接。使用CSS样式：对左边的链接文字套用此样式。修改CSS样式：对表格的框线、背景图片、链接样式等进行设置，并重新应用到所指定的部分；运用CSS滤镜来制作文字特效：光晕字、阴影字、遮罩字、动感字的制作；保存页面，预览效果图；实训过程注意事项CSS样式应保存到网站站点目录下；CSS样式的名称应注意不能同名；实训思考如何利用CSS样式来创建链接文本不显示下划线？如何将CSS样式应用到另外的网站的网页中？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-13实训14 JavaScript技术实训目的为了让学生掌握在网页中插入JavaScript脚本语言的方法，以制作各种具有动态效果的网页。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实训课时：2学时实训课时2学时实训内容在网页中加入跑马灯特效制作实现网页中自由飞翔的图像效果制作图片滑过效果显示时间特效实训要求要求学生掌握在网页代码视图中插入JavaScript脚本语言的方法和步骤，利用不同的JavaScript脚本语言来制作网页特效等操作。实训步骤在网页中加入跑马灯特效：跑马灯可以活跃主页气氛，向浏览者介绍此网页的特色或者注意事项，例如：欢迎光临我的班级网站通过在之间放入这段代码，就会在网页中产生一个跑马灯的效果。制作实现网页中自由飞翔的图像效果：它主要是由函数function start()来实现的，其作用是每隔一段时间在不同的位置将图片显示一次，因为位置的改变是连续均匀的，所以在视觉上产生移动的效果。制作图片滑过效果：浏览器载入网页时，当鼠标移动图片时显示不同的图片，鼠标移开时显示原图片。按本例中onmouseover 和onmouseout语句分别来指定鼠标移入和移出此图片区域时显示的不同的图像文件，而用src指定页面下载后初始的图像文件。另外，cursor:hand指定鼠标光标移到图片区域时的形状为手形。显示时间特效效果：调用JavaScript脚本语言来显示当前的日期和星期，并实现根据当前的时间显示不同的问候语。保存页面，预览效果图；实训过程注意事项网页特效制作中准备所需的图片和链接页面必须保存到站点文件夹内，以便调用；在JavaScript脚本语言中对变量名称的定义要区分大小写；实训思考如何设置状态栏中的跑马灯效果？如何设置文字在状态栏中以打字效果出现？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会页面效果图图1-14实训15 网页设计实训目的为了让学生了解网站进行优化处理操作的原理，了解网站的创意和布局，对网页元素进行优化的过程和步骤，掌握网站域名申请的过程，了解网站发布的过程等内容。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实训课时：2学时实训课时2学时实训内容网页布局设计网页中的文字设计网页中的图像应用图文排版网页导航条设计网页广告设计域名的设计与申请网站的发布实训要求要求学生掌握整个网站的优化过程，了解网站各种版面的布局形式，掌握网页色彩搭配的原则，了解网站发布的整个流程等操作。实训步骤打开前面已做好网站的主页面，根据网页设计原则，对网页不同元素：布局、文字、图像、图文排版、导航、广告等方面进行优化设计，调整网页效果；推广主页的方法和思路：注册各个搜索引擎；互换广告；到BBS或网上论坛去发布自己网站的消息；友情链接登录等方法可以推广你网站的主页，提高访问量。域名的设计与申请：选择申请主页的网站去申请免费的空间；申请虚拟域名；注册搜索引擎；网站的发布与上传：登录网站，预览效果图；实训过程注意事项申请的虚拟域名原则上是容易识记，代表一定的含义；在选择站点的时候要注意主页空间的大小、速度、支持哪些网页技术、是否支持FTP上传或下载；实训思考导航设计的原则是什么？网页中广告是越多越好吗？书写实训报告要求根据调试结果，写出调试分析报告写出本次实训的心得与体会实训16 特效制作实训目的为了让学生了解在Dreamweaver中制作网页特效的方法和步骤，要求学生能够利用丰富的网络资源来制作不同的网页特效，培养学生的学习能力和思考能力。实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。操作系统：Windows95/98/me/2000/XP软件环境：Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材、动画素材、特效素材。实训课时2学时实训内容制作网页动态文本；实现图像淡出淡隐效果；实现自动滚屏网页效果；实现鼠标滚屏特效；实训要求要求学生掌握在Dreamweaver中制作网页特效的方法和步骤，了解借助网络资源来制作网页特效的方法和技巧。实训步骤（1）制作网页中变色的文本，在与加入代码： text = 延续同学友情，让我们在这里相聚!; color1 = red; color2 = white; fontsize = 5; speed = 150; i = 0; if (navigator.appName = Netscape) document.write(); else document.write(); function changeCharColor() if (navigator.appName = Netscape) document.a.document.write(); for (var j = 0; j text.length; j+) if(j = i) document.a.document.write( + Text.charAt(i) + ); else document.a.document.write(text.charAt(j); document.a.document.write(); document.a.document.close(); if (navigator.appName = Microsoft Internet Explorer) str = ; for (var j = 0; j text.length; j+) if( j = i) str+= + text.charAt(i) + ; else str += text.charAt(j); str += ; a.innerHTML = str; (i = text.length) ? i=0 : i+; setInterval(changeCharColor(), speed); （2）实现图像淡出淡隐效果：插入一张图片，调用JavaScript给CSS中的Alpha滤镜产生一个循环，检测Alpha值是否达到100。调用的代码：var b = 1;var c = true;function fade()if(document.all);if(c = true) b+;if(b=100) b-;c = falseif(b=10) b+;c = true;if(c = false) b-;u.filters.alpha.opacity=0 + b;setTimeout(fade(),50); （3）实现自动滚屏网页效果调用JavaScript代码，添加到指定的位置：var position = 0;function scroller() if (position !=700 ) position+;scroll(0,position);clearTimeout(timer);var timer = setTimeout(scroller(),50); timer;scroller() ;（4）实现鼠标滚屏特效：调用JavaScript代码添加到指定的位置： function click() if (event.button=2) if(document.all.auto.status=true)document.all.auto.status=false;alert(自动滚屏已经停止了！)scroller();document.onmousedown=clickvar position = 0; function scroller() if (document.all.auto.status=true) position+; scrol