1、-1-昆明理工大学信息工程与自动化学院学生实验报告（ 201 201 学年第 一 学期 ）课程名称：Web 设计技术 开课实验室： 年 月 日年级、专业、班学号 姓名 成绩实验项目名称 超级链接、表格、使用框架创建多页面布局、表单指导教师 教师评语教师签名：年 月 日注：报告内容按实验须知中七点要求进行。1. 选择一本图书，尝试制作书签链接，通过目录链接到各章内容。代码：书签链接网页设计与开发1.网页设计简介2.HTML 基础介绍3.文字与段落4.列表5.超级链接6.表格网页设计简介-2-几个基本的网页设计概念：超链接、统一资源定位器、网站和网页等；超文本标记语言是够成 Web 页面的主要工具
2、。返回首页HTML 基础介绍HTML 用于描述功能的符号称为“标记” 。html、head、body等都是标记。标记通常分为单标记和双标记两种类型。返回首页文字与段落主要内容为文字内容标记、文字样式标记、文字修饰标记、段落修饰标记的使用。返回首页列表列表，顾名思义就是在网页中将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表和定义列表 3 种。另外还有不太常用的目录列表和菜单列表。返回首页超级链接建立超链接的标记是 a，以开始，以结束，锚可以指向网络上的任何资源。返回首页表格表格是网页制作中一种常用的页面布局工具。通过表格可以精确地控制网页各元素在网页中的位置，从
3、而方便的排版和布局，所以，表格是网页排版的灵魂。返回首页-3-截图：2.编写个人主页，建立包含文本链接、电子邮件链接和文件下载链接和图像映射的 HTML 页面。代码：个人主页欢迎光临我的主页我最喜欢过的书下载我喜欢的电影我的家乡有问题请给我发邮件我最喜欢的文章逍遥游逍遥游-5-【题解】“逍遥”也写作“消摇” ，意思是优游自得的样子；“逍遥游”就是没有任何束缚地、自由自在地活动。【原文】北冥有鱼，其名曰鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。齐谐者，志怪者也。谐之言曰：“鹏之徙于南冥也，水击三千里，
4、抟扶摇而上者九万里(11)，去以六月息者也(12)。 ”野马也(13)，尘埃也(14)，生物之以息相吹也(15)。天之苍苍，其正色邪？其远而无所至极邪(16)？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上(17)，则芥为之舟(18)；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力，故九万里则风斯在下矣(19)。而后乃今培风(20)，背负青天而莫之夭阏者(21)，而后乃今将图南。蜩与学鸠笑之曰截图：3.如图是新浪网天气预报的地图，利用图像映射完成当鼠标单击某一个省时，出现一段文字说明。-6-代码：天气预报图像映射长春长春阴 南风 2 级 湿度 76% 紫
5、外线最弱-7-郑州郑州郑州，阴有小雨。截图：4.编写出实现如图所示页面效果的关键 HTML 代码。其中,A、B、C、D、E 均为默认字号和默认字体，并且加粗显示，它们都位于各自单元格的-8-正中间，A 单元格的高度为 200 像素，B 单元格的高度为 100 像素，C 单元格的宽度为 100 像素，高度为 200 像素。代码：A B C D EABECD截图：-9-5.利用表格知识，制作出如图所示的表格。代码：表格实验学年第 学期成绩登记表开课学院：行政班：考核方式：课程名称： Java 程序设计(I)教师姓名： 学分：-10-学号姓名平时期中期末实验成绩学号姓名平时期中期末实验成绩-11-考
6、试/考查成绩统计 90 分以上（优秀）8089（良好）7079（中等）-12-6069（及格）缓考 人 缺考 人免修 人实考 人截图：6.利用框架来设计一个厂字型布局，实现一个新闻管理系统。如图所示：截图：-13-代码：新闻管理系统7.制作一个留言表单，表单中应包括姓名、性别、电子邮箱、字体大小、颜色、留言内容等，本实例完成后的效果如图所示：-14-代码：留言留言姓名：*10 个字内性别：-15-男女电子邮箱：*字体大小321颜色：-16-留言内容：实验结果分析：本次试验我们学习了超级链接，学会了图片链接、书签链接、电子邮件链接、下载文件链接等，掌握了图像映射。还学习了表格的使用，如一些表格的标记、表格属性修饰、设置表格行和单元格的属性以及表格嵌套。我们还掌握了使用框架创建多页面和布局，表单的输入、多行文本输入框和下拉列表框。通过对这些内容的学习，我们对网页设计有了更进一步的认识，其中不足之处是对一些标记代码还不够熟悉，在以后的学习和实验中还要加深对其的掌握。
