网页制作与网站设计实验报告.docx
- 文档编号：8182702
- 上传时间：2023-01-29
- 格式：DOCX
- 页数：21
- 大小：1.06MB
网页制作与网站设计实验报告.docx
《网页制作与网站设计实验报告.docx》由会员分享，可在线阅读，更多相关《网页制作与网站设计实验报告.docx（21页珍藏版）》请在冰豆网上搜索。
网页制作与网站设计实验报告
实验报告
实验项目：
基本HTML命令
实验学时：
2
实验日期：
2012年3月1日
实验要求：
1、掌握常用的HTML语言标记。
2、利用文本编辑器建立HTML文档，制作简单网页。
3、学习将其它格式的文档转换成HTML格式的文档。
实验内容：
答：
1．打开文本编辑器“记事本”中输入如下的HTML代码程序,建立一个具有基本结构标记的HTML文件，然后另存为.htm文件，并在浏览器中运行。
HTML代码如下：
网页效果如下：
2、增加移动字幕和插入图片。
HTML代码如下：
\图\新建文件夹\戚.jpg>
网页效果如下：
实验项目：
超链接的创建
实验学时：
2
实验日期：
2012年3月8日
实验要求：
1、掌握HTML中超链接的原理和应用方法，对同一个网页内部的链接、不同网页之间的链接、文字链接、图像链接的用法进行验证。
2、主控网页，通过超链接可以进入其它网页；不同网页之间可以通过文字或图片链接相互跳转。
实验内容：
答：
1、超链接的概念及类型。
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。
超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。
2、超链接的创建。
HTML代码如下：
\图\新建文件夹\戚4.jpg> 网页效果如下： 实验项目： 表格的制作 实验学时： 2 实验日期： 2012年3月15日 实验要求： 掌握HTML与表格样式相关的功能设置： 表格单元格背景颜色背景图像设置、跨行跨列合并等设置。 实验内容： 答： HTML代码如下：
网页效果如下：
实验项目：
表单的制作
实验学时：
2
实验日期：
2012年3月22日
实验要求：
1、掌握HTML表单的作用及网页中表单域和表单元素的用法。
2、能够应用表格来对表单元素进行布局。
实验内容：
答：
HTML代码如下：
个人信息登记表
姓名：
性别：
登录密码：
个人简介：
请在这儿输入个人基本情况。
网页效果如下：
实验项目：
框架的制作
实验学时：
2
实验日期：
2012年3月29日
实验要求：
1、掌握网页的基本框架。
2、掌握框架、框架集标签的用法。
3、握使用代码生成框架网页。
实验内容：
答：
HTML代码如下：
网页效果如下：
实验项目：
行为的创建
实验学时：
2
实验日期：
2012年4月12日
实验要求：
1、下拉式菜单的设计。
2、为对象设置行为。
3、使用行用控制层，制作行为的动态效果。
实验内容：
答：
步骤如下：
1、通过选择菜单【窗口】里的【行为】命令，或直接按下快捷键shift+F4即可打开【行为】面板。
2、打开【插入】菜单中的【布局】，选择【绘制APDiv】命令，在页面上绘制三个矩形框，可以自行设置其大小，在这里，我选择了高50像素、宽150像素。
3、分别在三个矩形框里添加一个1行1列，宽150像素的表格，这样有利于文字的输入与设置。
然后调整大小，让其与矩形框完全吻合，可以在属性栏里设置其背景色等细节部分。
4、在【院系设置】栏下面，绘制一个APDiv元素，将其大小设置为高150（因为我打算在这里输入三行文字），宽150像素。
接下来，仿照步骤3，添加一个3行1列的表格，具体设置也如上。
5、选中【院系设置】，为其添加行为（动作+事件），当鼠标从上面滑过时，显示下面的矩形框，当鼠标离开时，下面的矩形框隐藏。
具体如下：
6、选中【管理学院】所在矩形框，为其添加如步骤5所示的行为。
实现党鼠标滑过时，显示该矩形框，当鼠标移出时隐藏该矩形框的效果。
具体如下：
7、保存该页面。
并查看、测试效果。
如下：
实验项目：
层的应用
实验学时：
2
实验日期：
2012年4月19日
实验要求：
1、能够根据要求设置层的大小。
2、熟练运用层的位置、层的嵌套以及叠加。
实验内容：
1.在网页head头部定义一个apDiv1的ID样式，在网页主体body元素内插入一个Div元素，该元素应用了ID样式apDiv1。
--
#apDiv1{
position:
absolute;
width:
200px;
height:
115px;
z-index:
1;
left:
130px;
top:
40px;
background-color:
#FF0000;
}
-->
2.表格和层的相互嵌套
--
#apDiv1{
position:
absolute;
width:
99px;
height:
120px;
z-index:
1;
left:
11px;
background-color:
#EEE;
overflow:
auto;
top:
49px;
}
#apDiv2{
position:
absolute;
width:
99px;
height:
120px;
z-index:
2;
left:
111px;
top:
49px;
overflow:
auto;
background-color:
#EEE;
}
#apDiv3{
position:
absolute;
width:
99px;
height:
120px;
z-index:
3;
left:
211px;
top:
48px;
overflow:
auto;
background-color:
#EEE;
}
-->
菜单1-1
菜单1-2
菜单1-3
菜单2-1
菜单2-2
菜单2-3
菜单3-1
菜单3-2
菜单3-3