当前位置:文档之家› 《网页设计与制作》-实训指导书

《网页设计与制作》-实训指导书

目录实训1 站点创建实训2 搜集素材实训3 用表格设计主页布局实训4 在主页制作中插入文本操作实训5 在主页制作中插入图像操作实训6 在主页制作中超级的设置实训7 制作动感网页实训8 表单制作实训9 CSS样式表的使用实训10 JavaScript技术实训11 应用行为实训12 利用框架制作“公司简介”网页实训13 利用布局表格制作“新书推介”网页实训14 模板和库的使用实训15 利用层的布局制作“技术支持”网页实训16 网页设计与管理实训17 开发综合实训实训1 站点创建实训目的为了让学生能熟练掌握创建站点的方法,掌握设置网页的页面属性,掌握创建目录结构、栏目文件夹、网页文件的基本操作方法。

实训环境硬件环境:考核用机为奔腾以上兼容机,存不少于 32M ,最好 64M 或128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求:必须将IIS配置好,能正常进行WEB浏览素材准备准备制作网页所需的文字素材。

实训课时2学时实训容创建站点:创建目录结构:创建栏目文件夹:创建网页文件:掌握设置网页的页面属性实训要求要求学生能掌握如何创建站点,正确创建目录结构及栏目文件夹,创建主页文件index.htm,并正确命名,掌握设置网页的页面属性的方法。

实训步骤1、在E盘中新建本地根文件夹,命名为bookman,并在该文件夹中新建image 文件夹以存放中所要用到的图片。

2、定义站点:设置 "站点名称",命名为 "博客人";设置本地根文件夹,指定为E盘下的bookman文件夹;设置 "HTTP地址"为localhost。

3、创建目录结构及栏目文件夹(如下图):4、E盘下的bookman文件夹创建主页文件index.htm5、设置网页的页面属性。

实训过程注意事项1、在创建站点的过程中注意建立本地文件夹,文件夹命名最好为英文;中所有的文件最好取名为英文;注意文件的路径;2、所有的图片文件单独放在image文件夹。

3、主页文件命名index.htm。

实训思考中所有的文件最好取名为英文,为什么?书写实训报告要求写出本次实训的心得与体会实训2 搜集素材实训目的为了让学生能熟练掌素材的搜集和制作方法,并学会把搜集到或制作好的素材正确命名,分门别类地存放在相应的文件夹中。

实训环境硬件环境:考核用机为奔腾以上兼容机,存不少于 32M ,最好 64M 或128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP软件环境: Fireworks MX Flash MX特殊要求:必须将IIS配置好,能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图片素材。

实训课时2学时实训容1、利用Fireworks MX制作标志、圆角矩形及个性化的图形。

2、利用Fireworks MX编辑制作有特殊效果的图。

3、利用Flash MX制作主页广告条。

实训要求要求学生熟练掌握利用Fireworks MX 和Flash MX来制作个性化的图形图像素材的方法及技巧。

实训步骤1、启动Fireworks MX,选择“文件”——“新建”,设置好新建文档的属性。

2、制作标志并正确命名,保存到相应的文件夹。

3、绘制圆角矩形及个性化的图形,保存到相应的文件夹。

4、选择“文件”——“导入”,导入相应图像,编辑设计特殊效果的图像,保存到相应的文件夹。

5、启动Flash MX 制作主页广告条,并保存到相应的文件夹。

实训过程注意事项1、在制作过程中注意素材的命名要用英文名字。

2、图形图像及动画的保存格式在适合网页要求。

3、保存路径要正确。

实训思考最适合网页的图形图像及动画的格式分别是什么?书写实训报告要求写出图形图像及动画实训的心得与体会。

实训3 用表格设计主页布局实训目的为了让学生熟练掌握在Dreamweaver mx中插入表格,学会设置表格的各项属性;并掌握如何在表格中插入文本、插入图像的操作方法和步骤。

实训环境硬件环境:考核用机为奔腾以上兼容机,存不少于 32M ,最好 64M 或128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求:必须将IIS配置好,能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时2学时实训容1、插入表格,并选择表格和单元格:2、设置单元格属性:3、调整表格结构、大小:4、格式化表格:5、表格中插入文本,表格中插入图像:实训要求要求学生掌握在Dreamweaver mx中如何插入表格、设置表格和单元格的格式;如何调整表格的结构大小;掌握表格中如何插入文字及图像等操作。

