《网页设计与开发实验教学大纲》_第1页
《网页设计与开发实验教学大纲》_第2页
《网页设计与开发实验教学大纲》_第3页
《网页设计与开发实验教学大纲》_第4页
《网页设计与开发实验教学大纲》_第5页
已阅读5页，还剩31页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与开发》实验教学大纲

一、课程简介

《网页设计与开发》是高等院校计算机及其相关专业的一门重要

的基础课程，也是是一门实践性和技能性要求都很强的学科。其实验

课程主要围绕网页基本元素、css和Javascript、页面布局和整站建

设等理论内容的实践实训进行开展。其主要内容包括练习网页设计的

基本概念和文档结构，完成相关工具的安装，练习网页元素在实际应

用中的使用，包含文字与段落涉及的图文混排方式、列表涉及的导航

制作、表格布局局部页面等，练习div+css的页面布局，javascript

在交互式网页开发中的基本应用，以及目前流行的HTML5技术的应

用，练习从需求分析到栏目设计最终进行布局和细节处理以及发布的

整站建设过程。

二、实验教学的总体目标和要求

实验教学应充分考虑学生对理论知识的巩固和实践技能的提升

要求，从培养学生面向商业化网页开发的角度出发，通过典型页面案

例，讲述和示范逐步分解其中的技术实现，使学生能够对技术在具体

设计中的灵活使用有深刻的感受。

通过本实验课程的学习，使学生掌握各种网页元素的使用。例如,

表格、文本、图像、超级链接、层和表单等。熟悉一些网页布局方法。

掌握网站的开发流程，如建站规划、页面制作、优化及发布等相关知

识。课程完成后学生应能够理解网页设计的基本原则，掌握网页基本

制作方法和技巧，并自主设计开发各种网页、完成一定规模的网站开

发。在此技术之上，了解并尝试使用HTML5技术来实现之前的基础网

页效果。

三、实验项目与学时分配（39个实验项目，共计36学时）

实验项目与学时分配

序号实验项目学时必开/选开实验类型备注

1优秀网站赏析1必开基础

2体会超链接在网页中的广泛应用1必开基础

3多种url资源的访问方法.必开基础

4使用记事本编写网页必开基础

5了解EditPlus编辑器必开基础

6了解浏览工具的安装选开基础

7HTML文件的编写规则1必开基础

8标记元素的属性必开基础

9利用style标记定义样式1必开基础

10唐诗页面设计1必开设计

11文章排版1必开设计

12新闻列表的实现1必开设计

13利用无序列表制作页面垂直导航2选开综合

和水平导航

14电子相册的实现3必开设计

15新闻列表的超链接制作必开设计

16电子相册的超链接制作选开综合

17利用书签链接制作帮助文档1选开设计

18在网页中实现图文混排1必开基础

19成绩登记表的制作1必开基础

20产品介绍页面的制作1选开综合

21会员登陆1必开设计

22调查问卷1必开设计

23在线预订客房表单1选开综合

24常用页面布局设计1必开基础

25css文件的四种引用方式1必开基础

26利用CSS定位页面元素1必开设计

27用DIV+CSS布局网页结构2选开综合

28认识JavaScript1必开基础

29创建自定义函数必开基础

1

30建立外部js文件必开基础

31对象创建与复制1必开基础

32表单验证1必开设计

33动态改变样式1选开综合

34Canvas的使用并绘图1必开基础

35HTML5中新增表单开技术1必开基础

36HTML5中多媒体开发技术1必开基础

37Cookie操作1必开基础

38网站设计规划1选开综合

39IIS服务器安装及站点本地发布1必开基础

四、教学方法

本课程教学由简入深，主要采用以下教学方法:

(1)模仿精彩优秀的网站，了解其效果实现方法，并将其应用到实

验中。

(2)指定配套实验教材中的精典实例，让学生操作实现。

(3)综合运用基本知识点，实现复杂综合功能。

四、实验教学内容

实验一、优秀网站赏析

1.实验目的要求

通过对不同类型、不同风格、不同特色的优秀网站的欣赏，

使学生对网站制作课程有一个初步了解，诱发学生的学习兴趣。

同时指导学生分析各类网站的总体布局、色彩搭配、内容规划等,

为后面的学习打基础。

2.实验主要内容

各种不同类型和风格的网站地址如下：

综合门户网站：新浪网http：//www.sina.com.cn

政府网站：中华人民共和国中央人民政府http：//www.gov.cn/

教育网站:清华大学http：//www.tsinghua.edu.cn/

商业网站：淘宝网：http：//www.taobao.com

3.实验类别

专业基础

4.实验要求

必修

