石祖极主题与母版页实验6.docx
《石祖极主题与母版页实验6.docx》由会员分享，可在线阅读，更多相关《石祖极主题与母版页实验6.docx（12页珍藏版）》请在冰豆网上搜索。
石祖极主题与母版页实验6
实验6主题与母版页
成绩
专业班级数学121学号201212010129姓名石祖极报告日期2014.11.30.
实验类型：
●验证性实验○综合性实验○设计性实验
实验目的：
通过上机操作进一步理解在VisualStudio环境中创建、编辑和引用母版页、内容页的基本步骤；理解母版页和内容页之间的关系；综合运用母版页、内容页和CSS+DIV布局技术设计出实用的、具有统一风格的网站页面体系。
实验要求：
创建一个网站，要求使用母版页技术控制站内其他网页的外观风格，母版页的设计效果如图3-1所示。
引用了母版页后内容页的设计效果如图3-2所示。
图3-1母版页的设计效果
图3-2引用母版页后的内容页效果
实验步骤提示
0.准备图片
1.设计母版页（设计步骤见实验指导书第23页）
2.设计母版页使用的样式表（设计步骤见实验指导书第24页）
3.设计内容页及其程序代码
实验报告：
根据实验情况和结果（网站页面运行调试情况、通过超链接实现页面跳转情况、最终各个页面运行效果情况）撰写并递交实验报告。
实验总结:
学会了...;掌握了...;训练了...;发现了...;实验中...有待提高。
电子报告word文件命名规则：
专业班级－学号后两位－实验X－姓名.doc,如信息123班学号为201212030315的郭海涛同学实验7报告word文件命名则应是：
信息123-15-实验7-郭海涛.doc,其中.doc是Word文件扩展名。
参考程序
1.准备需要的图片文件。
新建ASP.NET网站，在站点文件夹创建一个“images”的子文件夹，将本次实验需要的图片文件复制到该文件夹中。
添加一个级联样式表文件StyleSheet.css。
2.设计母板页使用的样式表
3.设计母板页
在网站中添加一个MasterPage.master，在“解决方案资源管理器”中，将StyleShee.css拖动到MasterPage.master的
和之间
MasterPage.master界面：
4.设计内容页
“解决方案资源管理器”中删除系统创建的默认Default.aspx页面。
在“添加新项”中选择“Web窗体”模版。
将文件命名为Default.aspx，选中“选择母板页”复选框，单击“添加”按钮，选择之前创建的MasterPage.master为网页的母板。
切换到Default.aspx的设计视图，在Content2空间中添加一个2行1列的表格，向其中录入需要的文本信息。
用同等方法设计内容页QA.aspx和Slight.aspx。
Default.aspx界面：
QA.aspx界面：
Slight.aspx界面：
5.运行界面
实验总结：
通过本次上机实验，我学会了在VisualStudio环境中创建、编辑和引用母版页、内容页的基本步骤；理解了母版页和内容页之间的关系；掌握了通过综合运用母版页、内容页和CSS+DIV布局技术设计出实用的、具有统一风格的网站页面体系。
但在设计过程中，由于没有先建立StyleSheet.css样式表就对母板页进行调试，结果什么也出不来，后来进行添加，最终本次实验经过多次调试和修改使得实验运行成功。
今后我会认真理解代码含义。
程序代码：
StyleSheet.css的代码如下：
body
{
text-align:
center;
}
#page{/*包含整个页面的层*/
width:
750px;border:
solid1pxSilver;
text-align:
left;
}
#logo
{
background-image:
url（'images/logo.jpg'）;
text-align:
center;
width:
750px;height:
123px;border:
solid1pxSilver;
}
#bottom
{
width:
750px;height:
19px;
padding-top:
27px;
background-image:
url（'images/bottom.jpg'）;
border:
solid1pxSilver;
text-align:
center;
vertical-align:
text-bottom;
font-size:
small;
}
#left
{
float:
left;
width:
185px;height:
150px;
background-color:
#4D87D6;
}
#leftcolumn
{
margin:
10px;
width:
165px;height:
130px;
background-color:
#99CCFF;
}
#lefttable/*legt层中
元素的样式*/{
height:
100%;
width:
165px;
}
#lefttd/*left层中所有
元素的样式*/ { text-align: center; font-size: small; } MasterPage.master的XHTML代码如下： <%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPage.master.cs"Inherits="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>
medium;background-color: White; font-family: 楷体;font-weight: bold; color: #000099;">学校专栏
|
HyperLinkID="HyperLink1" runat="server"NavigateUrl="~/Default.aspx"> 学校简介
HyperLink> | HyperLinkID="HyperLink2" runat="server"NavigateUrl="~/Slight.aspx"> 校园风光
HyperLink> | HyperLinkID="HyperLink3" runat="server"NavigateUrl="~/QA.aspx"> 考生问答
HyperLink> |
ContentPlaceHolderid="ContentPlaceHolder1"runat="server">
ContentPlaceHolder> 曙光大学·版权所有·2009-2010 |