《网页设计与制作基础》实验指导书-实验6

1、实验六基于CSS的网页布局设计实验目的1、CSS的页面分割技术、盒模式和定位技术2、熟悉层（AP Div）的基本操作并能利用层（AP Div）来定位页面元素；3、掌握模板的创建、编辑和应用。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点CSS盒模式和定位技术灵活利用层来实现网页元素的精确定位。利用模板生成多个风格一致的网页。实验内容1、在你的站点中创建文件夹：sy6。在sy6文件夹下创建两个文件：my.html、和zzy.html。 并将给定的多媒体文件放入相应的文件夹中。2、结合所学的CSS布局知识和实验操作说明中关

2、于AP Div（层）的知识，利用Dreamweaver 对my.htm进行设计编辑，效果如下图所示。要点：文件操作：从文件面板中打开my.htm 文档操作：分析设计要求1）确定页面分割数量2）从插入面板中打开“布局”类别，从布局中选择绘制AP div，然后拖放到大致位置并调 整其大小。3）依次选中各个分割区域，利用属性面板进行编辑；或利用CSS面板对各分割区域进行编 辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实现对整体布局的精确 调整和控制。4）将元素分别插入到各个区域；选中要编辑的元素，利用属性面板进行编辑；或利用CSS 面板对各元素进行编辑，尤其是盒模式属性（CSS面板

3、的方框和边框）和定位属性，从而实 现对整体布局的精确调整和控制。3、编辑网页文件“zzy.html”，效果如下图所示。注：要充分利用盒模式属性和定位属性实现局部和整体布局。4、编辑网页文件“zzy.html”，效果如下图所示。拒 http : f 1 oc：lhos t/fqh.Fzzy. html| 密 | | 今 | | X | | 窍 Lim &arcih133文件史）编辑 查看成）收藏夹 工具成）帮助但）收藏夹1盒句百度句网页快讯库，卷无标题攵走3命，国口柚，页面堂）安全，工具，,勘，概述 历史发展主要景观拙政园名冠江南，胜甲东吴，是中国的四大名园之一，苏州园林中的经典作品。拙政园位于

4、苏州 古城区东北娄门内的东北街。园林占弛面积约4公顷。公元150衅由御史王献臣始建。在以后的 四百余年间，沧桑变迁，屡易其主，几度兴废，原来浑然一体的园林演变为相互分离、自成格局 的三座园林*经历一百二十余年后，明崇初四年（公元1631年）己荡为丘墟的东部园林。归侍郎王心一所有。王善 画山水，悉心经营，布置丘壑，并以陶潜“归田园居”诗，命名此园。该园有放眼亭，夹耳岗，啸 月台，紫藤坞，杏花涧，竹香廊等诸胜。可分为四个景区。中为涵青池，池北为主要建筑兰雪 堂，周围以桂、梅、竹屏之。池南及池左，有缀云峰、联壁峰，峰下有洞，曰“小桃源）步游入 洞，如渔郎入桃源，桑麻鸿犬，别成世界.兰雪堂之酉，梧桐参

5、差，茂林修竹，溪涧环绕，为流 觞曲水之意。北部系紫罗山、漾荡池。东甫为荷花池，面积达四五亩，中有林香楼。家田种秫， 皆在望中.乾隆初年，拙政园东部园林以酉又分割成中、西两个部分。酉部现有布局形成于光绪三年公元 18二年），由张履谦修葺，改名、补园”,遂有塔影亭、留听阁、浮翠阁、笠亭、与谁同坐轩、宜两 亭萼景观。又新建三十六鸳鸯馆和十八曼陀罗花馆，装修精致奢丽。中部，系拙政园最精彩的部 分.虽历经变迁，与早期拙政园有较大变化和差异，但园林以水为主，池中堆山，环池布置堂、 榭、亭、轩，基本上延续了明代的格局。从咸丰年间拙政园图、同治年间拙政园图和光 绪年间八旗奉直会馆图中可以看到山水之南的海棠春坞