实验二、体会超链接在网页中的广泛应用

1.实验目的要求

通过在浏览器地址栏中输入www.sina.com.cn,打开新浪网

主页面。点击图片，栏目等进入下一个页面，体会超链接的应用。

理解网页可以通过字体，图片等不同的形式进行链接的方法。

2.实验主要内容

打开美的官网http：//www.midea.com.cn/,使用超级链接功

能找到微波炉产品的具体信息，体会使用文字和图片等不同的超链接

方式。

3.实验类别

专业基础

4.实验要求

必修

实验三、多种URL资源的访问方法

1.实验目的要求

通过对各种资源网站的访问，理解统一资源定位符的定位方法

及服务类型。掌握不同url资源的访问方法

2.实验主要内容

访问如下url资源地址如下：

百度搜索：http：//WWAV.baidu.com

FTP：//ftp.cuhk.edu.hk/香港中文大学FTP站点

3.实验类别

专业基础

4.实验要求

必修

实验四、使用记事本编写网页

1.实验目的要求

使用Windows操作系统中自带的记事本进行编辑，创建第一

个网页，体会网页设计的基本方法。

2.实验主要内容

步骤1：打开记事本程序

依次点击”开始菜单今程序今附件今记事本”找到该程序。

步骤2：输入代码

在记事本的输入区，将如下代码粘贴到程序的工作区中。

<html>

<head>

我的个人主页</title>

</head>

<body>

<h2align=''center”>欢迎来到我的个人主页</h2>

<hr>

<p>这是我开发的第一个网页</p>

</body>

</html>

3.实验类别

专业基础

4.实验要求

必修

实验五、了解EditPlus编辑器

1.实验目的要求

安装专业的文本编辑器EditPlus,体会其自动添加标记、高亮

显示一些代码和英文拼字检查等功能。

2.实验主要内容

创建新文件。点击工具栏中的“文件f新建”创建一个新文件，

将实验四代码写入空白工作区。EditPlus自动将不同属性的内容使

用不同颜色区别显示，并能够有效显示错误标签。

3.实验类别

专业基础

4.实验要求

选开

实验六、了解浏览工具的安装

1.实验目的要求

熟悉市场上常用的浏览工具。了解其安装过程。

2.实验主要内容

微软（Microsoft）公司的InternetExplorer（俗称"IE"）,Opera,

MozillaFirefox（俗称"火狐狸"或"火狐〃）、腾讯TT等浏览器的安

装。

3.实验类别

专业基础

4.实验要求

必修

实验七、HTML文件的编写规则

1.实验目的要求

掌握编写简单HTML文件的方法。设计一个具有HTML基本结构的

页面，并显示出来。

2.实验主要内容

在一个页面上显示下面一首诗。

早发白帝城

李白

朝辞白帝彩云间，千里江陵一日还。

两岸猿声啼不住，轻舟已过万重山。

创建页面2-1.html,完成内容的基本布局，在＜body＞内添加需

要显示的元素。显示如下结果。

3.实验类别

专业基础

4.实验要求

必修

实验八、标记元素的属性

1.实验目的要求

通过对文本的修饰，熟悉标记元素的属性设置方法。

2.实验主要内容

针对实验七中的页面进行修饰，要求将内容居中排列该诗标题

的颜色改为#B22222的色值，适当修饰该诗内容的字间距和行间距。

修饰诗的标题样式；修饰内容的字间距和行间距。运行效果如下。

3.实验类别

专业基础

4.实验要求

必修

实验九、利用style标记定义样式

1.实验目的要求

掌握利用＜head＞标记内嵌入〈style》标记的方法，并定义通用

的样式体会这种方法与直接使用标记属性的不同及其优缺点。

2.实验内容

利用实验八的程序进行修改，在＜head＞内嵌入＜style＞标记；

在＜style＞标记内添加样式，并在正文中引用。显示如下结果。

3.实验类别

专业基础

4.实验要求

必修

实验十、唐诗页面设计

1.实验目的要求

学习如何通过对文字与段落属性的设置，来提高文字的艺术表现

力。

2.实验主要内容

利用一首唐诗的素材，要求综合运用字体、字号、字间距、行间

距、颜色和对齐方式等属性的设计，用一个独立的页面设计一个有良

好视觉效果和阅读效果的网页。达到如下显示效果

早发白帝城

李白

朝辞白帝彩云间，千里江陵一日还。

两岸猿声啼不住，轻舟已过万重山。

【危析】诗是写景的.通那宗箜元二年(759),诗人布放衣郎，行至白帝遇敕•秉

舟东还江陵时而作此诗.诗意在描里自白帝至江陵一段长江，水息版速，舟行若飞的

