• [置顶] 任务三 主题、样式


    【知识点】

    Ø  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
    {
        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;
         130px;
        height: 14px;
    }
    .paddingSearchicon{
        float: left;
         16px;
        height:16px;
        margin-left: 11px;
        margin-right:34px;
        background: url(Images/button_search.gif) no-repeat;
        cursor: pointer;
    }
    .searchlink{
        float: left;
         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;
         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,在浏览器中查看运行结果。

    【说明】

    一、现在,前台界面和后台代码,一般是分工的。

    前台,不需要很懂代码;但,后台程序员,如果不懂前台界面的设计,做系统,总是会有些底气不足。

    程序员不可能很精通前台界面的设计,但,遵循一些基本的设计原则,做出一个比较简单但规范的HTMLCSS还是必须的,只有这样,前台设计人员才好在此基础上,做进一步的加工,做出更精美、漂亮的界面。

    二、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/8199818http://blog.csdn.net/yousuosi/article/details/8075344,其它的样式设置技术,本文只是一个参考,有需要改进的地方,还望不吝赐教。

    五、Default.aspx.cs中的代码,仍然采用的是最基本的数据库访问代码,不严谨,但基本说明了问题,把表格数据交给Repeater去显示只需要两行代码:

    repCategories.DataSource= dr;

    repCategories.DataBind();

    六、需要说明的一点是,ASP.NET的主题,应该包括三个内容,图片、样式表、外观文件,这里,只简单介绍了样式表的使用,外观文件的使用,在后面会有详细介绍。

    版权所有©2012,西园工作室.欢迎转载,转载请注明出处.源代码:QQ群共享13033480(电子商务系统源代码)

  • 相关阅读:
    Python基础-编码转化
    Python基础-简要说明
    Python基础-流程控制
    Python基础-运算符
    Python基础-输入输出
    博客更新第一天 愿在前端路上 坚定不移 多累积
    bower解决js库的依赖管理
    NPM下载出错 No compatible version found
    jquery-1.10.2 获取checkbox的checked属性总是undefined
    HTML中的下拉列表 select
  • 原文地址:https://www.cnblogs.com/WestGarden/p/3138310.html
Copyright © 2020-2023  润新知