网设计与制作试验大纲

1、网页设计与制作课程实验教学大纲课程性质：独立设课课程属性：专业基础实验课适用专业：应用技术、多媒体技术学 时：总学时96实验学时 32开出时间：年级一学期综合性、设计性实验项目数：4学时先修课程：计算机基础一、课程简介网页设计与制作课程是计算机专业的一门必修专业课程。它涵盖Dreamweaver网页设计、Flash动画制作、Photoshop图像处理、动态网站等多项相关知识，通过开发一个网 站，全面介绍 WEB占点设计的基本操作技术和使用技巧，为后续XML语言、动态网页制作 等课程打下一个坚实的基础。通过本课程的学习，使学生掌握运用Dreamweaver进行网站的导入、规划、管理、发布的相关技

2、术及网页制作的操作技能；能够熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、等设计出多窗口网页、动态网页；能够利用Photoshop设计网页界面， 处理图像；能够运用flash制作与网页相关的小动画。从而能够承担网站制作的规划、设计以及制作；能够有清晰思路和动手能力解决各种各样的实际问题；并具有与客户沟通、与团队成员协作的能力。从而培养学生的开发网站的能力和职业素质。二、实验教学目的及要求通过上机实践，让学生掌握网页设计与制作的基本知识和基本技能，能较熟练地在 Dreamweaver平台下合理设计网页并对站点进行规划、管理、发布，从而为下一阶段学习动 态网页技术和高级 Web程

3、序设计打下良好的理论和实践基础。三、实验项目设置表序 号实验 名称实验 学时仪器 套数每套 人数实验要求实验类型面向专业1HTMLjg言211掌握WW血作原理、HTML语言基础验证信息管理、应用 技术、软件技木、 多媒体技术2使用 Dreamw eaver 建立和 管理站 点211熟悉 Dreamweaver制作工具；学会如 何建立站点和管理 站点。验证信息管理、应用技术、软件技木、多媒体技术3文档的 基本操 作211掌握文档的基本操作、 文本的基本操作。验证信息管理、应用技术、软件技木、多媒体技术4表格211掌握表格的基本操作， 以及用布局表格来设计 网页。验证信息管理、应用技术、软件技木、

4、多媒体技术5图像和 其他多 媒体211羊握对图像、尸首、动 画和视频的基本操作。验证信息管理、应用技术、软件技木、多媒体技术6链接211掌握创建链接和管 理链接的方法。验证信息管理、应用技术、软件技木、多媒体技术7框架集211掌握如何创建具有 框架结构的页面。验证信息管理、应用技术、软件技木、多媒体技术8CSS羊式表211掌握制作CSS样式表的 方法以及其应用方式。验证信息管理、应用技术、软件技木、多媒体技术9层和时 间轴411掌握如何创建层、编辑 层，如何创建时间轴动 画等。验证信息管理、应用技术、软件技木、多媒体技术10行为411掌握添加行为和编 辑行为的方法。验证信息管理、应用技术、软件

5、技木、多媒体技术11库和模 板211掌握创建库和模板 的方法，并熟练地 对其进行管理和应 用。验证信息管理、应用技术、软件技木、多媒体技术12表单211掌握如何设计表 单，如何添加表单 对象等。验证信息管理、应用技术、软件技木、多媒体技术13综合实 例411学会设计并制作一 个美观的静态主页综合信息管理、应用技术、软件技木、多媒体技术（注：“实验类型”：指演示性、验证性、设计性、综合性、研究性等）四、考核方法与评分标准上机部分考核采取上机表现成绩结合实验报告成绩的方式进行，分数组成为：上机成绩=上机表现成绩（50%） +实验报告成绩（50%上机部分的成绩在本课程总成绩中占有的分值为20。上机表

6、现成绩基于上机实验出勤情况及上机过程的表现， 每次上机对应1分。实验报告成绩基于每个项目对应的实验报告完 成情况，一个项目对应 1分。五、教材或指导书1、教材：网页设计与制作，马占欣、周文刚、支建飞编著，中国水利水电出版社， 20072、主要参考书：1）马占欣、周文刚、支建飞.网页设计与制作.北京：中国水利水电出版社，2007.2）甘登岱.网页设计三剑客（第5版）.北京：机械工业出版社,2006.六、单项实验的内容和要求1、实验名称：使用HTM皿言进行简单的网页设计实验内容：用记事本或写字板编写 HTM戊档，该文档文件名为“姓名_1.htm ”，使得最后显示效果 如下图所示：实验要求：1 .掌

