《前端网页设计 教学课件 ppt 作者 杜黎强第3次课》由会员分享，可在线阅读，更多相关《前端网页设计 教学课件 ppt 作者 杜黎强第3次课（12页珍藏版）》请在金锄头文库上搜索。
1、教学导入,教学实施,知识点讲解 任务实施 请大家完成本次课课中页：任务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、网页的外观和格式； 2、CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持； 3、编码更少，下载速度更快；,知识点： （一）CSS基础,提问：属于网页设计 哪种标准语言？,将样式表文件嵌入HTML或XHTML文档的方法,(1)一般是嵌入到文档头即:标记中 (2)将样式表加入到代码行中 (3)将外部CSS文件链接到HTML或XHTML文档 (4)将外部CSS文件导入到HTML或XHTML文档,链接外部样式表,导入外部样式表,内嵌样式表,提问,内部样式表,知识点： （二）语法结构,1. CSS基本语法结构 CSS的语法结构由三部分组成
3、： 选择符(selector) 属性(properties) 属性值(value) 书写格式如下： selector property: value 选择符 属性:值,提问,练习：请大家快速完成一个CSS命令语句的编辑，内容自定义,2、选择符的类型 3种,HTML或XHTML标记选择符：HTML或XHTML标记 如 body、p、table等，属性和值要用冒号隔开： 例如 body margin: 50px 40px 20px 10px; id选择符：#选择符 （id属性） 定义一个元素的独特样式，每个id属性的值是唯一的，必须 以字母开头并且仅包含字母、数字或连字符(字母:AZ、az) 例如
4、：#mbgcolor:#00ffff;width:260px;height:160px; 欢迎使用CSS层叠式样式表 类选择符：.选择符（class属性） 类的名称可以是任意英文单词或以英文开头与数字的组合， 一般以其功能和效果简要命名。 例如： .tcolor:#0000ff;font-family:”隶书” 欢迎使用CSS层叠式样式表,提问,知识点： （三）CSS元素分类,1、块级元素 (display:block)每个块级元素都从新行开始，其后元 素也要另起一行开始，如div 2、内联元素 (display:inline)不需要在新行内显示，其后元素也不 必另起一行，如span 3、列表
5、项 (display:list-item)和列表类似,块状元素与内联元素区别,块状元素 内联元素,最大区别：块状元素可以定义大小，即设置宽度、高度属性,知识点：(四)盒模型 (边距、填充距),内容宽度、边距、填充据、边框之间的关系，如下图所示：,知识点：(四)盒模型 (边距、填充距),整个区域宽度？ =20+10+40+200+40+10+20=340px 边框默认样式为0(即不显示)； 填充距padding不可以 为负； 如果盒中为空，即使定义了宽度高度为100%，实际上只占0%，因此不会被显示。,任务实施 ：网页对象布局(文本/图像设计),请根据“盒模型”规则，如图示使用DW在网页上设计一块区域： 内容宽度：600px 填充距：20px，左右一致 边框：10px，包括四周 边距：30px，左右一致 区域内容：文本和图像编辑各一,课后作业,完成本次课任务3-子任务1实施总结和第4次课任务3-子任务2实施准备 上传: FTP:/192.168.60.1/up/ 第2周作业 注意：作业文件夹一定要按命名规则命名,
