《网页设计与制作基础》实验说明.docx

《《网页设计与制作基础》实验说明.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作基础》实验说明.docx（31页珍藏版）》请在冰豆网上搜索。

《网页设计与制作基础》实验说明

实验一网页的认识

实验目的

1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；

2、利用记事本来编辑HTML文档并浏览。

实验环境

WindowsXP操作系统，内部组成局域网，外连Internet互联网。

实验重点及难点

◆熟悉使用浏览器进行浏览、搜索、下载。

◆熟悉HTML的结构、语法。

实验内容

1、浏览新浪主页并保存，观察其保存结果（其中包括哪些文件和文件夹）。

要点：

保存是什么操作。

文件操作

2、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。

3、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。

4、通过浏览XX分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。

5、制作一个简单的网页sy1-1.htm，用记事本编辑，网页标题为“我的第一个网页”，内容为司空曙的《江村即事》（要求加入文档类型声明），如下图所示。

要点：

根据说明和截图确定要编辑的内容和需要使用的标记。

文件操作：

文件名：

sy1-1.htm

文档操作：

需要使用的标记

网页文档结构的标记

网页内容要求需要使用和编辑的标记：

文档类型声明、网页标题、pre标记

源代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

江村即事[唐]司空曙钓罢归来不系船江村月落正堪眠纵然一夜风吹去只在芦花浅水边

实验二网页的基本元素

（一）

实验目的

1、掌握头区标记的应用，包括title、meta和base等标记

2、掌握文本段落格式标记，包括注释标记，分段标记，换行/不换行标记，标题标记，分节标记，水平线标记，文本居中标记等；

3、掌握文字显示效果标记，包括字体标记，字符样式标记以及转义字符等；

4、掌握列表格式标记，包括无序列表标记，有序列表标记等；

5、掌握超链接的使用，包括锚点标记、页面跳转链接、书签超链接、下载文件链接以及电子邮件链接等；

6、掌握图片标记，包括插入图片标记，图片超链接标记网页背景标记；

7、掌握音频和视频标记，包括链接音频或视频文件、设置网页背景音乐标记，内嵌音频或视频播放插件等；

8、掌握动态元素标记。

实验环境

WindowsXP操作系统，内部组成局域网，外连Internet互联网。

实验重点及难点

熟练掌握各种常用标记并利用其来实现网页的排版。

实验内容

1、通过记事本编辑网页sy2-1.htm，实现如下页面：

要点：

根据说明和截图确定要编辑的内容和需要使用的标记。

文件操作：

文件名：

sy2-1.htm；sy/sy2/sks

文档操作：

需要使用的标记

网页文档结构的标记

网页内容要求需要使用和编辑的标记：

网页标题、居中显示标记、标题标记、换行标记

源代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

2、通过记事本对网页sy2-1.htm按要求进行编辑并另存为sy2-2.htm，效果如图所示。

●标题文字大小用

●作者信息文字大小为4，字体为幼圆，颜色为红色；

●古诗文字大小为4，字体为隶书，颜色为蓝色；

●在作者信息后加一条水平线，居中，水平线宽度为浏览器的50%，水平线的粗细为20个像素，颜色为棕色；

要点：

根据说明和截图确定要编辑的内容和需要使用的标记及其属性。

文件操作：

文件名：

sy2-2.htm；sy/sy2/sks

文档操作：

需要使用的标记以及属性

网页内容要求需要使用和编辑的标记：

网页标题、标题标记h1、hr标记及其属性、段落标记、fonts标记及其属性

源代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

3、通过记事本对网页sy2-2htm按要求进行编辑并另存为sy2-3.htm，效果如图所示。

●插入背景图片：

背景.jpg

●在古诗左下方插入作者的照片：

司空曙.jpg

●为网页添加背景音乐：

江村即事.mp3，要求循环播放

要点：

根据说明和截图确定要编辑的内容和需要使用的标记及其属性。

文件操作：

文件名：

sy2-3.htm；sy/sy2/sks；sy/sy2/media

文档操作：

需要使用的标记以及属性

