网页设计-任务六Div+CSS.ppt

网页设计-任务六Div+CSS.ppt

ID:49262473

大小:675.50 KB

页数:16页

时间:2020-02-02

网页设计-任务六Div+CSS.ppt_第1页
网页设计-任务六Div+CSS.ppt_第2页
网页设计-任务六Div+CSS.ppt_第3页
网页设计-任务六Div+CSS.ppt_第4页
网页设计-任务六Div+CSS.ppt_第5页
资源描述:

《网页设计-任务六Div+CSS.ppt》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、网页设计DreamweaverCS3项目教程项目三布局技术任务六布局技术之二—Div+CSS技能目标能够利用DreamweaverCS3预设的CSS布局创建页面。能够理解Div+CSS所体现的表现和内容相分离特性。。知识目标理解CSS盒子模式。熟练掌握Div的创建与设置方法。掌握CSS规则设置方法。项目三布局技术3.1.1使用Div+CSS搭建页面3.1.2问题探究—Div+CSS布局认识表格3.1.3知识拓展—使用预设CSS布局创建页面任务六布局技术之二—Div+CSS项目三布局技术任务六Div+CSS—构建任务工作流程在站点中新建一个页面并保存。插入一个Div并设置相关CSS规

2、则,使之成为外部容器。根据事先拟好的布局草图,定制四个Div标签并分别设置相关CSS规则。在各Div窗口中插入相应页面元素。检查整个布局效果并加以调整,保存并预览布局效果。项目三布局技术任务六Div+CSS—构建任务网页预览效果项目三布局技术任务六Div+CSS—问题探究Div标签一般用来定义网页上的一个特定区域,将文字、图片和表格等各种网页元素放在此区域里,再用CSS对该

标签定义的区域进行定位和样式的设置。CSS样式表不但是定义页面样式的良好工具,同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布局工具,为了提高设计效率,可以事先定义好布局所需的CSS样式规

3、则,然后在“插入Div标签”中应用。使用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器。项目三布局技术任务六Div+CSS—问题探究CSS的盒子模式要利用CSS进行网页布局,需要借助HTML的一个标签元素Div,也就是目前比较流行的Div+CSS来布局网页结构。需要接触到的知识点就是CSS的盒子模式,这也是Div排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,而改用CSS排版后,通过CSS定义的大小不一的盒子和盒子嵌套来编排网页。项目三布局技术任务六Div+CSS—问题探究CSS的盒子模式利用CSS进行网页布局,需要借助HTML的一个标签元

4、素Div,通过CSS定义的大小不一的Div和Div嵌套来编排页面结构,也就是目前比较流行的Div+CSS来布局网页结构。项目三布局技术任务六Div+CSS—问题探究CSS的盒子模式之所以称CSS为盒子模式,主要是因为CSS盒子模式具备的四种属性:内容(content)、填充(padding)、边框(border)、边界(margin),与日常生活中所见的盒子类似。内容是盒子里装的东西;填充则是防止盒子里的东西(贵重的)损坏而添加的抗震辅料;边框就是盒子本体;边界则期望盒子摆放时留足一定空隙保持通风,同时便于取出。在设计网页时,利用CSS的强控制能力,灵活控制这四种属性,使网页区块分

5、明、代码易读、强化代码重用,实现页面复杂布局的控制效果。项目三布局技术任务六Div+CSS—问题探究Div+CSS布局设计思路用Div来定义语义结构;用CSS来美化网页,如加入背景、线条边框、对齐属性等;在这个CSS定义的盒子内加上内容,如文字、图片等。项目三布局技术任务六Div+CSS—问题探究典型的版面实例该实例采用分栏结构,即页头、导航栏、内容、版权四部分组成。Div+CSS排版结果图项目三布局技术任务六Div+CSS—问题探究Div+CSS标准的优点符合W3C标准。微软等公司均为W3C支持者,这样可以保证您的网站不会因为将来网络应用的升级而被淘汰。结构清晰,容易被搜索引擎搜

6、索到,天生优化了seo搜索引擎(搜索引擎);提高易用性,可以一次设计,随处发布。支持浏览器的向后兼容,几乎在所有的浏览器上都可以使用。表现和内容相分离。这也用CSS布局的特色所在,网页由内容构成,而将网页设计部分剥离出来放在一个独立样式文件中,代码变得更简洁,使页面和样式的更新变得更加方便,提高了网页下载速度。Table布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起。而Div更能体现样式和结构相分离,结构的重构性强。项目三布局技术任务六Div+CSS—知识拓展预设CSS布局创建页面DreamweaverCS3提供了30多个定制的CSS布局来创建CSS布局页面;也可以创建

7、自己的CSS布局,并将它们添加到配置文件夹中,就能在“新建文档”对话框中显示自定义的布局选项。CSS布局可以在下列浏览器中正确呈现:Firefox(Windows和Macintosh)1.0、1.5和2.0;InternetExplorer(Windows)5.5、6.0、7.0;Opera(Windows和Macintosh)8.0、9.0;以及Safari2.0。项目三布局技术任务六Div+CSS—知识拓展预设CSS布局创建页面选择“文件/新建”,弹出“新建文档”

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。