《Dreamwaver网页制作》.pptVIP

《Dreamweaver网页制作》 一、任务目标 二、任务引导 三、任务演示 四、任务相关知识点 四、任务相关知识点 四、任务相关知识点 四、任务相关知识点 四、任务相关知识点 五、任务分配 六、任务实施 六、任务实施 六、任务实施 六、任务实施 七、考核与评价 任务五：“双百论坛”主页样式设置 教学单元：主页制作 知识目标 了解HTML样式知识、CSS样式基础、CSS样式表分类及CSS选择器等知识点。 能力目标 掌握CSS样式表的使用，利用CSS样式表完成页面的样式设置 网页制作的基础是使用HTML（超文本标记语言），然而仅仅依靠HTML会遇到很多不可解决的问题，比如希望网页能够美观大方、升级方便、维护轻松，那么仅仅使用HTML是远远不够的，为了解决这些问题，HTML逐步地发展到了XHTML，与此同时，CSS也应运而生，CSS（Cascading style sheet）中文译为层叠样式表。用于控制网页样式并允许将样式与结构分离的一种标记性语言，提供了强大的样式设计功能。 1、CSS概述 CSS（Cascading Style Sheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。 CSS样式具有如下特点:CSS使页面载入更快；CSS可以降低网站的流量费；CSS使设计师在修改设计时更有效率，代价更低；CSS使整个站点保持视觉的一致性；CSS使站点更好地被搜索引擎找到；CSS使站点对浏览者和浏览器更具亲和力。 2、使用CSS样式 行内样式：需要对每个标记都设置style属性，虽然可以实现很好的样式效果，但后期维护成本也很高，因此不推荐使用。例：h1 style=”color:white; background-color:blue;”text/h1 内嵌式：将CSS样式定义在HTML文件的head和/head之间，并使用style和/style标记声明。适用于对特殊页面的单独样式设置。 例：style type=”text/css” h1{ color:white; background:blue; } /style 2、使用CSS样式 链接式 通过link语句将一个单独的CSS文件关联到HTML文件当中，实现了页面框架与风格代码的分离，这个CSS样式可以被多个网页文件同时使用，使得网站整体风格统一、后期维护非常简单，链接式样式表是最为实用的一种方法。 例：link href=”mystyle.css” rel=”stylesheet” type=”text/css” 2、使用CSS样式 导入样式 通过@import语句将一个单独的CSS文件导入到HTML文件当中，和链接式样式表类似也是很常用的一种方式。 例：style type=”text/css” @import ”mystyle.css” /style 3、CSS选择器 在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。CSS选择器分为基本选择器和复合选择器，基本选择器又分标记选择器、类别选择器、ID选择器；复合选择器包含交际选择器、并集选择器、后代选择器等等。 标记选择器 类别选择器 ID选择器 教 师 下发任务 学 生 小组讨论 角色分配 任务划分 任务实施 “双百论坛” 主页样式设置 教师巡回指导 1、新建CSS文件（采用链接式样式表） 启动Dreamweaver，执行“文件” →“新建”，在弹出的新建文档对话框中选择新建页面类型为CSS然后单击“创建”按钮，如下图所示。此时Dreamweaver会创建并打开一个空白的CSS代码设计窗口，按CTRL+S将当前CSS样式表以mystyle.css命名保存至网站根目录下。 2、编写CSS样式表 BODY { margin:0px; text-align:center; font-family:宋体,Arial; font-size:12px; color:#000; background-color:#cae8de; } a{ font-size: 12px; color: #000; text-deco