老尸 发表于 2015-1-16 23:42:01

ASP网页设计利用Web尺度建站第9天:CSS结构进门

ASP最大的缺点在于网络的安全性和可靠性,企业将经营数据放在开放的平台上,最大的担忧就是如何保证这些数据不被其他人破坏。css|web|web尺度|css|web尺度接上去入手下手要真正计划结构了。和传统的办法一样,你起首要在脑海里有大抵的表面构思,然后用photoshop把它画出来。你大概看到有关web尺度的站点多数很朴实,由于web尺度更存眷布局和内容,实践上它与网页的美妙没有基本抵触,你想怎样计划就怎样计划,用传统表格办法完成的结构,用DIV也能够完成。手艺有一个成熟的历程,把DIV当作和TABLE一样的工具,怎样使用就看你的设想力了。注:在实践使用过程当中,DIV在有些中央切实其实不如表格便利,好比背景致的界说。但任何事变都有得有掉,弃取在于你的代价判别。好,不罗嗦了,我们入手下手:
1.断定结构
  w3cn的最后计划草图以下:



  用表格的计划办法的话,一样平常都是上中下三行结构。用DIV的话,我思索利用三列来结构,成为如许。

2.界说body款式
  先界说全部页面的body的款式,代码以下:

body{MARGIN:0px;
PADDING:0px;
BACKGROUND:url(../images/bg_logo.gif)#FEFEFEno-repeatrightbottom;
FONT-FAMILY:LucidaGrande,LucidaSansUnicode,宋体,新宋体,arial,verdana,sans-serif;
COLOR:#666;
FONT-SIZE:12px;
LINE-HEIGHT:150%;}
  以上代码的感化在上一天的教程有具体申明,人人应当一看就分明。界说了边框边距为0;背景色彩为#FEFEFE,背景图片为bg_logo.gif,图片位于页面右下角,不反复;界说了字体尺寸为12px;字体色彩为#666;行高150%。

3.界说次要的div
  初度利用CSS结构,我决意接纳流动宽度的三列结构(比自顺应分辩率的计划复杂,hoho,别滴彝道粒仁迪旨虻サ模黾拥阈判穆铮?。分离界说左中右的宽度为200:300:280,在CSS中以下界说:


/*界说页面左列款式*/
#left{WIDTH:200px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#CDCDCD;
}
/*界说页面中列款式*/
#middle{POSITION:absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#DADADA;
}
/*界说页面右列款式*/
#right{POSITION:absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#FFF;}

  注重:界说中列和右列div我都接纳了POSITION:absolute;,然后分离界说了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个结构的关头,我接纳了层的相对定位。界说两头列间隔页面右边框200px,间隔顶部0px;界说右列间隔页面右边框500px,间隔顶部0px;。

  这时候候全部页面的代码是:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312">
<head>
<title>接待进进新《网页计划师》:web尺度教程及推行</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="Content-Language"content="gb2312"/>
<metacontent="all"name="robots"/>
<metaname="author"content="ajie(at)netease.com,阿捷"/>
<metaname="Copyright"content="www.w3cn.org,自在版权,恣意转载"/>
<metaname="description"content="新网页计划师,web尺度的教程站点,推进web尺度在中国的使用."/>
<metacontent="web尺度,教程,web,standards,xhtml,css,usability,accessibility"name="keywords"/>
<linkrel="icon"href="/favicon.ico"type="image/x-icon"/>
<linkrel="shortcuticon"href="http://www.w3cn.org/favicon.ico"type="image/x-icon"/>
<linkrel="stylesheet"rev="stylesheet"href="css/style01.css"type="text/css"media="all"/>
</head>
<body>
<divid="left">页面左列</div>
<divid="middle">页面中列</div>
<divid="right">页面右列</div>
</body>
</html>

  这时候候页面的效果仅仅能够看到三个并列的灰色矩形,和一个背景图。可是我但愿高度是满屏的,怎样办呢?

4.100%自顺应高度?
  为了坚持三列有一样的高度,我实验在#left、#middle和#right中设置"height:100%;",但发明完整没有料想的自顺应高度效果。经由一番实验后,我只好给每一个div一个相对高度:"height:1000px;",而且跟着内容的增添,必要不休修改这个值。岂非没有举措自顺应高度了吗?跟着阿捷本人进修的深切,发明一个变通的办理举措,实践上基本不必要设置100%,我们已被table头脑监禁太深了,这个举措鄙人一节的进修中具体先容。


</p>国内有些大的CRM厂商的ASP就写得不错.无论是概念还是它里面用JAVASCRIPT的能力.并不是说现在的程序员用了ASP.NET来写程序就可以说自己高档了

admin 发表于 2015-1-19 09:55:50

ASP也是这几种脚本语言中最简单易学的开发语言。但ASP也是这几种语言中唯一的一个不能很好支持跨平台的语言。  因为ASP脚本语言非常简单,因此其代码也简单易懂,结合HTML代码,可快速地完成网站的应用程序。

小魔女 发表于 2015-1-24 12:06:09

交流是必要的,不管是生活还是学习我们都要试着去交流,通过交流我们可以学到很多我们自己本身所没有的知识,可以分享别人的经验甚至经历。

飘飘悠悠 发表于 2015-2-1 10:05:59

下面简单介绍一下我学习ASP的方法,希望对想学习ASP的朋友有所帮助...

精灵巫婆 发表于 2015-2-7 02:43:50

代码逻辑混乱,难于管理:由于ASP是脚本语言混合html编程,所以你很难看清代码的逻辑关系,并且随着程序的复杂性增加,使得代码的管理十分困难,甚至超出一个程序员所能达到的管理能力,从而造成出错或这样那样的问题。

因胸联盟 发表于 2015-2-19 21:27:24

你可以通过继承已有的对象最大限度保护你以前的投资。并且C#和C++、Java一样提供了完善的调试/纠错体系。

第二个灵魂 发表于 2015-3-6 15:40:54

封装性使得代码逻辑清晰,易于管理,并且应用到ASP.Net上就可以使业务逻辑和Html页面分离,这样无论页面原型如何改变,业务逻辑代码都不必做任何改动;继承性和多态性使得代码的可重用性大大提高。

蒙在股里 发表于 2015-3-13 03:47:49

它可通过内置的组件实现更强大的功能,如使用A-DO可以轻松地访问数据库。

仓酷云 发表于 2015-3-20 11:34:25

ASP主要是用好六个对象,其实最主要的是用好其中两个:response和request,就可以随心所欲地控制网页变换和响应用户动作了。
页: [1]
查看完整版本: ASP网页设计利用Web尺度建站第9天:CSS结构进门