《网页设计与制作》课程实验实训指导书Word文件下载.docx

《网页设计与制作》课程实验实训指导书Word文件下载.docx

《《网页设计与制作》课程实验实训指导书Word文件下载.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》课程实验实训指导书Word文件下载.docx（69页珍藏版）》请在冰豆网上搜索。

项目一个人网站的设计与制作

实训一认识与策划个人网站

1.确定网站主题

2．确定网站风格

3．规划网站内容

2

设计型

必修

实训二创建站点并制作网页

1．建立文件夹

2．建设站点

3.制作子页

4.制作首页

5.制作网页图片素材

综合型

实训三创建网站相册、创建超链接

1.创建网站相册

2.创建首页中的文字链接

3.创建电子邮件链接

项目二电子商务网站设计与制作

实训一认识与策划电子商务类网站

策划电子商务类网站

实训二首页的布局设计

1.创建站点

2.绘制布局单元格

3.使用表格进行布局的细化

实训三制作网站Logo与页面图片

1.制作网站Logo

2.制作顶部导航图片

3.制作菜单导航图片

4.制作顶部广告图片

5.制作左边小图标

6.制作书籍图片

实训四制作首页

制作首页

实训五添加CSS样式表

添加CSS样式表

3

项目三学校类网站设计与制作

实训一认识与策划学校类网站

1.确定网站风格特色

2.划分网站所要包含的项目

3.绘制网站的结构图

4.绘制首页布局草图

实训二建立站点与布局首页

2.首页整体布局

3.设置网页的页眉和导航栏

4.设置网页的连接区

5.设置网页的主内容区

6.设置网页的页脚

7.设置网页的CSS样式

实训三使用库元素创建网页

1.库元素的创建

2.库元素的使用

3.库元素的编辑

实训四制作导航栏所连接的网页

1.创建“本系介绍”网页

2.创建其他导航栏所要链接的网页

3.编辑库元素在导航栏部分的超链接

实训五使用模板创建网页

1.模板的创建

2.设置可编辑区域

3.应用模板

4.更新模板内容

项目四企业类网站设计与制作

实训一认识与策划企业网站

策划企业网站

实训二切割页面效果图

2.页面布局

3.添加首页的部分元素

实训三制作网页Banner

1.利用Flash制作网页Banner

2.在页面中插入Banner

实训四制作留言板

1.调整留言板页面

2.利用表单制作留言板

3.利用表单制作首页部分内容

实训五使用内嵌框架

1.制作新闻文本页面

2.制作新闻页面

实训六使用网页特效

1.将新闻制作成滚动字幕

2.以跟随滚动条滚动的对联广告形式显示联系方式

3.状态栏显示滚动欢迎词

实训七网站的测试与发布

1.申请域名

2.上传网站

3.维护网站

4.添加网页搜索关键字和说明信息

5.推广网站

合计学时

42

注：

1.实验设置要注意内容更新，体系设计科学合理，实验项目名称要准确规范。

2.实验要求为：

必修、选修。

3.实验类型为：

验证、综合、设计型。

4.学时分配合计数要与实验总学时相同或大于实验总学时数（其中超出的学时数可为选开实验）；

若适应两个以上专业的可在表格下分别注明：

例如序号1、2、3适应×

×

专业；

序号1、3、5适应×

专业等。

项目1个人网站的设计与制作

一、实训目的

1.掌握个人网站的特点

2.掌握制作个人网站的注意事项

二、实训内容

三、实训仪器、设备

装有DreamweaverCS3软件的电脑，网络畅通。

四、实训步骤

在本项目中，建设一个名为“竹轩”的个人网站，以竹和绿色做网站的风格，主题为“建设网站的基本技巧”，同时用“美文”为副主题。

用竹子的图片以做点缀，体现网站的风格，来构成网站。

“竹轩”个人网站的风格是主要利用了一些漂亮的以竹子为主题的图片，进行适当的修改，依赖绿色和以竹子为素材的图片来体现绿色有生机的风格。

在本项目的个人网站中，要包含的内容有：

网页制作知识、美文、图片三类，为了主题清楚分了三个栏目，这样内容就不会杂乱，利于浏览者的访问。

