网页制作实验教程第十二章 创建CSS样式表

第十二章创建CSS样式表实验三十三创建自定义CSS样式表实验三十四创建独立共享CSS样式表CSS样式的主要作用在于格式控制。Dreamweaver中还有一个HTML标记样式也被用于格式控制，但其效果往往不如CSS样式好。所谓CSS样式表其实就是格式模板，它可以只被套用于某一特定网页，也可被存储成后缀为.css的文件而被套用于所有网页。实验目的：要求同学们能够独立创建CSS样式表，能够熟练运用CSS样式表。实验原理：CSS样式表指的是格式设置规则，可以控制Web页面内容的外观。实验条件：电脑操作系统WindowsXP/2000/98、Dreamweaver8网页设计软件。实验三十三创建自定义CSS样式表CSS样式表面板可以设定超级链接文字的显示状态、背景图像的放置位置、边框及列表的样式等内容，借助这些设定，同学们可以将预置或传统的显示状态改成自己想要的样式。实验内容：步骤1创建一个新的HTML页面，将其命名为“网站分布1”保存。在页面中输入待排版的文本，排版前的效果。步骤2为标题创建相应的CSS样式表。选择［文本］菜单栏的［CSS样式表］中的［新建］命令，弹出［新建CSS规则］对话框。步骤3弹出［.book的CSS规则定义］对话框，在［类型］选项中设定相关的文字属性。步骤4在［分类］选项组中选择［区块］，［文本对齐］属性设置为“居中”，单击［确定］按钮，完成了用于标题的.bookCSS类的创建。步骤5为分类网页名称创建相应的CSS样式表。选择［文本］菜单栏的［CSS样式表］中的［新建］命令，弹出［新建CSS规则］对话框。步骤6弹出［.web的CSS规则定义］对话框，在［类型］选项中设定相关的文字属性。步骤7选中标题“网站分布”，在该文字［属性］面板中选定［样式］为“book”，则定义的.book的CSS规则就被用于该标题。步骤8选中网站分布名称，在该文字［属性］面板中选定［样式］为“web”，则定义的.web的CSS规则就被用于该段文字。步骤9单击F12，在浏览器中预览效果。实验三十四创建独立共享CSS样式表CSS不仅可以设定为单独的文件，也可以独立于HTML页面，而在需要的时候从不同的页面中引用同一个独立的CSS样式文件。利用这一技术，可以真正发挥CSS在网站布局中的作用。实验内容：步骤1创建一个新的HTML页面，将其保存。步骤2为标题创建相应的CSS样式表。步骤3弹出［保存样式表文件为］对话框，将文件保存至名为“styles.css”的样式表文件，单击［保存］按钮。步骤4弹出［.xbook的CSS规则定义］对话框，在［类型］选项中设定相关的文字属性。步骤5为分类网页名称创建相应的CSS样式表。步骤6弹出［.xweb的CSS规则定义］对话框，在［类型］选项中设定相关的文字属性。步骤7至此，已完成了独立可共享样式的创建。步骤8在“网站分布2”的设计界面中单击右键，从弹出的快捷菜单中选择［CSS样式］中的［附加样式表］命令。步骤9弹出［链接外部样式表］对话框，在［添加为］选项中设定“链接”，在［文件/URL］选项中单击按钮。步骤10弹出［选择样式表文件］对话框，选择名为“styles.css”的文件，单击［确定］按钮，再单击［链接外部样式表］对话框的［确定］按钮，则样式表选定。步骤12选中标题“网站分布”，在该文字［属性］面板中选定［样式］为“xbook”，则定义的.xbook的CSS规则就被用于该标题。步骤13选中网站分布名称，在该文字［属性］面板中选定［样式］为“xweb”，则定义的.xweb的CSS规则就被用于该段文字。步骤14单击F12，在浏览器中预览效果。学习与思考根据本章所讲的CSS功能，希望同学们按照以下要求来完善你的个人主页:1.选定你的个人主页需要设置CSS样式表的内容，对其进行CSS样式设置。2.将这个CSS样式设定成为共享样式表。3.再根据需要为你的个人主页设置几个共享CSS样式表。