⽂字版⽹页设计平时作业
实验报告
课程名称⽹页设计与制作基础
实验项⽬名称⽹页设计实验报告
班级与班级代码10法学3班
实验室名称（或课室） 201 、211 专业法学
任课教师⽅清华
学号：
姓名：
实验⽇期：
⼴东商学院教务处制
姓名实验报告成绩
评语：
指导教师（签名）
年⽉⽇说明：指导教师评分后，实验报告交院（系）办公室保存。
⽬录
1、实验⼀ (4)
2、实验⼆ (5)
3、实验三 (6)
4、实验四 (7)
5、实验五 (8)
6、实验六 (9)
7、实验七 (10)
实验⼀⽹页的认识
实验⽬的
1、掌握利⽤Internet进⾏信息游览、搜索，下载⽹页、图⽚、⽂字和⽂件；
2、利⽤记事本来编辑HTML⽂档并浏览。
3、配置⽹站运⾏环境。
实验环境
Windows7操作系统，内部组成局域⽹，外连Internet互联⽹。
实验重点及难点
◆熟悉使⽤浏览器进⾏浏览、搜索、下载。
◆熟悉HTML的结构、语法。
◆创建与管理站点
实验内容
1、浏览新浪主页并保存，观察其保存结果（其中包括哪些⽂件和
⽂件夹）。
2、从⽹上（如⽹页制作⼤宝库www.doczj/doc/2c0a91c208a1284ac85043e7.html 等）下载⽹页制作时需要的⼩图⽚、动画及flash等⽹页制作素材。
3、收集你认为⽐较好的⽹页并从⽹页主题、⽹页内容、结构布局、
⾊彩搭配等⽅⾯来分析⽹页。
4、制作⼀个简单的⽹页sy1-1.htm，⽤记事本编辑，⽹页标题为
“我的第⼀个⽹页”，内容为司空曙的《江村即事》（要求加⼊⽂档类型声明）
如下图所⽰。
5、使⽤Dreamweaver建⽴⼀个本地站点
截图如下：
实验结论
1、通过这次实验，我对HTML的结构有初步了解，懂得怎样建⽴本地
站点，也掌握利⽤Internet进⾏信息游览、搜索，下载⽹页、图⽚、⽂字和⽂件。
实验⼆⽹页的基本元素（⼀）
实验⽬的
1、掌握头区标记的应⽤，包括title、meta和base等标记
2、掌握⽂本段落格式标记，包括注释标记，分段标记，换⾏/不
换⾏标记，标题标记，分节标记，⽔平线标记，⽂本居中标记等；
3、掌握⽂字显⽰效果标记，包括字体标记，字符样式标记以及转义字符等；
4、掌握列表格式标记，包括⽆序列表标记，有序列表标记等；
5、掌握超链接的使⽤，包括锚点标记、页⾯跳转链接、书签超链接、下载⽂件链接以及电⼦邮件链接等；html网页设计超链接
6、掌握图⽚标记，包括插⼊图⽚标记，图⽚超链接标记⽹页背景标记；
7、掌握⾳频和视频标记，包括链接⾳频或视频⽂件、设置⽹页背景⾳乐标记，内嵌⾳频或视频播放插件等；
8、掌握动态元素标记。
实验环境
Windows7操作系统，内部组成局域⽹，外连Internet互联⽹。
实验重点及难点
熟练掌握各种常⽤标记并利⽤其来实现⽹页的排版。
实验内容
1、在⽹站下创建⽂件夹sy2，编辑⽹页sy2-1.htm，实现如下页⾯：
2、对⽹页sy2-1.htm按要求进⾏编辑并另存为sy2-2.htm
●标题⽂字⼤⼩⽤
标记；
●作者信息⽂字⼤⼩为4，字体为幼圆，颜⾊为红⾊；
●古诗⽂字⼤⼩为4，字体为⾪书，颜⾊为蓝⾊；
●在作者信息后加⼀条⽔平线，居中，⽔平线宽度为浏览器的50%，⽔平线的粗细为20个像素，颜⾊为棕⾊；
效果如图所⽰。
3、对⽹页sy2-2htm按要求进⾏编辑并另存为sy2-3.htm，
●插⼊背景图⽚：背景.jpg
●在古诗左下⽅插⼊作者的照⽚：司空曙.jpg
●为⽹页添加背景⾳乐：江村即事.mp3，要求循环播放
效果如图所⽰。
4、对⽹页sy2-4.htm按要求进⾏编辑并另存为sy2-5.htm，效果如
图所⽰。
●改“⽬录”下的列表符号类型为⽅框。
●给“【注释】”下的条⽬加数字编号
●以标题为热点创建空超链接
●以图⽚为热点创建空超链接
●以“⼤历⼗才⼦”为热点创建空超链接
5、对⽹页sy2-5.htm按要求进⾏编辑并另存为sy2-6.htm。
●以标题和图⽚为热点的超链接均指向
www.doczj/doc/2c0a91c208a1284ac85043e7.html /view/1121590.htm（使⽤绝对路径，在新窗⼝中打开）●以“⼤历⼗才⼦”为热点的超链接指向dlscz.html(已建⽴)。（使
⽤相对路径，在当前窗⼝中打开）
●为“⽬录”下的各条⽬创建书签，书签名为相应条⽬的拼⾳⾸
字母。
●以“基本信息”下的“七⾔绝句”为热点⽂本创建书签超链接，
指向www.doczj/doc/2c0a91c208a1284ac85043e7.html /view/1121590.htm的书签名为1的书签。（使⽤绝对路径，在新窗⼝中打开）
●以“上海辞书出版社”打热点创建指向editor@www.doczj/doc/2c0a91c208a1284ac85043e7.html 的超链
接。
上海辞书出版社
●页⾯20秒后跳转www.doczj/doc/2c0a91c208a1284ac85043e7.html /view/1121590.htm#2
●页⾯显⽰改⽤GB2312编码标准。
实验结论
在“Dreamweaver基本操作”这个实验中，⽤DreamweaverCS3这个软件的时候，我学会如何设置字体，如：修改字体⼤⼩、颜⾊和样式等；⽽且，在实验中我也学到了怎么插⼊图⽚和背景，相关图⽚和⽂字超链接的设置等。
实验三四 Dreamweaver基本操作
实验⽬的
1、熟练运⽤Dreamweaver在⽹页⽂件中插⼊各种⽹页基本元素
（⽂本、图像、超链接、多媒体对象。
2、熟练运⽤Dreamweaver实现布局表格的绘制和设置，掌握利⽤
布局表格来规划⽹页的技能；
3、熟练运⽤Dreamweaver实现框架集和框架的创建和编辑，掌握⽤
框架来设计⽹页的技能；
实验环境
Windows7操作系统，Dreamweaver软件，内部组成局域⽹，外连Internet互联⽹。
实验重点及难点
◆利⽤表格来规划⽹页布局。
◆利⽤框架来规划⽹页布局。
实验内容
1、
a)在sy3下新建⼀个名为“我的⼼情”的⽹页⽂件（⽤“⽂件”
⾯板），从提供的⽹页原始素材“⼈⽣最美是淡然.doc”中把⽂字复制到该⽹页⽂件中，并进⾏适当的⽂字设置，结果如下图所⽰。
b)在⽹页⽂件“我的⼼情”中设置背景⾳乐“安妮的仙境.mp3”，
并为该⽹页加上背景颜⾊，在其标题后插⼊⼀幅图⽚“淡然.jpg”，为标题中“淡然”两字加上超链接，使其链接到“www.doczj/doc/2c0a91c208a1284ac85043e7.html
/view/72221.htm#sub72221”中，效果如下图所⽰。
2、在sy3新建⼀个名为“我的⾳乐”的⽹页⽂件，在该⽹页⽂件
中建⽴⼀个如图所⽰的表格，并在表格下⽅添加⽂字“同时让我们回去童年快乐时光吧！”和插⼊Flash影⽚“toucai.swf”。
3、利⽤布局表格来规划。在sy3下创建并编辑webdesign.html⽂
件，效果如下图所⽰。
4、利⽤框架集和框架实现index.html的布局并保存在⽹站根⽬录下，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。