可以绘制一个网站结构图来表现网站的组织结构，一般用一棵倒置的树来实现网站的结构图，如图所示。

图网站结构图

五、实训报告要求

写出本项目报告的摘要和前言部分。

六、实训注意事项

熟悉了DreamweaverCS3软件及基本操作后，多根据教师提供的网址上网欣赏优秀网站，研究其特点、布局等。

七、思考题

个人网站都有哪些特点？

1.掌握个人网站建设的基本流程和基本方法

2.掌握表格布局的知识

3.掌握图片素材的制作方法和处理方法

装有DreamweaverCS3软件的电脑。

（1）新建网页

在文件面板中，右击zhishi文件夹，选择“新建文件”（如图），新建了一个名为“untitled.html”的空白网页。

右击此文件名，选择“编辑”→“重命名”，将网页命名为：

“wangzhan.html”。

注意：

网页和网页中使用的图片的命名必须为拼音、英文或者数字，不可使用中文。

（2）设置页面属性

打开新建的网页“wangzhan.html”，利用属性面板上的“页面属性”按钮，打开“页面属性”对话框指定布局和格式设置属性。

设置字体的大小为12像素、上边距为0像素。

（3）简单布局

鼠标插入点放到网页“wangzhan.html”的空白区域，点击“常用”工具栏的插入表格的按钮，插入一个四行一列的宽度为760像素的表格。

并将表格利用属性面板中的“居中对齐”按钮设置其居中对齐。

通过设置表格、单元格背景颜色以美化网页。

①选中整张表格，在属性面板中可以利用“背景颜色”按钮设置整张表格的背景颜色；

②将插入点放在某一个单元格中，就可以利用“背景颜色”按钮设置单元格的背景颜色，如图所示。

图单元格属性面板

在本例中，将第1、4行的单元格背景颜色设置为“#006600”，第2、3行的单元格背景颜色设置为“#CEFFDD”。

（4）添加文字、设置文字格式

①标题文本

将鼠标位于第一行单元格中，输入“网站规划规范”，选中此文字，在属性面板中设置字体为“华文新魏”，文字大小为24像素，字体颜色为“#FFFFFF”，并利用按钮

，设置文字居中对齐，单元格的高度为43像素，如图所示。

图文字属性对话框

②正文文本

将鼠标位于第三行单元格中，输入正文，设置正文格式：

字体为宋体，大小为14像素，利用属性面板的“文本缩进”按钮将文本进行缩进，如图所示。

图控制文字缩进或凸出

要使文本每段开头空两个字符，需要将输入法设置为“全角”模式，再利用空格键输入。

或者利用Ctrl+Shift+空格键输入空格。

③版权信息

在本例中，在第四行单元格中输入版权信息，字体大小为12像素，颜色为“#FFFFFF”，假设为“版权所有©

2008竹轩鲁ICP备001号”，其中“©

”是特殊符号，可以通过插入栏的“文本”类别来进行操作。

在本例中，所要插入的“©

”符号就要展开“文本”类别中的“字符”按钮（

），来选择“版权”按钮，将“©

”输入，如图所示。

图“字符”按钮

（5）添加图片

通常网站的子页都要有返回首页的链接，在这个网页中将利用素材中的图片“fanhui.gif”放置在网页中，作为返回首页的超链接，位置在表格的第二行，并且使之向右对齐。

（6）添加背景音乐

将代码<

bgsoundsrc=../image/Bamboo_Dance.wmaloop="

-1"

>

插入到网页的<

head>

<

/head>

之间，当浏览者打开网站时即可听到背景音乐，当网页最小化之后，音乐会消失。

代码“<

”中“src=../image/Bamboo_Dance.wma”表示音频文件，loop="

表示当网页最小化之后，音乐会消失，如果loop="

3"

指音乐播放三次。

（1）首页布局

在本例中首页的布局采用了“匡”字形的布局，首先插入了一个三行一列的宽度为760像素的表格，作为整个网页的大框架，第一行设置高度为160像素，用来放置页眉；

第二行作为主内容区；

第三行作为页脚。

