WEB页面设计.docx
- 文档编号:3186265
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:17
- 大小:280.30KB
WEB页面设计.docx
《WEB页面设计.docx》由会员分享,可在线阅读,更多相关《WEB页面设计.docx(17页珍藏版)》请在冰点文库上搜索。
WEB页面设计
淮海工学院计算机科学系
实验报告书
课程名:
WEB工程
题目:
WEB页面设计
班级:
软件081
学号:
*********
姓名:
XX
一、实验目的:
掌握使用母版页、主题、导航控件进行网站页面布局、外观与导航设计的方法。
二、实验要求:
打开实验6开始项目,为公文管理系统现有的注册页面、公文列表页面实现功能导航、主题选择。
界面及功能要求:
页面1:
default.aspx:
页面中包括用户名输入框、密码输入框、登录按钮、注册按钮。
当用户登录时,要求用户名输入框为必填项。
但是当用户点注册按钮时,不要求用户名输入框必填。
在页面上方添加系统LOGO图片,在页面左部添加“新闻”、“公告”栏目。
“新闻”栏目下有“国际新闻”、“国内新闻”两个子栏目。
“公告”栏目下有“以往公告”子栏目。
在页面上方添加主题选择单选按钮(一是绿色主题,默认为绿色主题,另一是红色主题)。
要求其它页面的按钮控件在不做任何变动的情况下,在用户选绿色主题时,文字显示为绿色,在用户选红色主题时,文显示为红色)
页面2:
Register.aspx:
页面中包括用户名、密码及重复密码输入框,
性别(男、女单选按钮)
地址:
省份下拉列表(数据包括:
江苏、山东),市县下拉列表(江苏省内包括:
连云港、南京,山东包括:
青岛)。
注册按钮。
当用户填入注册信息后,点“注册”按钮时,用户名不应该在已注册的用户姓名中出现过。
(提示:
用自定义验证控件实现)
密码及重复密码输入框中的内容应该一致。
且两个输入框为必填项。
页面布局与首页面相同(使用同一个母版页)。
页面3:
Doclist.aspx
在页面上添加下图所示的控件:
GridView控件,数据源为AccessDataSource1
DetailsView控件,数据源为AccessDataSource2
Button控件,其Text属性为“添加新公文”
页面打开后,GridView控件中列出现有公文信息。
点击Button后,可以通过DetailsView控件输入新公文信息并存储到数据库。
页面布局与首页面相同(使用同一个母版页)。
三、实验步骤:
1、创建母版页
在页面上文添加图片控件Image。
图片为~/images/logo.jpg
2、在母版页中实现导航。
在网站中新添“站点地图”,修改该文件为:
添加menu控件,数据源为“站点地图”,显示菜单层数为2。
修改web.sitemap中的各项的url属性,使其对应相应的页面。
设计完成的母版页为:
3、修改现有页面,指定其母版页
首先修改default.aspx页面。
打开default.aspx的源码视图,将第一行:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
添加MasterPageFile="~/MasterPage.master"变成:
<%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
然后从第二行开始,删除html,body,form标签,保留form内的全部内容。
在保留下的内容前后,用下的标签包围:
ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
Content>
修改完成后的default.aspx源看起来如下图所示:
按以上方法修改Regster.aspx,Doclist.aspx页页。
4、添加新闻页面及公告页面(指定其母版页)
新建newslist.aspx页面,选用母版页为masterpage.master
5、添加主题(默认主题、红色主题)。
添加皮肤文件Button.skin到app_theme/default文件夹中。
在任意一个aspx中的页面视图中添加一个按钮控件,右击该控件选“样式”,设置样式中的字体颜色为Green。
切换到源码视图,剪切按钮控件的源码,粘贴到button.skin文件中,然后删除控件的ID属性及其值,Text属性及其值。
复制default下的button.skin到red文件夹中。
并修改文件中的样式定义,将color设为red。
6、指定主题
在每个页面的代码页添加如下方法:
protectedvoidPage_PreInit()
{
if(Session["themename"]!
=null)
this.Theme=Session["themename"].ToString();
else
this.Theme="default";
}
在母版页上方添加两个单选按钮(groupname相同)。
为每个按钮的CheckedChanged事件及页面的Page_Load事件添加代码:
四、实验源程序
1、站点地图
xmlversion="1.0"encoding="utf-8"?
>
type=1"title="国内新闻"description=""/> type=2"title="国际新闻"description=""/> 2、母版页: MasterPage.master <%@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"> ImageID="Image1"runat="server"Height="56px"ImageUrl="~/images/LOGO.JPG" Width="303px"/> RadioButtonID="RadioButton1"runat="server"AutoPostBack="True"ForeColor="#00C000" GroupName="theme"OnCheckedChanged="RadioButton1_CheckedChanged"Text="绿色"/> RadioButtonID="RadioButton2"runat="server"AutoPostBack="True"ForeColor="Red" GroupName="theme"OnCheckedChanged="RadioButton2_CheckedChanged"Text="红色"/> MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"Orientation="Horizontal" StaticDisplayLevels="2"> Menu> SiteMapDataSourceID="SiteMapDataSource1"runat="server"/> ContentPlaceHolderID="ContentPlaceHolder1"runat="server"> ContentPlaceHolder>