网络广告设计实验指导书.doc

网络广告设计实验指导书

47
2020年5月29日
文档仅供参考
目录

实验大纲 1
实验一 简单网页制作 3
实验二 在网页中插入基本元素 7
实验三 表格的创立与编辑 13
实验四　表格布局(一) 18
实验五　表格布局(二) 23
实验六 框架与表单 27
实验七 CSS 31
实验八 网页制作综合练习 36

实验大纲
课程名称:
网页设计与制作
英文名称:
Design and Making of WebPages
设置形式:
非独立设课
课程模块:
专业方向课
实验课性质:
专业实验
课程编号:
601822
课程负责人:
王丽萍
大纲主撰人:
王丽萍
大纲审核人:
李焕勤

一、学时、学分
课程总学时:
48
实验学时:
16
课程学分:
2
二、适用专业及年级
教育技术学 二年级
三、课程目标与基本要求
课程的目标:
课程全面介绍网页设计与制作的相关知识,包括网页制作工具Dreamweaver的使用方法、HTML语言、CSS技术及网站的发布与维护等,目标是使学生具备网页设计与制作的基本知识和基本技能,能够独立完成中、小型网站的设计与制作,为将来制作网络教学软件和教育专题网站打下基础。
基本要求:
1．掌握利用Dreamweaver创立网站、制作网页、管理站点等。
2．熟练掌握文字的各种编排方法。
3．熟练掌握图形的获取、各种修饰方法。
4．熟练掌握超链接技术。
5．熟练掌握音频、视频等多媒体信息的嵌入、链接方法;
6．熟练掌握表格的使用方法,会用表格设计网页;
7．掌握框架制作网页的方法,会使用框架设计网页;
8．掌握制作表单的方法,会利用表单建立交互式页面;
9．掌握HTML的语法结构及各种标记的使用方法;
10．掌握在网页中添加CSS的方法,会使用CSS设置网页格式和网页布局;
11．掌握站点管理及发布。
四、主要仪器设备
多媒体计算机,安装Dreamweaver、Fireworks、Flash、PhotoShop、CuteFTP等软件。
五、实验项目及教学安排
序号
实验项目名称
实验基本方法和内容
项目 学时
项目
类型
每组
人数
教学 要求
1
简单网页制作
Dreamweaver软件的操作界面的认识;建立站点;制作简单网页
2
基础
1
必修
2
在网页中插入基本元素
文本的插入及属性设置;图像的插入及属性设置;各种媒体的插入及相关参数的设置;建立超链接
2
基础
1
必修
3
表格的创立与编辑
创立表格;设置表格的属性;设置单元格的属性;制作特殊表格
2
基础
1
必修
4
表格布局(一)
利用表格进行网页布局
2
基础
1
必修
5
表格布局(二)
利用表格进行网页布局
2
综合　
1
必修
6
框架与表单
创立框架;设置框架集的属性;设置框架的属性;使用框架面板管理框架;利用框架进行网页布局;插入表单及表单对象;设置表单元素属性
2
基础
1
必修
7
CSS
创立CSS样式;使用CSS样式控制网页外观;编辑CSS样式
2
基础
1
必修
8
网页制作综合练习
定位网站的主题和名称;确定网站的栏目;确定网站的目录结构;确定网站的链接结构;设计网站的整体风格;绘制网页布局;收集制作素材;网站制作;网站上传。
2
设计
综合
1
必修
9
自拟主题网站制作
定位网站的主题和名称;确定网站的栏目;确定网站的目录结构;确定网站的链接结构;设计网站的整体风格;绘制网页布局;网站制作
8
设计
综合
1
选修
10
动态网站制作
使用Javascript、Asp、数据库等技术制作小型动态网站
10
设计
综合
1
选修

