《网页设计与制作》教案-第10讲布局技术之二-Div+CSS(二)

1、 第10讲布局技术之二一Div+CSS （二）1.1教学目标:知识目标1. 理解CSS盒子模式。2.掌握CS砌则设置方法。技能目标能够理解Div+CSS所体现的表现和内容相分离特性。品质目标培养学生认真细致、踏实进取的精神1.2教学重点：.掌握CSSa则设置方法教学难点理解CSS规则的作用。教学方法：讲练结合，任务驱动、分子任务操练课时安排：2课时教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的 规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情 况上，培养学生较好的专业基础与创新创作意识。教学过程：一、CSS样式基本操作1 .样

2、式表的操作途径我们可以通过三种途径来创建、编辑CSS样式。从主菜单选择“窗口 /CSS样式”即可打开样式面板，如图 3-35所示。 TOC o 1-5 h z 设计：CSS 样式否中式、I.TL12Px华文细一- styl e白6666图3-35 CSS样式面板在CSS样式面板的右下角有四个功能按钮，分别为：附加样式表 画：用于打开“链接外部样式表”对话框，选择要链接到或导入到当前 文档中的外部样式表。新建CSS样式电：打开“新建 CSS样式”对话框，创建新样式。编辑样式表打开“ CSS样式定义”对话框。编辑当前文档或外部样式表中的任 何样式。删除CSS样式 a：删除“ CSS样式”面板中的所

3、选样式，并从应用该样式的所有元 素中删除格式。单击CSS样式面板右上角的菜单按钮 回，可以显示如图3-36所示的面板菜单。通过该菜 单，可以完成对CSS样式面板的大部分控制。在 CSS样式面板的列表区域中单击鼠标右键， 也可以打开同样的菜单。转到代谓新建皿.编辑鼠.重制. 一 .至命名国J .茸用删除必）使用外器编辑器附加样式表 导出忙.一. 设计时间,帮助ffiss律式纲合在卜 重命名面板组一. 最大化面板组 关闭面或蛆图3-36面板菜单从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框, 如图3-37所示。在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新

4、建样式表”对话框，如 图3-38所示。不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编 辑样式表、链接样式表和导出样式表。文本命令站点窗口世）帮助国C器杼式大小）改变大小颜色国）检查拼写也shiftm*/ S (B)F1新建里）， 冒理样式皿 导出患） 设计时间（S）.缩进 Ctrl+Alt+凸出Ctrl+Alt+段落格式战）卜对齐因*列表（1）,1返匕aC国字体但）卜样式）*IVW图3-37 “文本/CSS样式”菜单段落格式卜 列表工】卜对齐,字体如样式0卜c监样式a/无 Qi)大小，新建CH）根板卜管理样式晅）褊辑标签区I . . . Ctrl+F5插入HTML

5、我创建链接工）微消辘报打开麋搔页面陶目标框架添加到颜色收Q）创建新代码的）导出设计时间）.翦切唠 片贝W 粘贴如为页面设计存注如0面雇性图3-38在页面弹出式菜单中操作CSS样式2.定义样式表选项启动新建样式表后会打开如图3-39所示的“新建 CSS样式”对话框。图3-39新建CSS样式对话框在该对话框中有两个选项：“选择器类型”和“定义在”，用于定义样式表选项。其中 “选择器类型”用于指定不同的CSS样式的类型，其下各选项功能如下：类（可应用于任何标签）：由用户创建应用于文本范围或文本块的自定义样式，在 样式表中自定义的样式可以在整个HTML中被多次调用。选择此类型后，需要在上方的“名称”中

6、填入一个样式名字，需要注意的是，此类名称必须以”开头，如果用户没有输入 开头的句点，Dreamweaver将自动输入。标签（重新定义特定标签的外观）：重定义特定HTML标签的默认格式，使用该选项 我们可以对诸如段落标签 p、单元格标签td、水平线标签hr等样式进行重定义，以使其 符合我们的设计要求。高级（ID、上下文选择器等）：为具体某个标签组合或所有包含特定Id属性的标签定义格式，在此可对链接的不同状态进行设置。“定义在”选项用于指定 CSS样式的应用范围。其中“新建样式表文件”选项将会 把设定的样式保存在一个外部单独的样式表文件中，这个样式表文件可以被其他文件共同使 用。“仅用该文档”选项

