第5章 网页布局设计

第五章网页布局设计2020/1/21网页设计与制作2本章内容5.1使用表格设计布局5.2使用层设计布局5.3使用框架集2020/1/21网页设计与制作35.1使用表格设计布局插入工具栏还没有打开，可以在菜单栏选择“窗口--插入”命名，打开插入工具栏。使用插入工具栏绘制页面布局的步骤简述如下：1.将插入工具栏选择为“布局”，在“标准”布局模式下，选择“表格”按钮，弹出“表格”对话框。在对话框上输入表格参数，注意将“边框粗细”、“单元格边距”、“单元格间距”设置为0。这样表格只起到控制页面布局的作用，而本身浏览器那并不显示。如图5-1所示，完成后单击“确定”按钮。2.插入表格后的显示如图5-2所示。Dreamweaver将表格用虚线显示，是为了设计使用，在浏览器内并不显示。3.单击“扩展”按钮，查看表格在扩展表格模式下显示，如图5-3所示：4.如果是第一次打开扩展表格模式，Dreamweaver会弹出“扩张表格模式入门”对话框，其中包含了关于扩张表格模式的简要信息，如图5-4所示。5.绘制完成后，从文档工具栏“设计”切换到“代码”选项，查看生成的代码如下。2020/1/21网页设计与制作45.1使用表格设计布局图5-1“插入”工具栏2020/1/21网页设计与制作55.1使用表格设计布局图5-2插入布局表格2020/1/21网页设计与制作65.1使用表格设计布局图5-3扩展表格模式的显示效果2020/1/21网页设计与制作75.1使用表格设计布局图5-4第一次绘制布局提示信息2020/1/21网页设计与制作85.1使用表格设计布局生成的代码如下：tablewidth=600border=0cellspacing=0cellpadding=0trtd /tdtd /tdtd /td/trtrtd /tdtd /tdtd /td/trtrtd /tdtd /tdtd /td/tr/table2020/1/21网页设计与制作95.1使用表格设计布局表格布局方式的缺点：1.设计复杂的布局，需要写的代码也很繁琐。2.表格嵌套层次太多，造成页面浏览速度的下降。为了加深对表格布局方式的学习体会，请读者试着用表格布局方式实现以下页面布局。图5-5页面布局设计2020/1/21网页设计与制作105.2使用层设计布局随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。这是一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。我们以图5-5所示的布局为例来讲解用层实现页面布局的方法。下面我们步步为营，一部分一部分的来实现其布局。步骤如下：1.定义全局CSS样式。新建一个页面，在页面的头部内输入一下代码：styletype=text/cssdiv{/*为表格定义边框，以展示页面布局*/border:#0000001pxsolid;}/style这个样式为层定义了一个边框，这是为了方便我们查看布局结构。2020/1/21网页设计与制作115.2使用层设计布局2.为了实现整个页面的布局，使用一个层作为总的容器；在容器内首先实现“网站标志”和导航栏布局，在页面的主体内输入以下代码：divstyle=width:600px!--布局容器--divstyle=width:600px;line-height:60px;网站标志/divdivstyle=width:600px;line-height:20px导航栏/div/div2020/1/21网页设计与制作125.2使用层设计布局图5-6实现网站标志和导航栏布局2020/1/21网页设计与制作135.2使用层设计布局图5-5布局的中间内容部分，首先将其划分出三个列，在导航栏布局层的下面输入布局代码，如下所示：divstyle=width:600px!--布局容器--……!--网站标志和导航栏布局--divstyle=width:600px;line-height:300px;!--内容部分容器--divstyle=width:150px;float:left!--左侧容器-- /divdivstyle=width:294px;float:left!--中间容器-- /divdivstyle=width:150px;float:left!--右侧容器-- /div/div/div2020/1/21网页设计与制作145.2使用层设计布局图5-7实现中间内容布局容器2020/1/21网页设计与制作155.3使用框架集5.3.1创建框架集5.3.2在框架中使用链接5.3.3使用内联框架iframe2020/1/21网页设计与制作165.3.1创建框架集1.启动Dreamweaver，在菜单栏选择“文件--新建”命令，打开新建文档对话框。在最左侧选择“示例中的叶”，在“示例文件夹”列表选择“框架页”，在“示例页”列表选择“上方固定”，如图5-10所示。完成后电“创建”按钮。2.Dreamweaver弹出“框架标签辅助功能属性”对话框，提示为每个框架输入一个标题。在“框架”下拉列表可以选择要设置标题的框架，在“标题”输入框输入框架标题。如图5-11所示，完成后单击“确定”按钮。3.Dreamweaver将按以上设置参数创建框架，文档窗口如图5-12所示。框架集在设计视图下以一定宽度的边框显示，其实Dreamweaver创建的框架集边框宽度默认为0，因此在浏览器中是不显示的。2020/1/21网页设计与制作175.3.1创建框架集图5-10创建框架页2020/1/21网页设计与制作185.3.1创建框架集图5-11为框架设置标题2020/1/21网页设计与制作195.3.1创建框架集图5-12创建框架2020/1/21网页设计与制作205.3.1创建框架集htmlheadtitle框架集页面/title/headframesetrows=80,*frameborder=1border=6framespacing=5bordercolor=#A1C7F9framesrc=top.htmname=topFramescrolling=Nonoresize=noresize“id=topFrametitle=topFrame/framesrc=main.htmname=mainFrameid=mainFrametitle=mainFrame//framesetnoframesbody/body/noframes/html对源代码进行修改，为框架集添加边框。2020/1/21网页设计与制作215.3.1创建框架集主要代码意义如下：frameset：创建框架集。rows：定义框架集为两行（上下式），80,*标识顶端框架高度80px，底端高度任意。frameborder：指定框架边框是否显示三维效果。Yes或1表示显示三维边框，no或0表示显示平面边框。border：指定边框的宽度（以像素为单位）。framespacing：指定框架与框架之间的空白距离frame：创建框架。src：该框架指向的源文件。name：为框架指定一个名字，对链接有用。scrolling：指定该框架不使用滚动条。2020/1/21网页设计与制作225.3.2在框架中使用链接链接的代码如下：ahref=con1.htmtarget=mainFrame链接一/aahref=con2.htmtarget=mainFrame链接二/a图5-13创建框架页2020/1/21网页设计与制作235.3.3使用内联框架iframe一个内联框架的实例如下所示：htmlheadtitle内联框架iframe示例/title/headbodystyle=text-align:left;bgcolor=#aacceedivstyle=width:600px;text-align:left;!--容器层--divstyle=float:left;width:145px;border:#0066FF1pxsolid;font-size:12px;line-height:26px;text-align:center;ahref=con1.htmtarget=main私人收藏/abrahref=con1.htmtarget=main论坛首页/abrahref=con1.htmtarget=main职场白领/abrahref=con1.htmtarget=main生活休闲/abrahref=con1.htmtarget=main鬼话连篇/abrahref=con1.htmtarget=main星座奇缘/abrahref=con1.htmtarget=main娱乐论坛/abr/div2020/1/21网页设计与制作245.3.3使用内联框架iframedivstyle=float:left;width:8px;padding-top:70px;imgid=changeimgsrc=images/close.gif/divdivstyle=float:left;width:440px;border:#0066ff1pxsolid;iframeid=mainname=mainsrc=con1.htmlframeborder=0“width=100%height=182px/iframe!--内联框架，指向内容页面--/divdivclass=clear/div/div/body/html2020/1/21网页设计与制作255.3.3使用内联框架iframe图5-14内联框架iframe示例2020/1/21网页设计与制作26其中内联框架语句是：iframeid=mainname=mainsrc=con1.htmlframeborder=0width=100%height=182px/iframe主要参数意义如下：iframe：开始一个内联框架。id：页面内对象的id标识符。name：为内联框架指定一个名字，对链接有用。src：该内联框架指向的源文件。frameborder：使用1表示显示边框，0则不显示。（可以是yes或no）。width：为内联框架指定高度，以像素为单位。height：为内联框架指定告诉，以像素为单位。2020/1/21网页设计与制作275.4本章小结设计页面布局是构建页面的重要一环。布局设计合理，可以使得页面美观大方。本章以实例为线索，首先讲解了表格和层在作为布局元素时的特点和应用。其中DIV+CSS是当前网站的主要布局方式。然后讲解了框架集和内联框架在也卖弄设计中的特点和应用。