文字版网页设计平时作业

实验报告课程名称网页设计与制作基础实验项目名称网页设计实验报告班级与班级代码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、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。

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

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

5、使用Dreamweaver建立一个本地站点截图如下：实验结论1、通过这次实验，我对HTML的结构有初步了解，懂得怎样建立本地站点，也掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件。

实验二网页的基本元素（一）实验目的1、掌握头区标记的应用，包括title、meta和base等标记2、掌握文本段落格式标记，包括注释标记，分段标记，换行/不换行标记，标题标记，分节标记，水平线标记，文本居中标记等；3、掌握文字显示效果标记，包括字体标记，字符样式标记以及转义字符等；4、掌握列表格式标记，包括无序列表标记，有序列表标记等；5、掌握超链接的使用，包括锚点标记、页面跳转链接、书签超链接、下载文件链接以及电子邮件链接等；6、掌握图片标记，包括插入图片标记，图片超链接标记网页背景标记；7、掌握音频和视频标记，包括链接音频或视频文件、设置网页背景音乐标记，内嵌音频或视频播放插件等；8、掌握动态元素标记。

实验环境Windows7操作系统，内部组成局域网，外连Internet互联网。

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

实验内容1、在网站下创建文件夹sy2，编辑网页sy2-1.htm，实现如下页面：2、对网页sy2-1.htm按要求进行编辑并另存为sy2-2.htm●标题文字大小用<h1></h1>标记；●作者信息文字大小为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。

●以标题和图片为热点的超链接均指向/view/1121590.htm（使用绝对路径，在新窗口中打开）●以“大历十才子”为热点的超链接指向dlscz.html(已建立)。

（使用相对路径，在当前窗口中打开）●为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。

●以“基本信息”下的“七言绝句”为热点文本创建书签超链接，指向/view/1121590.htm的书签名为1的书签。

（使用绝对路径，在新窗口中打开）●以“上海辞书出版社”打热点创建指向editor@的超链接。

<a href="mailto:editor@">上海辞书出版社</a>●页面20秒后跳转/view/1121590.htm#2●页面显示改用GB2312编码标准。

实验结论在“Dreamweaver基本操作”这个实验中，用DreamweaverCS3这个软件的时候，我学会如何设置字体，如：修改字体大小、颜色和样式等；而且，在实验中我也学到了怎么插入图片和背景，相关图片和文字超链接的设置等。

实验三四 Dreamweaver基本操作实验目的1、熟练运用Dreamweaver在网页文件中插入各种网页基本元素（文本、图像、超链接、多媒体对象。

2、熟练运用Dreamweaver实现布局表格的绘制和设置，掌握利用布局表格来规划网页的技能；3、熟练运用Dreamweaver实现框架集和框架的创建和编辑，掌握用框架来设计网页的技能；实验环境Windows7操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。

实验重点及难点◆利用表格来规划网页布局。

◆利用框架来规划网页布局。

实验内容1、a)在sy3下新建一个名为“我的心情”的网页文件（用“文件”面板），从提供的网页原始素材“人生最美是淡然.doc”中把文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。

b)在网页文件“我的心情”中设置背景音乐“安妮的仙境.mp3”，并为该网页加上背景颜色，在其标题后插入一幅图片“淡然.jpg”，为标题中“淡然”两字加上超链接，使其链接到“/view/72221.htm#sub72221”中，效果如下图所示。

2、在sy3新建一个名为“我的音乐”的网页文件，在该网页文件中建立一个如图所示的表格，并在表格下方添加文字“同时让我们回去童年快乐时光吧！”和插入Flash影片“toucai.swf”。

3、利用布局表格来规划。

在sy3下创建并编辑webdesign.html文件，效果如下图所示。

4、利用框架集和框架实现index.html的布局并保存在网站根目录下，如下图所示，其中导航栏分别为目录内容“我的心情”、“我的音乐”、“我的诗歌”、“和我联系”，“我的心情”、“我的音乐”、“我的诗歌”分别链接到网页文件“我的心情.html”、“我的音乐.html”、“sy2-6..html”, “和我联系”链向你的电子邮箱实验结论在这次实验中，我懂得在网页文件中插入各种网页基本元素（文本、图像、超链接、多媒体对象。

用表格来绘制和编辑网页，对框架的建立、保存、选择和编辑有初步的认识。

实验六基于CSS的网页布局设计实验目的1、CSS的页面分割技术、盒模式和定位技术2、熟悉层（AP Div）的基本操作并能利用层（AP Div）来定位页面元素；3、掌握模板的创建、编辑和应用。

实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。

实验重点及难点◆CSS盒模式和定位技术◆灵活利用层来实现网页元素的精确定位。

◆利用模板生成多个风格一致的网页。

实验内容（一）用AP Div（层）的知识对my.html进行设计编辑，并保存。

结果如下：（1）选择标准模式，通过布局工具菜单栏中的绘制AP Div按钮插入两个AP元素。

择AP元素,通过插入记录→图像在AP元素中插入各自图像,将图像保存在image文件夹中。

实验结果如下：择24像素大小。

将AP元素拖动到APdiv2 上层。

结果如下：（3）插入AP元素，并在AP元素中输入文本。

选择AP元素通过属性面板对AP元素的位置进行定位并且统一设置AP元素的宽和高。

结果如下：（二）通过用CSS盒模式知识对zzy.html进行设计编辑。

结果如下：1、通过常用工具栏中的插入Div标签按钮，插入CSS盒，插入父盒子与子盒子，并对CSS盒进行添加CSS规则，从而对CSS盒的宽度、高度、背景颜色以及位置进行设置。

结果如下：2、通过对CSS盒的子盒子进行文本输入和插入图像设置。

结果如下所示：（三）根据网页文件“拙政园.html”生成模板文件“my.dwt”。

文件存放于sy6文件夹下。

结果如下：（1）选择网页文件“拙政园.html”中的内容，通过常用工具栏中的模板：创建嵌套模板按钮建立可编辑区域。

结果如下：（2）通过对网页文件“拙政园.html”进行文件→另存为模板操作生成模板文件“my.dwt”。

结果如下：（3）文件存放于sy6文件夹下。

结果如下：（四）通过资源中的模板文件“my.dwt”从模板新建网页文档“yhy.html”、“bssz.html”和“ly.html”，本地站点的网页文件my.html中的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。

结果如下：实验总结通过本次的dreamweaver网页布局的实验操作，我基本上地学会应用CSS的页面分割技术、盒子模式和定位技术，熟悉了层（AP Div）的基本操作并能利用层来定位页面元素以及基本掌握模板的创建、编辑和应用。

实验七表单界面设计实验目的4、掌握表单标记并掌握利用这些标记来创建表单以及其中的各种表单域。

5、熟悉Dreamweave提供的基本表单界面设计功能。

实验环境Windows7操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。

实验重点及难点◆表单的基本构成◆表单域元素的使用实验内容1、在你的站点中创建文件夹：sy7。

在sy7文件夹下创建文件zcbd.html并打开。

2、利用Dreamweaver对zcbd.htm进行设计编辑，效果如下图所示。

实验总结通过这次实验，我懂得了一些常用的运用技巧，如何创建表单和和熟悉其中一些表单域。

18。