使用Dreamweaver布局网页头部 理论讲解.pptVIP

理论讲解 使用表格布局“潮流前线”网页头部 根据网页结构分析的顺序进行表格布局： 先在网页中插入一个宽度为950像素，高度为150像素的表格，并设置背景图片： 设置网页头部上半部分：划分为一行三列，插入一行三列的表格，分别插入已切片好的三个图片； 设置网页头部下半部分：同样由一行三列组成，插入一行三列的表格，在左右两边的表格设置宽度为180像素，高度为32像素，中间一列的表格中插入一行六列的表格，调整表格间距大小，制作导航条； 站点是一个网站的基础，通常包含了一个网站的所有文件信息，通过站点管理网站和编辑网站是制作一个网站的基础。 建立站点的基本操作： 1、站点文件夹，用以保存网站所有的文件 2、设定图片默认保存文件夹 images 3、创建HTML文件 网页“潮流前线”头部结构分析 网页结构分析顺序： 由整体到局部 由外到内 由上到下 由左到右 “潮流前线”网页头部分析结果： 1、网页头部为一个整体，分成上下两部分； 2、上半部分由logo、图片和快速链接三个部分组成； 3、下半部分由导航条组成，其中导航条可以分割成三个部分。 根据网页结构分析的顺序进行div布局： 插入一个div，根据切片背景图片大小设置div样式表的宽度、高度以及背景图片。样式表如下： #header{ width=950px;height=150px； background-image: url(images/background%20.gif); background-repeat: no-repeat; margin:0 auto;} 对div套用 #header 效果图如下： 1、“潮流前线”页头背景div设置： 插入三个div，根据切片背景图片大小设置div样式表的宽度、高度以及背景图片。其中logo位置样式表设置为： .logo { height: 118px; width: 395px; background-image: url(images/logo.gif); background-repeat: no-repeat; float: left; } 其它两个样式表#mid_picture 、#quick_link 操作基本相同，此处不再添加代码说明； 分别对三个div套用 样式表效果图如下： 2、“潮流前线”页头下半部分div设置： 设置网页头部下半部分：插入三个div，高度为32px，宽度分别为180px 590px 180px ，对div进行浮动，把设置好的div横向平铺，其中中间文字导航代码设置为： #daohang_mid { font-family: 宋体; font-size: 14px ; line-height: 32px; font-weight: bolder; float: left; height: 32px; width: 590px; color: #FFF; } 其它两个样式表 #daohang_left、#daohang_right 操作基本相同，此处不再添加代码说明； 分别对三个div套用 样式表效果图如下： 3、“潮流前线”页头下半部分div设置： 1、将添加的段落形式的文字，转换成纵向列表 ul li所有宝贝/li li返回首页/li li春装新品/li li冬季清仓/li li热卖产品/li li搭配小件/li /ul p所有宝贝/p p返回首页/p p春装新品/p p冬季清仓/p p热卖产品/p p搭配小件/p 转换成横向导航列表后，基本完成了“潮流前线”的网页头部布局，效果如下： 2、将纵向列表通过对ul和li标签的设置转换成横向列表，样式表如下： ul { margin:0; list-style:none;} ul li{ width:90px; float:left; margin:0 auto;} 思考：使用表格和div布局网页，两者的优点和缺点在哪？ 使用表格布局： 网页形式上比较简单，但灵活性不足，在不同浏览器中有可能出现结构上的差异； 使用div布局网页： 操作比较复杂，但能针对每块内容进行不同的定位和形式上的变化，灵活性较高，能适应不同浏览器的变化，方便后台维护； 通过本节课的学习，我们基本能掌握： 1、准确地分析网页的结构； 2、使用表格对网页进行布局； 3、使用div对网页进行布局； 课后作业 每个小组通过div布局的方法，完成本小组首页所有的网页布局设计。