admin 管理员组文章数量: 1184232
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.roclinux.cn/p/1706311762a505371.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
Symbian上播放H264文件_多slice解码
上一篇写了关于在Symbian平台上实现H264编码的RTSP流播放的文章， 很多人给我发来了
space-vim键绑定完全手册：助记快捷键提升10倍编码效率
space-vim键绑定完全手册：助记快捷键提升10倍编码效率 space-vim是一个专为Vim和NeoVim设计的现代化vim发行版，通过智能的助记键绑定系统，让开发者能够快速掌握并大幅提升编码效率。本文将详细介绍spac
电脑垃圾清理全攻略
1、手动清理 （1）打开资源管理器，右键-属性，点击“磁盘清理”，然后选中要清理的文件，点击确定即可； （2）对于一些软件的卸载残留，可以打开注册表，找到各目录下的software子目录，从里面找那些你已经卸载过的软件
小米路由器SSH安装与alist服务自动化部署,
1.安装开发版2.刷ssh3.putty用ssh模式连接到路由器，用户名root，密码见小米路由器开ssh网页时的提示。4.下载alist的linux二进制文件包。选3.28.0. 下载正确
VMware还原Windows11 ghost镜像_vmware ghost
环境Windows 11 家庭中文版 VMware Workstation 17 Pro 石大师装机大师 Windows 11 ghost系统镜像步骤 准备
迅雷极速版任务出错的解决办法（亲测可用）_极速版报错任务出错的处理方法
最近迅雷极速版bt下载许多任务出现-任务出错，通过修改hosts文件可以绕过迅雷的解析服务器，方法如下：windows系统进入目录 C:WindowsSystem32driversetc，
告别传统器，这款“颜值实力派”开源神器，让你体验极致高速与优雅_类似motrix软件
引言：下载，是CSDNers的“生命线”，但痛点无处不在！ 各位CSDNers，IT领域的探索者们，大家好！ 我们每日与代码、文档、开源项目、系统镜像、各类资源打交道，下载几乎是日常工作中不可或缺的一环。然而，你是否曾
彻底清除U盘Autorun.inf病毒的自动化脚本
简介：本文介绍了一个自动化脚本，专门用于删除利用Autorun.inf文件自动运行的病毒。通过一系列详细的步骤，包括断开U盘连接、显示隐藏文件、删除Autorun.inf文件、检查注册表以及全面扫描修复等，帮助用户清除病毒并提供防护建
删除autorun.inf病毒的批处理 简单三招预防_autoruninf批处理
选择“显示隐藏文件”这一选项后，发现U盘有个文件闪出来一下就马上又消失了，而再打开文件夹选项时，发现仍就是“不显示隐藏文件”这一选项。而且刚发现点击C、D等盘符图标时会另外打开一个窗口！这就是臭名昭著的autorun.inf病毒，下面
电脑用久了又卡又慢，教你一招让你电脑调整为最佳性能_电脑卡顿怎么办教你一招恢复流畅
我相信每个人都有这样的经历。电脑用久了卡顿、变慢怎么办？教你学会这些操作，瞬间提升电脑速度，让我们来看看。 方法一：清理磁盘空间 电脑死机很可能是因为C盘空间不足，长期使用会产生大量的缓存垃圾。因此，您需要打开【本电脑
一学就会：EasyRecovery简易指南帮你快速恢复误删的文件
简介：EasyRecovery是一款高效的文件恢复软件，它帮助用户恢复因误删除、格式化或其他原因丢失的文件。该工具扫描未被覆盖的硬盘空间，找回丢失文件的元数据和内容。它支持包括硬盘、外部硬盘、USB驱动器和SD卡在内的多种存储设备，并
**从PowerDVD到图片：你的电影截图攻略**
方法一： Windows Media Player10 首先介绍，最简单的视频截图方法。Media Player10是常用的视频播放器，也可以视频截图。我们在播放电影的过程中，遇到想截取的图片，只需按下【“Ctrl＋I”
Flash大改造：让你的项目瞬间吸引眼球的创意技巧
1.重装IE6两妙招 第一种方法：点击“开始”菜单中的“运行”，在“运行”对话框中输入regedit打开注册表编辑器，展开注册表，找到HKEY_LOCAL_MACHINESOFTWAREMicrosoftActive S
笔记本Windows10下的函数问题？这篇文章让你彻底告别困扰！
笔记本Windows10函数不正确？这里有解决方法在Windows10操作系统的使用过程中，许多笔记本电脑用户可能会遇到“函数不正确”的错误提示，这不仅影响了用户的正常使用，还可能导致一些关键功能无法正常运行。面对这种情
WPCAP.dll不见了？别担心，这里有轻松解决办法！
在计算机使用过程中，不少用户可能会遇到wpcap.dll文件丢失的问题，这通常会导致依赖于该文件的应用程序无法正常运行，如Wireshark网络封包分析器等。wpcap.dll是WinPcap套件的一部分，该套件为Windows操作系
狂怒2"启动失败？wpcap.dll问题轻松修复，告别卡顿！
在启动《狂怒2》时遇到 wpcap.dll丢失的问题，可能会让玩家感到困扰。不过，通过以下几个步骤，您可以快速解决这一问题，恢复游戏的正常运行。 一、了解wpcap.dll文件wpcap.d
Win7系统wpcap.dll丢失？轻松几步，帮你快速找到解决之道！
wpcap.dll作为WinPcap组件之一，在Windows 7 32位系统中扮演着核心角色，专门用于实现网络数据包的捕获功能。该动态链接库的缺失，可能会直接影响到系统中网络监控及分析软件的正常运作，进而妨碍到网络安全监控与系统性能
掌握C#中的Flash中心压缩与解压缩，提升项目效率
【【【【C#压缩文件】】】】方法1：【filepath想要压缩文件的地址】【zippath输出压缩文件的地址】private void GetFileToZip(string f
彻底解决Dism修复Windows系统映像的困扰，轻松搞定！
如何使用DISM对Windows系统映像进行修复在前些天我更新电脑驱动的时候，更新程序报错了。我检查后发现是系统映像完整性的问题。在我解决完问题后，我决定把这个解决的过程记录下来，希望能帮到别人。 那么正文开始
Win10系统备份轻松搞定：掌握captureimage命令的关键技巧
Win10自带的备份工具备份系统Windows操作系统经过从win98,win2000,winxp,win7,win8到win10的不断更新和完善，功能已经非常强大、完备了。但伴随着微软把重点转移到云端，对更新维护不再保
发表评论