4.网站外观设计.ppt_第1页
4.网站外观设计.ppt_第2页
4.网站外观设计.ppt_第3页
4.网站外观设计.ppt_第4页
4.网站外观设计.ppt_第5页
已阅读5页,还剩22页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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,实验八 使用主题中

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论