六、考核方式及成绩评定
考核方式:
1、实验平时成绩:
(1)实验考勤:每次考勤分出勤(2分);请假、迟到、早退(1分);旷课(0分)记分。
(2)预习报告:要求写明实验目的、主要实验设备名称、实验原理和内容。分优秀(4分)、良好(3分)、中等(2分)、及格(1分)和不及格(0分)记分。
(3)实验报告:要求写明实验设备名称和型号、实验步骤、实验分析及注意事项。分优秀(4分)、良好(3分)、中等(2分)、及格(1分)和不及格(0分)记分。
实验平时成绩最后折算成100分。
2、平时作业:根据作品评定成绩,满分为100分
3、实验考试:上机考试,满分为100分。
成绩评定:
总实验成绩占本课程成绩的30%。
总实验成绩=实验平时成绩×20%+平时上机作业×30%+实验考试成绩×50%。
七、实验教科书、参考书
1．实验教科书
网页设计与制作(讲义),王丽萍,
2．实验参考书
Dreamweaver MX 完美网页设计与制作,姜楠,中国青年出版社,

实验一 ”满立减”网络广告的制作
一、实验目的
1．熟悉PHOTOSHOP软件的操作。
2．掌握网络广告的构成要素。
4．按要求完成一则网络广告的设计。
二、实验内容
设计一则图片广告,要求显示店铺的活动:
单笔订单满 100 元 减 5 元 ,送5元店铺优惠券 。
单笔订单满 180 元 减 10 元 ,送10元店铺优惠券 。
单笔订单满 300 元 减 20 元 ,送10元店铺优惠券 。
单笔订单满 500 元 减 30 元 ,送20元店铺优惠券 。
全场包邮
支持淘金币抵价 100金币抵价1元,最高可抵货价的5%
三、操作步骤
1．设置背景颜色
2．创立宽为950像素,高度在300-450像素之间
3．构造广告的页面,要求有新奇的创意,并能体现出网络广告的主要内容
4．提交设计的网络广告效果图
5．撰写实验报告
四、实验要求
1．给出你设计的网络广告的主要构成要素?
2．给出此次实验中你设计的网络广告的主要目标?
3．阐述你设计的网络广告的创意。

实验二 在网页中插入基本元素
一、实验目的
1．掌握文本的插入方法及属性设置方法。
2．掌握图像的插入方法及属性设置方法。
3．掌握各种媒体的插入方法及相关参数的设置。
二、实验内容
1．制作”何所思”网页。
2．制作”动画厨房” 网页。
3．制作”我爱北京”网络站册。
4．创立”多媒体”站点,并制作以下网页:
(1)插入flash动画的网页
(2)插入RealPlayer播放器的网页
(3)插入Media Player播放器的网页
(4)插入背景音乐的网页
三、操作步骤
1．制作”何所思”网页。
(1)在硬盘根目录下新建文件夹,命名为thinking。
(2)打开thinging文件夹,在其中建立子文件夹,命名为images。
(3)将所有图片素材复制到images文件夹中。
(4)启动Dreamweaver,使用”站点｜管理站点｜新建站点”命令新建”何所思”站点。
(5)新建网页,保存为index.htm。
(6)在网页中插入文字,设置标题文字,在文字中插入空格,分段,换行。
(7)在网页中插入图片,设置图片的对齐方式为”右对齐”。
(8)保存网页,预览。

2．制作”动画厨房”网页
(1)在硬盘根目录下新建文件夹,命名为donghua。
(2)打开donghua文件夹,将图片donghua.jpg复制到该文件夹中。
(3)启动Fireworks,打开donghua.jpg图片,使用切片工具进行切片。

(4)使用”文件｜导出”命令,导出切片和网页,设置如图所示。

(5)启动Dreamweaver,打开donghua.htm网页,使用”修改｜页面属性”命令,设置网页背景色为黑色,上边距为0像素。
3．制作”我爱北京”网站相册。
(1)将所有图片素材保存在photo文件夹中。
(2)在硬盘根目录下新建文件夹,命名为beijing。
(3)启动Dreamweaver,使用”站点｜管理站点｜新建站点”命令新建”北京”站点,并指定beijing文件夹为”北京”站点的本地根文件夹。
(4)新建网页,使用”命令｜创立网站相册”命令创立相册,设置如图所示。

