《网页设计与制作基础》实验指导书(2010-2011-2)-实验6

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

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

3、性，从而实现对整体布局的精确调整和控制。3、编辑网页文件“zzy.html”，效果如下图所示。注：要充分利用盒模式属性和定位属性实现局部和整体布局。4、编辑网页文件“zzy.html”，效果如下图所示。文件（）編辑查看迪收藏夹迦工具帮助令收藏夹I由因百度邑网页快讯库”爲无标题文档曰耐”页面的*安全工具I&概述历史发展主要景观Lioo%拙政园名冠江南，胜甲东吴，是中国的四大名园之一，苏州园林中的经典作品。拙政园位于苏州古城区东北娄门内的东北街。园林占地面积约4公顷。公元1丸拜由御史王献臣始建。在以后的四百余年间，沧桑变迁，屡易其主，几度兴废，原来浑然一体的园林演变为相互分离、自成格局的三座园林。

4、经历一百二十余年后，明崇初四年沿元1年）己荡为丘墟的东部园林。归侍郎王心一所有。王善画山水，悉心经营，布置丘壑，并以陶潜“归田园居”诗，命名此园。该园有放眼亭，夹耳岗，啸月台，紫藤坞，杏花涧，竹香廊等诸胜。可分为四个景区。中为涵青池，池北为主要建筑兰雪堂，周围以桂、梅、竹屏之。池南及池左，有缀云峰、联壁峰，峰下有洞，曰“小桃源”。歩游入洞，如渔郎入桃源，桑麻鸡犬，别成世界。兰雪堂之西，梧桐参差，茂林修竹，溪涧坏绕，为流觞曲水之意。北部系紫罗山、漾荡池。东甫为荷花池，面积达四五亩，中有林香楼。家田种秫，皆在望中。乾隆初年，拙政园东部园林以西又分割成中、西两个部分。西部现有布局形成于光绪三年公元1

5、S厂年），由张履谦修葺，改名萍卜园笃遂有塔影亭、留听阁、浮翠阁、笠亭、与谁同坐轩、宜两亭等景观。又新建三十六驾鸯馆和十八曼陀罗花馆，装修精致奢丽。中部，系拙政园最精彩的部分。虽历经变迁，与早期拙政园有较天变化和差异，但园林以水为主，池中堆山，坏池布置堂、榭、亭、轩，基本上延续了明代的格局。从咸丰年间拙政园图、同治年间拙政园图和光绪年间八旗奉直会馆图中可以看到山水之南的悔棠春坞、听雨轩、玲戏馆、批杷园和小飞虹、小沧很、听松凤处、香洲、玉兰堂等庭院景观与现状诸景毫无二致。因而拙政园中部凤貌的形成，应在晚清咸丰至光绪年间。Iniernet要点：文件操作：从文件面板中打开zzy.htm文档操作：分析设

6、计要求1）确定页面分割数量2）从插入面板中打开“布局”类别，从布局中选择绘制APdiv,然后拖放到大致位置并调整其大小。3）依次选中各个分割区域，利用属性面板进行编辑；或利用CSS面板对各分割区域进行编辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实现对整体布局的精确调整和控制。4）将元素分别插入到各个区域；选中要编辑的元素，利用属性面板进行编辑；或利用CSS面板对各元素进行编辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实现对整体布局的精确调整和控制。5、a）根据网页文件“拙政园.htm1”生成模板文件“my.dwt”。文件存放于sy6文件夹下。b）根据模板文

7、件“my.dwt”创建网页文档“yhy.html”、“bssz.htm1”和“1y.html”，站点中的my.html的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.htm1”和“1y.html”。点：本例是基于现有文档创建模板打开zzy.htm1。执行下列操作之一：选择“文件”“另存为模板”。在“插入”面板的“常用”类别中，单击“模板”按钮，然后从弹出菜单中选择“创建模板”。从“站点”弹出菜单中选择一个用来保存模板的站点，然后在“另存为”框中为模板输入一个唯一的名称。单击“保存”。Dreamweaver将模板

8、文件以文件扩展名.dwt保存在站点的本地根文件夹中的Temp1ates文件夹中。如果该Temp1ates文件夹在站点中尚不存在，Dreamweaver将在保存新建模板时自动创建该文件夹。5编辑模板并保存。1）选中准备编辑的元素2）从插入莱单或插入面板中选择“模板对象”，从弹出的莱单中选择可编辑区域的类型3）重复上述步骤，直至确定所有可编辑区域4）保存6从文件莱单中选择“新建”，从弹出的对话框中选择“模板中的页”，选中模板后单击“创建”。7.编辑并保存创建的网页文件为yhy.html注：不要将模板移动到Temp1ates文件夹之外或者将任何非模板文件放在Temp1ates文件夹中。此外，不要将T

9、emp1ates文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。实验操作说明使用CSS对页面进行布局关于Dreamweaver中的AP元素AP元素（绝对定位元素，层）是分配有绝对位置的HTML页面元素，具体地说，就是div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置于HTML文档正文中的内容。AP元素用于设计页面的布局。AP元素通常是绝对定位的div标签。（它们是Dreamweaver默认插入的AP元素类型。）但是请记住，可以将任何HTML元素（例如，一个图像）作为AP元素进行分类，方法是为其分配一个绝对位置。所有AP元素（不仅仅是绝对定位的div标签）都将在