情况.百句写白帝城之高，二句号江陵路遥，舟行迅速，三句以山影象声烘托行舟飞

13.四句写行舟轻如无趣,森明水势如雪.全诗佟接挺拔•-SHT.快船快意.，令

人1•远.难怪乎明人杨慎赞日I"惊风雨而泣鬼神矣！”

3.实验类别

专业基础

4.实验要求

必修

实验十一、文章排版

1.实验目的要求

通过对一篇文章的标题、来源、内容简介和正文四个不同的部分

的设置，掌握字体、颜色、行间距、页面布局等标记和属性的综合运

用。

2.实验主要内容

利用海伦•凯勒的《假如给我三天光明》中的一节文章的部分内

容（全文参见实验指导书），利用掌握的有关文本型页面设计的基本

规则，用一个独立的网页把它表现出来。显示如下结果。

圣诞节

【内容弟介】供三是海尼•IW#的貌文代衰件，,1•多茂省•金田木一子在利

布..13主的f*.—匕杆王Cl于-tn,此夕卜..心中收，的ATWi是

涉蔚文小蛆来勤培惭甘比登后的有一4'英因力成为我的空的空■.安定的每个人州在为

我相备一线不驯的扎相.而更令人兴有的1:我和方拜文小姐也在为耳他人洽备■外的礼

物.

建X兴售不禽了.票19■人们到底蛉我什么礼府.女人们也裳息亦注逗引我.曲意给他

一星半点儿"呆，战营一旬平句不逐蟆劣话备，让我震测.我孙莎礼文小想就玩者追■谜街

5W.我从中宇会了讦雷面的用!£•比上谡季到第还梅龄.

吗天戏上，我们要诙郁圉坐在膜焕笊的火炉前玩・残谜而戏.圣逸的一夭天18近，我们

也急来IS兴誉.

一天早上・我把9茏放在S?台上，伏后去打水除它流爆.BDJR-ffn.感觉到一只大能

从我刖脚底下钻了出去.起初我并没在惠・可是当我把一只手但避茏子，没有瘦料小格第83

«».也没有1*51它关关的小府时・我心里使明白了，欣再也见不封我那可爱的小款手了.

3.实验类别

专业基础

4.实验要求

必修

实验十二、新闻列表的实现

1.实验目的要求

掌握列表标记及其常用样式属性。理解有序列表与无序列表的

使用场景。掌握常见新闻列表的实现方法。

2.实验主要内容

用列表实现一个新闻显示版块，要求利用列表方法，适当运用字

体、字号间距等的修饰完成新闻列表的定义。显示结果如下

暴雪：商业艺术与技术的平衡之道

・点选名将抢礼包《千军破》首服开启

•战国新游《王者天下》开启抢礼包

•快来玩《德州扑克》与人斗其乐无穷

•《十年一剑》真武侠一区开启抢礼包

•可买卖游戏代码传魔兽大灾变过审批

•儿时游戏50年变迁00后迷动画爱网游

•监狱强迫犯人打网游徐州禁少年进网吧

•ipa诚为最赚钱的移动游戏平台

3.实验类别

专业基础

4.实验要求

必修

实验十三、利用无序列表制作页面垂直导航和水平导航

1.实验目的要求

熟悉常见导航形式，并能够利用无序列表完成简单的导航设计。

2.实验主要内容

采用无序列表实现一个班级网站的导航，并添加样式进行修饰,

实现班级网站的水平和垂直导航。显示如下结果。

班级首页班级首页班级日志个人风采

班级日F

个人风采

页面垂直导航页面水平导航

3.实验类别

专业基础

4.实验要求

选开

实验十四、电子相册的实现

1.实验目的要求

利用列表实现网页中常见的图片浏览模式。体会列表的不同用

途。

2.实验主要内容

定义页面结构，完成内容的基本布局；利用无序列表标记添加所

需显示的图片；对无序列表定义样式。显示如下结果。

3.实验类别

专业基础

4.实验要求

必修

实验十五、新闻列表的超链接制作

1.实验目的要求

掌握常见新闻列表的链接方法，修改不同链接形式的样式。

2.实验主要内容

对新闻列表添加链接，链接的形式是文字链接，链接打开后的目

标是一篇新闻页面。并设定链接的四种状态发生时的显示样式。显示

如下结果。

暴看：商心艺术与枝术的平衡之遒

■良诜名将抢礼包《千军破》首服开启

■战国新潞《千者天下》开启检礼包

•快来玩《德州扑克》与人斗其乐无穷

■《十年一佥||》直就侠一区开启抢礼包

■可买麦潞戏代码传魔兽大灾变i寸审批

