admin 管理员组文章数量: 887021
2024年1月27日发(作者：黑马程序员js教程)
第9讲 布局技术之二—Div+CSS
1.1教学目标：
知识目标
1. 理解CSS盒子模式。
2. 熟练掌握Div的创建与设置方法。
技能目标
能够利用DreamweaverCS3预设的CSS布局创建页面。
品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
1. 掌握Div的创建与设置方法
1.3 教学难点
理解CSS盒子模式。
1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：
一、Div+CSS —构建任务
1. 工作流程
在站点中新建一个页面并保存。
插入一个Div并设置相关CSS规则，使之成为外部容器。
根据事先拟好的布局草图，定制四个Div标签并分别设置相关CSS规则。
在各Div窗口中插入相应页面元素。
检查整个布局效果并加以调整，保存并预览布局效果。
二、什么是Div标签
Div标签一般用来定义网页上的一个特定区域，将文字、图片和表格等各种网页元素放在此区域里，再用CSS对该
三、CSS的盒子模式
要利用CSS进行网页布局，需要借助HTML的一个标签元素Div，也就是目前比较流行的Div+CSS来布局网页结构。需要接触到的知识点就是CSS的盒子模式，这也是Div排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，而改用CSS排版后，通过CSS定义的大小不一的盒子和盒子嵌套来编排网页。
任务六 Div+CSS —问题探究
利用CSS进行网页布局，需要借助HTML的一个标签元素Div，通过CSS定义的大小不一的Div和Div嵌套来编排页面结构，也就是目前比较流行的Div+CSS来布局网页结构。
之所以称CSS为盒子模式，主要是因为CSS盒子模式具备的四种属性：内容(content)、
1
填充(padding)、边框(border)、边界(margin)，与日常生活中所见的盒子类似。内容是盒子里装的东西；填充则是防止盒子里的东西（贵重的）损坏而添加的抗震辅料；边框就是盒子本体；边界则期望盒子摆放时留足一定空隙保持通风，同时便于取出。在设计网页时，利用CSS的强控制能力，灵活控制这四种属性，使网页区块分明、代码易读、强化代码重用，实现页面复杂布局的控制效果 。
四、Div+CSS布局设计思路
用Div来定义语义结构；
用CSS来美化网页，如加入背景、线条边框、对齐属性等；
五、典型的版面实例
该实例采用分栏结构，即页头、导航栏、内容、版权四部分组成。
Div+CSS标准的优点
符合W3C标准。微软等公司均为W3C支持者，这样可以保证您的网站不会因为将来网络应用的升级而被淘汰。
结构清晰，容易被搜索引擎搜索到，天生优化了seo 搜索引擎(搜索引擎)；提高易用性，可以一次设计，随处发布。支持浏览器的向后兼容，几乎在所有的浏览器上都可以使用。
表现和内容相分离。这也用CSS布局的特色所在，网页由内容构成，而将网页设计部分剥离出来放在一个独立样式文件中，代码变得更简洁，使页面和样式的更新变得更加方便，提高了网页下载速度。
Table 布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起。而Div 更能体现样式和结构相分离，结构的重构性强。
六、预设CSS布局创建页面
Dreamweaver CS3提供了30 多个定制的CSS布局来创建CSS布局页面；也可以创建自己的CSS 布局，并将它们添加到配置文件夹中，就能在“新建文档”对话框中显示自定义的布局选项。CSS布局可以在下列浏览器中正确呈现：Firefox（Windows和Macintosh）1.0、1.5 和
2.0；Internet Explorer (Windows) 5.5、6.0、7.0；Opera（Windows 和 Macintosh）8.0、9.0；以及 Safari 2.0。
选择“文件/新建”，弹出“新建文档”对话框，如图所示。选择“空白页”类别→选择“页面类型”下的“HTML”页面类型→从 32种不同布局中选择需要的CSS 布局。
在对话框右边的“预览”窗口显示该布局，并给出所选布局的简短说明。
从“文档类型”弹出菜单中选择文档类型。从“布局CSS位置”弹出菜单中选择布局 CSS 的位置。
单击“创建”按钮，一张已定制好的CSS布局新页面就自动生成了，如图所示。此时可根据规划设计放置不同网页元素即可。
向选项列表添加自定义 CSS 布局
如果希望自定义 CSS 布局能够与Dreamweaver 提供的其它布局一样出现在预设布局选项列表中，必须保证自定义的HTML布局文件扩展名为.htm，且将此页面添加到Adobe
Dreamweaver CS3ConfigurationBuiltInLayouts 文件夹中。
将自定义的布局预览图像（例如.gif或.png文件）也添加到 Adobe Dreamweaver
CS3ConfigurationBuiltInLayouts 文件夹中，默认PNG图像大小为227×193像素。
还可以创建自定义备注文件，复制并粘贴Adobe Dreamweaver
CS3ConfigurationBuiltInLayouts_notes 文件夹中的任意一个备注文件，然后修改该副本备注文件为自定义备注文件。
1.8归纳总结：
本讲主要让同学们理解CSS盒子模式，熟练掌握Div的创建与设置方法。
2
1.9课后作业题：
1. DIV+CSS布局的优势和劣势？
2. 如何创建DIV？
3. 如何设置DIV？
3
版权声明：本文标题：《网页设计与制作》教案-第9讲 布局技术之二—Div+CSS 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1706311762h505371.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
电脑开机提示文件损坏或丢失无法启动怎么办
电脑开机时，如果遇到提示某些系统文件损坏或丢失，导致系统无法正常启动。这种情况通常是由于系统关键文件受损、硬盘问题、恶意软件感染或不当关机引起的。好消息是，大多数情况下&am
matlab光盘映像文件可以删除吗_Windows10光盘映像去哪儿下载？
点击箭头处 “蓝色字” ，关注我们哦！！ 题外话。2019年底，微软已经开始向安装了Windows7的电脑发送了停止安全更新和技术支持的通知，截止日期——2020年1月14日。不管你再怎么依赖Win7、再怎么吐糟Win10，都改变不了它是主
在WSL中访问Windows系统的文件
前言 WSL是Windows Subsystem for Linux的简称。 windows中安装的ubuntu子系统，不知道怎么在ubuntu中访问windows的文件 访问方法 cd mntcXXX
利用tftp在Windows端和开发板互传文件
最开始要搞nfs服务，但是在内核里打开nfs之后编译生成的文件是损坏的，搞了大概一两天，不得已放弃了nfs服务，而tfpt的搭建比较简单
win系统如何运行msi后缀文件
win系统如果运行msi后缀文件 1、用管理员运行命令行：输入：msiexec package 文件路径及名称 案例：msiexec package d:progr
【windos系统故障】换内存条导致的开机失败直接进入bios问题记录【修复EFI系统引导文件丢失】
背景 本人喜提内存条一对，大喜，遂拆机更换新内存，更换后启动失败，开机就自动进入bios界面，所有硬件均能正常识别&#x
报错解决——苹果电脑mac装windows10，总是提示“启动转换”安装失败：拷贝Windows安装文件时出错
报错原因： 所安装的镜像文件大于4GB。 解决办法一： 使用小于4GB的镜像文件。 参考文章： 安装小于4GB的windows系统镜像 小于4GB的windows1
Windows文件资源管理器增强工具
引言： 资源管理器在我们使用电脑时是经常用到的，各种文件资源等的分类整理都离不开它。但是Windows Explorer确实不好用，不智能，不符合人体工
Win10打包tar.gz文件，Win10使用tar命令，Win10使用linux基本命令
Windows系统使用tar命令打包tar.gz文件 使用7z命令的时候无意打了tar命令，结果发现在windows powershell上也能使用tar命令？！ 试了一下
电脑系统文件损坏？三种解决方案助你恢复正常使用
电脑系统文件损坏？三种解决方案助你恢复正常使用 在我们日常电脑的使用过程中，难免会遇到一些棘手的问题，比如电脑无法开机、应用闪退、频繁弹出错误提示等。这些现象往往预示着系统的某些文件可能已经遭到了损坏。面对这类情况，不必过于慌张，本文将介
windows下载linux文件夹命令,windows怎么从命令行下载文件
大家或许知道如何在linux的命令行中使用wget去下载文件，那么Windows呢，同样有它自己的方法，当然其实很多不同的方法，今天学习啦小编给大家介绍
Windows7文件夹中的文件随意拖动排列的解决办法
转 ：http:wenku.baidulink?urlMn6lB6LDtPgknPtnXGfObWGzi7H0M6yedxE2vCW5XIA22-vCl-naqgY8UzJUlvfFZ4A4YQ_8w4TqF4_
Windows 7 打开chm文件不显示内容的解决办法
一般网上下载的chm格式的电子书，在Windows 7系统下打开无法显示内容，这严格来说并不是Windows7的bug（当然要说是bug也可）&
如何在Windows下将文件压缩成tgz格式的压缩包linux系统 centos下
安装7-ZIP以后，直接在你想要打包的文件上点右键菜单（注意不要直接打包文件夹，而是打开文件夹后，选中全部文件，要不LUM下解压后
【解决win10无法播放 MP4文件】Windows 10自带的 “电影和电视“ 无法播放MP4文件的解决方法
一、前言： 部分用户的 Windows 1011 系统自带播放器（电影&电视） 无法播放 H265 编码的视频，原因是解码器没有被预先安装。
Windows 12 网页版
Windows 12 网页版是一个在线开源项目，由一个初三学生用前端开发三件套 HTMLCSSJavaScript 实现的一个网页版的 Windows 12，灵感来源于Windows 12 概念版
如何windows中的文件移到VMware中的ubuntu系统中
直接将需要移动的文件由Windows系统中拖拽到ubuntu系统中即可。或者在window系统下复制文件，在ubuntu系统中粘贴文件也可完成文件的转移。
Windows7安装VS2019 补丁文件
当前windows7版本无法安装VS，可能缺少server pack 1，在计算机属性界面查看，版本时候有server pack 1，如果没有需要安装补
app调用手机其他应用打开文件
根据需求，app中展示的文件需要实现分享和用手机安装的相关软件打开查看，所以就用到了“其他应用打开文件”的功能，供用户不同途径的查阅。 这里，我们直接
VMware清理vmdk文件
VMware清理vmdk文件 文章目录 VMware清理vmdk文件**在虚拟机上操作****在主机上操作** 问题 主机是Windows，安装了VMWare，在VMWare中安装了虚拟机Cent
发表评论