4.网站外观设计.ppt

1、四、网站外观设计,永城职业学院 彭勃,2,网站外观的重要性,网站不仅要有能满足客户需求的功能，还要有一个美观、合体的外观。原因如下： 如果你不稍微洗洗干净，梳妆打扮一下就出来见人，人家会对你热情客气吗？只想教你快点走开。 外套很重要。哪怕你穿了件又脏又臭，还有几个破洞的内衣，只要外套搞得笔挺、干净一点，整个人都会显得精神，你的女朋友对你的第一印象就会好。 当然内衣不是不重要，否则当你脱掉了外套，露出了皱皱巴巴，领口黑黑的烂衬衫时，你的女朋友准把你的好形象一抹而空，八成就和你吹了。 综上，网站的外观和功能同样重要！,3,CSS是什么？,CSS（Cascading Style Sheet，层叠样式

2、表）是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 在网页中使用CSS的方法有三种： 内联样式 嵌入样式表 链入外部样式表,4,实验一（上） 内联样式,5,CSS中的度量单位,px 相对长度单位。像素（Pixel）。 像素，屏幕上显示的最小单位，用于网页设计，直观方便。 pt 绝对长度单位。点（Point）。 是一个标准的长度单位，1pt1/72英寸，用于印刷业，非常简单易用。 pc 绝对长度单位。皮卡（Pica）。 1 皮卡 = 12 点。 mm 绝对长度单位。毫米（Millimeter）。,6,CSS中的度量单位,cm 绝对长度单位。厘米（Centimeter）

3、。 in 绝对长度单位。英寸（Inch）。 1in = 2.54cm = 25.4mm = 72pt = 6pc em 相对长度单位，大写字母“M”的高度。 ex 相对长度单位。相对于小写字母“x”的高度。 此高度通常为字体高度的一半。,7,实验一（下） 嵌入样式表,8,实验二 链入外部样式表,9,样式表中样式的种类,元素样式 指定的所有HTML标记都会使用该样式。 样式类 需被class属性引用才能生效，常用于跨元素的相同样式。 ID样式 只能用在指定ID的单一元素。 锚伪类 将样式应用于动作而非元素。,10,课后作业,阅读理解第二天实验中使用的样式表文件。 用学到的样式技巧，继续改进个人所

4、选网站的（母版页或其它页面的）外观布局。 撰写实验报告。,11,另一种外观设计主题,主题是ASP.NET 2.0中的新增功能，用来定义页面和服务器端控件的外观。 主题由一组元素组成：皮肤，CSS，图像和其它资源（控件所需图片，脚本文件，声音文件）。,12,为什么要使用主题？,服务器端控件在不同的浏览器上（尤其是老浏览器上）可能被翻译成不同的标记，所以需要一种专门用于服务器端控件的外观机制，这就是皮肤。 当所有的外观都设计在主题中，且已经创建了多个主题时，设计站点就可以不用考虑样式，改变样式时也无需更新页或应用程序代码。,13,让我们来为网站设计主题和皮肤吧！,14,实验三创建主题和源页面,15

5、,实验四 继续扩充源页面,16,下次课，我们将学习ASP.NET皮肤的生成和主题的应用！,17,实验五 由源页面生成皮肤,将相同颜色的控件的源代码复制粘贴到对应颜色的skin文件中。 删除两个skin文件中可能存在的标记。 删除所有控件的ID属性。 删除Label控件的Text属性，并各手动添加一个SkinId属性，值为colorLabel。 为两个文件中的ImageButton控件增加值为homeImage的SkinId属性。,18,主题可包含多个皮肤,一个主题可以创建不只一个.skin文件，这样有助于将皮肤文件分成更小的片段。例如：将与登录有关的控件的皮肤放到一个.skin文件中，将数据库

6、有关控件的皮肤放到另一个.skin文件中。这样有利于皮肤文件的管理和维护。,19,实验六 应用主题,20,由此产生的问题,想一次对网站所有页面应用同一主题，怎么办？,21,另一种应用主题的方式,Page指示符除了有Theme属性可以应用主题外，还有一个StyleSheetTheme属性也可应用主题。 Theme属性的控制能力最强，会覆盖控件的属性设置；但是StyleSheetTheme属性却允许控件用自己的属性设置覆盖皮肤中设定的属性。 优先级： Theme主题控件属性CSS样式 StyleSheetTheme主题,22,实验七 StyleSheetTheme属性应用主题,Label1的Font-Bold属性设为True，查看效果。 将Label皮肤中增加Font-Bold=False，查看效果。 将页面的Theme属性更改为StyleSheetTheme属性，再次运行查看效果。,23,主题中包含CSS文件,主题由一组元素组成：皮肤，CSS，图像和其它资源（控件所需图片，脚本文件，声音文件）。 主题中的CSS文件除了可以作用于使用主题的页面，还可以在同主题的皮肤文件中被使用。,24,实验八 使用主题中