(5)单击确定按钮,相册创立完成。
(6)按F12,预览网页。
(7)打开硬盘上的beijing文件夹,查看文件,其中imgaes文件夹保存的是原图片,thumbnails文件夹保存的是缩略图,pages文件夹保存的是相册分页,index.htm是网站相册首页。
4．创立”多媒体”站点,并制作网页。
(1)在硬盘根目录下新建文件夹,命名为site。
(2)打开site文件夹,在其中建立子文件夹,命名为Media。
(3)将所有多媒体素材复制到Media文件夹中。
(4)启动Dreamweaver,使用”站点｜管理站点｜新建站点”命令新建”多媒体”站点,并指定site文件夹为”多媒体”站点的本地根文件夹。设置完毕后,文件面板如图所示。

(5)在网页中插入flash动画
新建网页,保存网页为001.htm。在网页中插入flash动画yueding.swf,设置flash动画背景透明。

(6)在网页中插入RealPlayer播放器
新建网页,保存网页为002.htm。在网页中插入ActiveX,在属性面板上设置ClassID为CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA,宽320像素,高280像素,参数设置如图所示。

(7)在网页中插入Media Player播放器1
新建网页,保存网页为003..htm。在网页中插入ActiveX,在属性面板上设置ClassID为CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95,宽320像素,高280像素,参数设置如图所示。

(8)在网页中插入Media Player播放器2
新建网页,保存网页为004.htm。在网页中插入ActiveX,在属性面板上设置ClassID为CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6,宽320像素,高280像素,参数设置如图所示。

(9)在网页中插入背景音乐
新建网页,保存网页为005.htm。在网页中插入,在弹出的选择文件对话框中选择bgmusic.mid。插件的参数设置如图所示。

四、思考题
1．文本分行和分段落的区别。
2．在网页中插入特殊符号的方法。
3．在网页中插入列表、日期、水平线的方法。
4．实现图文混排的方法。
5．在网页中插入视频的方法。
6．在网页中插入音频的方法。
实验三 表格的创立与编辑
一、实验目的
1．掌握表格的插入方法。
2．掌握表格属性、单元格属性的设置方法。
3．深入理解表格背景颜色、填充、间距、边框、单元格背景颜色等属性对网页外观的影响。
4．掌握各种特殊表格的制作方法。
二、实验内容
1．插入、编辑表格。
2．在网页中制作水平细线和垂直细线。
3．在网页中制作细线表格。
4．在网页中制作双线边框表格。
5．在网页中制作圆角表格。
三、操作步骤
1．建立站点
(1)在硬盘根目录下新建文件夹,命名为table。
(2)在table文件夹中新建子文件夹,命名为images。将所有图片素材保存在images文件夹中。
(3)启动Dreamweaver,使用”站点｜管理站点｜新建站点”命令新建”表格练习”站点,并指定table文件夹为”表格练习”站点的本地根文件夹。
2．插入、编辑表格
(1)新建网页,保存网页为001.htm。
(2)插入一个3行3列的表格,表格宽度为300像素,边框粗细为1,单元格边距为0,单元格间距为0。
(3)选中表格,设置表格的填充为5,间距6,边框为8。
(4)选中表格,设置表格的背景图像为girl.gif。
(5)选中表格,用鼠标拖动表格右下角的尺寸手柄,将表格加大,观察背景图像在表格中的”平铺”情况。
(6)选中第一行所有单元格,将它们合并。
(7)选中第二行第一个单元格,将它拆分成两列。
(8)选中所有单元格,设置单元格的背景颜色为绿色。
3．在网页中制作红色水平细线
(1)新建网页,保存网页为002.htm。
(2)插入一个1行1列的表格,表格宽度为500像素,边框粗细、单元格边距、单元格间距均为”0”。
(3)选中表格,设置表格的背景颜色为红色。
(4)设置表格的高度为”1”像素。
(5)切换至”代码”视图,删除单元格中的” ”代码。
(6)保存网页,按F12预览。
4．在网页中制作绿色垂直细线
(1)新建网页,保存网页为003.htm。
(2)插入一个1行1列的表格,表格宽度为1像素,边框粗细、单元格边距、单元格间距均为”0”。
(3)选中表格,设置表格的背景颜色为绿色。
(4)设置表格的高度为”400”像素。
(5)切换至”代码”视图,删除单元格中的” ”代码。
(6)保存网页,按F12预览。
5．在网页中制作黑色细线表格

