四、网站外观设计永城职业学院彭勃永城职业学院彭勃2网站外观的重要性网站不仅要有能满足客户需求的功能,还要有一个美观、合体的外观。原因如下:•如果你不稍微洗洗干净,梳妆打扮一下就出来见人,人家会对你热情客气吗?只想教你快点走开。•外套很重要。哪怕你穿了件又脏又臭,还有几个破洞的内衣,只要外套搞得笔挺、干净一点,整个人都会显得精神,你的女朋友对你的第一印象就会好。•当然内衣不是不重要,否则当你脱掉了外套,露出了皱皱巴巴,领口黑黑的烂衬衫时,你的女朋友准把你的好形象一抹而空,八成就和你吹了。综上,网站的外观和功能同样重要!永城职业学院彭勃3CSS是什么?CSS(CascadingStyleSheet,层叠样式表)是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在网页中使用CSS的方法有三种:•内联样式•嵌入样式表•链入外部样式表永城职业学院彭勃4实验一(上)内联样式永城职业学院彭勃5CSS中的度量单位px相对长度单位。像素(Pixel)。像素,屏幕上显示的最小单位,用于网页设计,直观方便。pt绝对长度单位。点(Point)。是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用。pc绝对长度单位。皮卡(Pica)。1皮卡=12点。mm绝对长度单位。毫米(Millimeter)。永城职业学院彭勃6CSS中的度量单位cm绝对长度单位。厘米(Centimeter)。in绝对长度单位。英寸(Inch)。1in=2.54cm=25.4mm=72pt=6pcem相对长度单位,大写字母“M”的高度。ex相对长度单位。相对于小写字母“x”的高度。此高度通常为字体高度的一半。永城职业学院彭勃7实验一(下)嵌入样式表永城职业学院彭勃8补充:样式表中样式的种类元素样式指定的所有HTML标记都会使用该样式。样式类需被class属性引用才能生效,常用于跨元素的相同样式。ID样式只能用在指定ID的单一元素。锚伪类将样式应用于动作而非元素。永城职业学院彭勃9实验二链入外部样式表永城职业学院彭勃10课后作业1.阅读理解第二天实验中使用的样式表文件。2.用学到的样式技巧,继续改进个人所选网站的(母版页或其它页面的)外观布局。3.撰写实验报告。永城职业学院彭勃11另一种外观设计——主题主题是ASP.NET2.0中的新增功能,用来定义页面和服务器端控件的外观。主题由一组元素组成:皮肤,CSS,图像和其它资源(控件所需图片,脚本文件,声音文件)。永城职业学院彭勃12为什么要使用主题?服务器端控件在不同的浏览器上(尤其是老浏览器上)可能被翻译成不同的标记,所以需要一种专门用于服务器端控件的外观机制,这就是皮肤。当所有的外观都设计在主题中,且已经创建了多个主题时,设计站点就可以不用考虑样式,改变样式时也无需更新页或应用程序代码。永城职业学院彭勃13让我们来为网站设计主题和皮肤吧!永城职业学院彭勃14实验三创建主题和源页面永城职业学院彭勃15实验四继续扩充源页面永城职业学院彭勃16实验五由源页面生成皮肤将相同颜色的控件的源代码复制粘贴到对应颜色的skin文件中。删除两个skin文件中可能存在的br/标记。删除所有控件的ID属性。删除Label控件的Text属性,并各手动添加一个SkinId属性,值为colorText。为两个文件中的ImageButton控件增加值为homeImage的SkinId属性。永城职业学院彭勃17下次课,我们将学习ASP.NET主题的应用!永城职业学院彭勃18ASP.NET动态网站的数据库读取