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://www.roclinux.cn/p/1706311762a505371.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
android 使用浏览器打开指定页面
今天，简单讲讲android里如何使用浏览器打开指定的网页。 之前，我做一个功能时，服务器返回一个url地址，我需要跳转到指定网页。却发现自己不知道怎么
前端pdf文件直接下载而不是在浏览器直接打开
在 pdf 后缀添加 ?response-content-typeapplicationoctet-stream <a v-if"scope.row.files.fileName" :href"sco
Android中通过intent打开浏览器到指定网页
android系统内置了很多应用，包括电话拨号，短信，浏览器等，这里创建一个简单的Android程序，调用内置的浏览器打开指定的地
解决pyecharts运行后产生的html文件用浏览器打开空白
问题描述： pyechart生成html文件 原来可以在浏览器中正常显示， 过了一段时间后重新打开同一个html文件，浏览器页面显示空白 原HTML，或
java用浏览器下载文件_JAVA读取文件流,设置浏览器下载或直接预览操作
最近项目需要在浏览器中通过URL预览图片。但发现浏览器始终默认下载，而不是预览。研究了一下，发现了问题：设置response的Header，注意
设置vue运行npm run dev时候，项目在浏览器自动打开页面的方法
在configindex.js找到dev:{}里面的autoOpenBrowser: 设置为true，重新npm run dev一次就自动弹出浏览器页面啦！
Window 10 系统EDGE浏览器使用IE模式加载页面
1、在EDGE浏览器地址输入页面，直接打开页面 2、在浏览器右上角三个点，点击展开，点击使用IE模式下重新加载 3、在弹出的提示框中，勾选下次再IE模式
eclipse内置浏览器404打不开网页
在eclipse中启动tomcat显示网页 http:localhost:8080 为404，但是在外置浏览器中可以正常显示网页 原因： eclipse内置浏览器是IE࿰
一个切割PDF文件的简单的方法 -只需要chrome浏览器
只需要一个chrome浏览器。 使用chrome浏览器打开一个pdf，点击右上角的打印图标，如下图接着进入下图所示的页面，将Destination改为Save as P
HTML5页面如何在手机端浏览器调用相机、相册功能
最近在做一个公司的保险信息处理系统项目，开发微信端浏览器访问的HTML5的页面，页面中有一个<input id"input" type"file"&
word文件设置了密码，忘记了密码怎么办？
word文件是有两种密码的，一个是打开密码、一个是编辑限制密码 设置了word密码之后，一定要记住自己设置的密码，要么设置简单的密码、要么将设置的密码记录在一个地方。 但
网页打开后，微信分享的时候，微信没抓到图片怎么办？
网页打开后，微信分享的时候，微信没抓到图片怎么办？ 或者我们不想让微信随便抓，想有个默认的图片怎么办？ 我们这边采用最简单粗暴的
操作系统之页面置换算法（FIFO、LFU、LRU、OPT算法）
操作系统之页面置换算法（FIFO、LFU、LRU、OPT算法） TIPS： 主存：实际上的物理内存。 虚存（虚拟内存&#x
从Linux服务器下载文件到window本地电脑
1. 用sz命令 如果通过xshell连接到服务器，且为SSH方式，则可以用sz命令，直接在Linux的提示符下操作。 sz <文件路径……文件名> 此方法
windows系统，删除文件慢，使用命令行快速删除大文件
在删除、复制、移动文件夹的时候经常遇到这样的情况：如果文件夹里的文件非常多，文件夹总容量非常大时，文件删除速度就会变得缓慢，这是因为Windows系统在
win10c语言文件不运行,win10系统运行程序出现“dll文件没有被指定在windows运行”的解决教程...
win10系统使用久了，好多网友反馈说win10系统运行程序出现“dll文件没有被指定在windows运行”的问题，非常不方便。有什么办法可以永久解决win10系统运行程序出现“dll文件没有被指
ChatGPT高级语音模式正在向Web网页端推出！
大家好，我是木易，一个持续关注AI领域的互联网技术产品经理，国内Top2本科，美国Top10 CS研究生，MBA。我坚信AI是普通
②提供盒子类资源下载
瑞芯微RK系列刷机包：Download - Armbian，Index of archiverk322x-boxarchive 海思（海纳斯）
Beyond Compare 4 文件对比 安装、激活
1.Beyond Compare 4下载 2.Beyond Compare 4 激活 删除C:UsersadminAppDataRoamingScooter SoftwareBeyond Compar
win11开机都会显示“由于启动计算机时出现了页面文件配置问题，Windows在你的计算机上创建了一个临时页面文件。所有磁盘驱动器的总页面文件大小可能稍大于你所指定的大小。”-- 已解决亲测
win11开机都会显示“由于启动计算机时出现了页面文件配置问题，Windows在你的计算机上创建了一个临时页面文件。所有磁盘驱动器的总页面文件大小可能稍大于你所指定的大小。”-- 已解决亲测 解决方案 单击->
发表评论