网页内容要求需要使用和编辑的标记：

网页标题、body标记及其background属性、backsound及其loop属性、img标记及其属性

注：

理解网页显示的顺序，自然顺序（从上至下，从左至右（行级元素））

源代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

4、通过记事本对网页sy2-4.htm按要求进行编辑并另存为sy2-5.htm，效果如图所示。

●改“目录”下的列表符号类型为方框。

●给“【注释】”下的条目加数字编号

●以标题为热点创建空超链接

●以图片为热点创建空超链接

●以“大历十才子”为热点创建空超链接

要点：

根据说明和截图确定要编辑的内容和需要使用的标记及其属性。

文件操作：

文件名：

sy2-5.htm；sy/sy2/sks；

文档操作：

需要使用的标记以及属性

网页内容要求需要使用和编辑的标记：

网页标题、列表标记及其type属性、超链接标记及其属性

注：

理解图像超链接的用户（图像作为热点），空超链接（#）

源代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

江村即事

目录

基本信息

【作品名称】《江村即事》

【创作年代】中唐

【作者姓名】司空曙

【文学体裁】七言绝句

作品原文

【注释】

罢：
完了。
系：
系好。
正堪眠：
正是睡觉的好时候。
纵然：
即使。
即事：
以当前的事物为题材所做的诗。

【译文】

　　渔翁夜钓归来懒得系船，渔翁随即让渔船在水上漂泊。

此时，已深夜，月亮也落下去了，人也疲倦了。

即使一夜风吹去，没有拴住的船最多吹在长满芦花的浅水边，这又有什么关系呢？

作品鉴赏

    这首诗写江村眼前情事，但诗人并不铺写村景江色，而是通过江上钓鱼者的一个细小动作及心理活动，反映江村生活的一个侧面，写出真切而又恬美的意境。

    　“钓罢归来不系船”，首句写渔翁夜钓回来，懒得系船，而让渔船任意飘荡。

“不系船”三字为全诗关键，以下诗句全从这三字生出。

“江村月落正堪眠”，第二句上承起句，点明“钓罢归来”的地点、时间及人物的行动、心情。

船停靠在江村，时已深夜，月亮落下去了，人也已经疲倦，该睡觉了，因此连船也懒得系。

但是，不系船能安然入睡吗？

这就引出了下文：

“纵然一夜风吹去，只在芦花浅水边。

”这两句紧承第二句，回答了上面的问题。

“纵然”、“只在”两个关联词前后呼应，一放一收，把意思更推进一层：

且不说夜里不一定起风，即使起风，没有缆住的小船也至多被吹到那长满芦花的浅水边，也没有什么关系。

这里，诗人并没有刻画幽谧美好的环境，然而钓者悠闲的生活情趣和江村宁静优美的景色跃然纸上，表达了诗人对生活随性的态度。

　　这首小诗善于以个别反映一般，通过“钓罢归来不系船”这样一件小事，刻画江村情事，由小见大，就比泛泛描写江村的表面景象要显得生动新巧，别具一格。

诗在申明“不系船”的原因时，不是直笔到底，一览无余，而是巧用“纵然”“只在”等关联词，以退为进，深入一步，使诗意更见曲折深蕴，笔法更显腾挪跌宕。

诗的语言真率自然，清新俊逸，和富有诗情画意的幽美意境十分和谐。

作者简介

    　司空曙（约720-790?

），子字初（唐才子传作文明。

此从新唐书），广平（今属河北省）人，大历十才子。

生卒年均不详，约唐代宗大历初前后在世。

磊落有奇才，与李约为至交。

性耿介，不干权耍。

家无担石，晏如也。

尝因病中不给，遣其爱姬。

韦辠节度剑南，辟致幕府。

授洛阳主簿。

未几，迁长林县丞。

累官左拾遗。

终水部郎中。

曙诗有集二卷，登进士第，不详何年。

曾官主簿。

大历五年任左拾遗，贬长林（今湖北荆门西北）丞。

贞元间，在剑南西川节度使韦皋幕任职，官检校水部郎中，终虞部郎中。