6、、听雨轩、玲戏馆、批杷园和小飞 虹、小沧浪、听松风处、香洲、玉兰堂等庭院景观与现状诸景毫无二致。因而拙政园中部风貌的 形成，应在晚渭咸丰至光绪年间.京成100% 要点：文件操作：从文件面板中打开zzy.htm文档操作：分析设计要求1）确定页面分割数量2）从插入面板中打开“布局”类别，从布局中选择绘制APdiv，然后拖放到大致位置并调 整其大小。3）依次选中各个分割区域，利用属性面板进行编辑；或利用CSS面板对各分割区域进行编 辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实现对整体布局的精确 调整和控制。4）将元素分别插入到各个区域；选中要编辑的元素，利用属性面板进行编辑；或利

7、用CSS 面板对各元素进行编辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实 现对整体布局的精确调整和控制。5、a）根据网页文件“拙政园.html”生成模板文件“my.dwt”。文件存放于sy6文件夹下。b）根据模板文件“my.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，站 点中的my.html的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别 链接到网页文件 “zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。点：本例是基于现有文档创建模板1 打开 zzy.htmlo2执行下列操作之一：

8、-选择“文件”“另存为模板”。-在“插入”面板的“常用”类别中，单击“模板”按钮，然后从弹出菜单中选择“创 建模板”。3从“站点”弹出菜单中选择一个用来保存模板的站点，然后在“另存为”框中为模板 输入一个唯一的名称。4单击“保存”。Dreamweaver将模板文件以文件扩展名.dwt保存在站点的本地根文 件夹中的Templates文件夹中。如果该Templates文件夹在站点中尚不存在，Dreamweaver 将在保存新建模板时自动创建该文件夹。编辑模板并保存。1）选中准备编辑的元素2）从插入莱单或插入面板中选择“模板对象”，从弹出的莱单中选择可编辑区域的 类型3）重复上述步骤，直至确定所有可

9、编辑区域4）保存从文件莱单中选择“新建”，从弹出的对话框中选择“模板中的页”，选中模板后单 击“创建”。编辑并保存创建的网页文件为yhy.html注：不要将模板移动到Templates文件夹之外或者将任何非模板文件放在Templates文件 夹中。此外，不要将Templates文件夹移动到本地根文件夹之外。这样做将在模板中的路 径中引起错误。实验操作说明使用CSS 对页面进行布局关于Dreamweaver中的AP元素AP元素（绝对定位元素，层）是分配有绝对位置的HTML页面元素，具体地说，就 是div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置于HTML文档正文中的内容。AP

10、元素用于设计页面的布局。AP元素通常是绝对定位的div标签。（它们是Dreamweaver默认插入的AP元素类 型。）但是请记住，可以将任何HTML元素（例如，一个图像）作为AP元素进行分 类，方法是为其分配一个绝对位置。所有AP元素（不仅仅是绝对定位的div标 签）都将在“AP元素”面板中显示。AP Div元素的HTML代码Dreamweaver使用div标签创建AP元素。当使用“绘制AP Div”工具绘制AP元 素时，Dreamweaver在文档中插入一个div标签，并为该div指定一个ID值（默认情况 下为第一个div指定apDivl，第二个div分配apDiv2，依此类推）。可以使用“

11、AP元素”面板或属性检查器将AP Div重新命名为想要的任何名称。以下是AP Div的示例HTML代码：Sample AP Div Page可以更改页面上的AP Div （或任何AP元素）的属性，包括x坐标和y坐标、z轴 （也称作堆叠顺序）和可见性等所有CSS布局属性。插入AP Div将插入点放置在“文档”窗口中，然后选择“插入” “布局对象”“AP Div”。 创建AP Div后，只需将插入点放置于该AP Div中，然后就可以像在页面中添加内容一样， 将内容添加到AP Div中。使用嵌套的AP Div嵌套的AP Div是其代码包含在另一个AP Div的标签内的AP Div。例如：apDiv4