(1)新建网页,保存网页为004.htm。
(2)插入一个3行3列的表格,表格宽度为300像素,边框粗细为0,单元格边距为5,单元格间距为1。
(3)选中表格,设置表格的背景颜色为黑色。
(4)选中所有单元格,设置单元格的背景颜色为白色。
(6)保存网页,按F12预览。
6．在网页中制作双细线表格

(1)新建网页,保存网页为005.htm。
(2)在网页中制作细线表格,表格宽度300像素,如图所示。

(3)接下来绘制另一个表格,1行1列,宽度300像素,单元格边距为2、单元格间距为1。表格背景颜色为#003366,单元格背景颜色为白色。如图所示。

(4)将前面制作的表格复制到该表格中。如图所示。
(5)保存网页,按F12预览。
7．在网页中制作圆角表格

(1)新建网页,保存网页为006.htm。
(2)在网页中插入一个1行3列的表格,表格宽度为300像素,边框粗细、单元格边距、单元格间距均为”0”。设置第一个单元格宽度9像素,高度9像素,在其中插入图片corner_tl.gif。设置第二个单元格高度为9像素,在其中插入图片topline.gif,设置图片宽度为282像素。设置第三个单元格宽度9像素,高度9像素,在其中插入图片corner_tr.gif。如图所示。

(3)将光标停在第一个表格后,插入一个1行3列的表格,表格宽度为300像素,边框粗细、单元格边距、单元格间距均为”0”。设置表格高度为100像素。设置第一个单元格宽度1像素,背景颜色为#FF6600, 切换至”代码”视图,删除其中的” ”代码。设置第二个单元格宽度为298像素。设置第三个单元格宽度1像素,背景颜色为#FF6600, 切换至”代码”视图,删除其中的” ”代码。

(4)将光标停在第二个表格后,插入一个1行3列的表格,表格宽度为300像素,边框粗细、单元格边距、单元格间距均为”0”。设置第一个单元格宽度9像素,高度9像素,在其中插入图片corner_bl.gif。设置第二个单元格高度为9像素,在其中插入图片bottomline.gif,设置图片宽度为282像素。设置第三个单元格宽度9像素,高度9像素,在其中插入图片corner_br.gif。

(5)保存网页,按F12预览。
四、思考题
1．图像插入到单元格中与图像作单元格背景有什么区别?
2．水平细线的制作方法。
3．细线表格的制作方法。
实验四　表格布局(一)
一、实验目的
1．掌握利用表格进行网页布局的方法。
2．深入理解表格背景颜色、填充、间距、边框、单元格背景颜色等属性对网页外观的影响。
二、实验内容
1．制作”网达新闻”网页。
2．制作”心灵之间－信”网页。
三、操作步骤
1．制作”网达新闻”网页。
(1)在D盘上新建文件夹,命名为”wangda”。将images文件夹拷贝到该文件夹下。启动Dreamweaver,定义该文件夹为站点。
(2)设置页属性
字号:9pt
网页背景图片:bk.jpg
左、上边距:0、0
网页标题:网达新闻
(3)插入table1
表格宽度778px　1行2列
表格背景图片:image_04.jpg　宽4px　高48px
插入图片:image_02.jpg　 image_06.jpg
(4)插入table2
表格宽度778px　1行1列
插入flash
(5)插入table3
表格宽度778px　1行1列
插入图片:seek_01.jpg～seek_08.jpg

(6)插入table4
表格宽度778px　1行5列
表格背景颜色:白色
各列宽度:199＋1＋372＋1＋205＝778
中间列单元格的背景图片:image_19.jpg
(7)插入table5
表格宽度778px　1行1列
表格背景图片:image_31.jpg
(8)插入table6
表格宽度778px　1行1列
表格背景图片:image_35.jpg
(9)制作其它内容
(10)保存网页,按F12预览,如图所示。

2．制作”心灵之间－信”网页。
(1)在D盘上新建文件夹,命名为”xinling”。将images文件夹拷贝到该文件夹下。启动Dreamweaver,定义该文件夹为站点。
(2)设置页面属性
网页标题:心灵之间
(3)制作网页
网页布局:宽度700像素,在浏览器窗口中”居中”
图片一:images\ img_2.gif 宽度229像素 高度281像素　