曙为卢纶表兄，亦是"大历十才子"之一。

其诗多为行旅赠别之作，长于抒情，多有名句。

胡震亨曰：

"司空虞部婉雅闲淡，语近性情。

"（《唐音癸签》卷七）有《司空文明诗集》。

字文明，一作文初，广平（郡治今河北永年东南）人。

曾举进士，为剑南节度使幕府，官水部郎中，为“大历十才子”之一，其诗朴素真挚，情感细腻，多写自然景色和乡情旅思，长于五律。

诗风闲雅疏淡。

参考资料

《唐诗鉴赏辞典》.上海辞书出版社，1983年12月版，第651-652页　　

5、通过记事本对网页sy2-5.htm按要求进行编辑并另存为sy2-6.htm。

●以标题和图片为热点的超链接均指向

●以“大历十才子”为热点的超链接指向dlscz.html（已建立）。

（使用相对路径，在当前窗口中打开）

●为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。

●以“基本信息”下的“七言绝句”为热点文本创建书签超链接，指向

●以“上海辞书出版社”打热点创建指向editor@ewen.cc的超链接。

●页面20秒后跳转

●页面显示改用GB2312编码标准。

要点：

根据说明和截图确定要编辑的内容和需要使用的标记及其属性。

文件操作：

文件名：

sy2-6.htm；sy/sy2/sks；sy/sy2

文档操作：

需要使用的标记以及属性

网页内容要求需要使用和编辑的标记：

网页标题、超链接及其属性、书签标记及其属性、meta标记的http-equip和content属性

注：

理解文本、图像、书签超链接（热点文本（href属性）与目标文本（name属性））；理解相对路径和绝对路径

源代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

江村即事

目录

基本信息

【作品名称】《江村即事》

【创作年代】中唐

【作者姓名】司空曙

【文学体裁】

作品原文

注释译文

【注释】

罢：
完了。
系：
系好。
正堪眠：
正是睡觉的好时候。
纵然：
即使。
即事：
以当前的事物为题材所做的诗。

【译文】

　　渔翁夜钓归来懒得系船，渔翁随即让渔船在水上漂泊。

此时，已深夜，月亮也落下去了，人也疲倦了。

即使一夜风吹去，没有拴住的船最多吹在长满芦花的浅水边，这又有什么关系呢？

作品鉴赏

    这首诗写江村眼前情事，但诗人并不铺写村景江色，而是通过江上钓鱼者的一个细小动作及心理活动，反映江村生活的一个侧面，写出真切而又恬美的意境。

    　“钓罢归来不系船”，首句写渔翁夜钓回来，懒得系船，而让渔船任意飘荡。

“不系船”三字为全诗关键，以下诗句全从这三字生出。

“江村月落正堪眠”，第二句上承起句，点明“钓罢归来”的地点、时间及人物的行动、心情。

船停靠在江村，时已深夜，月亮落下去了，人也已经疲倦，该睡觉了，因此连船也懒得系。

但是，不系船能安然入睡吗？

这就引出了下文：

“纵然一夜风吹去，只在芦花浅水边。

”这两句紧承第二句，回答了上面的问题。

“纵然”、“只在”两个关联词前后呼应，一放一收，把意思更推进一层：

且不说夜里不一定起风，即使起风，没有缆住的小船也至多被吹到那长满芦花的浅水边，也没有什么关系。

这里，诗人并没有刻画幽谧美好的环境，然而钓者悠闲的生活情趣和江村宁静优美的景色跃然纸上，表达了诗人对生活随性的态度。

　　这首小诗善于以个别反映一般，通过“钓罢归来不系船”这样一件小事，刻画江村情事，由小见大，就比泛泛描写江村的表面景象要显得生动新巧，别具一格。

诗在申明“不系船”的原因时，不是直笔到底，一览无余，而是巧用“纵然”“只在”等关联词，以退为进，深入一步，使诗意更见曲折深蕴，笔法更显腾挪跌宕。

诗的语言真率自然，清新俊逸，和富有诗情画意的幽