[セットトップ]タスク3のトピック、スタイル
8134 ワード
【知識点】
Ø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();
}
}
九、右クリックaspx、ブラウザで実行結果を表示します.
【説明】
一、現在、フロントインタフェースとバックグラウンドコードは、一般的に分業されています.
フロント、コードをよく理解する必要はありません.しかし、バックグラウンドプログラマーは、フロントインタフェースの設計が分からなければ、システムを作るには、いつも底気が足りない.
プログラマーはフロントインタフェースの設計に精通することはできませんが、いくつかの基本的な設計原則に従って、比較的簡単ですが規範的なHTML、CSSを作る必要があります.このようにしてこそ、フロントの設計者はこの基礎の上で、さらなる加工をして、もっと美しく、きれいなインタフェースを作ることができます.
二、Web設計の総原則、あるいは核心思想は:内容、構造と表現、行為の分離である.
内容、構造、内容はもちろん、構造ここでは主にDOM構造、すなわちHTMLタグの構造を指し、これらはHTMLファイルに集中している.
動作は、バックグラウンドコードとして理解できます.動的ウェブサイトと静的ウェブサイトの違いは、バックグラウンドで実行されるコードが1つ増えたことであり、このコードは、ASP.NETではDefaultに似ていますaspx.csファイル;
表現は、CSSスタイルシート、HTMLファイル設定スタイルと理解でき、ページ内で行うこともできるし、ラベル内で行うこともできるが、比較的規範的なやり方はスタイル設定をCSSスタイルシートファイルに集中させ、HTMLファイルは設定しない、あるいはできるだけ少なくスタイルを設定することである.このようにするのが最も良いのは“CSS禅意花園”で、みんなはこのウェブサイトを見ることができます:http://www.cssZenGarden.com、とてもよくこの設計の原則に従って、とてもよくこの原則が実現した絶美の境地を示しました.
三、Default.aspxファイルでは主に1つのコントロールRepeaterが使用されていますが、強調したいのは、Repeaterコントロールも1つのクラスであり、クラスであり、私たちがまず明確にしなければならないのはそれが何をしているのかということです.簡単に理解すると、Repeaterコントロールは主に表のデータを表示するものであり、Repeaterの
四、StyleSheet.cssモードテーブルは主にページのレイアウトの問題を解決することであり、ここでは主に最もよく使われるDIV+CSSの2列レイアウトを使用している.DIV+CSSレイアウトには主に2つの方法があり、1つは絶対位置決めの方法であり、1つはフローティングの方法であり、この2つの方法は、博文http://blog.csdn.net/yousuosi/article/details/8199818とhttp://blog.csdn.net/yousuosi/article/details/8075344を参照することができ、その他のスタイル設定技術は、本文はただの参考であり、改善すべき点があり、教えてほしい.
五、Default.aspx.csのコードは、最も基本的なデータベースアクセスコードを採用しており、厳密ではありませんが、基本的に問題を説明しています.表のデータをRepeaterに渡して表示するには2行のコードしか必要ありません.
repCategories.DataSource= dr;
repCategories.DataBind();
六、説明すべき点は、ASP.NETのテーマは、画像、スタイルシート、外観ファイルの3つの内容が含まれているはずです.ここでは、スタイルシートの使用、外観ファイルの使用について簡単に説明します.後で詳しく説明します.