[置顶] 任务三 主题、样式
【知识点】
Ø Web设计的核心思想
Ø 添加主题
Ø 添加样式表
Ø 窗体文件中应用主题
【操作步骤】
一、右击网站Web→添加ASP.NET文件夹→主题；添加主题文件夹
二、重命名主题文件夹名称为Default
三、右击主题文件夹Default→添加新项→样式表，添加样式表StyleSheet.css；
四、右击主题文件夹Default→新建文件夹→Images，将所需图片粘贴到该文件夹中；
五、Default.aspx中，添加StylesheetTheme="Default"；
六、Default.aspx中的内容、结构代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" StylesheetTheme="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="header">
<div id="search">
<asp:TextBox ID="txtSearch" runat="server" CssClass="searchbox"></asp:TextBox>
<asp:ImageButton ID="btnSearch" runat="server" CausesValidation="false" CssClass="paddingSearchicon" />
<asp:LoginStatus ID="lgnStatus" runat="server" CssClass="searchlink" LogoutText="注 销"/>
</div>
</div>
<div id="container">
<div id="content">
<h4 class="welcome">
欢迎光临肯德基订餐网站</h4>
<h4 class="intro">
打开菜单，会有精彩的发现，各种美味在向您招手等待着您的品尝......</h4>
<h4 class="select">
您的选择是：</h4>
<div id="nav">
<asp:Repeater ID="repCategories" runat="server">
<HeaderTemplate>
<ul id="nav">
</HeaderTemplate>
<ItemTemplate>
<li class="navigationDefault"><%# Eval("Name") %></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
<p class="copyright">版权所有©2012,西园工作室.欢迎转载,转载请注明出处.<span>QQ群:13033480</span></p>
</div>
<div id="side">
</div>
</div>
</div>
</form>
</body>
</html>
七、StyleSheet.css中的表现代码如下：
*{ margin:0; padding:0;}
body
{
font-family: 宋体, Arial, Helvetica, sans-serif;
}
a:visited { color: #333;text-decoration: none;}
a:hover {color: #1639A9;text-decoration: underline;}
a:link {color: #333;text-decoration: none;}
ul{
list-style:none;
}
#wrap
{
width:600px;
margin:0 auto;
}
#header{
height: 119px;
background: url(Images/HarlandDavidSanders.jpg) no-repeat;
}
#search{
float: right;
background: url(Images/bg_search.jpg) top left repeat-x;
padding-top: 30px;
color: #404040;
}
.searchbox{
float: left;
width: 130px;
height: 14px;
}
.paddingSearchicon{
float: left;
width: 16px;
height:16px;
margin-left: 11px;
margin-right:34px;
background: url(Images/button_search.gif) no-repeat;
cursor: pointer;
}
.searchlink{
float: left;
width: 50px;
height: 16px;
text-align:right;
}
#container{
position: relative;
margin-top:6px;
}
#content{
margin-right:175px;
}
.welcome{
color: #FFFFFF;
font-weight: bold;
height: 22px;
background-color: #9D2C40;
line-height:22px;
padding-left:3px;
}
.intro{
color: #555555;
font-weight: bold;
padding: 20px 0 20px 20px;
line-height: 20px;
}
.select{
color: #98A839;
font-weight: bold;
line-height:25px;
padding-left: 20px;
}
#nav{
padding:10px 0 10px 10px;
}
.navigationDefault{
color: #333;
font-weight: bold;
vertical-align:top;
background-image: url(Images/dotten-line.gif);
background-repeat: repeat-x;
background-position: bottom;
line-height: 1.8em;
}
.copyright{
position:relative;
color: #FFF;
font-size: 0.8em;
background-color: #CC0000;
padding-left:3px;
height:22px;
line-height: 22px;
}
.copyright span{
position:absolute;
right:0;
bottom:0;
padding-right:3px;
}
#side{
position:absolute;
right:0;
bottom:-10px;
width: 241px;
height: 300px;
background: url(Images/main_logo.gif) no-repeat;
}
八、Default.aspx.cs中的行为代码如下：
using System;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string connectionString = "Server=.\\SQLEXPRESS;Database=NetShop;Trusted_Connection=SSPI";
string cmdText = "SELECT * FROM Category";
SqlConnection conn = new SqlConnection();
conn.ConnectionString = connectionString;
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandType = CommandType.Text;
cmd.CommandText = cmdText;
conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
repCategories.DataSource = dr;
repCategories.DataBind();
dr.Close();
conn.Close();
}
}
九、右击Default.aspx，在浏览器中查看运行结果。
【说明】
一、现在，前台界面和后台代码，一般是分工的。
前台，不需要很懂代码；但，后台程序员，如果不懂前台界面的设计，做系统，总是会有些底气不足。
程序员不可能很精通前台界面的设计，但，遵循一些基本的设计原则，做出一个比较简单但规范的HTML、CSS还是必须的，只有这样，前台设计人员才好在此基础上，做进一步的加工，做出更精美、漂亮的界面。
二、Web设计总的原则，或者说是核心思想是：内容、结构与表现、行为的分离。
内容、结构，内容就不用说了，结构这里主要是指DOM结构，也就是HTML标签的结构，这些，都集中在HTML文件中；
行为，可以理解为后台代码。动态网站与静态网站的区别，就是多了一个在后台执行的代码，这个代码，比较规范的做法是单独放在一个独立的文件中，这在ASP.NET中就是类似Default.aspx.cs文件；
表现，可以理解为CSS样式表，HTML文件设置样式，可以在页内进行，甚至可以在标签内进行，但，比较规范的做法是把样式设置集中到CSS样式表文件中，HTML文件不设置或者说尽量少地设置样式。这样做得最好的是“CSS禅意花园”，大家可以去看看这个网站：http://www.cssZenGarden.com，非常好地遵循了这一设计原则，也非常好地展现了这个原则所实现的绝美境界。
三、Default.aspx文件中主要使用了一个控件Repeater，要强调的一点是，Repeater控件也是一个类，是类，我们首先要明确的就是它是干什么的。简单理解，Repeater控件主要是显示表格数据的，当在Repeater的<ItemTemplate>模板中绑定表格中的某一列，例如<%# Eval("Name")%>，Repeater就会重复地生成、显示这一列中每一行的数据，有多少行，就重复地显示多少行，这，应该也是Repeater的名字的由来吧。
四、StyleSheet.css模式表首要的是解决页面的布局问题，这里主要使用了最常用的DIV+CSS两列布局，DIV+CSS布局主要有两种方法，一种是绝对定位的方法，一种是浮动的方法，这两种方法，可参考博文http://blog.csdn.net/yousuosi/article/details/8199818和http://blog.csdn.net/yousuosi/article/details/8075344，其它的样式设置技术，本文只是一个参考，有需要改进的地方，还望不吝赐教。
五、Default.aspx.cs中的代码，仍然采用的是最基本的数据库访问代码，不严谨，但基本说明了问题，把表格数据交给Repeater去显示只需要两行代码：
repCategories.DataSource= dr;
repCategories.DataBind();
六、需要说明的一点是，ASP.NET的主题，应该包括三个内容，图片、样式表、外观文件，这里，只简单介绍了样式表的使用，外观文件的使用，在后面会有详细介绍。
版权所有©2012,西园工作室.欢迎转载,转载请注明出处.源代码：QQ群共享13033480(电子商务系统源代码)
posted on 2012-12-04 13:30 WestGarden 阅读(430) 评论(0) 编辑 收藏 举报
