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

网络广告设计实验指导书472020年5月29日文档仅供参考目录实验大纲1实验一 简单网页制作3实验二 在网页中插入基本元素7实验三 表格的创立与编辑13实验四表格布局(一)18实验五表格布局(二)23实验六 框架与表单27实验七 CSS31实验八 网页制作综合练习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必修7CSS创立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表格宽度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中间列单元格的背景图片: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像素 图片二: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: #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使用伪类时的注意事项。4CSS盒模型中各参数的对网页布局的影响。实验八 网页制作综合练习一、实验目的1综合运用网页制作的知识和技术制作网站。2掌握发布网站的方法。二、实验内容1以”祖国腾飞”为主题,制作一个网站。网站包括810张网页,主要内容为”申奥成功”、”加入世贸组织”、”载人飞船发射成功”、”澳门回归”、”战胜非典”等。2发布网站。三、实验指导1网站制作(1)定位网站的主题和名称;(2)确定网站的栏目;(3)确定网站的目录结构;(4)确定网站的链接结构;(5)设计网站的整体风格;(6)绘制网页布局;(7)收集制作素材;(8)网站制作。2上传网站(1)申请免费个人主页空间;(2)使用FTP工具登录主页空间(推荐使用的工具是CuteFTP);(3)输入用户名和密码;(4)上传文件。四、思考题1如何建立合理的网站结构?2网站制作过程中,使用了哪种方法进行网页布局,为什么?3如何更新发布了的网站。