（2）页眉的美化——单元格背景的使用、flash动画的插入

（3）页脚的设置

将第三行单元格的高度设置为30像素，背景颜色和页眉颜色相匹配设置为“#2B4216”，输入版权信息，假设为“版权所有©

2008竹轩鲁ICP备001号”。

将文字设置为白色，居中对齐。

（4）编辑主内容区的内容

①编辑主内容区的布局

②编辑导航栏、个人档

③编辑主内容区

（1）页眉处用到的图片“banner.jpg”

（2）导航处使用的图片“1.jpg”

（3）分栏边框的制作

①左侧分栏边框的制作

②右侧主内容区边框

参照模板，按照要求，写出本项目报告正文中的“创建站点并制作网页”部分。

使用Fireworks软件制作网页图片前，一定要确定好大小，不要到Dreamweaver中缩放。

本网站还可以怎样布局？

1.掌握网站相册的创建方法

2.掌握超链接的类型和各类型的创建方法

（1）在DreamweaverCS3中，选择“命令”菜单中的“创建网站相册”命令。

跳出如图所示的“创建网站相册”对话框。

图创建网站相册对话框

（2）在“相册标题”文本域中，输入标题。

该标题将显示在包含缩略图的页面顶部的灰色矩形中。

（3）点击“源图象文件夹”文本域旁边的“浏览”按钮，选择包含有源图象的文件夹。

然后点击“目的文件夹”文本域旁边的“浏览”按钮，选择（或创建）一个放置导出图象和HTML文件的目的文件夹。

（4）为缩略图图象指定显示选项：

（5）从“缩略图格式”弹出式菜单中选择一种缩略图图象格式：

（6）从“相片格式”弹出式菜单中选择大尺寸图象的格式。

会为每一幅原始图象创建一幅指定格式的大尺寸图象。

可以为大尺寸图象指定不同于缩略图的格式。

“创建网站相册”命令不允许你使用原始的图象文件作为大尺寸文件，这是因为非GIF和JPEG格式的原始文件可能不能在所有浏览器中正确显示。

注意，如果原始文件是JPEG文件，则产生的大尺寸图象与原始图象相比，可能有较大的文件尺寸或较低的质量。

（7）为大尺寸图象选择“缩放”百分数。

（8）选择“为每张相片建立导览页面”，为每个源文件创建一个单独的网页页面，其中包含“返回”、“首页”和“下一页”的导航链接。

（9）点击“确定”按钮，为网页相册创建HTML和图象文件。

（10）当出现“相册已经键立”的对话框时，点击“确定”按钮。

可能需要等几秒钟，才会出现相册页面。

缩略图按文件的字母顺序显示。

效果如图所示。

图网站相册效果图

当处理过程开始后，点击DreamweaverCS3对话框中的“取消”按钮不会停止创建相册的过程，而只是不让DreamweaverCS3显示相册的首页面。

创建完网站相册后，站点文件夹中会自动添加上创建相册时用到的图片和网页，如图所示。

图网站相册文件夹

依次选中首页中每个文件的标题，在“属性”面板的“链接”项输入链接地址。

在本项目中，可以设置连接属性为_parent或者_self，保存网页后浏览，会发现制作了链接的文字加了下划线，并且字体的颜色也有了改变，可以通过调节页属性来进行修改。

如图，选择页面属性中的“链接”，将“链接颜色”、“已访问链接”的颜色均设置为黑色（#000000），“下划线样式”为仅在变换图像时显示下划线，点击“确定”按钮，保存网页，浏览会发现，仅当鼠标移动到链接的文字上时才显示下划线。

图设置链接字体的颜色

选中首页中的***********，执行“插入”菜单中的“电子邮件链接”命令，或单击插入栏“常用”类别中的

按钮，在弹出的“电子邮件链接”对话框中进行设置，如图所示。

图“电子邮件链接”对话框

参照模板，按照要求，写出本项目报告正文中的“创建网站相册、创建超链接”部分。

创建网站相册时，所有的相册图片的格式应该一致，并且不能用中文命名。

有的同学创建的网站相册中的图片不显示，为什么？

项目2电子商务网站设计与制作