•儿时潞戏50年变讦0Q后1米动画带咫I流

•监狱强迫两人打网游徐州禁少年讲网吧

，it>ad成为最赚钱的移动潞戏平台

3.实验类别

专业基础

4.实验要求

必修

实验十六、电子相册链接的制作

1.实验目的要求

掌握常见图片的链接方法，修改不同链接形式的样式。

2.实验主要内容

为电子相册中的图片加上超链接，按照提供的素材，单击第一幅

图片时，在新窗口显示内容。显示如下结果。

海底花用雪域菸岸

花采□

沙直海鑫

3.实验类别

专业基础

4.实验要求

选开

实验十七、利用书签链接制作帮助文档

1.实验目的要求

掌握锚点链接的创建方法和相关设置，利用书签链接制作帮助文

档。

2.实验主要内容

根据提供的素材faq.doc,利用书签链接制作一个常见问题回答

页面。显示如下结果。

布配向珈X谷

•ft辽

•MilAmt31PIT

-Itusa.rItraGuvulKM.W3APIaHUULHGuaOKMaaLaitL&ffidJa上,

•2»a.t><uii&.Mxa«ueicu^niim?

•aoonSM-M■lfunnlAFS*Y

•c-)，0》J—aAPI，，-c«B，*>♦1”！*»nraanSMK2

•B01F3M>6网«1*人，tent5>。3・SuuAir/

•rurrrtrain卜n«a*mc«>w-MaxATMY

•/janmi_>uu,xa

fibItfOooglaM«paAPI

•3£-1l&waij4iu2.MlStKS£lTDMMmiaHtKo二Kl&lltuMIBAJafflAifLSiinY.

•XtTMMS*.Qa»ul«LM«nZSHt<4lAnK>!K?

•4也,.正ln.l?”qln士m-irw-fmM.X

•AIVtXMTvFICU&M八r-IZR3为MAAMFUVht

•stuzjMbflAajgtr^Q<iDd*MMu.zsrii.

-x*0M■»<»<»AFIs”.TnatA，K3>«v

•niXMUaunHiir-sjihwuoum>IA«P«A»IT

•ILKEL33LIHTrrslHMXlEIriMlU&JB.ttSA&niU.KMQIMKMMa»»AnAFfh1>t

•Xia.r1«»»•/<rt•»•atnaw—aD。..uu«r<L>esxmHAuueutM^>Aia«r

•BtTW•JooaUA，，中WVlltY

•it比m-T«a，utnat&ME

GooQlaiM・”・AIM，

OooQtoMap*AnXlMMAflltmT*(»MOooqMMa«nKAROS>XCt*nA•X""R**HII>：L：WE6|tR火-BlISa*gClTIt*AT>liOoo。，.Mag

■QvogleM«ua/\P(JR>•l»*Qvuulo^vm/>py-OovuieMavptel^Pl-njRTMMft>>uvute

k«♦侬用6WV，“忸口・H>aF«FWAf>“«\51，<8自“所今»AP»-

UooolaM-t»AIMaMOtfHiV/MBOC*

oooQtaMapsn)rAv,7a*s?A«ienifiK)»»M-ir^trA■mm-wr«nt*MHM7nMo'iWMmnB>>ainK-ikaiMfrniiKMmrM*i»nt*ik.-r

