前端网页设计教学课件作者杜黎强编著第3次课课件幻灯片.pptVIP

教学导入 教学实施 知识点讲解 任务实施 请大家完成本次课课中页：任务3-子任务1实施过程.doc 第3次课教学内容及实施环节 第2次课教学回顾 项目准备：任务3 使用CSS样式表修饰HTML网页–子任务1 网页对象布局 分发本次课所用文件 项目准备-任务3 –子任务1-任务实施过程.doc 项目准备-任务3 –子任务1-任务实施总结.doc 项目准备-任务3 –子任务2-任务实施准备.doc 定义：CSS就是(Cascading Style Sheets)“层叠样式表”，简称样式表，它是一种定义网页页面排版样式的工具 特点： 1、CSS精确地控制网页面里各元素的格式，通过修改一个 文件就可以改变大量网页的外观和格式； 2、CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持； 3、编码更少，下载速度更快； 知识点： （一）CSS基础 提问：属于网页设计 哪种标准语言？ 将样式表文件嵌入HTML或XHTML文档的方法  (1)一般是嵌入到文档头即:head标记中 (2)将样式表加入到代码行中 (3)将外部CSS文件链接到HTML或XHTML文档 (4)将外部CSS文件导入到HTML或XHTML文档 链接外部样式表 导入外部样式表 内嵌样式表 提问 内部样式表 知识点： （二）语法结构 1. CSS基本语法结构 CSS的语法结构由三部分组成： 选择符(selector) 属性(properties) 属性值(value) 书写格式如下： selector {property: value} 选择符 {属性:值} 提问 练习：请大家快速完成一个CSS命令语句的编辑，内容自定义 2、选择符的类型 3种 HTML或XHTML标记选择符：HTML或XHTML标记 如 body、p、table等，属性和值要用冒号隔开： 例如 style type=“”body {margin: 50px 40px 20px 10px;} /style id选择符：#选择符 （id属性） 定义一个元素的独特样式，每个id属性的值是唯一的，必须 以字母开头并且仅包含字母、数字或连字符(字母:A~Z、a~z) 例如：style type=“”#m{bgcolor:#00ffff;width:260px;height:160px;}/style bodyp id=“m”欢迎使用CSS层叠式样式表/p/body 类选择符：.选择符（class属性） 类的名称可以是任意英文单词或以英文开头与数字的组合， 一般以其功能和效果简要命名。 例如： style type=“”.t{color:#0000ff;font-family:”隶书”}/style bodyp class=“t”欢迎使用CSS层叠式样式表/p/body 提问 知识点： （三）CSS元素分类 1、块级元素 (display:block)每个块级元素都从新行开始，其后元 素也要另起一行开始，如div 2、内联元素 (display:inline)不需要在新行内显示，其后元素也不 必另起一行，如span 3、列表项 (display:list-item)和列表类似 块状元素与内联元素区别 块状元素 内联元素 最大区别：块状元素可以定义大小，即设置宽度、高度属性 知识点：(四)盒模型 (边距、填充距) left 内容宽度、边距、填充据、边框之间的关系，如下图所示： 知识点：(四)盒模型  (边距、填充距) 整个区域宽度？ =20+10+40+200+40+10+20=340px 边框默认样式为0(即不显示)； 填充距padding不可以 为负； 如果盒中为空，即使定义了宽度高度为100%，实际上只占0%，因此不会被显示。 left 任务实施 ：网页对象布局(文本/图像设计) 请根据“盒模型”规则，如图示使用DW在网页上设计一块区域： 内容宽度：600px 填充距：20px，左右一致 边框：10px，包括四周 边距：30px，左右一致 区域内容：文本和图像编辑各一 课后作业 完成本次课任务3-子任务1实施总结和第4次课任务3-子任务2实施准备 上传: FTP:///up/ 第2周作业 注意：作业文件夹一定要按命名规则命名 * *