7、把设定的样式仅仅放在当前文件的头文件中，这些样式只能在 此文件中使用。CSS编辑器在“新建CSS样式”对话框中设置好选项，并单击“确定”按钮保存新的CSS文件后，即弹出“ CSS样式定义”对话框，如图 3-40所示。在此用户可以详细定制样式的格式，我们 称之为“ CSS编辑器”。在CSS编辑器中可以定义包括许多类型的格式，如文本、背景、边框等。二、仅对该文档”和“外部”CSS样式表如前所述，在“新建 CSS样式”对话框中的“定义在”选项是用来指定样式的作用范围 的，若选择“仅对该文档”，则新建的样式只应用于当前文档，随着该文档的关闭而关闭，所 以不能应用于其他任何文档；若选择“新建样式表文件”

8、将建立一个外部CSS样式表，新建的样式以文件的形式保存在当前文档之外，这种外部CSS样式表文件可以被应用到本站点的任何文件。下面我们来介绍这两种样式的创建。L峋CSS样式守史1偲饰6” 口下峨Q) 口上划蝮g慧色也工匚“ I删除缆(L)闪好闻无中I 般 I 事定 I 医用凶 帮脑图3-40 CSS编辑器.使用“仅对该文档”的 CSS羊式表下面我们来建立一个简单的也是最基本的文本样式一一9磅字文本样式，并应用样式。9磅字是页面中常用的文本样式。打开CSS样式面板的面板菜单，单击“新建 CSS样式”按钮1 ,弹出“新建CSS样式” 对话框。在“名称”文本框中输入样式表名称，如 .f1 ;在“选择器

9、类型”选项选择“类”；“定 义在”选项处选择“仅对该文档”。然后单击“确定”按钮。在弹出的“ CSS样式定义”对话框中的“分类”列表框中选择“类型”选项。在右边的“类型”选项区中分别设置“字体”、“大小”、“样式”、“颜色”、“粗 细”和“修饰”等，设置如图3-41所示。图3-41设置样式参数单击“确定”按钮，这时在“ CSS样式”面板可以看见新建的样式 .f1。如图3-42所示。图3-42 CSS样式面板中新建的样式在页面编辑区选取要应用的文本或者段落，在“ CSS样式”面板中用鼠标右键单击要应 用的样式名称.f1,在弹出的菜单中选择 “套用”，则选中文本被应用了指定的样式。如图3-43所示

10、。忘堂菇1臼总岫依曲察值式)槽;11|训1睡屋帏掇誉如件司文赤帚困理爻本a1调此用自典4式11E.标金祥式王定为特定标答1茸k 1的梅立二由H或更改?.用妥削CSS怦=t时，而甘用hl年雯虹了楮式的文本事随即 掰3!*用$静犷*盘弋曰父乖手和合内将烹!孝“，房市32甲内弟工静仃*49用岁后%肃*青RS立*盘胃5总真书中下军莪聿 f r/no * .ff ?#左力，声/f的“卓用#).匚克肖舒口花将在炉下位音，州界C3S惮式看是一系列痴1在一个单度的曲团* .C30文忤博琳TTNL交附中的CSS禅*剧用文君heM W#锄 脚转用文件蝴璜帏左中的一g多页上口h都t求诚，士) CSS禅立春是 ,耳X