10、“AP元素”面板中显示。APDiv元素的HTML代码Dreamweaver使用div标签创建AP元素。当使用“绘制APDiv”工具绘制AP元素时，Dreamweaver在文档中插入一个div标签，并为该div指定一个ID值（默认情况下为第一个div指定apDivl,第二个div分配apDiv2,依此类推）。可以使用“AP元素”面板或属性检查器将APDiv重新命名为想要的任何名称。以下是APDiv的示例HTML代码：SampleAPDivPage可以更改页面上的APDiv（或任何AP元素）的属性，包括x坐标和y坐标、z轴（也称作堆叠顺序）和可见性等所有CSS布局属性。插入APDiv将插入点放置在

11、“文档”窗口中，然后选择“插入”“布局对象”“APDiv”。创建APDiv后，只需将插入点放置于该APDiv中，然后就可以像在页面中添加内容一样将内容添加到APDiv中。使用嵌套的APDiv嵌套的APDiv是其代码包含在另一个APDiv的标签内的APDiv。例如：apDiv4div实际上位于apDiv3div的内部。（可以在“AP元素”面板中更改APDiv堆叠顺序。）嵌套通常用于将APDiv组合在一起。嵌套APDiv随其父APDiv一起移动，并且可以设置为继承其父级的可见性。插入嵌套APDiv确保已取消选择“防止重叠”。2在“文档”窗口的“设计”视图中，将插入点放置在一个现有APDiv的内部，

12、然后选择“插入”“布局对象”“APDiv”。使用AP元素面板将现有AP元素嵌套在另一个AP元素中1选择“窗口”“AP元素”打开“AP元素”面板。2在“AP元素”面板中选择一个AP元素，然后按住Ctrl拖动（Windows）将此AP元素拖动到“AP元素”面板中的目标AP元素。3当目标AP元素的名称高亮显示时，松开鼠标按钮。注：使用“首选参数”对话框中的“AP元素”类别可指定新建AP元素的默认设置。选择“编辑”“首选参数”（Windows）或“Dreamweaver”首选参数（Macintosh）。使用DREAMWEAVERCS4142使用CSS创建页面从左侧的“分类”列表选择AP元素并指定以下任

13、意首选参数，然后单击“确定”。可见性确定AP元素在默认情况下是否可见。其选项为“default”、“继承”、“可见”和“隐藏”。宽和高指定使用“插入”“布局对象”“APDiv”创建的AP元素的默认宽度和高度（以像素为单位）。背景颜色指定一种默认背景颜色。请从颜色选择器中选择颜色。背景图像指定默认背景图像。单击“浏览”可在计算机上查找图像文件。嵌套:在APDiv内创建时嵌套指定从现有APDiv边界内的某点开始绘制的APDiv是否应该是嵌套的APDiv。查看或设置单个AP元素的属性当选择一个AP元素时，属性检查器将显示AP元素的属性。AP元素面板概述AP元素”面板（“窗口”“AP元素”）用于管理文

14、档中的AP元素。使用“AP元素”面板可防止重叠，更改AP元素的可见性，嵌套或堆叠AP元素，以及选择一个或多个AP元素。注：Dreamweaver中的AP元素是分配有绝对位置的HTML页面元素，“AP元素”面板不会显示相对定位的元素。选择多个AP元素.请执行下列操作之一：.在“AP元素”面板（“窗口”“AP元素”）中，按住Shift单击两个或更多个AP元素名称。.在“文档”窗口中，按住Shift键并在两个或更多个AP元素的边框内（或边框上）单击。更改AP元素的堆叠顺序使用属性检查器或“AP元素”面板可更改AP元素的堆叠顺序。“AP元素”面板列表顶部的AP元素位于堆叠顺序的顶部，并出现在其它AP元

15、素之前。在HTML代码中，AP元素的堆叠顺序或z轴决定了AP元素在浏览器中的绘制顺序。AP元素的z轴值越高，该AP元素在堆叠顺序中的位置就越高。可以使用“AP元素”面板或属性检查器来更改每个AP元素的z轴。使用AP元素面板更改AP元素的堆叠顺序1选择“窗口”“AP元素”打开“AP元素”面板。2将AP元素向上或向下拖至所需的堆叠顺序。当移动AP元素时会出现一条线，它指示AP元素将出现的位置。当放置线出现在堆叠顺序中的所需位置时，松开鼠标按钮。使用属性检查器更改AP元素的堆叠顺序1选择“窗口”“AP元素”打开“AP元素”面板以查看当前的堆叠顺序。2在“AP元素”面板或“文档”窗口中选择AP元素。3

