欢迎来到天天文库
浏览记录
ID:57173626
大小:554.50 KB
页数:29页
时间:2020-08-02
《网页设计-第7章 网页布局课件.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第7章网页布局当遨游Internet时,一幅幅漂亮的网页令人流连忘返,网页的精彩和色彩的搭配、文字的变化、图片的处理等关系密切,除此之外,还有一个非常重要的因素——网页的布局。本章介绍用Dreamweaver进行网页布局的方法和技巧,主要内容有:使用布局模式进行布局利用层进行布局利用表格+CSS进行布局利用DIV+CSS进行布局7.1使用布局模式前面学习了利用表格布局页面的方法,利用表格直接布局网页元素灵活性不强,比如无法精确定位网页内容,对网页版面进行调整时,也不很方便。为了提高表格布局的灵活性,Dreamweaver提供了布局模式,
2、在布局模式下,可以使用表格作为基础结构来设计网页,同时也使网页布局更加高效。7.1.1在布局模式下绘制表格1.切换布局模式在【插入】工具栏上选择【布局】类别。在右边的工具栏上单击【布局】按钮,弹出一个【从布局模式开始】对话框。按【确定】按钮即进入“布局模式”中。2.绘制布局表格在工具栏的【布局】类别中,单击【布局表格】按钮。鼠标移到页面时指针变为加号“+”。拖动鼠标绘制一个布局表格。3.绘制布局单元格在工具栏的【布局】类别中,单击【绘制布局单元格】按钮。鼠标移到布局表格上或者网页内容下边的空白处时指针变为加号“+”。拖动鼠标绘制一个布局
3、单元格。4.绘制嵌套布局表格绘制嵌套布局表格,就是将一个布局表格绘制在另一个布局表格中。对外部表格所进行的更改不会影响嵌套表格中的单元格。7.1.2设置布局表格布局表格是使用布局模式的基础,进入布局模式首先要做的就是要插入一个布局表格,然后设置尺寸、背景等属性,另外布局表格还有个特有的属性——“自动伸展”也需要进行设置。1.设置布局表格的大小2.设置布局表格自动伸展7.1.3设置布局单元格在布局模式中,光有布局表格是不够的,布局表格内部不能直接插入页面内容,必须先添加布局单元格,然后再在布局单元格内部插入页面内容。本小节讲解布局单元格的
4、设置。1.设置布局单元格的位置2.设置布局单元格内容的格式3.为布局单元格添加间隔图像7.1.4课堂实例――用布局表格布局网站主页要设计一个精美的网页,先要规划好版式。网页中最常用的版式类似于报刊,这种版式采用规范的、理性的分割方法,把网页分成竖向通栏、双栏、三栏、四栏或横向的通栏、双栏、三栏、四栏等。一般以竖向分栏为多,这种版式给人以和谐、理性的美。几种分栏方式结合使用,既理性、条理,又活泼而富有弹性。1.绘制网页顶部布局2.布局网页主体部分布局3.绘制网页底部布局7.2应用层布局网页层(Layer)是一种HTML页面元素,它的功能强
5、大,可以创建复杂的页面布局。层提供了一种在网页上比较自由地进行布局和设计的途径,在进行页面布局时,可以任意调整层的大小、背景、叠放顺序等,如同在绘图软件中作图一样方便。7.2.1制作层在Dreamweaver的“标准”模式下,利用“布局”工具栏上的“绘制层”按钮可以绘制层。1.插入层2.为层添加内容3.层的可见性4.层的重叠7.2.2层属性详解1.单个层的层属性2.多个层的层属性7.2.3嵌套层嵌套层是指在层内部的子层,当移动层的时候,其内部的嵌套层也会随之移动。制作嵌套层有两种方式,一种是在层内部新建嵌套层,另外一种是将已经存在的层添
6、加为另外一个层的嵌套层。1.添加嵌套层2.设置层之间的嵌套关系7.2.4层HTML代码当在网页文档中创建层时,Dreamweaver将在代码视图中自动插入该层对应的HTML代码。当在Dreamweaver中使用工具栏上的【绘制层】按钮绘制一个层时,在设计视图中,该层会显示在绘制它的当前位置;但在代码视图中,Dreamweaver将在页开头且紧接在
7、,页面内容的精确定位就会成为一个大问题,Dreamweaver8提供了相当丰富的页面内容功能来解决这个问题,比如使用辅助线、视图的缩放工具和使用视图的选取工具等。1.垂直辅助线2.水平辅助线3.缩放和选取工具7.2.6表格和层的相互转换层的主要特点是操作比较灵活,比如可以通过拖动任意设置层在页面中的位置,而表格的主要优势是比较整洁,布局清晰。早期版本的浏览器无法显示层,但能够显示表格。为了灵活应用表格和层这两种页面布局手段,Dreamweaver8提供了层和表格之间相互转换的方法。1.将层转换成表格2.将表格转换成层7.3课堂实例――用
8、层布局网站首页前面学习了绘制层和编辑层的方法和技巧,本节利用层布局一个个性化的网站首页,通过这个具体实例进一步学习层的应用。7.3.1实例效果这是一个个人网站首页,充满个性化的页面效果活泼可爱,如图7-7
此文档下载收益归作者所有