11、k占在H1NL 5：粉 加我 都治牌?(.! *+笈臼的CSJ洋立，二糅4上用愉基为将七丈例在签十可忙三档立宅文，0 却T宣史 必帕安的格式印佳依曲cltM屏性花识第文植:国的叱Wtt。Driix：ir啾诅用皿有克君0定义的弊 式F芸这些悴寸符K css伴式潦则.瑕Ef ：UuU3tw”申名金的CfiLly CS3才考|frltb而国耳羯8”- R * 黑米以，虎圆孑 寸老口亡#史中云洋 气Thilly (?瞪手-一 -下木1TEL%西6或也二匚空假如蚪M”l IV Jr!* C5S倬式性等1踏峥&乜比：X”坤住喇口而 格式.古“交档”市口中匚J或看斫应年的上自历程式用性也可在恻丸Sf宝口中黄

12、增文当1：1台看它尹向用胃式：声些：SS祥立回任 二J：,* yt ,;htLf- . tfNwig切、t 用 Aypl. Safhri 1:3 空1见的 川 *叫1, 我些目可、三图3-43被应用了新样式的文本.外部CSS羊式下面我们来制作一个 12磅字的外部CSS样式，并应用样式。打开CSS样式面板的面板菜单，单击“新建 CSS样式”按钮a ,弹出“新建CSS样式” 对话框。在“名称”文本框中输入样式表名称，如 .mystyle;在“选择器类型”选项选择“类”； “定义在”选项处选择“新建样式表文件”。单击“确定”按钮，即打开保存文件的对话框， 如图3-44所示。输入外部样式文件名，如 m

13、ycss,选择保存路径，单击“保存”按钮后弹出“ CSS样式定 义”对话框。图3-44保存外部CSS样式文件在“分类”列表框中选择“类型”选项，并在右边的“类型”选项区中分别设置“字体”、“大小”、“样式”、“颜色”、“粗细”和“修饰”等，设置如图3-45所示。式小;悭 |明素出d 用粗和口）.样式0J：小 v变量理）:行育QD: ISO- -V 1mg后文小与.修他皿：下划钱世1 口上京域中 口制除窿3颜&：剧 |0M00用好（1）版.消 1 应用帮即通图3-45设置样式参数单击“确定”按钮，一个外部CSS样式就做好了。这时在“ CSS样式”面板可以看见新建的外部样式文件 mycss,在“文

14、件”面板中也可以看到该CSS文件。如图3-46和图3-47所示。图3-46 CSS样式面板中新建的外部样式图3-47文件面板中显示外部样式链接“外部CSS样式表”文件。打开一个页面文档，在CSS样式面板中单击“附加样式表”按钮，如图3-48所示，就会弹出“链接外部样式表”对话框。阐加样式表图3-48 CSS样式面板中的“附加样式表”按钮在弹出“链接外部样式表”对话框中，点击“浏览”按钮，选择需要的外部CSS样式表文件，然后点击“确定”按钮。如图 3-49所示。图3-49 “链接外部样式表”对话框这时在CSS样式面板中可以看到附加到该文档的外部样式。选中要应用样式的文字或段落，用鼠标在外部样式名

15、上单击右键，在弹出的菜单中选择“套用”命令，如图3-50所示。1这时可看到选择的文字被应用了该样式。I css样式| 3 mycss. cssL邙-Mm弟中用卑#00900 nonq转到代码 新建国） 蝙辑 重制“hi1重命； （1妙套用删除一文件蜜y使用外部编辑器一 a霓衰羽的C阳加祥式表一 导出国）福Velip_ims.g&002.L r设计时间一huiyTian, htiri md. him图3-50套用外部CSS样式“仅对该文档的 CSS”转换成“外部 CSS样式表”在Dreamweaver中可以把文档中的 CSS样式导出成为一个独立的外部CSS样式表文件。方法如下：在“CSS样式面板”中选择要导出的样式，如 .f1 ,单击鼠标右键，在弹出的菜单中选择“导出”命令，或执行“文件/导出/CSS样式”命令，即打开“导出样式为 CSS文件”对话框。 如图3-51所示。在“文件名”处输入 CSS样式文件名，如 myfont ,选择存放文件的路径。单击“保存” 按钮，则完成导出样式操作。“外部CSS