admin 管理员组文章数量: 1086019
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://roclinux.cn/p/1706311762a505371.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
mac电脑系统占了100多G如何找到没用的文件
说明：文章中图示系统占69G是我清理之后的截图。开始系统占了134G，可用只有2G，不时收到提醒。现在的结果是，可用达到87G. 方法如下&#x
android 使用浏览器打开指定页面
今天，简单讲讲android里如何使用浏览器打开指定的网页。 之前，我做一个功能时，服务器返回一个url地址，我需要跳转到指定网页。却发现自己不知道怎么
微信内置浏览器调起外部浏览器打开指定网页连接
此方法可以实现微信内置浏览器跳转到手机其它浏览器，现在网上其它的方法都只是一个页面，让访问者自己手动点右上角浏览器打开，而这个不同，是可以直接自动跳转的。 安卓访问时可以直接自动跳转浏览器；IOS 就复杂一点了，需要点一下然后借助手机淘宝才
前端pdf文件直接下载而不是在浏览器直接打开
在 pdf 后缀添加 ?response-content-typeapplicationoctet-stream <a v-if"scope.row.files.fileName" :href"sco
解决pyecharts运行后产生的html文件用浏览器打开空白
问题描述： pyechart生成html文件 原来可以在浏览器中正常显示， 过了一段时间后重新打开同一个html文件，浏览器页面显示空白 原HTML，或
download.js 实现txt,js文件等浏览器下载 而不是打开
现在本人正在做聊天系统，最近支持收发文件，那下载当然是不可避免的 1.第一步想的是open一个窗口下载文件但事实证明显然不合适，现在的浏览器都是会主动拦截弹窗 2.a通过
windows下定时自动打开某网页并在访问结束后自动关闭浏览器
2019独角兽企业重金招聘Python工程师标准>>> 思路：使用windows下的bat脚本文件执行“打开网址->等待->关闭浏览器”的操作；使用windows
通过js就可以判断当前页面是在什么浏览器打开的
<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title><title> <h
html浏览器图片不显示图片,教你网页图片显示不出来怎么办
网页是构成网站的基本元素，是一个包含HTML标签的纯文本文件，而文字与图片是构成一个网页的最基本的元素。今天，小编就给大家介绍一下网页图片显示不出来的解决方法
页面切换到word文档后，鼠标总是转圈怎么办？
1、点击右上角的File 2、点击选项 3、先点击加载项，再点击转到 4、取消不常用加载项前面的√，然后点击确定就可以了
javacsv.jar写csv文件时，数字过长会变成科学表达法怎么办
其实网上很多答案给出的答案是正确的，csv文件的分隔符为逗号，我们写一个t在数字的后面就可以实现数字正常显示的效果，当然了，如果这么简单一说就解决了问
Windows 11清除无效、回收站、过期、缓存、补丁更新文件
Windows 11与之前的Windows版本类似，也需要定期清理无效、垃圾、过期、缓存文件来保持系统性能和存储空间的优化。以下是在Windows 11中进行这些清理操作的一些建议方法： 磁盘清
从Linux服务器下载文件到window本地电脑
1. 用sz命令 如果通过xshell连接到服务器，且为SSH方式，则可以用sz命令，直接在Linux的提示符下操作。 sz <文件路径……文件名> 此方法
系统映像恢复 进不了系统_如何从Windows系统映像中恢复特定文件
系统映像恢复 进不了系统 Windows provides a fail safe way of recovering your entire hard drive with system images, but what if you o
windows系统，删除文件慢，使用命令行快速删除大文件
在删除、复制、移动文件夹的时候经常遇到这样的情况：如果文件夹里的文件非常多，文件夹总容量非常大时，文件删除速度就会变得缓慢，这是因为Windows系统在
Windows系统缺少找不到libusb0.dll文件的解决办法
其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题，如果是新手第一时间会认为是软件或游戏出错了，其实并不是这样，其主要原因就是你电脑系统的该dll文件丢失了或没有安装一
NextChat：一键免费部署你的私人 ChatGPT 网页应用，支持 Claude, GPT4 & Gemini Pro 模型。（MCP需要2.16版本才支持）
NextChat：一键免费部署你的私人 ChatGPT 网页应用，支持各种流行的AI大模型。 官网：https:githubChatGPTNextWebNextCh
②提供盒子类资源下载
瑞芯微RK系列刷机包：Download - Armbian，Index of archiverk322x-boxarchive 海思（海纳斯）
浏览器弹不出上网登录页面
1、浏览器高级设置，将[禁止弹出页面]这一功能关掉。 2、浏览器的代理关掉，把[禁止cookie]关掉。 3、关闭防火墙。 今天是插上网线怎么都连不上网，我看笔记本端口的
U盘报错，无法复制文件和文件消失
U盘报错，无法复制文件和文件消失 一、U盘无法复制，如图的情况。二、U盘内容不见了 一、U盘无法复制，如图的情况。 一般来说应该是U盘受到损伤，或者病
发表评论