12、 div实际上位于apDiv3 div的内部。（可以在“AP元素”面板中更改AP Div堆 叠顺序。）嵌套通常用于将AP Div组合在一起。嵌套AP Div随其父AP Div 一起移动，并且 可以设置为继承其父级的可见性。插入嵌套AP Div1确保已取消选择“防止重叠”。2在“文档”窗口的“设计”视图中，将插入点放置在一个现有AP Div的内部，然 后选择“插入”“布局对象” “AP Div”。使用AP元素面板将现有AP元素嵌套在另一个AP元素中1选择“窗口”“AP元素”打开“AP元素”面板。2在“AP元素”面板中选择一个AP元素，然后按住Ctrl拖动（Windows）将此AP元 素拖动到“A

13、P元素”面板中的目标AP元素。3当目标AP元素的名称高亮显示时，松开鼠标按钮。注：使用“首选参数”对话框中的“AP元素”类别可指定新建AP元素的默认设置。1 选择“编辑”“首选参数”（Windows）或“Dreamweaver”“ 首选参数（Macintosh）。使用 DREAMWEAVER CS4 142使用CSS创建页面2从左侧的“分类”列表选择AP元素并指定以下任意首选参数，然后单击“确定”。 可见性确定AP元素在默认情况下是否可见。其选项为“default”、“继承”、“可见”和 “隐藏”。宽和高指定使用“插入” “布局对象” “AP Div仓U建的AP元素的默认宽度和高度 （以像素为

14、单位）。背景颜色指定一种默认背景颜色。请从颜色选择器中选择颜色。背景图像指定默认背景图像。单击“浏览”可在计算机上查找图像文件。嵌套：在AP Div内创建时嵌套指定从现有AP Div边界内的某点开始绘制的AP Div是 否应该是嵌套的AP Div。查看或设置单个AP元素的属性当选择一个AP元素时，属性检查器将显示AP元素的属性。AP元素面板概述“AP元素”面板（“窗口”“AP元素”）用于管理文档中的AP元素。使用“AP元 素”面板可防止重叠，更改AP元素的可见性，嵌套或堆叠AP元素，以及选择一个或多 个AP元素。注：Dreamweaver中的 AP元素是分配有绝对位置的HTML页面元素，“AP

15、元素” 面 板不会显示相对定位的元素。选择多个AP元素.请执行下列操作之一：. 在“AP元素”面板（“窗口 ”“AP元素”）中，按住Shift单击两个或更多个AP元 素名称。.在“文档”窗口中，按住Shift键并在两个或更多个AP元素的边框内（或边框上）单 击。更改AP元素的堆叠顺序使用属性检查器或“AP元素”面板可更改AP元素的堆叠顺序。“AP元素”面板 列表顶部的AP元素位于堆叠顺序的顶部，并出现在其它AP元素之前。在HTML代码中，AP元素的堆叠顺序或z轴决定了 AP元素在浏览器中的绘制顺 序。AP元素的z轴值越高，该AP元素在堆叠顺序中的位置就越高。可以使用“AP元 素”面板或属性检查

16、器来更改每个AP元素的z轴。使用AP元素面板更改AP元素的堆叠顺序1选择“窗口”“AP元素”打开“AP元素”面板。2将AP元素向上或向下拖至所需的堆叠顺序。当移动AP元素时会出现一条线，它指示AP元素将出现的位置。当放置线出现在堆叠顺 序中的所需位置时，松开鼠标按钮。使用属性检查器更改AP元素的堆叠顺序1选择“窗口”“AP元素”打开“AP元素”面板以查看当前的堆叠顺序。2在“AP元素”面板或“文档”窗口中选择AP元素。3在属性检查器（“窗口” “属性”）中，在“Z轴”文本框中键入一个数字。.键入一个较大的数字可将AP元素在堆叠顺序中上移。.键入一个较小的数字可将AP元素在堆叠顺序中下移。显示和