7、握WW的工作原理；2 .掌握HTM用言的基本语法，并利用该语言进行简单的网页设计。3 、实验名称： 使用Dreamweaver创建站点和主页文件实验内容：1 .建立本地站点（1）在D盘建立一个名为“ mysite ”的文件夹。（2）在文件夹“ mysite ”基础上建立一个名为“我的个人网站”的站点。（提示：站点|新建站点）2 .在“mysite "中创建和设置网站主页文件index.html ,要求如下：（1）标题为“我的个人网站”，设置bg.jpg作为背景，上边距和左边距设为0（2）网页中插入三行文字1）第一行为“欢迎光临我的个人网站”（格式要求：居中，字体大小为7） 2）第二行

8、为“这是我做的第一个网页”（格式要求：居左，字体大小为5） 3）第三行为“请多多指教”（格式要求：居右，字体大小为1）（3）在网页适当的位置插入一条水平线，结合网页背景设置水平线的颜色实验要求：1.掌握站点的创建2.掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置3、实验名称：文档的基本操作实验内容：1 .使用Dreamweaver®作如下一个页面，命名为“ index.htm ; 并在浏览器中 运行，结果如下图所示。在主页“ index.html ”中，要求添加背景颜色，每句诗 之间要空行，且整个诗要求居中，在“ QQ勺生活”创建一个空链接。实验要求：掌握文档的基本操作

9、，掌握文本的属性设置。4、实验名称：表格的创建和使用实验内容:1.创建如下图所示的表格2 .使用表格完成如下图所示的页面布局。实验要求:掌握表格的创建；表格的基本操作2.掌握使用表格或布局表格设计网页的布局5、实验名称：多媒体元素的插入Flash动画滔介¥ 中就H白,弓，占附:四甲ny伯由 E 垢+ L 30000位 H1成千检辽甲痼中岸，H北号白城市瞰钝. 淮，余雨与吉*由相*北同国京江佑搭*应创.不播*K匠，登械上、麻阳M、逅匠、 国、他市.九百'市、楙惆市，m安目.使用布局表格完成效果如下图所示的页面布局，并插入网页的基本元素。长立：个县 EF川田国狐rn*巳划T*汨的