图片二:images\top_text.gif

图片三:images\xin_xiao.gif

图片四:images\ img_bottom.gif 宽度224像素 高度62像素

网页导航:表格宽度125像素 单元格宽度25像素　文字上制作空链接

(4)设置网页CSS样式
字号 9pt
行高 150%
A:link COLOR: #5c6c81 TEXT-DECORATION: none
A:hover COLOR: #000000 TEXT-DECORATION: underline
A:active COLOR: #000000 TEXT-DECORATION: underline
A:visited COLOR: #5c6c81 TEXT-DECORATION: none
(5)保存网页,按F12预览,如图所示。

四、思考题
1．表格宽度的单位有哪些。
2．一般情况下,如何设置布局表格的边框、单元格边距和单元格间距。
3．一般情况下,如何设置布局表格的高度。
实验五　表格布局(二)
一、实验目的
熟练掌握利用表格进行网页布局的方法。
二、实验内容
制作”我的设计”网站中的”三维作品”栏目。
三、操作步骤
1．建立站点
在D盘根目录下新建文件夹,命名为design。将两个素材文件夹3dimg和images复制到design文件夹中。启动Dreamweaver,将design文件夹定义为”我的设计”站点。
2．制作”三维作品”页面

(1)新建网页,保存为3d_001.htm。
(2)设置页面属性,如图所示。

(3)插入黑色细线表格。表格大小设置如图所示。

在属性面板上设置表格背景色为黑色,单元格背景色为#CCCCB8,如图所示。

(4)将光标置于细线表格中,继续插入表格。表格1行3列,宽度900像素,边框、边距、间距均为0,高度120像素,背景颜色#9E9E7E。各列宽度为30像素,350像素,520像素。插入图像后,如图所示。

(5)将光标置于上一表格后,继续插入表格。表格1行1列,宽度900像素,边框、边距、间距均为0,高度20像素,背景图像为index_004.gif。

(6)将光标置于于上一表格后,继续插入表格。表格1行3列,宽度900像素,边框、边距、间距均为0。各列宽度为200像素,50像素,650像素。在左列单元格中插入表格及网页内容,如图所示。

(7)在右列单元格中插入表格及导航图片,如图所示。

(8)继续插入表格。表格2行1列,宽度600像素,边框、边距、间距均为0。第一行单元格高度为10像素。在第二行单元格中插入表格,表格1行3列,宽度600像素,边框、边距为0,间距为10,背景颜色为#B7B7A5。各列宽度为100像素,100像素,360像素,如图所示。

(9)选中上面表格并复制,然后粘帖五次,如图所示。

(10)在表格中插入图片及内容,如图所示。

3．制作3d作品的其它页面
四、思考题
1．多层表格嵌套时,选择表格的技巧。
2．单元格间距和单元格边距对表格布局的影响。
3．单元格对齐属性对表格布局的影响。
实验六 框架与表单
一、实验目的
1．掌握框架的创立方法。
2．掌握框架集和框架的属性设置方法。
3．掌握框架布局的方法。
4．掌握插入表单对象的方法。
5．掌握表单对象的属性设置方法
二、实验内容
1．制作”跳舞的树”网页。
2．制作”用户注册”网页。
三、操作步骤
(一)制作”跳舞的树”网页。

1．创立框架网页
(1)定义站点,新建网页。
(2)勾选”查看/可视化助理/框架边框”选项,显示”框架边框”。
(3)用鼠标拖动”设计”视图四周显示的框架边框线,创立框架。

2．设置框架集和框架属性
(1)打开”框架面板”。
(2)选择框架集,设置框架集属性。

(3)选择左框架,设置框架属性。

(3)选择中间框架,设置框架属性。

(3)选择右框架,设置框架属性。

