网页设计与制作项目教程（第四版） 模块06制作移动优先、响应快速的精美网站

网页设计与制作项目教程（第四版）模块06制作移动优先、响应快速的精美网站教学课件教学目标：学习目标理解div+css布局的基本原理及现代网页设计优势。掌握布局核心样式：flexbox、grid及媒体查询。了解Bootstrap框架及其在快速构建响应式网页中的作用。重点导读本章标志着从传统的表格排版向现代工业级布局的跨越，是网页开发职业技能的核心。教学目标：能力与素养能力：熟练设计复杂页面结构；调用Bootstrap搭建移动优先网页。素养：培养创新思维与审美；提升解决响应式设计中实际问题的能力。持续学习：关注Bootstrap最新版本特性，保持技术领先。职业素质模拟团队合作场景，理解开发流程中的沟通协调，追求技术极致。教学要求：知识要点表知识要点能力要求关联知识div+css布局优势了解表格布局与div+css布局特点对比布局相关的CSS样式熟悉布局核心属性：Float,Flex,GridBootstrap设计方法掌握12栅格系统、移动优先原则、组件调用Dreamweaver调用掌握内置Bootstrap组件插入与列尺寸调整任务引领1：“世界你好！”升级版任务说明：使用div+css布局，为首个案例“世界你好！”添加专业的页头和页脚，实现更完整的页面结构。设计逻辑通过层层嵌套的Div盒子，替代死板的表格。实现更快的加载速度和更好的SEO效果。步骤1：站点准备与视图切换为什么要拆分？在div+css布局中，实时观察代码结构与渲染效果的同步变化是避免布局“塌陷”的关键。打开“世界你好！”站点。将页头图片拷贝至images目录。双击编辑。切换至“拆分”视图。步骤2：创建容器样式.container居中逻辑auto左右边距是CSS实现页面水平居中的经典技巧。1200px设定了页面的最大显示宽度。在表格区域右击->“CSS样式”->“新建”。选择器名称填入：。方框设置：Width:Margin:Margin:步骤3：定义区域样式.top&.bottom浮动逻辑float:left使盒子具有流式排列特性。当宽度占满父容器时，会自动换行。新建样式：新建样式：Width:Float:Margin-top:参数值与保持相同。步骤4：定义内容分栏.left&.right比例逻辑800+400=1200。两个子盒子宽度之和刚好等于父容器，实现完美的两栏并排排版。新建样式：新建样式：Width:Float:Width:Float:专家提示：CSS选择器命名在新建CSS规则时：点号(.)：类选择器必须以点号开头（如.top），应用时则不带点（如class="top"）。井号(#)：ID选择器以井号开头，通常用于页面唯一的元素。语义化：命名应反映功能（如.header）而非样式（如.blue-box），便于维护。步骤5：层层嵌套Div标签结构嵌套结构图在后插入Div，Class为。在container内部：插入盒。插入空Div（用于换行）。在换行盒内插入和。插入盒。步骤6：将原图文迁移至Div盒子清理代码删除表格标签时，务必连同其嵌套的一并清理干净，保持DOM树整洁。.top：插入页头图片。.left：将原表格中的“小白人”图片拖入。.right：将标题文字“世界你好！”移入。.bottom：输入版权与备案信息，设置居中。最后：确认无误后删除原有表格。相关知识：Div+CSS布局的优势表现与内容分离：极大提升维护效率，修改样式不影响结构。控制样式丰富：相比表格，能更精细控制文字间距、段落缩进。提高访问速度：代码简洁，文件容量通常仅为表格布局的1/2。SEO友好：结构化代码更利于搜索引擎抓取核心内容。渲染原理浏览器处理表格需下载完整个Table才能显示；Div则能实现流式加载，用户体验更佳。核心概念：CSS盒模型详解所有Div都可以看作一个盒子，其宽度由以下部分组成：视觉示意图Content(内容)：装入物体的实际大小。Padding(填充)：内部缓冲，物体与盒子壁的距离。Border(边框)：盒子的厚度。Margin(边界)：盒子与外界的距离。布局常用CSS样式速查表样式名常用设置值作用说明floatleft/right控制盒子的左右浮动排列clearboth清除浮动，防止下方内容错位margin0auto设置外边距，实现水平居中overflowhidden溢出隐藏，防止内容撑破父容器border1pxsolid#ddd设置边框：粗细、样式、颜色任务引领2：教学资源下载页任务说明：使用Bootstrap框架制作一个“教学资源下载”网页。要求：适配手机与桌面电脑，具备响应式特性。移动优先Bootstrap默认采用移动优先策略。利用栅格系统，页面能随窗口大小自动调整列宽。步骤1：Bootstrap必备文件导入加载顺序必须先加载CSS后加载JS；在JS中，必须先加载jQuery核心库，Bootstrap插件才能生效。将放入css目录。将放入js目录。HTML引用位置：CSS：放在</head>标签前。JS：放在</body>标签前。步骤2：利用栅格建立基础布局12栅格原则Bootstrap将页面水平分为12份。col-2占1/6宽度，col-10占5/6宽度。使用作为最外层容器。使用定义行。使用定义列：页眉行：两个。Logo行：和。步骤3：调用Bootstrap导航组件组件优势直接复制官方组件代码，可获得经过严格测试的美观样式和交互效果，极大提高开发效率。在中插入导航组件（Nav）。设置类：(胶囊式)。设置对齐：(全等宽排列)。容器对齐：(垂直居中)。专家提示：CSS类的复合使用Bootstrap提供了大量预定义功能类：text-center：水平居中文字。border-top：快速添加顶边框。p-5/m-2：快速调整填充(Padding)与边距(Margin)。叠加规则：类名之间必须用英文空格分隔（如class="colsmalltext-right"）。相关知识：Bootstrap响应式断点表设备类型屏幕分辨率类前缀列数量之和超小设备（手机）<768px.col-xs-*或.col-*12小型设备（平板）≥768px.col-sm-*12中型设备（电脑）≥992px.col-md-*12大型设备（宽屏）≥1200px.col-lg-*12相关知识：Bootstrap常用内置组件Card(卡片)：用于公告、新闻列表。Carousel(轮播)：首页样图轮显。Navbar(导航栏)：顶部自动折叠导航。Modal(模态框)：弹出对话框效果。Progress(进度条)：数据加载显示。使用秘籍复制->粘贴->略作修改=专业页面任务引领3：汉堡样图轮播效果任务说明：使用Dreamweaver内置的Bootstrap功能，快速实现汉堡图片的Carousel(轮播)特效。软件特性Dreamweaver的可视化插入面板可以自动生成配套的JS依赖，并支持在“实时视图”下直接调整轮播时间。步骤1：新建Bootstrap文档自动生成点击“创建”后，DW会自动在站点根目录下生成css和js文件夹及所需的4个核心资源文件。“文件”->“新建”。选择“新建文档”->“HTML”。框架选择BOOTSTRAP。BootstrapCSS选择“新建”。不勾选“包含预构建布局”。步骤2：可视化插入容器与行DOM面板使用“DOM”面板（或状态栏标签栏）可以确保组件准确插入到父盒子的内部，而非平级位置。点击“插入”面板->“Bootstrap组件”。点击Container。光标定位于容器内，点击GridRowwithcolumn。在对话框中选择：嵌套。列数设为。步骤3：Carousel轮播组件配置文字显隐若文字与背景对比不强，可在类中添加使文字变黑，或添加半透明遮罩背景。在目标列点击Carousel。在代码区替换属性：修改下的内容文字。图片1：图片2：图片3：项目渐近：首页公告与卡片化重构Card组件将原index.html重命名备份。新建Bootstrap响应式页面。公告模块：使用Card组件。删除Card中的，使其占满当前列宽。迁移原有文本内容。项目渐近：热门图文升级为轮播展示动态交互相比静态表格，轮播效果能增加页面信息容量，提升用户的视觉愉悦感。在hot.html顶部拖入Container。注意：手工复制JS引用代码到Body结束前，否则效果不生效。将原有三列图片的列宽设为(占满12格)。第一列插入轮播组件，循环播放热门瞬间。专家提示：列的尺寸与偏移当内容不需要占满12格且需在中间显示时：拖拽调整：单击所需的列，拖动右侧控点。添加Offset类：增加。含义：在中型屏幕下，该列左侧空出3个栅格的宽度。应用：常用于登录表单居中排版。拓展训练：首页布局逻辑全拆解结构化分析：层次结构#Header：顶部Banner+菜单。#PageBody：#Footer：底部版权。#MainBody：主体内容（占位较大）。#SideBar：侧边栏。布局核心CSS代码范例技术保障clear:both是页脚的守护神。它确保页脚不会被上方浮动的侧边栏“挤入”主体内容区，强制页脚在下方起新行。专家提示：利用Chrome调试布局响应式设计离不开真机模拟：快捷键：按F12打开开发者工具。模拟器：点击左上角Toggledevicetoolbar图标。操作：可以在顶部选择iPhone、iPad等具体型号查看适配效果。重点：观察断点（Breakpoint）触发时列的自动换行情况。回味思考：客观题检测(1)1.使用div+css布局的主要目的是？

2.Bootstrap框架中栅格系统默认划分为多少列？

3.CSS样式中哪个用于清除之前的浮动影响？

回味思考：客观题检测(2)4.移动优先(Mobile