中文版Dreamweaver网页制作案例教程[2021版]项目六网页布局.pptxVIP

中文版Dreamweaver网页制作案例教程

目录contents项目一网页设计与制作基础知识项目二网站规划与站点创建项目三网页中的文本、图像与音视频项目四网页中的列表与超链接项目五网页中的表格与表单项目六网页布局项目七行为、模板与库项目八实战案例——制作爱学精品课网站

项目六网页布局掌握网页布局构建经典网页布局任务一任务二构建响应式布局任务三

网页中的大多数元素都可以看成一个矩形的盒子，通过设置显示、边距、填充、浮动与定位等样式属性，可以调整元素的位置，从而构建不同的网页布局。本项目将介绍网页布局、经典网页布局与响应式布局的相关知识，以及使用Dreamweaver2021对网页进行布局的方法。项目导读

知识目标技能目标思政目标熟悉盒子模型、元素的浮动与定位的基础知识。熟悉网页布局的基础知识。熟悉视口与媒体查询的基础知识。能够使用Dreamweaver2021构建经典的网页布局。能够使用Dreamweaver2021构建响应式布局。在网页布局的过程中关注用户的需求和体验，培养以用户为中心的设计思维。培养积极向上的心态。学习目标

掌握网页布局1PART01任务描述任务准备任务实施——布局“在线学习网”主页一、盒子模型二、元素的浮动三、元素的定位

网页布局是网页设计与制作必不可少的一步，它决定了所有元素的位置。本任务首先介绍盒子模型、元素的浮动、元素的定位等基础知识，然后通过布局“在线学习网”主页，使学生练习使用Dreamweaver2021对网页进行布局的操作。任务描述

任务准备一、盒子模型二、元素的浮动三、元素的定位

全班学生以3～5人为一组，各组选出小组长，小组长组织组内成员预习本任务的内容，讨论并回答以下问题。任务准备问题1：网页中的元素有哪些显示形式？问题2：设置元素的哪些样式能够改变元素的位置？

盒子模型内容（content）填充（padding）边框（border）边距（margin）一、盒子模型盒子模型是网页布局的基础，它规定了元素在页面中的显示方式和占据的空间，使用它便于控制元素在页面中的排列方式。

以生活中的盒子为例，内容是盒子中放置的物品，填充是防止物品磕碰所填充的泡沫、气泡膜等辅料，边框是盒子本身，边距是盒子与盒子之间的空隙。一、盒子模型

在Dreamweaver2021中，可以使用“CSS设计器”面板中的“属性”窗格设置盒子模型的样式。其中，文本、边框、背景等样式的相关属性前面已经介绍过。下面主要介绍“属性”窗格“布局”设置区中用于设置盒子模型显示、边距、填充与溢出行为等样式的属性，如图所示。一、盒子模型

（1）display属性用于设置显示。常用的属性值有5个。inline表示以行内元素的形式显示，元素不会独占一行，可以与其他行内元素显示在同一行。block表示以块级元素的形式显示，元素独占一行，并且元素前后自动换行。inline-block表示以行内块元素的形式显示，多个块级元素可以显示在同一行。none表示不显示。flex表示将元素设置为弹性伸缩盒，其内部的块级元素默认自左至右排列，用于进行弹性布局。一、盒子模型

（2）margin属性用于设置边距。属性值通常使用带有单位的数值或关键字auto（自动设置）表示。设置边距的方法有两种。一、盒子模型①单击该属性右侧的“设置速记”区域，直接在编辑框中输入1～4个值。不同情况下，值的具体含义如下。输入1个值时，该值表示所有边距。输入2个值时，第1个值表示顶部边距与底部边距，第2个值表示左边距与右边距。输入3个值时，第1个值表示顶部边距，第2个值表示左边距与右边距，第3个值表示底部边距。输入4个值时，这4个值分别表示顶部边距、右边距、底部边距、左边距。②在该属性下方的矩形设置区中单击相应的边距，输入属性值。其中，margin-top属性用于设置顶部边距；margin-right属性用于设置右边距；margin-bottom属性用于设置底部边距；margin-left属性用于设置左边距。

（3）padding属性用于设置填充。属性值通常使用带有单位的数值或关键字auto（自动设置）表示。设置填充的方法与设置边距的方法类似。一、盒子模型（4）overflow-x属性用于设置水平溢出行为。常用的属性值有4个，visible（默认值）表示不隐藏内容也不增加滚动条；hidden表示隐藏溢出部分的内容，不增加滚动条；scroll表示直接增加滚动条；auto表示在内容溢出时增加滚动条。（5）overflow-y属性用于设置垂直溢出行为。常用的属性值与overflow-x属性值相同。

在标准文档流中，元素默认按照从左至右、从上至下的顺序排列，如图所