网页设计与制作-实训指导书_精品文档Word文档格式.doc

网页设计与制作-实训指导书_精品文档Word文档格式.doc

《网页设计与制作-实训指导书_精品文档Word文档格式.doc》由会员分享，可在线阅读，更多相关《网页设计与制作-实训指导书_精品文档Word文档格式.doc（32页珍藏版）》请在冰豆网上搜索。

为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握创建网站目录结构、栏目文件夹、网页文件的基本操作方法。

实训环境

硬件环境：

考核用机为奔腾以上兼容机，内存不少于32M，最好64M或128M；

硬盘不小于500M；

VGA彩显，带鼠标器。

操作系统：

Windows95/98/me/2000/XP

软件环境：

DreamweaverMX2004

特殊要求：

必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材。

实训课时

2学时

实训内容

创建站点：

创建网站目录结构：

创建栏目文件夹：

创建网页文件：

掌握设置网页的页面属性

实训要求

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

实训步骤

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

2、定义站点：

设置"

站点名称"

，命名为"

博客人"

;

设置本地根文件夹,指定为E盘下的bookman文件夹;

HTTP地址"

为localhost。

3、创建网站目录结构及栏目文件夹（如下图）:

bookman

css

Html

images

media

MYbusiness

Visitor

company

Example

Product

album

cover

danghang

Image-map

photo

qiege

image

manger

zhangdan

ahuce

4、E盘下的bookman文件夹创建主页文件index.htm

5、设置网页的页面属性。

实训过程注意事项

1、在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；

网站中所有的文件最好取名为英文；

注意文件的路径；

2、所有的图片文件单独放在image文件夹内。

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

实训思考

网站中所有的文件最好取名为英文，为什么？

书写实训报告要求

写出本次实训的心得与体会

为了让学生能熟练掌素材的搜集和制作方法，并学会把搜集到或制作好的素材正确命名，分门别类地存放在相应的文件夹中。

FireworksMXFlashMX

准备制作网页所需的文字素材、图片素材。

1、利用FireworksMX制作网站标志、圆角矩形及个性化的图形。

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

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

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

1、启动FireworksMX，选择“文件”——“新建”，设置好新建文档的属性。

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

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

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

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

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

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

3、保存路径要正确。

最适合网页的图形图像及动画的格式分别是什么？

写出图形图像及动画实训的心得与体会。

为了让学生熟练掌握在Dreamweavermx中插入表格，学会设置表格的各项属性；

并掌握如何在表格中插入文本、插入图像的操作方法和步骤。

准备制作网页所需的文字素材、图像素材、音乐素材。

1、插入表格，并选择表格和单元格：

2、设置单元格属性：

3、调整表格结构、大小：

4、格式化表格：

5、表格中插入文本，表格中插入图像：

要求学生掌握在Dreamweavermx中如何插入表格、设置表格和单元格的格式；

如何调整表格的结构大小；

掌握表格中如何插入文字及图像等操作。

1、新建一个页面，在页面中插入一个6行7列的表格，并在其中输入相应的文字；

2、选择表格利用“格式化表格”命令来对表格格式进行修改，使其更美观；

3、根据要求对部分单元格进行拆分或合并操作；

4、设置文字的对齐方式，通过对边框、填充和间距进行设置；

5、保存文件，预览文件效果；

1、插入表格时要注意：

单元格的边距和单元格的间距值的设置；

2、表格边框线精细为0像素的特殊用途；

3、插入的图像必须放在站点文件夹下的image文件夹内；

1、如何拆分和合并单元格？

2、如何设置表格的背景？

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

为了让学生能熟练掌握在Dreamweavermx中如何输入文本，调整设置文本的格式；

如何插入特殊字符、文本列表、水平线、时间、注释的方法。

1、输入文本：

2、调整文本：

3、插入特殊字符：

4、插入文本列表：

5、插入水平线：

6、插入时间：

7、插入注释：

8、设置文本格式：

要求学生掌握在Dreamweavermx中输入文本、设置文本格式、插入特殊字符、项目符号等操作。

1、打开上次实训所做的主页面文件；

2、输入文本，调整文本的间距，设置文本的格式；

通过“属性”面板中的“格式”和“颜色”等参数，将文字设为标题格式，并改变其颜色；

3、输入一段不带格式的文字，选择“常用”工具栏上的“文本”单选项目，利用换行按钮对文本进行换行处理，实现分段的效果；

4、插入特殊字符、项目符号、水平线、时间、注释等内容；

1、在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去，不能全部选取再添加；

2、当输入文本时要插入多个连续的空格，必须要“编辑”菜单下的“首选参数”中设置；

3、换行的几种方式：

自行换行；

按ENTER强行换行；

按SHIFT+ENTER换行操作；

1、如何插入版权符号？

2、如何插入特殊字符“￥”？

2、

为了让学生熟练掌握在Dreamweavermx中插入图像，学会设置图像属性；

如何插入鼠标经过图像、插入图像占位符的方法，掌握图文混排的技巧等操作。

1、插入图像：

2、设置图像属性：

3、插入鼠标经过图像：

4、插入图像占位符：

5、图文混排操作：

要求学生掌握在Dreamweavermx中如何插入图像、设置图像的格式；

如何插入鼠标经过图像、图像占位符；

掌握图文混排等操作。

2、插入图像，在属性面板对图像的格式进行设置；

3、插入鼠标经过图像、图像占位符；

4、将图片和文字进行混合排版；

1、插入的图像必须放在站点文件夹下的image文件夹内；

2、设置图片的热点区域可选任意的工具；

1、如何设置图片超链接，链接到指定的页面文件？

2、如何设置图片的热点区域？

为了让学生掌握如何利用超级链接来制作页面；

掌握链接各种方式的制作方法与步骤。

1、插入横向导航条

2、设置文本链接

3、插入左置导航栏

4、创建外部超级链接

5、创建内部超级链接

6、创建E-MAIL链接

7、创建锚点链接

8、创建下载文件的链接

9、创建空链接

10、创建脚本链接

要求学生能利用链接来制作网页；

掌握链接几种设置的方法和步骤。

2、选择导航栏的相应文字；

3、在属性对话框链接栏中设置要链接的网页。

4、在main页面中，分别以3段文本段落标题作为锚点，在页面上部设置锚记链接；

5、在左下部设置“友谊链接”到相关的网站，设置“联系我们”的E-MAIL链接；

创建“下载”到下载文件的链接；

6、保存文件，预览文件效果；

导航栏要注意分类，避免重复出现；

锚点的名称要注意不能重名。