16、在属性检查器（“窗口”“属性”）中，在“Z轴”文本框中键入一个数字。.键入一个较大的数字可将AP元素在堆叠顺序中上移。.键入一个较小的数字可将AP元素在堆叠顺序中下移。显示和隐藏AP元素当处理文档时，可以使用“AP元素”面板手动显示和隐藏AP元素，以查看页面在不同条件下的显示方式。注：当前选定AP元素始终会变为可见，并在选定时将出现在其它AP元素的前面。更改AP元素的可见性1选择“窗口”“AP元素”打开“AP元素”面板。2在AP元素的眼形图标列内单击可以更改其可见性。.眼睛睁开表示AP元素是可见的。.眼睛闭合表示AP元素是不可见的。.如果没有眼形图标，AP元素通常会继承其父级的可见性。（如果A

17、P元素没有嵌套，父级就是文档正文，而文档正文始终是可见的。）另外，如果未指定可见性，则不会显示眼形图标（在“属性”检查器中表示为“default”可见性）。同时更改所有AP元素的可见性.在“AP元素”面板（“窗口”“AP元素”）中，单击列顶部的标题眼形图标。注：此过程可以将所有AP元素设置为“可见”或“隐藏”，但不能设置为“继承”。调整AP元素大小在“设计”视图中，选择一个AP元素。执行以下操作之一以调整AP元素的大小：.若要通过拖动来调整大小，请拖动AP元素的任一调整大小手柄。.若要一次调整一个像素的大小，请在按箭头键时按住Ctrl键（Windows）。箭头键可移动AP元素的右边框和下边框；

18、对于此方法，不能使用上边框和左边框来调整大小.在属性检查器（“窗口”“属性”）中，键入宽度（W）和高度（H）的值。关于Dreamweaver模板了解Dreamweaver模板模板是一种特殊类型的文档，用于设计“固定的”页面布局；用模板创建的文档会继承模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。使用模板，模板创作者控制哪些页面元素可以由模板用户进行编辑。模板创作者可以在文档中包括数种类型的模板区域。注：使用模板可以控制大的设计区域，以及重复使用完整的布局。如果要重复使用个别设计元素，如站点的版权信息或徽标，可以创建库项目。使用模板可以一次更新多个页面。应用模

19、板创建的文档与该模板保持连接状态，可以修改模板并立即更新基于该模板的所有文档中的设计。模板区域的类型模板为基于模板的文档指定了锁定（不可编辑）区域和其它可编辑区域。在基于模板的页面中，模板用户只能编辑可编辑区域中的内容。可以轻松标识和选择可编辑区域来编辑内容。模板用户不能编辑锁定区域中的内容.注默认情况下Dreamweaver模板的页面中的各部分是固定（即不可编辑）的。将文档另存为模板以后，文档的大部分区域就被锁定。模板创作者在模板中插入可编辑区域或可编辑参数，从而指定在基于模板的文档中哪些区域可以编辑。创建模板时，可编辑区域和锁定区域都可以更改。而在基于模板的文档中，模板用户只能在可编辑区域

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

21、出现。可编辑标签属性用于对模板中的标签属性解除锁定，这样便可以在基于模板的页面中编辑相应的属性。例如，可以“锁定”出现在文档中的图像，而允许模板用户将对齐设置为左对齐、右对齐或居中对齐。模板中的保存模板文件保存在站点的Templates文件夹中，Templates文件夹在第一次创建模板时创建。模板文件的扩展名为.dwt识别模板和基于模板的文档在设计视图中识别模板在“设计”视图中，可编辑区域出现在“文档”窗口的预设高亮颜色的矩形外框中。每个区域的左上角都会出现一个小的标签，其中显示该区域的名称。在代码视图中识别模板在“代码”视图中，使用以下注释标记HTML中的可编辑内容区域：和可以使用代码颜色首

22、选参数设置自己的配色方案，以便在“代码”视图中查看文档时可以轻松地区分模板区域。如：EnternameEnterAddressEnterTelephone注：在“代码”视图中编辑模板代码时请小心，避免更改Dreamweaver所依赖的任何与模板相关的注释标签。在设计视图中识别基于模板的文档在基于模板的文档中，“文档”窗口的“设计”视图中的可编辑区域出周围会显示预设高亮颜色的矩形外框。每个区域的左上角都会出现一个小的标签，其中显示该区域的名称。除可编辑区域的外框之外，整个页面周围也会显示其它颜色的外框，右上角的选项卡给出该文档的基础模板的名称。不能更改可编辑区域之外的内容。在代码视图中识别基于模

23、板的文档在“代码”视图中，派生自模板的文档的可编辑区域用与不可编辑区域中的代码不同的颜色显示。可以更改可编辑区域中的代码或可编辑参数；但是不能在锁定区域中键入内容。在HTML中使用以下Dreamweaver注释标记可编辑内容：和这些注释之间的任何内容都可以在基于模板的文档中编辑。可编辑区域的HTML源代码可能类似于如下形式：NameAddressTelephoneNumberEnternameEnterAddressEnterTelephone不可编辑文本的默认颜色是灰色；您可以在“首选参数”对话框中为可编辑区域和不可编辑区域选择不同的颜色。创建Dreamweaver模板基于现有文档创建模板1

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

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