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

实验六基于CSS的网页布局设计实验目的1、CSS的页面分割技术、盒模式和定位技术2、熟悉层（APDiv）的基本操作并能利用层（APDiv）来定位页面元素；3、掌握模板的创建、编辑和应用。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点CSS盒模式和定位技术灵活利用层来实现网页元素的精确定位。利用模板生成多个风格一致的网页。实验内容1、在你的站点中创建文件夹：sy6。在sy6文件夹下创建两个文件：index.html、和zzy.html。并将给定的多媒体文件放入相应的文件夹中。2、结合所学的CSS布局知识和实验操作说明中关于APDiv（层）的知识，利用Dreamweaver对index.htm进行设计编辑，效果如下图所示。说明：1）红色显示的文字“中国四大名园”不是图片的一部分2）左下的各行文字为空超链接3、编辑网页文件“zzy.html”，效果如下图所示。说明：1）“首页”链接index.html，“拙政园”链接zzy.html，其它为空链接。4、a)根据网页文件“zzy.html”生成模板文件“zzy.dwt”。文件存放Templates文件夹下。b)根据模板文件“zzy.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，站点中的my.html的导航莱单内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。实验操作说明使用CSS对页面进行布局关于Dreamweaver中的AP元素AP元素（绝对定位元素，层）是分配有绝对位置的HTML页面元素，具体地说，就是div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置于HTML文档正文中的内容。AP元素用于设计页面的布局。AP元素通常是绝对定位的div标签。（它们是Dreamweaver默认插入的AP元素类型。）但是请记住，可以将任何HTML元素（例如，一个图像）作为AP元素进行分类，方法是为其分配一个绝对位置。所有AP元素（不仅仅是绝对定位的div标签）都将在“AP元素”面板中显示。APDiv元素的HTML代码Dreamweaver使用div标签创建AP元素。当使用“绘制APDiv”工具绘制AP元素时，Dreamweaver在文档中插入一个div标签，并为该div指定一个ID值（默认情况下为第一个div指定apDiv1，第二个div分配apDiv2，依此类推）。可以使用“AP元素”面板或属性检查器将APDiv重新命名为想要的任何名称。以下是APDiv的示例HTML代码：headmetahttp-equiv=Content-Typecontent=text/html;charset=iso-8859-1/titleSampleAPDivPage/titlestyletype=text/css!--#apDiv1{position:absolute;left:62px;top:67px;width:421px;height:188px;z-index:1;}--/style/headbodydivid=apDiv1/div/body/html可以更改页面上的APDiv（或任何AP元素）的属性，包括x坐标和y坐标、z轴（也称作堆叠顺序）和可见性等所有CSS布局属性。插入APDiv将插入点放置在“文档”窗口中，然后选择“插入”“布局对象”“APDiv”。创建APDiv后，只需将插入点放置于该APDiv中，然后就可以像在页面中添加内容一样，将内容添加到APDiv中。使用嵌套的APDiv嵌套的APDiv是其代码包含在另一个APDiv的标签内的APDiv。例如：divid=apDiv1/divdivid=apDiv2/divdivid=apDiv3divid=apDiv4/div/divapDiv4div实际上位于apDiv3div的内部。（可以在“AP元素”面板中更改APDiv堆叠顺序。）嵌套通常用于将APDiv组合在一起。嵌套APDiv随其父APDiv一起移动，并且可以设置为继承其父级的可见性。插入嵌套APDiv1确保已取消选择“防止重叠”。2在“文档”窗口的“设计”视图中，将插入点放置在一个现有APDiv的内部，然后选择“插入”“布局对象”“APDiv”。使用AP元素面板将现有AP元素嵌套在另一个AP元素中1选择“窗口”“AP元素”打开“AP元素”面板。2在“AP元素”面板中选择一个AP元素，然后按住Ctrl拖动(Windows)将此AP元素拖动到“AP元素”面板中的目标AP元素。3当目标AP元素的名称高亮显示时，松开鼠标按钮。注：使用“首选参数”对话框中的“AP元素”类别可指定新建AP元素的默认设置。1选择“编辑”“首选参数”(Windows)或“Dreamweaver”“首选参数”(Macintosh)。使用DREAMWEAVERCS4142使用CSS创建页面2从左侧的“分类”列表选择AP元素并指定以下任意首选参数，然后单击“确定”。可见性确定AP元素在默认情况下是否可见。其选项为“default”、“继承”、“可见”和“隐藏”。宽和高指定使用“插入”“布局对象”“APDiv”创建的AP元素的默认宽度和高度（以像素为单位）。背景颜色指定一种默认背景颜色。请从颜色选择器中选择颜色。背景图像指定默认背景图像。单击“浏览”可在计算机上查找图像文件。嵌套:在APDiv内创建时嵌套指定从现有APDiv边界内的某点开始绘制的APDiv是否应该是嵌套的APDiv。查看或设置单个AP元素的属性当选择一个AP元素时，属性检查器将显示AP元素的属性。AP元素面板概述“AP元素”面板（“窗口”“AP元素”）用于管理文档中的AP元素。使用“AP元素”面板可防止重叠，更改AP元素的可见性，嵌套或堆叠AP元素，以及选择一个或多个AP元素。注：Dreamweaver中的AP元素是分配有绝对位置的HTML页面元素，“AP元素”面板不会显示相对定位的元素。选择多个AP元素.请执行下列操作之一：.在“AP元素”面板（“窗口”“AP元素”）中，按住Shift单击两个或更多个AP元素名称。.在“文档”窗口中，按住Shift键并在两个或更多个AP元素的边框内（或边框上）单击。更改AP元素的堆叠顺序使用属性检查器或“AP元素”面板可更改AP元素的堆叠顺序。“AP元素”面板列表顶部的AP元素位于堆叠顺序的顶部，并出现在其它AP元素之前。在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在属性检查器（“窗口”“属性”）中，在“Z轴”文本框中键入一个数字。.键入一个较大的数字可将AP元素在堆叠顺序中上移。.键入一个较小的数字可将AP元素在堆叠顺序中下移。显示和隐藏AP元素当处理文档时，可以使用“AP元素”面板手动显示和隐藏AP元素，以查看页面在不同条件下的显示方式。注：当前选定AP元素始终会变为可见，并在选定时将出现在其它AP元素的前面。更改AP元素的可见性1选择“窗口”“AP元素”打开“AP元素”面板。2在AP元素的眼形图标列内单击可以更改其可见性。.眼睛睁开表示AP元素是可见的。.眼睛闭合表示AP元素是不可见的。.如果没有眼形图标，AP元素通常会继承其父级的可见性。（如果AP元素没有嵌套，父级就是文档正文，而文档正文始终是可见的。）另外，如果未指定可见性，则不会显示眼形图标（在“属性”检查器中表示为“default”可见性）。同时更改所有AP元素的可见性.在“AP元素”面板（“窗口”“AP元素”）中，单击列顶部的标题眼形图标。注：此过程可以将所有AP元素设置为“可见”或“隐藏”，但不能设置为“继承”。调整AP元素大小1在“设计”视图中，选择一个AP元素。2执行以下操作之一以调整AP元素的大小：.若要通过拖动来调整大小，请拖动AP元素的任一调整大小手柄。.若要一次调整一个像素的大小，请在按箭头键时按住Ctrl键(Windows)。箭头键可移动AP元素的右边框和下边框；对于此方法，不能使用上边框和左边框来调整大小。..在属性检查器（“窗口”“属性”）中，键入宽度(W)和高度(H)的值。关于Dreamweaver模板了解Dreamweaver模板模板是一种特殊类型的文档，用于设计“固定的”页面布局；用模板创建的文档会继承模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。使用模板，模板创作者控制哪些页面元素可以由模板用户进行编辑。模板创作者可以在文档中包括数种类型的模板区域。注：使用模板可以控制大的设计区域，以及重复使用完整的布局。如果要重复使用个别设计元素，如站点的版权信息或徽标，可以创建库项目。使用模板可以一次更新多个页面。应用模板创建的文档与该模板保持连接状态，可以修改模板并立即更新基于该模板的所有文档中的设计。模板区域的类型模板为基于模板的文档指定了锁定（不可编辑）区域和其它可编辑区域。在基于模板的页面中，模板用户只能编辑可编辑区域中的内容。可以轻松标识和选择可编辑区域来编辑内容。模板用户不能编辑锁定区域中的内容.注：默认情况下Dreamweaver模板的页面中的各部分是固定（即不可编辑）的。将文档另存为模板以后，文档的大部分区域就被锁定。模板创作者在模板中插入可编辑区域或可编辑参数，从而指定在基于模板的文档中哪些区域可以编辑。创建模板时，可编辑区域和锁定区域都可以更改。而在基于模板的文档中，模板用户只能在可编辑区域中进行更改，不能修改锁定区域。共有四种类型的模板区域：可编辑区域基于模板的文档中未锁定的区域，也就是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的。要使模板生效，其中至少应该包含一个可编辑区域；否则基于该模板的页面是不可编辑的。重复区域文档布局的一部分，设置该部分可以使模板用户必要时在基于模板的文档中添加或删除重复区域的副本。例如，可以设置重复一个表格行。重复部分是可编辑的，这样，模板用户可以编辑重复元素中的内容，而设计本身则由模板创作者控制。可以在模板中插入的重复区域有两种：重复区域和重复表格。可选区域模板中放置内容（如文本或图像）的部分，该部分在文档中可以出现也可以不出现。可编辑标签属性用于对模板中的标签属性解除锁定，这样便可以在基于模板的页面中编辑相应的属性。例如，可以“锁定”出现在文档中的图像，而允许模板用户将对齐设置为左对齐、右对齐或居中对齐。模板中的保存模板文件保存在站点的Templates文件夹中，Templates文件夹在第一次创建模板时创建。模板文件的扩展名为.dwt识别模板和基于模板的文档在设计视图中识别模板在“设计”视图中，可编辑区域出现在“文档”窗口的预设高亮颜色的矩形外框中。每个区域的左上角都会出现一个小的标签，其中显示该区域的名称。在代码视图中识别模板在“代码”视图中，使用以下注释标记HTML中的可编辑内容区域：!—TemplateBeginEditablename=”可编辑区域的名称”和!--TemplateEndEditable--可以使用代码颜色首选参数设置自己的配色方案，以便在“代码”视图中查看文档时可以轻松地区分模板区域。如：