[置顶] 任务三 主题、样式
【知識(shí)點(diǎn)】
?? Web設(shè)計(jì)的核心思想
?? 添加主題
?? 添加樣式表
?? 窗體文件中應(yīng)用主題
?
【操作步驟】
一、右擊網(wǎng)站Web→添加ASP.NET文件夾→主題；添加主題文件夾
二、重命名主題文件夾名稱為Default
三、右擊主題文件夾Default→添加新項(xiàng)→樣式表，添加樣式表StyleSheet.css；
四、右擊主題文件夾Default→新建文件夾→Images，將所需圖片粘貼到該文件夾中；
五、Default.aspx中，添加StylesheetTheme="Default"；
六、Default.aspx中的內(nèi)容、結(jié)構(gòu)代碼如下：
<%@ 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>無標(biāo)題頁(yè)</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">歡迎光臨肯德基訂餐網(wǎng)站</h4><h4 class="intro">打開菜單，會(huì)有精彩的發(fā)現(xiàn)，各種美味在向您招手等待著您的品嘗......</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">版權(quán)所有?2012,西園工作室.歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明出處.<span>QQ群:13033480</span></p></div><div id="side"></div></div></div></form> </body> </html>
?
七、StyleSheet.css中的表現(xiàn)代碼如下：
*{ 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，在瀏覽器中查看運(yùn)行結(jié)果。
【說明】
一、現(xiàn)在，前臺(tái)界面和后臺(tái)代碼，一般是分工的。
前臺(tái)，不需要很懂代碼；但，后臺(tái)程序員，如果不懂前臺(tái)界面的設(shè)計(jì)，做系統(tǒng)，總是會(huì)有些底氣不足。
程序員不可能很精通前臺(tái)界面的設(shè)計(jì)，但，遵循一些基本的設(shè)計(jì)原則，做出一個(gè)比較簡(jiǎn)單但規(guī)范的HTML、CSS還是必須的，只有這樣，前臺(tái)設(shè)計(jì)人員才好在此基礎(chǔ)上，做進(jìn)一步的加工，做出更精美、漂亮的界面。
二、Web設(shè)計(jì)總的原則，或者說是核心思想是：內(nèi)容、結(jié)構(gòu)與表現(xiàn)、行為的分離。
內(nèi)容、結(jié)構(gòu)，內(nèi)容就不用說了，結(jié)構(gòu)這里主要是指DOM結(jié)構(gòu)，也就是HTML標(biāo)簽的結(jié)構(gòu)，這些，都集中在HTML文件中；
行為，可以理解為后臺(tái)代碼。動(dòng)態(tài)網(wǎng)站與靜態(tài)網(wǎng)站的區(qū)別，就是多了一個(gè)在后臺(tái)執(zhí)行的代碼，這個(gè)代碼，比較規(guī)范的做法是單獨(dú)放在一個(gè)獨(dú)立的文件中，這在ASP.NET中就是類似Default.aspx.cs文件；
表現(xiàn)，可以理解為CSS樣式表，HTML文件設(shè)置樣式，可以在頁(yè)內(nèi)進(jìn)行，甚至可以在標(biāo)簽內(nèi)進(jìn)行，但，比較規(guī)范的做法是把樣式設(shè)置集中到CSS樣式表文件中，HTML文件不設(shè)置或者說盡量少地設(shè)置樣式。這樣做得最好的是“CSS禪意花園”，大家可以去看看這個(gè)網(wǎng)站：http://www.cssZenGarden.com，非常好地遵循了這一設(shè)計(jì)原則，也非常好地展現(xiàn)了這個(gè)原則所實(shí)現(xiàn)的絕美境界。
三、Default.aspx文件中主要使用了一個(gè)控件Repeater，要強(qiáng)調(diào)的一點(diǎn)是，Repeater控件也是一個(gè)類，是類，我們首先要明確的就是它是干什么的。簡(jiǎn)單理解，Repeater控件主要是顯示表格數(shù)據(jù)的，當(dāng)在Repeater的<ItemTemplate>模板中綁定表格中的某一列，例如<%# Eval("Name")%>，Repeater就會(huì)重復(fù)地生成、顯示這一列中每一行的數(shù)據(jù)，有多少行，就重復(fù)地顯示多少行，這，應(yīng)該也是Repeater的名字的由來吧。
四、StyleSheet.css模式表首要的是解決頁(yè)面的布局問題，這里主要使用了最常用的DIV+CSS兩列布局，DIV+CSS布局主要有兩種方法，一種是絕對(duì)定位的方法，一種是浮動(dòng)的方法，這兩種方法，可參考博文http://blog.csdn.net/yousuosi/article/details/8199818和http://blog.csdn.net/yousuosi/article/details/8075344，其它的樣式設(shè)置技術(shù)，本文只是一個(gè)參考，有需要改進(jìn)的地方，還望不吝賜教。
五、Default.aspx.cs中的代碼，仍然采用的是最基本的數(shù)據(jù)庫(kù)訪問代碼，不嚴(yán)謹(jǐn)，但基本說明了問題，把表格數(shù)據(jù)交給Repeater去顯示只需要兩行代碼：
repCategories.DataSource= dr;
repCategories.DataBind();
六、需要說明的一點(diǎn)是，ASP.NET的主題，應(yīng)該包括三個(gè)內(nèi)容，圖片、樣式表、外觀文件，這里，只簡(jiǎn)單介紹了樣式表的使用，外觀文件的使用，在后面會(huì)有詳細(xì)介紹。
?
版權(quán)所有?2012,西園工作室.歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明出處.源代碼：QQ群共享13033480(電子商務(wù)系統(tǒng)源代碼)
轉(zhuǎn)載于:https://www.cnblogs.com/WestGarden/archive/2012/12/04/3138310.html
總結(jié)
以上是生活随笔為你收集整理的[置顶] 任务三 主题、样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .net 动软代码生成器
- 下一篇： LNMP与CA认证的童话故事