17、隐藏AP元素当处理文档时，可以使用“AP元素”面板手动显示和隐藏AP元素，以查看页面在不同 条件下的显示方式。注：当前选定AP元素始终会变为可见，并在选定时将出现在其它AP元素的前面。更改AP元素的可见性1选择“窗口”“AP元素”打开“AP元素”面板。2在AP元素的眼形图标列内单击可以更改其可见性。.眼睛睁开表示AP元素是可见的。.眼睛闭合表示AP元素是不可见的。.如果没有眼形图标，AP元素通常会继承其父级的可见性。（如果AP元素没有 嵌套，父级就是文档正文，而文档正文始终是可见的。）另外，如果未指定可见性， 则不会显示眼形图标（在“属性”检查器中表示为“default”可见性）。同时更改所有

18、AP元素的可见性. 在“AP元素”面板（“窗口” “AP元素”）中，单击列顶部的标题眼形图标。注：此过程可以将所有AP元素设置为“可见”或“隐藏”，但不能设置为“继 承”。调整AP元素大小1在“设计”视图中，选择一个AP元素。2执行以下操作之一以调整AP元素的大小：.若要通过拖动来调整大小，请拖动AP元素的任一调整大小手柄。.若要一次调整一个像素的大小，请在按箭头键时按住Ctrl键（Windows）。箭头键可 移动AP元素的右边框和下边框；对于此方法，不能使用上边框和左边框来调整大小。.在属性检查器（“窗口” “属性”）中，键入宽度（W）和高度（H）的值。关于Dreamweaver模板了解 D

19、reamweaver 模板模板是一种特殊类型的文档，用于设计“固定的”页面布局；用模板创建的文档会继承 模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。使用模板，模板创作者控制哪些页面元素可以由模板用户进行编辑。模板创作者可以在文档 中包括数种类型的模板区域。注：使用模板可以控制大的设计区域，以及重复使用完整的布局。如果要重复使用个别设 计元素，如站点的版权信息或徽标，可以创建库项目。使用模板可以一次更新多个页面。应用模板创建的文档与该模板保持连接状态，可以修 改模板并立即更新基于该模板的所有文档中的设计。模板区域的类型模板为基于模板的文档指定了锁定（不可编辑

20、）区域和其它可编辑区域。在基于模板的页面中，模板用户只能编辑可编辑区域中的内容。可以轻松标识和选择可 编辑区域来编辑内容。模板用户不能编辑锁定区域中的内容.注:默认情况下Dreamweaver模板的页面中的各部分是固定（即不可编辑）的。将文档另存为模板以后，文档的大部分区域就被锁定。模板创作者在模板中插入可编辑 区域或可编辑参数，从而指定在基于模板的文档中哪些区域可以编辑。创建模板时，可编辑区域和锁定区域都可以更改。而在基于模板的文档中，模板用户只 能在可编辑区域中进行更改，不能修改锁定区域。共有四种类型的模板区域：可编辑区域 基于模板的文档中未锁定的区域，也就是模板用户可以编辑的部分。模板

21、创作者可以将模板的任何区域指定为可编辑的。要使模板生效，其中至少应该包含一个可编 辑区域；否则基于该模板的页面是不可编辑的。重复区域文档布局的一部分，设置该部分可以使模板用户必要时在基于模板的文档中 添加或删除重复区域的副本。例如，可以设置重复一个表格行。重复部分是可编辑的，这样， 模板用户可以编辑重复元素中的内容，而设计本身则由模板创作者控制。可以在模板中插入的重复区域有两种：重复区域和重复表格。可选区域 模板中放置内容（如文本或图像）的部分，该部分在文档中可以出现也可以 不出现。可编辑标签属性用于对模板中的标签属性解除锁定，这样便可以在基于模板的页面中 编辑相应的属性。例如，可以“锁定”出

