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

《网络广告设计实验指导书.doc》由会员分享，可在线阅读，更多相关《网络广告设计实验指导书.doc（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 目录实验大纲1实验一 简单网页制作3实验二 在网页中插入基本元素7实验三 表格的创建与编辑13实验四表格布局（一）18实验五表格布局（二）23实验六 框架与表单27实验七 CSS31实验八 网页制作综合练习3633实验大纲课程名称：网页设计与制作英文名称：Design and Making of WebPages设置形式：非独立设课课程模块：专业方向课实验课性质：专业实验课程编号：601822课程负责人：王丽萍大纲主撰人：王丽萍大纲审核人：李焕勤一、学时、学分课程总学时：48实验学时：16课程学分：2二、适用专业及年级 教育技术学 二年级三、课程目标与基本要求课程的目标：课程全面介绍网页设计

2、与制作的相关知识，包括网页制作工具Dreamweaver的使用方法、HTML语言、CSS技术及网站的发布与维护等，目标是使学生具备网页设计与制作的基本知识和基本技能，能够独立完成中、小型网站的设计与制作，为将来制作网络教学软件和教育专题网站打下基础。基本要求：1掌握利用Dreamweaver创建网站、制作网页、管理站点等。2熟练掌握文字的各种编排方法。3熟练掌握图形的获取、各种修饰方法。4熟练掌握超链接技术。5熟练掌握音频、视频等多媒体信息的嵌入、链接方法;6熟练掌握表格的使用方法，会用表格设计网页；7掌握框架制作网页的方法，会使用框架设计网页；8掌握制作表单的方法，会利用表单建立交互式页面；

3、9掌握HTML的语法结构及各种标记的使用方法；10掌握在网页中添加CSS的方法，会使用CSS设置网页格式和网页布局；11掌握站点管理及发布。四、主要仪器设备 多媒体计算机，安装Dreamweaver、Fireworks、Flash、PhotoShop、CuteFTP等软件。五、实验项目及教学安排序号实验项目名称实验基本方法和内容项目 学时项目类型每组人数教学 要求1简单网页制作Dreamweaver软件的操作界面的认识；建立站点；制作简单网页2基础1必修2在网页中插入基本元素文本的插入及属性设置；图像的插入及属性设置；各种媒体的插入及相关参数的设置；建立超链接2基础1必修3表格的创建与编辑创建

4、表格；设置表格的属性；设置单元格的属性；制作特殊表格2基础1必修4表格布局（一）利用表格进行网页布局2基础1必修5表格布局（二）利用表格进行网页布局2综合1必修6框架与表单创建框架；设置框架集的属性；设置框架的属性；使用框架面板管理框架；利用框架进行网页布局；插入表单及表单对象；设置表单元素属性2基础1必修7CSS创建CSS样式；使用CSS样式控制网页外观；编辑CSS样式2基础1必修8网页制作综合练习定位网站的主题和名称；确定网站的栏目；确定网站的目录结构；确定网站的链接结构；设计网站的整体风格；绘制网页布局；收集制作素材；网站制作；网站上传。2设计综合1必修9自拟主题网站制作定位网站的主题和

5、名称；确定网站的栏目；确定网站的目录结构；确定网站的链接结构；设计网站的整体风格；绘制网页布局；网站制作8设计综合1选修10动态网站制作使用Javascript、Asp、数据库等技术制作小型动态网站10设计综合1选修六、考核方式及成绩评定考核方式：1、实验平时成绩：（1）实验考勤：每次考勤分出勤（2分）；请假、迟到、早退（1分）；旷课（0分）记分。（2）预习报告：要求写明实验目的、主要实验设备名称、实验原理和内容。分优秀（4分）、良好（3分）、中等（2分）、及格（1分）和不及格（0分）记分。（3）实验报告：要求写明实验设备名称和型号、实验步骤、实验分析及注意事项。分优秀（4分）、良好（3分）、

6、中等（2分）、及格（1分）和不及格（0分）记分。实验平时成绩最后折算成100分。2、平时作业：根据作品评定成绩，满分为100分3、实验考试：上机考试，满分为100分。成绩评定：总实验成绩占本课程成绩的30%。总实验成绩=实验平时成绩20%+平时上机作业30%+实验考试成绩50%。 七、实验教科书、参考书1实验教科书网页设计与制作（讲义），王丽萍，20052实验参考书Dreamweaver MX 2004 完美网页设计与制作，姜楠，中国青年出版社，2004年 实验一 “满立减”网络广告的制作一、实验目的1熟悉PHOTOSHOP软件的操作。2掌握网络广告的构成要素。4按要求完成一则网络广告的设计。

