css教案

1．复习巩固

 

 

2．引入

 

 

 

3．讲授新课

上节课我们讲过，在表格中插入图片和flash动画以及flash视频，先打开ok版的咖啡屋来对照一下，大家可以看到，我们还剩左边的一栏导航链接和右边的文本没有做完。今天我们就接着讲解这些内容。

先把素材（aboutcafe.html/sample）全部拷在自己文件夹下，打开Dreamweaver 8，象以前的每节课一样，第一步我们都要新建站点，设置子目录文件夹和默认图象文件夹的路径。双击index.html继续进行编辑。

 

文本插入：将光标移到最右边的单元格，打开文本文件，将文字复制到单元格内。选定单元格，在属性面板中设置单元格内文本的对齐方式，垂直居中和水平左对齐。（教学技巧：文本段落的首字缩进操作，要转换到中文输入的全角状态，换行的间距用shift+enter，以避免行间距太宽）

 

文本超链接：左边的表格内,输入menu/aboutcafe,中间用回车键隔开，鼠标选中menu字样，在下方的属性面板中链接的文件夹中选择menu.html，目标选_blank，或者是在插入工具拦中选中超级链接的图标，再在对话框中设置参数。目标如果为-blank的话链接的页面在新的网页中打开。（目标的下拉菜单下还有很多的选项_parent、 _self、 _top，大家可以试看一下它们各有什么不同），自己完成aboutcafe字样的超级链接。

接下来我们将进入css样式的学习。到底什么是css呢？

介绍css:  css 是casading style sheets（层叠样式表单）的简称，更多的人把它称作样式表，顾名思义，它是一种设计网页样式的工具。大多时候是用来对网页的文字进行个性化的设计，以达到美化网页的效果。

 

 

我们先看ok版的café网站，看到它与我们做的结构差不多，但它的文字设置得更漂亮更精美，这样的网页我们浏览的时候就很赏心悦目了。那怎样才能达到这样的效果呢？这就涉及到css的应用了，接下来我们进行详细的讲解。

1．  右边的面板中展开css的设计面板，或者是在主菜单的窗口下拉菜单条中选中css样式。

2．  样式面板上的新建按钮新建一个css样式，这是系统会自动弹出“新建css样式”面板。设置其参数：

选择器类型：“类（可应用于何标签）

名称：随便给样式起个名字(比如.left)，注意前面的句点一定不能忽略

定义在：选中“新建样式表文件”

3．设置完成后，点确定按钮，系统弹出保存的对话框，将其命名为word.css并保存在根目录下。

在跳出的css样式规则设置框中设置其属性，对照ok版的字体设置左边导航栏的文字规则为：在“字体”文本框中，输入 Verdana, sans-serif；从“大小”弹出式菜单中选择 16，然后从紧靠其右的弹出式菜单中选择像素；从“样式”弹出式菜单中选择“正常”； 从“修饰”列表中选择“无”； 从“粗细”弹出式菜单中选择“粗体”； 在“颜色”文本框中，输入 #FFFFFF。

4．再新建一个css样式规则.right，设置起右边的字体。重复第2步操作，

选择器类型：“类（可应用于何标签）

名称：随便给样式起个名字(比如.right，注意前面的句点一定不能忽略

定义在：选中.word.css

其规则定义为：

在“字体”文本框中，输入 Verdana, sans-serif。

在“大小”文本框中，输入 11，并在紧靠其右的弹出式菜单中选择像素。

在“行高”文本框中，输入 18，并在紧靠其右的弹出式菜单中选择像素。

 从“粗细”弹出式菜单中选择“粗体”。

在“颜色”文本框中，输入 #990000。

应用样式：选中左边的要链接的文字menu/ahoutcafe，在其下面的属性面板设置其样式为.left。选中右边的两段文字的前四个单词，参照上面的方法设置样式为.right。

按F12保存浏览页面效果

总结css优点： css可以定义个性化的字体样式，根据需要设置自己想要的样式，其优点是只要改变css的属性设置，就可以改变所有应用到这个css的字体。举例改变.left的属性，在“颜色”文本框中，输入 #FF9933，保存浏览网页，查看效果。

布置作业： 完成老师上课的程序，参照ok版，分析链接子页面aboutcafe.html,的字体样式，自己完成字体的样式设置（第二节课）