网页设计实验报告(学生.doc

《网页设计实验报告(学生.doc》由会员分享，可在线阅读，更多相关《网页设计实验报告(学生.doc（17页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、实 验 报 告2011 至 2012 学年度第 一 学期课程名称： 网 页 设 计 系别班级： 10 数 本 学 号： 姓 名： 陶 士 林 授课老师： 丁 邦 旭 指导老师： 丁 邦 旭 目 录实验项目一： 创建站点和管理站点 实验项目二： 在网页中建立各种超链接 实验项目三： 利用表格设计和制作网页 实验项目四： 应用框架技术制作网页 实验项目五： 应用层技术制作网页 实验项目六： 用表单收集数据 实验项目名称： 一、创建和管理站点实验地点：实验楼C407日 期：2011年9月26日实验内容1、 建立本地站点。2、 搭建站点结构。3、 管理和维护站点。实验目的1、 掌握站点的总体规划方法。

2、2、 掌握本地站点的定义方法。3、 掌握站点结构的搭建方法。4、 掌握站点的管理与维护方法。实验具体操作过程1、 创建本地站点（1） 在菜单栏中选择“站点”“新建站点”命令。在文本框中输入网站的名称“畅想未来”。站点的URL可以暂时不输入，到上传网站的时候再添加。（2） 单击“下一步”按钮，设置站点需要使用服务器端技术。由于此时新建的是静态站点，并不需要相关技术，所以选择“否，我不想使用服务器技术”单选按钮。（3） 单击“下一步”按钮，设置站点的编辑方式和存储位置。大多数情况下，用户都是先在自己的计算机上编辑网页，然后通过FTP上传到远程服务器上，因此选择第一个选项。在文本框中直接输入“D：f

3、urture”。（4） 单击“下一步”按钮，设置计算机与服务器的链接方式，这里在下拉列表框中选择“无”选项。（5） 单击“下一步”按钮，Dreamweaver列出前面设置的各项信息以供用户检查。（6） 在确认无误后，单击“完成”按钮。系统会在D盘的根目录下自动创建“furture”文件夹，同时“文件”面板显示出刚才新建的站点。2、 搭建站点结构（1） 在“文件”面板中，单击文件下拉列表框，从中选择“畅想未来”，打开“畅想未来”站点。（2） 右键单击站点根文件夹，从弹出的快捷菜单中选择“新建文件夹”命令，在本地站点的根文件夹下创建一个新文件夹。输入名称“images”，按回车键单击区外的任意位置

4、，完成对文件夹名的命名。然后用相同的方法新建“webpages”等其他文件夹。（3） 右键单击站点根文件夹，从弹出的快捷菜单中选择“新建文件”命令，在本地站点的根文件夹中创建了一个新文件，将文件命名为index.html。Dreamweaver会自动将index.html作为“畅想未来”网站的首页。此时建立的文件内容为空，以后可以通过编辑页面来添加内容。（4） 在“文件”面板中右键单击某个文件，从弹出的快捷菜单中选择“设为首页”命令。3、 管理和维护站点（1） 打开“畅想未来”站点。（2） 在菜单栏中选择“站点”“管理站点”命令，打开“管理站点”对话框。（3） 在左侧的站点列表中选择需要修改的

5、站点，然后单击右侧的“编辑”按钮。（4） 在打开的“站点定义”对话框中单击“高级”选项卡，用户可以根据需要对当前站点进行全面的编辑修改。（5）利用“管理站点”对话框，可以对当前站点进行复制、删除等操作。实验结果分析：通过此次上机操作，我知道了如何在本地建立一个站点，以及搭建站点的结构。在创建本地站点的过程中，我学到了如何设置站点的编辑方式和存储位置、设置计算机与服务器的链接方式；在搭建站点结构过程中，我学到了在本地站点的根文件夹下创建一个新文件夹、在本地站点的根文件夹中创建一个新文件。通过此次上机实验，我了解到要建立一个网站，首先要规划站点结构，考虑站点中各类文件的存放位置，同时我还知道了如何

6、建立存放站点文件的文件夹、定义本地站点、对文件中的站点进行操作、设置网站的首页等操作。经过本次的初次上机，使我认识到建立一个网站的难处，更增加了我对这门学问的学习兴趣。成 绩教师签名实验项目名称：二 、在网页中建立各种超链接实验地点：实验楼C407日 期：2011年10月10日实验内容1、 创建内部超链接2、 创建外部超链接3、 创建空链接和脚本链接4、 创建E-mail超链接实验目的1、 掌握内部、外部超链接的创建方法。2、 掌握E-mail链接的创建方法。实验具体操作过程1、 创建内部超链接（1） 选中文本“未来都市”，在文本“属性”面板中单击“浏览文件”按钮，在打开的“选择文件”对话框中

7、选中网页文件ex4_city.html。（2） 选中文本“文本旅游”，在文本“属性”面板中单击“指向文件”按钮，并直接拖到鼠标，此时屏幕上会出现一条跟踪直线。移动鼠标到“文件”面板中所要链接的目标文件ex4_travel.html上。当该文件被一个蓝色线框包围时松开鼠标。（3） 选中“科幻小说”，在文本“属性”面板上的“链接”文本框中直接输入被链接文件的相对路径及文件名：“webpages/ex4_novel.html”。（4） 按F12键，保存并预览网页。当鼠标移到超链接处就会变成手形，并且在浏览器下方的状态栏中显示了链接路径，单击超链接文本，便会打开对应的链接文件。2、 创建外部链接(1)

8、 在网页index.html文件页脚中，输入“友情链接”文本。(2) 选中“友情链接”文本，在文本“属性”面板上的“链接”文本框中输入完整的网址。(3) 在“目标”下拉列表框中选择“_blank”。(4) 按F12键，保存并预览网页。当单击“友情链接”时，浏览器便在一个新的窗口中打开了Google网站的首页。3、 创建空链接（1） 在index.html网页中，选中“未来通讯”文本。（2） 在“属性”面板中的“链接”文本框中输入空链接符号“#”，即创建了一个空链接。4、 创建脚本链接（1） 打开“未来都市”网页ex4_city.html。（2） 选中“close”文本，在“属性”面板的“链接”

9、文本框中输入“javascript：self.close（）”或“javascript：window.close（）”。（3） 预览网页。当单击“close”时，将正在浏览的“未来都市”网页窗口关闭。5、 创建E_mail链接（1） 在网页index.html的页脚中选中“联系我们”文本。（2） 在文本“属性”面板上的“链接”文本框中输入“mailto：teach_ie”。在浏览器中预览网页，可以看到，当单击“联系我们”时，便打开了Outlook Express,收件人的地址“teach_ie”已自动出现在收件人的文本框中。浏览者只需要输入信件的主题和内容即可。（3）创建E-mail链接，亦可

10、使用此操作：在“插入”的工具栏“常用”类别中，单击“电子邮件链接”按钮，打开“电子邮件链接”对话框，在“E-mail”文本框中输入电子邮件地址即可。实验结果分析：通过本次的上机操作，我学会了网页中的各种链接应用和各种链接的创建方法。在链接中，我意识到文本可以制成超链接而且图像也可以制成超链接，被链接的对象不仅是网页，还可以是其他图像、多媒体文件、E-mail、可供下载的软件以及其他网站等。超链接的方式有多种，即内部链接、外部链接、锚点连接、E-mail链接;对于链接的路径，则又分为绝对路径、文档相对路径和根相对路径。此次事件上机操作，让我对网页的设计更加的了解了，让我对制作好一个出色的网页更加

11、的自信。成 绩教师签名实验项目名称：三、利用表格设计和制作网页实验地点：实验楼C407日 期：2011年10月24日实验内容1、 通过绘制表格设计页面布局。2、 在表格中插入页面元素，如文本、图像等。3、 设置表格属性，如表格的对齐方式、背景图像和背景色等。4、 设置单元格属性，如单元格、行列内容对齐方式、背景图像和背景色等。实验目的1、 掌握创建表格的方法。2、 掌握表格的基本操作方法。3、 掌握表格属性的设置方法。4、 掌握单元格属性的设置方法。5、 了解表格的高级应用技巧。6、 掌握利用“布局模式”规划网页的方法。7、 了解表格数据的导入和导出方法。实验具体操作过程1、 插入空白表格（1

12、） 将插入点置于页面的左上角。（2） 在菜单栏中选择“插入”“表格”命令。（3） 在“表格”对话框的各文本框中输入相应的值。（4） 单击“确定”按钮，一个表格就出现在文档中。2、 合并单元格（1） 选中第三个表格的第一列的两个单元格。（2） 在菜单栏中选择“修改”“表格”“合并单元格”命令。3、 拆分单元格（1） 用鼠标单击下表格的第一行第二列单元格。（2） 在菜单栏中选择“修改”“表格”“拆分单元格”命令。（3） 在“拆分单元格”对话框中设置拆分的列数。4、 在表格中插入页面元素（1） 在第一行的单元格中插入标题图像imag6_1.jpg。可以看到当图像的大小超过单元格的大小时，单元格会自动

13、调整以适应加入的图像。（2） 在第二行的单元格中插入内嵌的一行八列、表格宽度为百分之九十、其余参数为零的导航条表格。（3） 在另一个表格中插入页面元素： 在第一个单元格中插入图像img6_gif。 在第二个单元格中插入“用户登录”表格。由于表单的制作要在12章中介绍，为了不影响整体效果，从素材网页“ex6_login.html”文件中直接复制粘贴进来。 在第三个单元中插入1行2列、宽度90%的内表格。其中在第一个单元格中插入图像img6_inform.gif,在第二个单元格中添加相应的文本。（4） 在第三个表格中插入页面元素： 在第一列的单元格中插入2行1列、宽度为200像素的表格。 在第一行

14、的中间单元格中插入一个内嵌的2行2列、宽度为350像素的“未来都市”栏目表格。 由于“未来旅游”栏目表格的结构与“未来都市”栏目表格相同，可以选中“未来都市”栏目表格 复制，粘贴到第一行的右侧的单元格中，然后逐步按操作内容更换。 在第二行的右侧单元格中插入一个内嵌的1行4列、宽度为98%的内置表格。（5）保存网页，预览。实验结果分析：这次上机实验，通过对网站首页的设计制作，我知道了如何使用表格的方法及如何利用表格进行各种页面元素的定位和排版，经过这次上机操作，我的网页设计制作水平已迈上一个新的台阶。成 绩教师签名实验项目名称：四、应用框架技术制作网页实验地点：实验楼C407日 期：2011年1

15、1月21日实验内容1、 在页面中创建框架集和框架，并对网页布局进行适当的调整。2、 保存框架集文件和框架文件。3、 输入框架页面内容。4、 通过设置框架和框架集属性，来改变框架网页的外观等。5、 确认连接目标的框架设置，使所链接的目标页面在框架中显示。实验目的1、 掌握框架的基本内容。2、 掌握创建框架结构的方法。3、 掌握编辑框架页面的方法。4、 掌握框架页面导航的链接方法。5、 掌握设置框架和框架集属性的方法。实验具体操作过程1、 插入框架集（1） 新建一个网页文件。（2） 为了以后便于观察和操作框架，事先打开“框架”面板（在菜单栏中选择“窗口”“框架”命令）。由于当前还没有在网页中插入框

16、架，所以显示为“不包含框架”。（3） 在“插入”工具栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集。（4） 在弹出的“框架标签辅助功能属性”对话框中，可以为每一个框架指定一个标题，然后单击“确定”按钮。（5） 在文档窗口便出现了包含3区域的“顶部和嵌套的左侧框架”类型的框架集。同时，“框架”面板也显示了当前框架集的结构，其中立体的灰色边框为框架集的边框，而没有立体效果的细边框为框架边框，每一个框架都有自己的名字，用于区别于其他框架。2、 保存框架集网页（1） 确保前面已插入了“顶部和嵌套的左侧框架”类型的框架集。然后在文档窗口中，单击框架边框，以选中整个框架集。（2）

17、 在菜单栏中选择“文件”“保存框架页”命令。在“另存为”对话框中将框架集网页保存到本地站点根文件夹中，命名为index7_1.html。（3） 将插入点置于顶端框架，在菜单栏中选择“文件”“保存框架”框架命令。在“另存为”对话框中将顶端框架中的网页保存到本地站点根文件夹中，命令为index7_top1.html。（4） 用相同的方法，将左侧和右侧框架中的网页分别保存到本地站点根文件夹中，命名为index7_left.html和index7_main.html。3、 编辑框架集页面内容（1） 确保前面已插入了“顶部和嵌套的左侧框架”结构的框架集。（2） 将插入点置于顶部框架中插入图像img6_1

18、.jpg，设置页面的左边距、上边距均为0。（3） 将插入点置于左侧框架中插入页面导航条及友情链接内容，设置页面的左、上边距为0，并链接外部样式文件css_chapter6.css美化页面。（4） 将插入点置于右下方的主框架中，插入网页的主题内容，设置页面的上边距为0，并链接外部样式文件css_chapter6.css美化页面。（5） 显示框架边框，适当的调整框架大小，使顶端和左侧框架中的内容能够完全显示出来。（6） 保存、预览。实验结果分析：本次的上机操作通过一个典型的框架应用实例，我知道了如何创建基于框架的网页文件。使用框架技术可以用来布置页面，还可以使页面达到导航的效果，无论浏览到哪里，都

19、可以很好的把握浏览的位置。另一方面，由于框架集网页中包含多个框架网页，在浏览时，一次需载入几个页面，所以会降低用户的浏览速度。成 绩教师签名实验项目名称：五、应用层技术制作网页实验地点：实验楼C407日 期：2011年12月05日实验内容1、 新建网页文档，创建9个层。2、 在4个层中插入图像。在5个层中输入相应的文字并设置文字的大小、颜色、行高、阴影效果等。3、 为层添加背景颜色。4、 设置层的大小、调整层的位置。5、 给层命名、改变层的叠放次序。6、 利用行为控制层的可见性。实验目的1、 掌握使用层排版的方法。2、 掌握创建层的方法。3、 正确区分激活层、选择层的使用场合。4、 熟练掌握调

20、整层大小、移动层、对齐层的方法。5、 了解更改层名称的方法。6、 掌握改变层叠放次序的方法。7、 解改变层可见性的方法。实验具体操作过程1、 创建层 （1）、新建网页文档，在“插入”工具栏中，切换到“布局”类别，并选择“标准”模式。 （2）执行以下操作之一，分别创建9个层。a、 插入层：把光标置于文档窗口中想插入层的位置，在菜单栏中选择“插入”“布局对象”“层”命令。b、 拖放层：在“插入”工具栏中，拖动“绘制层”按钮到文档窗口，将生成一个默认大小的层。c、 绘制图层：在“插入”工具栏中，单击“绘制层”按钮，当鼠标指针变成十字形时，按住鼠标左键拉出一个矩形直到适当大小后释放鼠标左键，这时已经在

21、页面上绘制了一个层。d、 建立多个层：单击“绘制层”按钮，按下Ctrl键，在页面上绘制一个层后，只要不释放Ctrl键，可以连续绘制多个层。（3） 在菜单栏中选择“窗口”“层”命令；或按F12键，打开“层”面板，可以看到在“层”面板中，有九个层Layer1Layer9。2、 激活层(1) 单击层Layer1内部任意位置，激活Layer1。 (2) 在菜单栏中选择“插入”“图像”命令。(3)重复步骤(1)(2)，分别在层Layer2Layer4中插入图像img8_2.gifimg8_4.gif。(4) 为层Layer5添加文字“憧憬未来”文字，并设置文字样式。(5) 分别为层Layer6Layer

22、9添加说明文字。3、 选择层（1）利用“属性”面板分别为层Layer6Layer9设置背景颜色。（2）创建阴影层Layer10Layer13，用“属性”面板设置层的背景颜色。4、 调整层大小（1） 选择层Layer1。（2） 拖动层的控制柄，上下调整控制柄只能调整层的高度，左右调整控制柄只能调整层的宽度，四角的调整控制柄能同时调整层的高度和宽度，知道调整到与图像大小相同为止。（3） 重复以上步骤，分别调整Layer2Layer4的大小。5、 设置层的宽、高，使层Layer6Layer12的大小与层Layer13相同 (1）选择层Layer13，在“属性”面板的“宽”数值框中输入“200px”，

23、“高”数值框中输入“150px”。（2）在“层”面板中，按下Shift键的同时依次选择层Layer6-Layer13，注意选择次序，因为要使其他层与Layer13的大小相同，所以应最后选择Layer13。最后选择层的选择柄高亮显示。 (3）在菜单栏中分别选择“修改”、“排列顺序”、“设成宽度相同”命令及“修改”、“排列顺序”、“设成高度相同”命令，使8个层的大小相同。前7个被选中层的尺寸均随最后一个被选中层的尺寸变化。6、将层转换成表格（1） 在菜单栏中选择“修改”“转换”“层到表格”命令，弹出“转换层为表格”对话框。（2） 在出现的对话框中选中最精确和使用透明。单击“确定”按钮，即可把页面中

24、的所有层转换成表格。实验结果分析：本次操作我学到了层的使用及层的各种属性，其中包括层的创建、改变层的大小、层的移动、层的对齐、层的叠放次序、层的可见性等。在创建层的过程中，需注意层的叠放次序，且要注意章正确的将层转换成表格或将表格转换成层。通过本次实验的学习，我知道了如何创建层，编辑层，利用层制作出各种网页效果，以及如何进行层与表格之间的转换。成 绩教师签名实验项目名称：六、用表单收集数据实验地点：实验楼C407日 期：2011年12月19日实验内容1、 创建表单。2、 表单属性设置3、 表单对象创建及其属性设置。4、 列表值添加、编辑。5、 为“登录”按钮添加验证表单的行为。6、 插入“友情

25、链接”跳转表单。实验目的1、 掌握创建表单和添加表单对象的方法。2、 掌握表单和表单对象的属性设置方法。实验具体操作过程1、创建“登录”表单（1）添加表单。 将插入点置于表格的第二行内，在“表单”工具栏中单击“表单”，在此单元格内插入一个表单，表单以红色的虚框表示。（2）给表单重命名。 单击表单红色外框，或在标签栏选中表单标签form#form1，选中整个表单，在“属性”面板中进行属性的设置。 表单的默认名称为“form1”，可在“表单名称”下方的文本框内输入一个表单的名称，也可以使用默认的名称“form1”。（3）指定处理提交表单程序为ex18_6_Login.asp。 在“动作”框中输入处

26、理提交表单的网页的名字“ex18_6_Login.asp”。（4）指定表单处理程序窗口打开的位置。 单击“目标”下拉按钮，在“目标”下拉列表中选择“_self，表示将在本窗口打开提交表单后返回的页面。（5）指定处理表单数据的方法是post。 单击“方法”下拉按钮，在方法下拉列表中选择“POST”，表示在HTTP请求中嵌入表单数据发送给Web服务器，Web服务器将处理后的结果返回给浏览器。（6） 指定表单数据的MIME类型为application/x-www-form-urlencode。单击“MIME类型”下拉按钮，在“MIME类型”下拉列表中选择“applicationx-www-form-

27、urencode”，表示对提交给服务器进行处理的数据使用该MIME编码类型。2、插入表单对象（1）创建用户名文本域对象，设置文本域属性。在表单内插入一个3行2列的表格，设置“表格宽度”为80%，“边框粗细”为1像素，“单元格边距”为4，“单元格间距”0；将第二列所有单元格的水平方式设为“左对齐”；在第一列2个单元格内分别输入“用户名”和“密码”。 将插入点置于表格的第一行第二列，单击“表单”工具栏中的“文本字段”按钮，弹出“输入标签辅助功能属性”对话框，选择“无标签标记”单选按钮，在单击“确定”，插入一个单行类型的文本域对象。 选中此文本域对象，在“属性”面板中，将“文本域”框中的文本域的名字

28、由默认的“textfield”更名为“UserName”。 在“字符宽度”框中输入20，表示此文本域在网页中以20个字符的宽度显示。 在“最多字符数”框中输入20，表示此在文本域中最多可输入20个字符。（2） 插入密码文本域对象，设置文本域属性。 将插入点置于内表格的第二行第二列，单击“表单”工具栏中的“文本字段”按钮，插入一个单行类型的“文本域”对象。 选中此“文本域”对象，在“属性”面板中将“文本域”框中的文字域由默认的“textfield”更名为“Password”，将“字符宽度”设为20，将“最多字符数”设为30。 在“类型”选项组中选择“密码”单选按钮，这样在网页中输入密码是，所输入

29、的内容将以“”或星号表示。 （3）插入按钮对象即“登录”和“重置”两个按钮。 将插入点置于表格的第3行第二列，单击“表单”工具栏中的按钮，插入一个“按钮”对象。 选中此按钮，在“属性”面板中将“值”文本框中的名字由默认的“提交”更名为“登录”，将按钮上显示的文字由“提交”跟改为“登录”。 将插入点置于“登录”按钮右边，单击“表单”工具中的“按钮”，再插入一个“按钮”对象。选中此按钮，在“属性”面板中，在“动作”选项组中选择“重设表单”单选按钮，按钮的名字由“提交”更改为“重置”。3、 为“登录”按钮添加检查表单的行为 4、插入“友情链接”下拉菜单（1）插入一个“跳转菜单”，并为其添加菜单项。

30、（2）为“友情链接”下拉菜单的列表值添加一个项目。 在属性面板中单击列表值按钮,弹出列表值对话框。 单击添加项按钮,将进入增加链接状态,这时插入光标将定位到项目标签新一行的输入框中。在其中输入“=友情链接=”，然后单击“在列表中移项”，使其成为列表中的第一个。 在属性面板的初始化时选定列表框中，选中“=友情链接=”，那么在打开网页时，在跳转菜单中显示内容为的“=友情链接=”。实验结果分析：通过这一次的学习，我知道了作为要收集信息的网页，通常是先插入表单，日常的网上用户注册、登陆、撰写邮件、网上商务、网上搜索等都是通过表单来提交信息的。？然后在表单中插入一些表单对象，如：文本域、按钮、单选按钮、复选框、文件域、隐藏域等。表单对象插入后，还要设置其名称和其他一些属性，以使服务器端的处理程序能“对号入座”。这次的上机实验操作，让我对网页设计有了更加深的了解，我对更加珍惜学习网页设计的机会。成 绩教师签名