7、二、实验内容设计一则图片广告，要求显示店铺的活动：单笔订单满 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给出

8、此次实验中你设计的网络广告的主要目标？3阐述你设计的网络广告的创意。实验二 在网页中插入基本元素一、实验目的1掌握文本的插入方法及属性设置方法。2掌握图像的插入方法及属性设置方法。3掌握各种媒体的插入方法及相关参数的设置。二、实验内容1制作“何所思”网页。2制作“动画厨房” 网页。3制作“我爱北京”网络站册。4创建“多媒体”站点，并制作以下网页：（1）插入flash动画的网页（2）插入RealPlayer播放器的网页（3）插入Media Player播放器的网页（4）插入背景音乐的网页三、操作步骤1制作“何所思”网页。（1）在硬盘根目录下新建文件夹，命名为thinking。（2）打开thing

9、ing文件夹，在其中建立子文件夹，命名为images。（3）将所有图片素材复制到images文件夹中。（4）启动Dreamweaver，使用“站点管理站点新建站点”命令新建“何所思”站点。（5）新建网页，保存为index.htm。（6）在网页中插入文字，设置标题文字，在文字中插入空格，分段，换行。（7）在网页中插入图片，设置图片的对齐方式为“右对齐”。（8）保存网页，预览。2制作“动画厨房”网页（1）在硬盘根目录下新建文件夹，命名为donghua。（2）打开donghua文件夹，将图片donghua.jpg复制到该文件夹中。（3）启动Fireworks，打开donghua.jpg图片，使用切片

10、工具进行切片。（4）使用“文件导出”命令，导出切片和网页，设置如图所示。（5）启动Dreamweaver，打开donghua.htm网页，使用“修改页面属性”命令，设置网页背景色为黑色，上边距为0像素。3制作“我爱北京”网站相册。（1）将所有图片素材保存在photo文件夹中。（2）在硬盘根目录下新建文件夹，命名为beijing。（3）启动Dreamweaver，使用“站点管理站点新建站点”命令新建“北京”站点，并指定beijing文件夹为“北京”站点的本地根文件夹。（4）新建网页，使用“命令创建网站相册”命令创建相册，设置如图所示。（5）单击确定按钮，相册创建完成。（6）按F12，预览网页。（

11、7）打开硬盘上的beijing文件夹，查看文件，其中imgaes文件夹保存的是原图片，thumbnails文件夹保存的是缩略图，pages文件夹保存的是相册分页，index.htm是网站相册首页。4创建“多媒体”站点，并制作网页。（1）在硬盘根目录下新建文件夹，命名为site。（2）打开site文件夹，在其中建立子文件夹，命名为Media。（3）将所有多媒体素材复制到Media文件夹中。（4）启动Dreamweaver，使用“站点管理站点新建站点”命令新建“多媒体”站点，并指定site文件夹为“多媒体”站点的本地根文件夹。设置完毕后，文件面板如图所示。（5）在网页中插入flash动画新建网页，

12、保存网页为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-0080C74C7

13、E95，宽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实现图文

14、混排的方法。5在网页中插入视频的方法。6在网页中插入音频的方法。实验三 表格的创建与编辑一、实验目的1掌握表格的插入方法。2掌握表格属性、单元格属性的设置方法。3深入理解表格背景颜色、填充、间距、边框、单元格背景颜色等属性对网页外观的影响。4掌握各种特殊表格的制作方法。二、实验内容1插入、编辑表格。2在网页中制作水平细线和垂直细线。3在网页中制作细线表格。4在网页中制作双线边框表格。5在网页中制作圆角表格。三、操作步骤1建立站点（1）在硬盘根目录下新建文件夹，命名为table。（2）在table文件夹中新建子文件夹，命名为images。将所有图片素材保存在images文件夹中。（3）启动Dre

15、amweaver，使用“站点管理站点新建站点”命令新建“表格练习”站点，并指定table文件夹为“表格练习”站点的本地根文件夹。2插入、编辑表格（1）新建网页，保存网页为001.htm。（2）插入一个3行3列的表格，表格宽度为300像素，边框粗细为1，单元格边距为0，单元格间距为0。（3）选中表格，设置表格的填充为5，间距6，边框为8。（4）选中表格，设置表格的背景图像为girl.gif。（5）选中表格，用鼠标拖动表格右下角的尺寸手柄，将表格加大，观察背景图像在表格中的“平铺”情况。（6）选中第一行所有单元格，将它们合并。（7）选中第二行第一个单元格，将它拆分成两列。（8）选中所有单元格，设置