10、腐力，Hl Ljl. .IrtjhUJ 7i Bicg尹松粒年,早明却包* 雁团皿在丛佛 值.S.A.II JtT： w.+u蜒贝里好啦Hl，rh陷I人联招中国占奥座超 电与日比和改W用第 * 而下帧11Hli2的铸*度和居民住W-卜区修例¥*不 邺1*丽葡古亭中外如(£交1«懈映的耐幽tnWJUf七T匕蛆中rMKfcR-隹于E区 而北耶第惋晒刎1国重注r雅中国浒*0本代里6乖晒完炉-所像想三杭 .拿军舒舒的菖R. 伪挺政际 *ffl 毒斗机矢I日出和t* ”也堆版岩等也是国索第腼船爆点.设为首皿I屐紊我/I7JOA收剧EI帖槎曹标2、任选图像和文本，掌握两者的相

11、互对齐方式实验要求：掌握图像、声音、动画、视频和其他多媒体元素的插入。6、实验名称：链接实验内容：1 .将上次的作业复制到 d盘，对主页文件"index.html ”进行以下操作：（1）选中图像“美食介绍“，链接到网页“ msjs.html ”（2）选中文本“伪满皇宫”，链接到网页“ wmhg.html”（3）为文本“联系我们”创建电子邮件链接，地址为自己的邮箱2 .创建一个网页“map.html ”，将图片" map.jpg ”插入到网页中，请地图中创建若干热点， 点击各热点时要求如下：1）点击周口地区时，链接到 zhoukou.html文件上（在原窗口中显示）。2）点击

12、三门峡地区时，链接到某个图片上（在新窗口中显示）。3）点击郑州地区时，做一个电子邮件链接，收件人是你本人的邮箱地址.4）点击信阳地区时,做一个远程登陆，目标地址是：5）点击南阳地区时，做一个脚本链接，用 alert函数弹出任意内容的信息窗口6）点击洛阳地区时，要求跳到zhoukou.html文件的底部（在该文件底部添加命名锚记）7）在网页的顶部添加标题“河南省地图导航”，并将它做成一个超链接，要求鼠标放上时，右下角显示标题“这是河南图象地图”，链接目标为空链接（任意一种），并且可以使用"alt+d ”快捷键直接选中该链接。方咚M出田hc知”产四耨H羽由实验要求：1 .掌握相对路径的设

13、置2 .掌握基本超级链接、电子邮件链接、热点链接、锚点链接、脚本链接的创建7、实验名称：制作具有框架结构的网页实验内容：1、建立一个名为“花的世界”的站点，自己定义站点文件夹名，并创建一个如下所示的框架集，根据需要对其中各个框架的大小和属性进行设置并保存（文件|保存全部），保存时建议输入一个好记的名称。当单击左边框架花的名称，主框架中会显示对应的内容。实验要求：1 . 了解框架集和框架的概念2 .掌握框架结构网页的创建及常用属性的设置8、实验名称：创建CSS样式表实验内容：1.完成以下操作：（1）使用重定义标签的方法把1.htm中的表格中的所有文字设置成12像素，红色，应用范围仅对该文档。（2

14、）首先把1.html中的表格中“连接”两个字做成空链接，然后把该链接使用重定义标签的方法设置成没有下划线，绿色，14象素大小。应用范围是外部的样式表文件，名字为new.css（3）使用CSS高级样式，把2.htm中的链接的四种状态分别定义为：正常状态（ link ）为红 色，12像素；鼠标放上状态（hovor）为蓝色，14像素；正在点击状态（active ）为黄色，16像素；访问过的状态(visitied )为黑色，18像素。以上四种状态都没有下划线。应用范围仅对该文档。(4)使用自定义样式(class )的方法，把3.htm中的4句话分别设置4种不同颜色和字体 的的自定义样式，名字任意。(5

15、)新建一个文件4.htm ,在其中建立一个链接，用链接外部样式表的形式把new.css中的样式应用到当前文档中。实验要求：1 . 了解CSS的基本概念2 .掌握三种CSS样式类型的创建及应用3 .掌握" CSSa则定义”对话框中样式八大类别的使用9、实验名称：利用时间轴创建层动画实验内容：1、建立文件donghua1.htm ,要求在图片背景上，使用能够扇动翅膀的 3张蝴蝶图片(GIF 格式)，结合层和时间轴设计出自由纷飞的效果。2、建立文件donghua2.htm,利用层的嵌套属性结合时间轴能够制作出站点中常见的公告板， 公告板中的文字从下向上循环运动，能够对网页中的重要内容进行动

16、态分布3、建立文件donghua3.htm ,利用录制层路径的方法创建一个动画，要求层运动的轨迹是一 个近似圆形，预览时，动画在打开浏览器两秒钟后才开始播放，请根据时间轴的相关知识实现。实验要求:1 . 了解时间轴2 .掌握应用层和时间轴制作动画的方法 10、实验名称：添加行为实验内容：1 .在页面1.htm中继续回车换行，插入一个层，设置层的背景颜色为绿色，当在层上单击 鼠标时，层的背景颜色变为红色。2 .建立页面2.htm,插入图片“ hh.jpg”，在图片上3个圆形区域“机器猫”“小黑熊” “米老鼠”上分别创建 3个热点。当鼠标移到相应热点上时，显示相应的图片，鼠标移开时，所 有图片消失

17、。请根据层和行为实现。效果如下入所示：实验要求：1 .熟悉对象、事件、动作和行为的基本概念2 .掌握使用行为面板添加和编辑各种行为3 .掌握Dreamweaver自带行为的应用11、实验名称：创建模板和库实验内容：1.利用模板制作如下图所示的网页。:?- U .二厂工F-7茎 I k=- -7 1 ：1:卜-f L二 |L t I = 4 ,fry【例三，气电*1"及*型修用餐。座叫*写M 干邛此孙，的嘴*害W彳配生+平(霆n或j如印回* ij 7 叱2的；以¥井学小望皿!* 我。即令-在值而白平 J lfVF*£aH£i 丁FSrrMn Sc1十号U温

18、界切皎区融呜 W"G1|i£十k*等同过 gTf面2.1 旧慎江由工/* -Elt里tnmr薯5W了-苗£有 11HsrW 774 的左mFl - EX上吒匚M的毛UJMHrt 苔上“ m正，一百：,5FSJI.J-.十世11中 ,由E外秋“.#八仙学"案Ikkii rtLfe.R. mlt uumM图人与自然首页-e就财力4-悭呼A无亘毡主植赃皿*?大郡整F的R表袖的叶干教委用话*了. 妒.WKH曲博叶.整了长天曳避曲?小 而言郭蜀单叱叶子 nrr ttitK.同ur钞力计昆士0或人考博向:mq廿九7”母葩叶干旃丁青印于巴却仓初b黄e卿调产卜帚和讦色的

19、野”.于e元下叶m索引含蒸，其他 ,水的£多:H他II也二空南呼也*M0了, T1.阵孑或显疑出理也?.中？不疝 时锋率自有力事吗理（BE受M纳成理官了代干.I斗卫全花了/港二帝田景的Um .叶母亍再行 刘、耳关充作鞭-$#卜*和时黄需刖比3单於14-1 >?:,.?-1.'-；.枇壬什子加-蛇抽也HQ.EitH上相拓ifEtF.喇弓15海特的本好* k工再下开.H三素仁醉，消耳的时任.叶子题南事大雪搜时姿瑞打眄眄在充 «壬M+早Ht空虹了. 一正风V品_1血笆加一里型好"古冷提空*»它息病计注于二田立” .«不干NN5革Fk叶干

20、呈面即芭毗修15tt蜡.M鱼nTUhtW 陶UflElffl工杆性的.AclXAft. +AMft图植物天地页面1口!耍子四一枚塞珀金弟出JueifW-j阴/»臼玉i。中正IT出更牛h - .rm箕<r。了包件,WX更:"T-q.蚱 g” .工.t .呻 * x*mtr - 4MtWM、1 *hnmmbm./<nmriK布- m不足融重1口荫了郡金1tiFra*4的FHkR=mn,磔E*畔*6*:MhdF主叫,H Lit“ 一门h LRw,i二，匕. I :置我上右胃 r It 干1I”/！，“3. I FHhg.舌 "巴肥:通，修 胤七门口共;让力的

21、趣+,中FW% m问的喉旭.1口*it3尊鸵性/T*lh 言nUTIJitiB*小环段断Jt 地 内国包.HS1W |JVW 1» LE一餐上可忠上包国用r *%W|«比1»11¥孙 皿；一?，口什1»即7：三.n*ME1IJLftKW«» 当的,aw*r - Lf uj*i的葩m或器r 0fl嵯嗡*上口工：加#±lum即鼻对心餐青方七3匕十小口 iM-iDfM=|丁虐二二南帽生：urwiiM出 没处的口Mum，rT*事在+冏也%庄渣 生+4豆怪m国*Ati生HR卜丽国/ T事中 - BWI 4A几定星MWTEhl

22、iaH的lemrmE1. JUHai-如反吗瓜开$*«*惘Eg手修虹事.WIEWMJttrtfl% 占于旬3 4 口刊量鼻, trWHL维两，一» 飞行m*a 它rtiaG代飞行0附南昌，* ，濡鼻 E节的 之班.Z18忙U代KL1与 gtJRr啤 丁丹，i7etf3 T，2旧胃鼻"午声国fHiWktr，*中 冬">«，百ftt孑 n f 1 el-1- 4 Ajrr-riMH 4tfcP*九 LG3fe万十理££，E»1r IM & UFMT王 Jfl UEE*'J-H-uEjiiQft.三

23、0 箕二十灯，MASUJB f' Z>A-Lfl- 下/时4阳开/鼻火鬼不准* *MW蟠肿C -1拿什JT_i*a&F3 */b*京的喻th川即偶*随-* 一 EI而，看鼻的 马 S.&Fll3、口出.：/忸端*,MUaHSSTTf :鼻隹忏=?作1_¥汴中1&行,曰由*!»单上！st£iB:*!E HT 曰 Ml由E 两也入 江地日飞后中啤 33 A ，h七址二0. 5MlM”_!+1»1。.101|11分具尸311拿出事皿.”触之>引）«0里13上门利.阳日庄壬干事地工行-七笠Ei配零装-MW和：T：行an05T«-OOO£IKaZ>frK - FTIpO-eiK6图动物世界页面实验要求：1 .掌握利用资源面板管理站点中各种资源2 .掌握利用模板和库制作统一风格的网站，并