3．保存框架集和框架
选择主菜单”文件｜保存全部”命令。
4．在框架中创立超链接
选中”首页”,创立到middle.htm文件的超链接,并为链接指定目标框架窗口为middle。
选中”首页”,创立到middle.htm文件的超链接,并为链接指定目标框架窗口为middle。
选中”有树如我”,创立到liketree.htm文件的超链接,并为链接指定目标框架窗口为middle。
选中”流年”,创立到liketree.htm文件的超链接,并为链接指定目标框架窗口为middle。
选中”伙伴”,创立到company.htm文件的超链接,并为链接指定目标框架窗口为middle。
选中”翻箱倒框”,创立到favo.htm文件的超链接,并为链接指定目标框架窗口为middle。
5．保存网页,预览。
(二)制作”用户注册”网页。

1．插入表单。
2．插入表单对象。
3．设置表单对象属性。
四、思考题
1．框架结构的组成。
2．框架结构的网页,网页标题如何设置设置。
3．单选按钮和复选框对象的属性设置有何不同。

实验七 CSS网页布局
一、实验目的
1．掌握在网页中应用CSS的方法。
2．掌握CSS基本语法。
3．熟悉CSS属性。
4．掌握使用CSS布局网页的方法。
二、实验内容
1．为”网达公司”网页添加CSS样式。
2．为”心灵之间”网页添加CSS样式。
3．使用CSS实现”webquest”网页布局。
4．使用CSS实现”固定宽度两栏”网页布局。
5．使用CSS实现”满屏三栏”网页布局。
三、操作步骤
1．为”网达公司”网页添加CSS样式。
(1)新建样式,重新定义body标签,将样式保存在外部文件style.css中。body标签的样式定义为:文字9pt,行高150%。
(2)新建样式,重新定义td标签。td标签的样式定义为:文字9pt,行高150%。
(3)新建样式,重新定义超链接样式。
(4)新建样式,自定义一个类,用于设置文字为白色。
2．为”心灵之间”网页添加CSS样式。
复制style.css文件至”心灵之间”文件夹。打开index.htm,并链接外部样式表文件style.css。
3．使用CSS实现”webquest”网页布局。

(1)查看webquest网页结构,分为container,header,content,footer几个部分。
(2)定义body样式。
(3)定义#container样式(宽度为760像素,居中)。
(4)定义#header样式。
(5)定义#content样式(宽度为700像素,居中)。
(6)定义#footer样式。
(7)定义其它样式。

4．使用CSS实现”固定宽度两栏”网页布局。

(1)查看网页结构,分为outer,bodyblock,hdr,bar,l-col,cont,ftr
几个部分。
(2)定义body样式。
(3)定义#outer样式。
(4)定义#bodyblock样式。
(5)定义#hdr样式。
(6)定义#bar样式。
(7)定义#l-col样式。
(8)定义#cont样式。
(9)定义#ftr样式。
(10)定义其它样式。
5．使用CSS实现”满屏三栏”网页布局。

(1)查看网页结构,分为hdr,lh-col,rh-col,c-col,ftr几个部分。
(2)定义body样式。
(3)定义#hdr样式。
(4)定义#lh-col样式。
(5)定义#rh-col样式。
(6)定义#c-col样式。
(7)定义#ftr样式。
(8)定义其它样式。
四、思考题
1．在网页上应用CSS的四种基本方法。
2．类选择符与ID选择符的区别。
3．使用伪类时的注意事项。
4．CSS盒模型中各参数的对网页布局的影响。

实验八 网页制作综合练习
一、实验目的
1．综合运用网页制作的知识和技术制作网站。
2．掌握发布网站的方法。
二、实验内容
1．以”祖国腾飞”为主题,制作一个网站。网站包括8～10张网页,主要内容为”申奥成功”、”加入世贸组织”、”载人飞船发射成功”、”澳门回归”、”战胜非典”等。
2．发布网站。
三、实验指导
1．网站制作
(1)定位网站的主题和名称;
(2)确定网站的栏目;
(3)确定网站的目录结构;
(4)确定网站的链接结构;
(5)设计网站的整体风格;
(6)绘制网页布局;
(7)收集制作素材;
(8)网站制作。
2．上传网站
(1)申请免费个人主页空间;
(2)使用FTP工具登录主页空间(推荐使用的工具是CuteFTP);
(3)输入用户名和密码;
(4)上传文件。
四、思考题
1．如何建立合理的网站结构?
2．网站制作过程中,使用了哪种方法进行网页布局,为什么?
3．如何更新发布了的网站。