<m*n.C<-»iMno<>>ac<H>na-«in-F>»«t1»>t>M»'Va»'.*«1»OKn*a*t«mMMED»-M<rrI.l«t■.COMh<«(M>*MMHIUotIlkIMW*

3.实验类别

专业基础

4.实验要求

选开

实验十八、在网页中实现图文混排

1.实验目的要求

插入图片及进行图片排版，掌握图文混排的基本方法。理解常见

的图片在左文字在右或者图片在右文字在左、文字环绕在图片的周

围、或者上边、右边、下边，单个图片与单行文字的排版、单个图片

与多行文字的排版、多个图片之间实现的排版方法。

2.实验主要内容

实现一个在线销售图书网站中一本教材的图文混排。显示如下结

果。

Jav魂程思想（第4版）

作者：（美）埃克尔著，陈...

出版社：机械工业出版社

出版时间：2007年06月

定价：¥108.00

当当价：¥81.00

3.实验类别

专业基础

4.实验要求

必修

实验十九、成绩登记表的制作

1.实验目的要求

掌握表格的创建、结构调整与美化方法；熟悉表格与单元格的主

要属性及其设置方法。设计一个成绩登记表结构的页面，并显示出来。

2.实验主要内容

设计一个基本的成绩登记表，数据包括：ID序号、学号、姓名、

平时成绩、期末成绩、总评成绩。显示如下结果。

成绩登记表

序号学号姓名平时成绩期末成绩学期总成绩

12010300201张小丽959595

22010300202李宁908889

32010300203刘梅989295

42010300204王刚989094

52010300205郑军908587

62010300206杨波808080

3.实验类别

专业基础

4.实验要求

必修

实验二十、产品介绍页面的制作

1.实验目的要求

掌握通过表格来进行网页页面的布局方法；理解利用表格展示信

息的方法及其优势。

2.实验主要内容

利用表格布局的方式完成一个产品介绍页面的设计。显示如下结

果。

产扉名体.隹能IXUS130

佳能IXUS130（含方蟒配）

松下理较SD卡2G（高邃正吊）

佳能IXUS不列干用皮包

索尼2.7英寸LCD保护贴（防制/高烛光/和电唳阐》

强影击南

主＞0f参JR

理号：PMP169B

内存容量：B12M

屏《1尺叶：2.12英寸（・佳视觉比列16，9的宽屏）

廨而侍■性：LTPSTFT（720x240）

视城功能：支持ASF格贰的MPG明就通过软件转换成ASF擢放.摘戏效果:320X420,

30fp”视频蜻出，贿入/电W!F"日定时呆知。

功能Nt

S熔功N日支持曾加格武：MP3.WMA.VAV/内置安克内.支持LIMEIN寻罩:/收备功能/内

wwm.

染南格式,44.IKHz,128Kbps,MP3,支押MIC/LIHE-IW■隶

附加功版・文特03片格式；JPEG（BXIF2.1）/电干书汶（究/多语/（中/英）谀量.

接o.usB»a,AVOUTSa,AV】脸口

tr屣卡,可犷充2GSD,MMC卡

电池，内置使电池

尺寸，105.2*47.6x15.6加》

Stffi.90t

3.实验类别

专业基础

4.实验要求

选开

实验二十一、会员登陆

1.实验目的要求

掌握表单的创建、编辑、处理方法。熟悉文本输入框和密码输入

框的使用。

2.实验主要内容

设计一个简单的用户登陆页面，会员需要填写用户名，密码，并

能够通过下拉列表选择自己的身份。显示如下结果。

会员登陆

确定I重置

3.实验类别

专业基础

4.实验要求

必修

实验二十二、调查问卷

1.实验目的要求

掌握表单对象的功能、特点和用途。熟悉单选框和复选框的使用。

熟悉提交按钮、重置按钮、图像按钮的使用。熟悉文件选择输入框的

使用。熟悉多行文本输入框和下拉列表框的使用。

2.实验主要内容

完成一个网站的在线问卷调查，表单元素要用到下拉菜单、复选

框、单选框、多行文本输入框获取调查的目的。在表单的结构设计中，

使用标签左对齐布局，使用户的视觉的重心放在调查的问题上。在用

户输入表单时，按键盘TAB键进入下一步表单元素的输入。显示如下

结果。

■同城祸在建调查

3.实验类别

专业基础

4.实验要求

必修

实验二十三、在线预订客房表单

1.实验目的要求

熟练掌握商业网站的表单使用方法；综合运用表单元素进行。

2.实验主要内容

综合运用各种表单元素，制作酒店的客房在线预定系统，显示

如下结果。

房间预订

姓名

人数

旅馆名厂中州快捷厂爱家厂温蜃之家厂奢华

房间类型「单人「双人「任意

信用卡类型.

备注

确定I重置

3.实验类别

专业基础

4.实验要求

选开

实验二十四、常用页面布局设计

1.实验目的要求

掌握CSS定义文字、背景图片、超链接控制、列表、DIV等常用

属性。完成简单CSS+DIV页面设计。

2.实验主要内容

利用div+css设计网站的主体布局一个标准的网站页面应该有

logo区，导航区，内容区和版权区几个部分。其中，内容区又可以

分为多种灵活的布局划分模式，比如常见的左右栏，左中右栏等形式。

实现如下四种的页面布局，具体如下。

3.实验类别

专业基础

4.实验要求

必修

实验二十五、CSS文件的四种引用方式

1.实验目的要求

掌握在网页中添加CSS样式表的四种方式：标签内的CSS、网页

内的CSS、link引用的CSS和import引用的CSS。

2.实验主要内容

利用配套源代码，使用四种方法引用CSS的方法。体会效果。

3.实验类别

专业基础

4.实验要求

必修

实验二十六、利用CSS定位页面元素

1.实验目的要求

掌握CSS各种属性的使用。熟悉利用CSS定位页面元素的方法。

2.实验主要内容

在使用c

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论