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

【知识点】

Ø  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,在浏览器中查看运行结果。

【说明】

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

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

程序员不可能很精通前台界面的设计,但,遵循一些基本的设计原则,做出一个比较简单但规范的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(电子商务系统源代码)

转载于:https://www.cnblogs.com/WestGarden/archive/2012/12/04/3138310.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/548213.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【FPGA】Verilog 实践:优先级编码器 | Priority encoder

0x00 优先级编码器&#xff08;Priority encoder&#xff09; "能将多个二进制输入压缩成更少数目输出的电路或算法的编码器" 优先级编码器是一种编码器&#xff0c;它考虑了两个或更多输入位同时变为 1 但没有收到输入的情况。当输入进来时&#xff0c;优先级编码…

智能指针分配动态数组

auto ptr_arr std::make_shared<int[]>(); std::unique_ptr<int[]> up1(new int[10]()); //C14以后语法 auto up2 std::make_unique<A[]>(3); auto sp3(std::shared_ptr<A[]>(new A[3])); //#include <boost/make_shared.hpp> auto b_ptr_…

php基础语法知识笔记(一)

共享一份我自己学习php基础语法知识的笔记&#xff0c;这是第一弹&#xff0c;明天共享第二弹。 1.判断php短标记<??>是否适用&#xff0c;查看php配置文件php.ini中的"short_open_tag On"2.官方的标记<?php?> &#xff0c; <script language&q…

php __FILE__和$_SERVER['SCRIPT_FILENAME']区别

假设有a.php和b.php2个文件&#xff0c;分别位于E:/wamp/www/Text/ a.php echo $_SERVER[SCRIPT_FILENAME].<br/>; echo __FILE__; 执行a.php 得到的是 E:/wamp/www/Text/a.php ($_SERVER[SCRIPT_FILENAME]) E:\wamp\www\Text\a.php (__FILE__) b.php require a.…

boost asio io_context 没任务不退出

boost::asio::io_context ioc; auto work(boost::asio::make_work_guard(ioc)); //没用任务时&#xff0c;run 不退出

git中reset与revert的区别

1:最本质的区别:reset 回滚后&#xff0c;不会生成任何commit点(也就是提交哈希值),而revert回滚后回生成commit点 2:reset 命令参数包括&#xff1a;soft hard mixed 三个回滚方式

论文总结2

基于内容的网页特征提取 2001 使用专业网络爬虫获取网页&#xff0c;巨量网页数据保存在分布式的LDAP (轻量级目录服务协议)目录服务器中, 通过轻量级目录服务协议维护管理。分词词典通过提取过滤很多相关领域网页生成&#xff0c;手动更新。特征提取&#xff1a;正文分词然后计…

安裝jpeg-6b png error错误解决方法

默认安裝jpeg-6b shell> wget ftp://ftp.uu.net/graphics/jpeg/jpegsrc.v6b.tar.gz tar zxvf jpegsrc.v6b.tar.gz cd jpeg-6b ./configure –-prefix/usr/local/jpeg6 –enable-shared –enable-static make make install 指定安装目录方式安装jpeg-6b 如果你选择默认安装…

c++11特性move和forward区别

1:move属于强转,左值变右值 2:forward左值变左值&#xff0c;右值变右值(不是强转)

碎语

悠悠大道&#xff0c;莫衷一是。也许&#xff0c;看到的不是真相&#xff0c;听到的&#xff0c;反而是实言。匆匆的人流&#xff0c;滚滚的气息。得不到的一直在强求&#xff0c;在身边的故意不理睬。千篇一律的重复着早中晚&#xff0c;行尸走肉地上演着你我他。了却不断的红…

linux 进程重启脚本

pid(ps aux | grep 进程名 | grep -v grep | awk {print $2}) if [ ! -n "$pid" ] then echo 进程名 process not found. else kill -9 $pid echo 进程名 process[$pid] be killed. fi chmod 777 ./进程名 rm -rf *.log nohup ./进程名 > log.log 2>…

MongoDB与其他数据库的对比

本文转载自&#xff1a;http://book.2cto.com/201211/7897.html 市面上的数据库数量成爆炸式增长&#xff0c;要在它们之间进行权衡是很困难的。幸运的是&#xff0c;它们之中的大多数数据库都能归在几个分类里。本节中&#xff0c;我会描述简单及复杂的键值存储、关系型数据库…

【学习生活杂谈】学习记录

hadoop学习汇总&#xff1a;Hadoop官方的中文文档http://hadoop.apache.org/common/docsHadoop学习资料 -- 这里面总结了很多的东西&#xff0c;值得一一细看http://cloud21.javaeye.com/blog/607175关于Hadoop的两本书 -- 有电子书下载http://caibinbupt.javaeye.com/blog/418…

hadoop和kerberos的整合总结

由于手上负责的hadoop集群需要对公司外部提供服务&#xff0c;所有会有多个部门访问我们的hadoop集群&#xff0c;这个就涉及到了hadoop的安全性。 而hadoop的安全性是很弱的&#xff0c;只提供类似linux文件系统的帐户权限验证&#xff0c;而且可以通过简单的手段冒充用户名&a…

linux系统用户迁移

今天登陆上来发现好久都没有写博客了。 刚刚做了一个linux用户迁移&#xff0c;记录下&#xff0c;以后用到的话&#xff0c;查起来方便。希望对大家有帮助。 环境&#xff1a;我们原先的一台服务器由于过保所以替换新的服务器&#xff0c;但是由于用户数较多&#xff0c;如果一…

vm虚拟远程部署windows驱动

注意打印机是用com1端口&#xff0c;应该提前删除 bcdedit /debug on bcdedit /dbgsettings serial debugport:1 baudrate:115200 bcdedit /dbgsettings 以下两条是配置调式环境系统用 bcdedit /set testsigning on bcdedit /set loadoptions DDISABLE_INTEGRITY_CHECKS 在…

Android:SharedPreferences详解+示例

为什么80%的码农都做不了架构师&#xff1f;>>> 一、简介SharedPreferences是一种轻型的数据存储方式&#xff0c;它的本质是基于XML文件存储key-value键值对数据&#xff0c;通常用来存储一些简单的配置信息。 二、存储位置 在/data/data/<包名>/shared_pre…

类模板的分离式编译错误解决

声明&#xff1a;不谈逻辑是否能被执行成功&#xff0c;就谈编译是否成功. vs的错误: linux下g的错误: 以上错误&#xff0c;改怎么解决呢&#xff1f; 方法1&#xff1a;把实现代码和头文件写在一起 方法2&#xff1a;在.cpp文件中加入模板声明

6421B Lab5 路由和远程访问的配置与故障排除

共2个实验&#xff1a; 实验L5A&#xff1a;配置和管理网络访问 实验L5B&#xff1a;实现DirectAccess&#xff08;略&#xff09; 实验L5A&#xff1a;配置和管理网络访问 共有3个练习 练习1&#xff1a;实现***远程访问解决方案。 练习2&#xff1a;配置一个自定义的网络策略…

c++导出标准win32格式的dll

__declspec(dllexport) unsigned long long __stdcall 函数名(参数列表); 恭喜您&#xff0c;你导出来之后&#xff0c;对方无法调用 然后加入*.def文件 *.def文件内容&#xff1a; LIBRARY EXPORTS 函数名