实训步骤1、新建一个页面,在页面中插入一个6行7列的表格,并在其中输入相应的文字;2、选择表格利用“格式化表格”命令来对表格格式进行修改,使其更美观;3、根据要求对部分单元格进行拆分或合并操作;4、设置文字的对齐方式,通过对边框、填充和间距进行设置;5、保存文件,预览文件效果;实训过程注意事项1、插入表格时要注意:单元格的边距和单元格的间距值的设置;2、表格边框线精细为0像素的特殊用途;3、插入的图像必须放在站点文件夹下的image文件夹;实训思考1、如何拆分和合并单元格?2、如何设置表格的背景?书写实训报告要求1、根据调试结果,写出调试分析报告2、写出本次实训的心得与体会实训4 在主页制作中插入文本操作实训目的为了让学生能熟练掌握在Dreamweaver mx中如何输入文本,调整设置文本的格式;如何插入特殊字符、文本列表、水平线、时间、注释的方法。

实训环境硬件环境:考核用机为奔腾以上兼容机,存不少于 32M ,最好 64M 或128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求:必须将IIS配置好,能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时2学时实训容1、输入文本:2、调整文本:3、插入特殊字符:4、插入文本列表:5、插入水平线:6、插入时间:7、插入注释:8、设置文本格式:实训要求要求学生掌握在Dreamweaver mx中输入文本、设置文本格式、插入特殊字符、项目符号等操作。

实训步骤1、打开上次实训所做的主页面文件;2、输入文本,调整文本的间距,设置文本的格式;通过“属性”面板中的“格式”和“颜色”等参数,将文字设为标题格式,并改变其颜色;3、输入一段不带格式的文字,选择“常用”工具栏上的“文本”单选项目,利用换行按钮对文本进行换行处理,实现分段的效果;4、插入特殊字符、项目符号、水平线、时间、注释等容;实训过程注意事项1、在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去,不能全部选取再添加;2、当输入文本时要插入多个连续的空格,必须要“编辑”菜单下的“首选参数”中设置;3、换行的几种方式:自行换行;按ENTER强行换行;按SHIFT+ENTER换行操作;实训思考1、如何插入符号?2、如何插入特殊字符“¥”?书写实训报告要求1、根据调试结果,写出调试分析报告2、写出本次实训的心得与体会实训5 在主页制作中插入图像操作实训目的为了让学生熟练掌握在Dreamweaver mx中插入图像,学会设置图像属性;如何插入鼠标经过图像、插入图像占位符的方法,掌握图文混排的技巧等操作。

实训环境硬件环境:考核用机为奔腾以上兼容机,存不少于 32M ,最好 64M 或128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求:必须将IIS配置好,能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时2学时实训容1、插入图像:2、设置图像属性:3、插入鼠标经过图像:4、插入图像占位符:5、图文混排操作:实训要求要求学生掌握在Dreamweaver mx中如何插入图像、设置图像的格式;如何插入鼠标经过图像、图像占位符;掌握图文混排等操作。

实训步骤1、打开上次实训所做的主页面文件;2、插入图像,在属性面板对图像的格式进行设置;3、插入鼠标经过图像、图像占位符;4、将图片和文字进行混合排版;5、保存文件,预览文件效果;实训过程注意事项1、插入的图像必须放在站点文件夹下的image文件夹;2、设置图片的热点区域可选任意的工具;实训思考1、如何设置图片超,到指定的页面文件?2、如何设置图片的热点区域?书写实训报告要求1、根据调试结果,写出调试分析报告2、写出本次实训的心得与体会实训6 在主页制作中超级的设置实训目的为了让学生掌握如何利用超级来制作页面;掌握各种方式的制作方法与步骤。

实训环境硬件环境:考核用机为奔腾以上兼容机,存不少于 32M ,最好 64M 或128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求:必须将IIS配置好,能正常进行WEB浏览素材准备准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时2学时实训容1、插入横向导航条2、设置文本3、插入左置导航栏4、创建外部超级5、创建部超级6、创建E-MAIL7、创建锚点8、创建下载文件的9、创建空10、创建脚本实训要求要求学生能利用来制作网页;掌握几种设置的方法和步骤。

实训步骤1、打开上次实训所做的主页面文件;2、选择导航栏的相应文字;3、在属性对话框栏中设置要的网页。

4、在main页面中,分别以3段文本段落标题作为锚点,在页面上部设置锚记;5、在左下部设置“友谊”到相关的,设置“联系我们”的E-MAIL;创建“下载”到下载文件的;6、保存文件,预览文件效果;实训过程注意事项导航栏要注意分类,避免重复出现;锚点的名称要注意不能重名。

实训思考1、锚点在同一个文件中是否可以重名?2、如何设置到指定的?书写实训报告要求1、根据调试结果,写出调试分析报告2、写出本次实训的心得与体会实训7 制作动感网页实训目的为了让学生掌握在网页中如何插入FLASH动画、按钮、文本、视频、音频、JAVA APPLET 及ActiveX控件等容,以便实现动感网页的制作。

实训环境硬件环境:考核用机为奔腾以上兼容机,存不少于 32M ,最好 64M 或128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

相关主题