石祖极主题与母版页实验6Word格式.docx
《石祖极主题与母版页实验6Word格式.docx》由会员分享，可在线阅读，更多相关《石祖极主题与母版页实验6Word格式.docx（12页珍藏版）》请在冰豆网上搜索。
信息123-15-实验7-郭海涛.doc,其中.doc是Word文件扩展名。
参考程序
1.准备需要的图片文件。
新建ASP.NET网站，在站点文件夹创建一个“images”的子文件夹，将本次实验需要的图片文件复制到该文件夹中。
添加一个级联样式表文件StyleSheet.css。
2.设计母板页使用的样式表
3.设计母板页
在网站中添加一个MasterPage.master，在“解决方案资源管理器”中，将StyleShee.css拖动到MasterPage.master的<
head>
和<
/head>
之间
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;
left;
#logo
background-image:
url（'
images/logo.jpg'
）;
height:
123px;
#bottom
19px;
padding-top:
27px;
images/bottom.jpg'
border:
vertical-align:
text-bottom;
font-size:
small;
#left
float:
185px;
150px;
background-color:
#4D87D6;
}
#leftcolumn
margin:
10px;
165px;
130px;
#99CCFF;
#lefttable/*legt层中<
table>
元素的样式*/
height:
100%;
165px;
#lefttd/*left层中所有<
td>
元素的样式*/
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"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
headrunat="
server"
<
title>
曙光大学网站<
/title>
linkhref="
StyleSheet.css"
rel="
stylesheet"
/>
asp:
ContentPlaceHolderid="
head"
runat="
/asp:
ContentPlaceHolder>
body>
formid="
form1"
divid="
page"
logo"
/div>
left"
leftcolumn"
tr>
tdstyle="
font-size:
medium;
background-color:
White;
font-family:
楷体;
font-weight:
bold;
color:
#000099;
学校专栏
/td>
/tr>
HyperLinkID="
HyperLink1"
NavigateUrl="
~/Default.aspx"
学校简介<
HyperLink>
HyperLink2"
~/Slight.aspx"
校园风光<
HyperLink3"
~/QA.aspx"
考生问答<
/table>
ContentPlaceHolder1"
bottom"
曙光大学·
版权所有·
2009-2010<
/form>
/body>
/html>
Default.aspx代码：
%@PageTitle="
"
Language="
MasterPageFile="
~/MasterPage.master"
Default.aspx.cs"
_Default"
ContentID="
Content2"
ContentPlaceHolderID="
Runat="
Server"
tableclass="
style1"
tdclass="
style2"
学&
nbsp;
校&
简&
介<
style3"
&
&
学校坐落在历史文化名城，100年前这里是贡院的所在地。
1903、1904年全国会试曾在这里举行，上千年的科举制度在这里画上句号。
20世纪初的欧风美雨和辛亥革命胜利的曙光，孕育催生了这所大学。
1912年，一批仁人先贤在这里创办了留学欧美预备学校，成为当时中国的三大留学培训基地之一。
Content>
Content3"
contentplaceholderid="
styletype="
text/css"
.style1
{
75%;
146px;
}
.style2
23px;
font-weight:
700;
center;
.style3
61px;
/style>
QA.aspx代码：
QA.aspx.cs"
QA"
Content1"
.auto-style1{
150px;
margin-bottom:
0px;
.auto-style2{}
p.p0{
margin:
0pt;
margin-bottom:
0.0001pt;
margin-top:
text-align:
justify;
10.5000pt;
'
TimesNewRoman'
;
span.15{
bold;
.15{
xx-small;
auto-style1"
auto-style2"
pclass="
p0"
style="
spanclass="
15"
mso-spacerun:
yes'
rgb（0,0,0）;
8.0000pt;
宋体'
问：
是否提供入学测试各科目的参考书和辅导材料？
o:
p>
/o:
/span>
/p>
spanstyle="
mso;
答：
参考书可到书店购买；
复习大纲可到华南理工大学网络教育学院主页网络教育招生信息栏目下载。
如何知道参加入学测试后是否被录取？
入学测试两周后考生可以进入华南理工大学网络教育学院网站查询。
应届毕业但尚未拿到毕业证书的大专生能否报读专升本？
如果在当年的二月份前拿到大专毕业证可报读春季的学习；
如果在当年的八月份前拿到大专毕业证可报读秋季的学习<
br/>
dc:
contentshowlink="
Slight.aspx代码：
Slight.aspx.cs"
Slight"
divstyle="
2px;
ImageID="
Image1"
Height="
147px"
ImageUrl="
~/images/1.jpg"
Width="
160px"
/>
nbsp
Image2"
~/images/2.jpg"
Image3"
~/images/3.jpg"
升级会员 