网络广告设计实验指导书

实验指导书教育传播技术学院教育技术学专业1目录实验大纲............................................................1实验一简单网页制作................................................3实验二在网页中插入基本元素........................................4实验三表格的创建与编辑...........................................10实验四表格布局（一）.............................................15实验五表格布局（二）.............................................20实验六框架与表单.................................................24实验七CSS........................................................28实验八网页制作综合练习...........................................33实验指导书教育传播技术学院教育技术学专业1实验大纲课程名称：网页设计与制作英文名称：DesignandMakingofWebPages设置形式：非独立设课课程模块：专业方向课实验课性质：专业实验课程编号：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必修实验指导书教育传播技术学院教育技术学专业24表格布局（一）利用表格进行网页布局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．实验教科书网页设计与制作（讲义），王丽萍，20052．实验参考书DreamweaverMX2004完美网页设计与制作，姜楠，中国青年出版社，2004年实验指导书教育传播技术学院教育技术学专业3实验一“满立减”网络广告的制作一、实验目的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．阐述你设计的网络广告的创意。实验指导书教育传播技术学院教育技术学专业4实验二在网页中插入基本元素一、实验目的1．掌握文本的插入方法及属性设置方法。2．掌握图像的插入方法及属性设置方法。3．掌握各种媒体的插入方法及相关参数的设置。二、实验内容1．制作“何所思”网页。2．制作“动画厨房”网页。3．制作“我爱北京”网络站册。4．创建“多媒体”站点，并制作以下网页：（1）插入flash动画的网页（2）插入RealPlayer播放器的网页（3）插入MediaPlayer播放器的网页（4）插入背景音乐的网页三、操作步骤1．制作“何所思”网页。（1）在硬盘根目录下新建文件夹，命名为thinking。（2）打开thinging文件夹，在其中建立子文件夹，命名为images。（3）将所有图片素材复制到images文件夹中。（4）启动Dreamweaver，使用“站点｜管理站点｜新建站点”命令新建“何所思”站点。（5）新建网页，保存为index.htm。（6）在网页中插入文字，设置标题文字，在文字中插入空格，分段，换行。（7）在网页中插入图片，设置图片的对齐方式为“右对齐”。（8）保存网页，预览。实验指导书教育传播技术学院教育技术学专业52．制作“动画厨房”网页（1）在硬盘根目录下新建文件夹，命名为donghua。（2）打开donghua文件夹，将图片donghua.jpg复制到该文件夹中。（3）启动Fireworks，打开donghua.jpg图片，使用切片工具进行切片。（4）使用“文件｜导出”命令，导出切片和网页，设置如图所示。实验指导书教育传播技术学院教育技术学专业6（5）启动Dreamweaver，打开donghua.htm网页，使用“修改｜页面属性”命令，设置网页背景色为黑色，上边距为0像素。3．制作“我爱北京”网站相册。（1）将所有图片素材保存在photo文件夹中。（2）在硬盘根目录下新建文件夹，命名为beijing。（3）启动Dreamweaver，使用“站点｜管理站点｜新建站点”命令新建“北京”站点，并指定beijing文件夹为“北京”站点的本地根文件夹。（4）新建网页，使用“命令｜创建网站相册”命令创建相册，设置如图所示。（5）单击确定按钮，相册创建完成。（6）按F12，预览网页。（7）打开硬盘上的beijing文件夹，查看文件，其中imgaes文件夹保存的是原图片，thumbnails文件夹保存的是缩略图，pages文件夹保存的是相册分页，index.htm是网站相册首页。实验指导书教育传播技术学院教育技术学专业74．创建“多媒体”站点，并制作网页。（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像素，参数设置如图所示。实验指导书教育传播技术学院教育技术学专业8（7）在网页中插入MediaPlayer播放器1新建网页，保存网页为003..htm。在网页中插入ActiveX，在属性面板上设置ClassID为CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95，宽320像素，高280像素，参数设置如图所示。（8）在网页中插入MediaPlayer播放器2新建网页，保存网页为004.htm。在网页中插入ActiveX，在属性面板上设置ClassID为CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6，宽320像素，高280像素，参数设置如图所示。实验指导书教育传播技术学院教育技术学专业9（9）在网页中插入背景音乐新建网页，保存网页为005.htm。在网页中插入，在弹出的选择文件对话框中选择bgmusic.mid。插件的参数设置如图所示。四、思考题1．文本分行和分段落的区别。2．在网页中插入特殊符号的方法。3．在网页中插入列表、日期、水平线的方法。4．实现图文混排的方法。5．在网页中插入视频的方法。6．在网页中插入音频的方法。实验指导书教育传播技术学院教育技术学专业10实验三表格的创建与编辑一、实验目的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，单