web网页界面设计.ppt

看下CSS到底有多强大 HTML+CSS 地图 再看下没有CSS的时候是什么样子的。。。 （号称裸奔，2008年4月9日 裸奔节） 具体功能有： 控制布局（几列几列） 控制全局（字体、颜色、链接、边框、背景） 控制个体（br、hr、H1、H2、div、table） 自定义样式（class、id、style、link） … “Web标准”概述 style !— h1{ color:red; text-decoration:underline; } -- /style 《网页设计》 浙江金融职业学院 style !— h1{ color:red; text-decoration:underline; } h1 em{ color:#004400; font-size:40px; } -- /style 2-9.htm 四、Dreamweaver中创建CSS （一）“CSS样式”面板 1、打开方式：窗口—CSS样式命令或者使用快捷键“shift+F11”打开“css样式”面板。 2、两种查看模式：全部模式和正在模式。 1）全部模式：该选项会显示出在当前页面中包含的嵌入和外部样式，但不会显示出内联样式； 2)正在模式：会显示出当前页面选择部分的全部样式规则，不管是内联的、嵌入的还是外部的样式规则。 《网页设计》 浙江金融职业学院 （二）新建CSS样式 方法一 1、打开CSS样式面板上，找到右下角的“新建CSS规则”按钮，单击后弹出“新建CSS规则”对话框，那么CSS样式的类型就可以进行设置了。 2、在“选择器类型”项中选择一种CSS样式的类型，为了使创建的样式能够应用到各种标签上，在这里选择“类（可应用于任何HTML元素）”。 3、在“选择器名称”项中输入新建的CSS样式输入一个名称。例如.STYLE1/在“规则定义”选项中，主要是选择定义规则的位置，在下拉列表选项中，“（新建样式表文件）”表示用户可以新建一个样式表文件，并可以将它应用于其他的文档中；而“仅限于该文档”项就表示：新建的这个CSS样式只能给适用于该文档内。在这里将其选择为“新建样式表文件”。 《网页设计》 浙江金融职业学院 4、单击“确定”按钮，提示用户保存这个CSS样式文件。为了能够方便找到这个文件，使用和前面一样的名称 5、保存文件后，就进入CSS样式的主要定义部分了。这时会弹出一个对话框，在这个对话框中可以对CSS样式定义多种不同风格的样式。 6、设置完毕后（本次保持默认值）单击“确定”按钮，这样一个CSS样式就创建完成了。可以通过“CSS样式”面板来查看。 《网页设计》 浙江金融职业学院 方法二 直接执行“格式→CSS样式→新建”命令，即可打开“CSS样式”对话框。 《网页设计》 浙江金融职业学院 （三）创建CSS文档 方法一： 在菜单栏中执行“文件→新建”命令，打开“新建文档”对话框。在左边的分类中选择“空白页”项，然后再在“页面类型”栏中选择“CSS”文件。 如下图所示: 《网页设计》 浙江金融职业学院 打开了一个新创建的CSS样式文件，可以直接输入CSS语言进行编写或可以通过图形界面定义CSS样式表。 打开“CSS样式”面板，单击“新建CSS规则”按钮，新建一个规则。新建完毕后就直接打开了定义规则的对话框，在这里可以对这个规则进行设置。 《网页设计》 浙江金融职业学院 五、课堂实训 实例：课堂实例—模拟GOOGLE公司LOGO 《网页设计》 浙江金融职业学院 操作步骤 学生作业—设置网站标题样式表 将建立的个人网站中的若干标题进行样式的设定。 《网页设计》 浙江金融职业学院 课外拓展资源： CSS： /css/ 《网页设计》 浙江金融职业学院 浙江金融职业学院 * 主讲人：　洪小平 《网页设计》CSS样式设计与使用（1） 《网页设计》 浙江金融职业学院 学习目标 1.了解层叠样式表的基本知识 2.掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法 3.掌握将CSS样式应用到各种网页元素上的方法 4.掌握修改CSS样式的方法，并观察到该修改对网页外观的影响 教学内容 CSS层叠样式表的基本知识：内联式样式表、嵌入式样式表、外部样式表。 在Dreamweaver中，使用CSS面板创建、应用、修改CSS层叠样式。 链接外部样式表。 《网页设计》 浙江金融职业学院 仅使用HTML定“结构”的页面效果 “Web标准”概述 使用CSS设定样式之后的效果 一、概念辨析 什么是样式？ 样式是用来控制网页外观的一组格式。 为什么在网页设计中使用样式？ 当网页中的多个元素需要使用相同的格式时，我们需要使用一种更为高效的格式设置方法。 【见实例1-2 与1-3的区别】 对网页中的