收藏

下载资源 加入VIP,免费下载

实验五页面布局技术的应用.docx

上传人：b****5 文档编号：30050236 上传时间：2023-08-04 格式：DOCX 页数：14 大小：135.53KB

下载 相关 举报

第1页 / 共14页

第2页 / 共14页

第3页 / 共14页

第4页 / 共14页

第5页 / 共14页

点击查看更多>>

下载资源

资源描述

实验五页面布局技术的应用.docx

《实验五页面布局技术的应用.docx》由会员分享，可在线阅读，更多相关《实验五页面布局技术的应用.docx（14页珍藏版）》请在冰豆网上搜索。

实验五页面布局技术的应用

实验报告

课程名称

Web程序设计

实验名称

实验五、页面布局技术的应用

日期

2014.4.14

学生学号

姓名

班级

实验目的：

1．掌握网页布局的基本语法和方法。

2．掌握CSS样式的应用。

3．掌握母板页的创建和使用。

实验条件：

电脑一台、能上网查阅资料。

实验内容与步骤：

1.创建网站“Exp6”

2.采用表格方式进行页面布局，创建如图6-1所示的网页。

3.创建如图6-1所示的网页，页面布局采用DIV+CSS技术，CSS样式存放在独立的样式文件“sheet1.css”中。

图6-1

4.创建如图6-1所示的母版页，白色区域为可编辑区域，然后创建2个内容页，在白色背景区域显示不同内容。

 

源代码

1:

 

图一建立网站

2：

 

图二表格布局

代码如下：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="1.aspx.cs"Inherits="_1"%>

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

.style1

{

font-size:

xx-large;

width:

100%;

border:

1pxsolid#ff0000;

}

center">

100%;text-align:

center">

洛阳理工学院

 

 

          

LabelID="Label1"runat="server"Text="Label">

Label>

 

3：

 

图3div+css

Sheet1.css：

body{

}

#d1

{

font-size:

xx-large;

width:

100%;

height:

270px;

background-color:

#FF9933;

text-align:

center;

font-weight:

bold;

}

#d2

{

background-color:

#6699ff;

width:

250px;

height:

120px;

}

#d3

{

background-color:

#009933;

width:

100%;

height:

200px;

}

网页2．aspx代码如下：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="2.aspx.cs"Inherits="_2"%>

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

洛阳理工学院

LabelID="Label1"runat="server"Text="Label"Font-Size="XX-Large">

Label>

4：

图4母版页

源代码如下：

<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPage.master.cs"Inherits="实验五_exp6_MasterPage"%>

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

ContentPlaceHolderid="head"runat="server">

ContentPlaceHolder>

.style1

{

width:

100%;

}

.style3

{

font-size:

xx-large;

font-weight:

bold;

}

.style4

{

width:

23%;

}

.style5

{

text-align:

center;

}

洛阳理工学院

ContentPlaceHolderID="ContentPlaceHolder1"runat="server">

ContentPlaceHolder>

LabelID="Label1"runat="server"Text="Label">

Label>

第一个页面：

图5第一个页面

代码如下：

<%@PageTitle=""Language="C#"MasterPageFile="~/实º¦Ì验¨¦五?

/exp6/MasterPage.master"AutoEventWireup="true"CodeFile="4.aspx.cs"Inherits="实验五_exp6_4"%>

ContentID="Content1"ContentPlaceHolderID="head"Runat="Server">

Content>

ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

第一个页面

Content>

第二个页面：

图6第二个页面

代码如下：

<%@PageTitle=""Language="C#"MasterPageFile="~/实º¦Ì验¨¦五?

/exp6/MasterPage.master"AutoEventWireup="true"CodeFile="5.aspx.cs"Inherits="实º¦Ì验¨¦五?

_exp6_5"%>

ContentID="Content1"ContentPlaceHolderID="head"Runat="Server">

Content>

ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

第二个页面

Content>

注意：

在页面中添加label控件，id为label1。

并在页面的cs文件中添加以下代码，就可以实现显示当前系统时间：

protectedvoidPage_Load（objectsender,EventArgse）

{

DateTimeda=DateTime.Now;

stringda1=da.ToLongDateString（）+""+da.ToLongTimeString（）;

Label1.Text=da1;

实验总结（结论或问题分析）：

在本次实验中，我遇到了一些难题，例如如何使用表格布局，如何使用dic和css布局，怎样设置页面的属性，怎样搭配好颜色等等一系列笑问题，虽然老师讲课的时候也提过，但是到了自己亲身操作的时候才感觉到事实并非想自己想象的那样简单，最后，经过老师的帮助，我终于顺利的完成了本次实验。

也掌握到了不少制作网页的技巧。

实验成绩

任课教师签名

郭俊恩

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心