1.掌握电子商务网站的特点

2.能策划电子商务网站

根据教师提供的网址，多上网欣赏优秀电子商务网站，研究其特点，设计出具有独特风格的电子商务网站。

电子商务网站有哪几种风格？

1.掌握布局表格和单元格的使用和注意事项

2．掌握使用表格进行布局的细化方法

2.绘制布局表格和单元格

（1）使用布局视图

①绘制布局表格

②绘制布局单元格

③使用标准视图

写出本项目报告中正文的“首页的布局设计”部分。

有时候，表格和布局表格一起使用，一定要掌握这两种方式之间的切换和联系。

怎样设定布局单元格的宽度？

1.掌握利用Photoshop处理图像的一般流程

2.掌握利用Photoshop处理图像的方法

写出本项目报告中正文的“制作网站Logo与页面图片”部分。

注意图片的色彩、样式要跟网站页面的色彩、布局一致。

常见的Logo有哪些尺寸和样式？

1.掌握网页中插入图片的方法

2.掌握插入“图像占位符”的方法

3.掌握插入“鼠标经过图像”的方法

4.掌握插入导航条的方法

（1）插入处理好的图片

（2）设置单元格的背景图片

（3）设置表格的背景色等

（4）输入文本

（5）添加特效

MARQUEEdirection=leftwidth="

100%"

scrollAmount=3class="

main"

欢迎来到“书城在线”，这里有丰富的图书资源！

敬请选购！

/MARQUEE>

”

这段文本就会从右向左滚动。

在放置宣传图片的表格中插入如下代码：

SCRIPT>

varNowFrame=1;

varMaxFrame=3;

varbStart=0;

functionfnToggle（）{

varnext=NowFrame+1;

if（next==MaxFrame+1）

{

NowFrame=MaxFrame;

next=1;

}

if（bStart==0）

bStart=1;

setTimeout（'

fnToggle（）'

3000）;

return;

else

oTransContainer.filters[0].Apply（）;

document.images['

oDIV'

+next].style.display="

"

;

+NowFrame].style.display="

none"

oTransContainer.filters[0].Play（duration=2）;

if（NowFrame==MaxFrame）

NowFrame=1;

NowFrame++;

}setTimeout（'

2000）;

}

fnToggle（）;

<

/SCRIPT>

DIVid=oTransContainer

style="

FILTER:

progid:

DXImageTransform.Microsoft.Wipe（GradientSize=1.0,wipeStyle=0,motion='

forward'

）;

WIDTH:

539px;

HEIGHT:

190px"

IMG

id=oDIV2style="

DISPLAY:

block"

height=190

src="

images/g1.gif"

width=539border=0>

id=oDIV3style="

none"

images/g2.gif"

id=oDIV1style="

images/g3.gif"

width=539

border=0>

/DIV>

其中的“images/g1.gif”为图片的链接地址，效果为g1.gif、g2.gif、g2.gif三幅图片交替出现，如图所示，像用Flash制作出来的一样。

（6）插入表单

（7）最终效果

写出本项目报告正文中测试影片部分。

测试后出现问题查找原因，及时修改。

掌握添加CSS样式表的方法

写出本项目报告中正文的“添加CSS样式表”部分。

预览后出现问题查找原因，及时修改。

项目3学校类网站设计与制作

1.了解学校类网站的特点

2.能规划学校类网站

在本项目是高校的系部网站，就决定了它的风格是严谨又不失活泼，所以用蓝色作为主色调，因为蓝色是冷色调，可以突出严谨的氛围，适当点缀橘色、红色等亮色来增加活泼的特点，使得整个页面活泼起来。

根据本项目网站的分析，网站应包含的项目有：

系部介绍、师资队伍、党团工作、精品课程、资源课堂、心理咨询、系留言板、校内链接、新闻动态、教学工作、学生工作、招生就业，这么多的项目应该有条理的放置到首页。

所以可以作进一步的分类。

多欣赏优秀网站，分析、总结后设计出具有独特风格的网站布局。

学校类网站有哪些风格？

1.掌握利用表格布局网页的方法和技巧

2.掌握嵌套表格的使用方法

7.设置