16、单元格的背景颜色为绿色。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

17、）切换至“代码”视图，删除单元格中的“ ”代码。（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。表格背景颜色为

18、#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）将光标停在第一个表格后，插入一个

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

20、图片bottomline.gif，设置图片宽度为282像素。设置第三个单元格宽度9像素，高度9像素，在其中插入图片corner_br.gif。（5）保存网页，按F12预览。四、思考题1图像插入到单元格中与图像作单元格背景有什么区别？2水平细线的制作方法。3细线表格的制作方法。实验四表格布局（一）一、实验目的1掌握利用表格进行网页布局的方法。2深入理解表格背景颜色、填充、间距、边框、单元格背景颜色等属性对网页外观的影响。二、实验内容1制作“网达新闻”网页。2制作“心灵之间信”网页。三、操作步骤1制作“网达新闻”网页。（1）在D盘上新建文件夹，命名为“wangda”。将images文件夹拷贝到该文

21、件夹下。启动Dreamweaver，定义该文件夹为站点。（2）设置页属性字号：9pt网页背景图片：bk.jpg左、上边距：0、0网页标题：网达新闻（3）插入table1表格宽度778px1行2列表格背景图片：image_04.jpg宽4px高48px插入图片：image_02.jpg image_06.jpg（4）插入table2表格宽度778px1行1列插入flash（5）插入table3表格宽度778px1行1列插入图片：seek_01.jpgseek_08.jpg（6）插入table4表格宽度778px1行5列表格背景颜色：白色各列宽度：19913721205778中间列单元格的背景图片

22、：image_19.jpg（7）插入table5表格宽度778px1行1列表格背景图片：image_31.jpg（8）插入table6表格宽度778px1行1列表格背景图片：image_35.jpg（9）制作其它内容（10）保存网页，按F12预览，如图所示。2制作“心灵之间信”网页。（1）在D盘上新建文件夹，命名为“xinling”。将images文件夹拷贝到该文件夹下。启动Dreamweaver，定义该文件夹为站点。（2）设置页面属性网页标题：心灵之间（3）制作网页网页布局：宽度700像素，在浏览器窗口中“居中”图片一：images img_2.gif 宽度229像素 高度281像素 图片二

23、：imagestop_text.gif图片三：imagesxin_xiao.gif图片四：images img_bottom.gif 宽度224像素 高度62像素网页导航：表格宽度125像素 单元格宽度25像素文字上制作空链接 （4）设置网页CSS样式字号 9pt行高 150%A:link COLOR: #5c6c81 TEXT-DECORATION: noneA:hover COLOR: #000000 TEXT-DECORATION: underlineA:active COLOR: #000000 TEXT-DECORATION: underlineA:visited COLOR: #5

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

25、存为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像素，

26、边框、边距、间距均为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单元格间

27、距和单元格边距对表格布局的影响。3单元格对齐属性对表格布局的影响。实验六 框架与表单一、实验目的1掌握框架的创建方法。2掌握框架集和框架的属性设置方法。3掌握框架布局的方法。4掌握插入表单对象的方法。5掌握表单对象的属性设置方法二、实验内容1制作“跳舞的树”网页。2制作“用户注册”网页。三、操作步骤（一）制作“跳舞的树”网页。1创建框架网页（1）定义站点，新建网页。（2）勾选“查看/可视化助理/框架边框”选项，显示“框架边框”。（3）用鼠标拖动“设计”视图四周显示的框架边框线，创建框架。2设置框架集和框架属性（1）打开“框架面板”。（2）选择框架集，设置框架集属性。（3）选择左框架，设置框架属

28、性。（3）选择中间框架，设置框架属性。（3）选择右框架，设置框架属性。3保存框架集和框架选择主菜单“文件保存全部”命令。4在框架中创建超链接选中“首页”，创建到middle.htm文件的超链接，并为链接指定目标框架窗口为middle。选中“首页”，创建到middle.htm文件的超链接，并为链接指定目标框架窗口为middle。选中“有树如我”，创建到liketree.htm文件的超链接，并为链接指定目标框架窗口为middle。选中“流年”，创建到liketree.htm文件的超链接，并为链接指定目标框架窗口为middle。选中“伙伴”，创建到company.htm文件的超链接，并为链接指定目标

29、框架窗口为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使用C

30、SS实现“固定宽度两栏”网页布局。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实现“webques

31、t”网页布局。（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）定义

32、#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使用伪类时的注意事项。4CSS盒模型中各参数的对网页布局的影响。实验八 网页制

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