CSS实训任务书

实 训 指 导 书

专业：电子商务 班级：DS101、DS102 学号： 姓名： 课程：电子商务网页设计 项目 建立CSS样式表 合作者： 无 实训时间：第 周星期 第 节 地点： C102 工位号 一、 实训目的与要求（此栏实训前由老师填写） 了解CSS样式表的定义和作用 熟悉CSS样式表在网页制作和网站管理中的作用 掌握新建修改样式表的方法 学会使用样式表批量修改网页属性 二、 实训器材、环境及方案（此栏实训前由老师填写） C102实训室，安装有Dreamweaver cs3的计算机，投影设备，话筒扩音设备、教学系统等 三、 实训内容、任务或实训步骤（此栏实训前由老师填写） 任务说明： 在DW中，可以把某些网页元素（如文字、表格、超级链接等）的格式保存下来，然后直接应用到其他文字等网页元素上。这种保存下来的格式就叫做样式。 DW中可以定义的三种CSS样式分别是： 普通自定义CSS样式 重新定义HTML标签的样式 定义超级链接的文字样式 CSS样式表也叫做层叠样式表，是将文字、超级链接和文本框等页面元素统一为相同风格的管理工具。 任务一：新建CSS样式 1. 选择“窗口”—“CSS样式”（快捷键shift+F11），打开CSS样式面板： CSS面板有“全部”和“正在”两个按钮。分别是用来修改CSS中全部样式规则属性和修改当前所选页面元素的CSS规则属性的。 CSS样式面板的主要按钮作用如下 ：类别视图按钮：分类显示属性，如字体、背景、区块等。 ：列表视图按钮：按照字母顺序显示所有属性 ：设置属性按钮：只显示已经进行设置的属性。 :新建CSS规则按钮：点击弹出“新建CSS规则”对话框 ：删除CSS规则按钮：单击删除正在使用的CSS样式 操作步骤： 1. 新建自定义CSS样式表 选择“窗口”—“CSS样式”打开“CSS样式”面板 单击“新建CSS规则”按钮，打开新建CSS规则对话框 在选择器类型中选择类，名称输入“CSS样式表1” 在“定义在”选项中选择“仅对该文档”，以确定该样式表为内部样式表 单击“确定”后打开“CSS规则定义”对话框 定义好CSS样式以后，选中当前文本的段落，然后在CSS样式面板中选择已经建立好的样式，单击套用，或者在“页面属性”对话框中，在“样式”下拉列表中选择建立好的样式然后保存。 2. 重新定义特定的标签式样 1. 打开“CSS样式”面板，单击“新建CSS规则”按钮对话框，选择标签“按钮” ，打开新建CSS规则 2. 在标签下拉列表框中，选择标签“类型”例如“body”在“自定义”单选框中选择仅对该文档。 3. 单击“确定”按钮，弹出“body的css规则定义”对话框，定义相应规则。然后单击确定按钮。则完成了对特定标签式样的定义。 任务二：设置CSS样式的各项规则 CSS的各种属性共有8类：类型、背景、区块、方框、边框、列表、定位和扩展。 分别点开每个属性，观察对应的属性有哪些可设置的内容。参考课本68页内容。 操作步骤： 1. 建立站点目录“学校网站” 2. 在站点中新建一个HTML文档，设置为首页，利用网页布局表格和布局单元格，并在对应的单元格中输入“网站首页、学校概况、校园文化、专业设置、德育之窗等”项目如下图所示。 3. 建立CSS样式文件，选择类，名称命名为“LX1”，定义在：仅对该文档，单击确认按钮。 4. 在LX1的CSS规则定义中，调整类型属性中的字体、大小、行高、颜色等选项，如下图所示。 5. 在网页中选取“推荐新闻”单元格的内容，在CSS样式面板中右击LX1样式，选择“套用”。用同样的方法修改“学校资源”里的内容。修改前后效果对比图： 四、 实训要求（由老师在上机前出好题目，学生通过实训后再回答） 1 操作：完成任务一的每一步操作，新建一个CSS样式，并应用于一段文档，把应用前后的效果截图粘帖在实训结果中。 2.操作：修改刚才已经建立的css样式的规则，并再次应用于一段文档，应用的效果也粘帖在实训结果中进行对比。 五、 实训结果（学生填写或粘贴） 六、 心得体会及收获（学生填写）、