淮海工
计算机工程 实验报告书
课 程 名: 题 班 学 姓
《.NET环境与程序设计》
实验三 ASP.NET中的CSS、主题和母版页
目: 级: 号: 名:
《 .NET环境与程序设计 》实验报告
- 1 -
一、 实验目的
1、 通过实验,进一步掌握在ASP.NET中应用外观(皮肤)文件、样式表(,css)文件对网页和控 制的外观进行修饰美化的方法。 2、 通过实验,进一步理解掌握在ASP.NET中利用,MasterPage(母版页)来同意各个网页布局和风格 的方法
二、 实验内容
1、 在ASP_Themes文件夹创建若干个主题及shin文件、css文件,并在新建的.aspx页面中利用创 建好的主题,来控制页面和控件的外观; 2、 创建一个母版页,保存后,在创建若干个与母版页进行关联的内容页面。
三、 实验步骤
1、 新建一个网站 2、 练习主题创建和应用 3、 练习母版页的创建和应用
四、 实验结果
1、主题的创建及应用 (1)、右击网站名,在弹出的快捷菜单中选择【添加ASP.
NET文件夹】|【主题】命令,将创建名 为“App_Themes”的文件和名为“主题”的子文件夹。将“主题”文件夹重命名为“Theme1”. (2)、右击“Theme1”文件夹,从弹出的快捷菜单中选择【添加新项】命令,添加一个新的外观 文件,在文件中添加如下代码:
xml:namespace prefix = asp />
BackColor="red" /> BackColor="blue" />
(3)、保存外观文件 (4)、新建一个网页文件,切换到【设计】视图,添加控件 (5)、在【属性】窗口中选择“Document”元素,设置“Theme”属性的值为“Theme1”,切换到【源】 视图中,代码如下所示:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" Theme="Theme1" %>
《 .NET环境与程序设计 》实验报告 > - 2 -
(6)保存文件,按【Ctrl+F5】组合键执行页面,查看设置效果,如图1、2所示:
图1.设置外观后
《 .NET环境与
程序设计 》实验
报告 - 3 -
图2.设置外观输入信息后
(7)、在主题“Theme1”的文件夹中,再添加一个样式文件,文件中代码如下
#left { border: thick double #FF00FF; background-position: center; background-color: #00FFFF; }
(8)在原来网页里“Document”中属性”StyleSheetTheme“的值为”Theme1“,可以看到引入样式 表文件后的最终显示效果。如图3所示 网页:
《 .NET环境与程序设计 》实验报告 图3.引入皮肤和样式后的效果
- 4 -
2、母版的创建和应用 (1)、右击网站名,在弹出的快捷菜单中选择【添加新项】命令,从弹出的对话中选择【母版页】 选项。点击【添加】按钮即会在【源】视图中打开新建的母版页。 (2)、模板里的代码如下:
<%@ Master Language="
VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <
HTML XMLNS="W3.ORG 1999 xhtml?>
(3)、新建网页,选中【选择母版页】复选框,单击【添加】按钮,选择母版,然后单击【确定】 按钮。 (4)、页面代码如下所示:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="无标题页" %>
《 .NET环境与程序设计 》实验报告
- 5 -
(5)、按【Ctrl+F5】组合键运行并测试该站点,效果如图4所示:
图4.网页效果
五、 结果分析与实验体会
通过本次实验我学会了在网页中应用主题,其中涉及到的是皮肤和样式表,同时学会了母版的创建 及应用,原来只是调试课本上的东西,这次通过自己手动将网页变得多样,对这门课有了更大的兴 趣,以后会经常自己调试、创建网页。