22、现在文档中的图像，而允许模板用户将对齐设置为 左对齐、右对齐或居中对齐。模板中的保存模板文件保存在站点的Templates文件夹中，Templates文件夹在第一次创建模板时创 建。模板文件的扩展名为.dwt识别模板和基于模板的文档在设计视图中识别模板在“设计”视图中，可编辑区域出现在“文档”窗口的预设高亮颜色的矩形外框中。每 个区域的左上角都会出现一个小的标签，其中显示该区域的名称。在代码视图中识别模板在“代码”视图中，使用以下注释标记HTML中的可编辑内容区域： 和 可以使用代码颜色首选参数设置自己的配色方案，以便在“代码”视图中查看文档时可 以轻松地区分模板区域。如：Enter name

23、Enter AddressEnter Telephone注：在“代码”视图中编辑模板代码时请小心，避免更改Dreamweaver所依赖的任何 与模板相关的注释标签。在设计视图中识别基于模板的文档在基于模板的文档中，“文档”窗口的“设计”视图中的可编辑区域出周围会显示预 设高亮颜色的矩形外框。每个区域的左上角都会出现一个小的标签，其中显示该区域的名称。除可编辑区域的外框之外，整个页面周围也会显示其它颜色的外框，右上角的选项卡给 出该文档的基础模板的名称。不能更改可编辑区域之外的内容。在代码视图中识别基于模板的文档在“代码”视图中，派生自模板的文档的可编辑区域用与不可编辑区域中的代码不同的 颜色显

24、示。可以更改可编辑区域中的代码或可编辑参数；但是不能在锁定区域中键入内容。在HTML中使用以下Dreamweaver注释标记可编辑内容：!InstanceBeginEditable name=” 可编辑区域的名称”和 这些注释之间的任何内容都可以在基于模板的文档中编辑。可编辑区域的HTML源代 码可能类似于如下形式：NameAddressTelephone NumberEnter nameEnter AddressEnter Telephone不可编辑文本的默认颜色是灰色；您可以在“首选参数”对话框中为可编辑区域和不可编辑区域选择不同的颜色。创 建 Dreamweaver模板基于现有文档创建模

25、板1打开要另存为模板的文档。2请执行下列操作之一：-选择“文件”“另存为模板”。-在“插入”面板的“常用”类别中，单击“模板”按钮，然后从弹出菜单中选择“创 建模板”。注：除非您以前选择了“不再显示此对话框”，否则您会收到一个警告，指出您正在保 存的文档中没有可编辑区域。单击“确定”将文档另存为模板，或单击“取消”退出此对话框而不创建模板。3从“站点”弹出菜单中选择一个用来保存模板的站点，然后在“另存为”框中为模板 输入一个唯一的名称。4单击“保存”。Dreamweaver将模板文件以文件扩展名.dwt保存在站点的本地根文 件夹中的Templates文件夹中。如果该Templates文件夹在站

26、点中尚不存在，Dreamweaver 将在保存新建模板时自动创建该文件夹。注：不要将模板移动到Templates文件夹之外或者将任何非模板文件放在Templates 文件夹中。此外，不要将Templates文件夹移动到本地根文件夹之外。这样做将在模板中 的路径中引起错误。使用资源面板来创建新模板1在“资源”面板(“窗口 ”“资源”)中，选择面板左侧的“模板”类别。2单击“资源”面板底部的“新建模板”按钮。一个新的、无标题模板将添加到“资源”面板的模板列表中。3在模板仍处于选定状态时，输入模板的名称，然后按Enter (Windows)0 Dreamweaver 在“资源”面板和Templates文件夹中创建一个空模板。使用“插入”莱单项创建面板从“插入”莱单项中的“模板对象”选择“创建模板”创建可编辑区域插入可编辑区域1在“文档”窗口中，执行下列操作之一选择区域：-选择想要设置为可编辑区域的文本或内容。-将插入点放在想要插入可编辑区域的地方。2 执行下列操作之一插入可编辑区域：-选择“插入”“模板对象”“可编辑区域”。-右键单击(Windows)，然后选择“模板”“新建可编辑区域”。-在“插入”面板的“常用”类别中，单击“模板”按钮，然后从弹出菜单中选择“可 编辑区域”。3在“名称”框中为该区域输入唯一的名称。(不能对特定模板中的多个可编