第5章_网站布局ppt课件

,*,10/7/2023,1,26,第5章 网站布局,技能目标,5.1网站页面布局,5.2,表格的应用,5.3,层的运用,5.4,框架的使用,第5章 网站布局技能目标 5.1网站页面布局 5.2表格的应,1,技能目标,了解常用网页内容的组成要素,了解常见网页的布局方式,掌握表格的基本操作，并能使用表格进行页面布局的设计,掌握层的使用方法，利用层对页面元素进行定位,掌握框架的使用方法，能够使用框架对页面进行设计,技能目标 了解常用网页内容的组成要素,2,网页设计是否美观，直接影响到客户对网站的第一感觉。在网页设计的各种要素中，网页布局设计是其中的重要一项。网页布局设计就是在页面内对组成网页的基本元素进行合理地组织安排，使网页更便于阅读和理解，看起来美观、清晰。虽然内容是网站的灵魂，但访问者不愿意看到只注重内容的站点，只有当网页排版和网页内容成功结合时，才是真正受人欢迎的网站。,5.1 网站页面布局,网页设计是否美观，直接影响到客户,3,页面尺寸,由于访问者计算机配置的不同，浏览网页时的显示模式也会有所区别。现在使用较多的是800600和1024768的分辨率，所以在设计网页时，就要考虑使用这两种分辨率。在800600的屏幕显示模式下，IE窗口内能看到的部分为780428个像素；而在分辨率是1024768的模式下，页面的显示尺寸应为1007600个像素。这两种尺寸都是按照在浏览时网页正好占满整个屏幕的情况而定的，当一屏显示不完时，页面上会出现垂直和水平的滚动条，通过对滚动条的拖动，可以查看到所有的内容。,页面组成,页头 网页标志 导航栏 内容板块 页脚,页面布局,上下型 左右型 混合型,5.1 网站页面布局,页面尺寸5.1 网站页面布局,4,表格是页面布局中极为有用的设计工具，它为网页带来了结构的概念，可以控制文本和图形在页面上出现的位置，使网页上的各个元素排列的井然有序。现在几乎所有的大型网站的主页都是用表格来进行布局的，网页设计者们已经把表格当作页面布局最有力的工具之一。,5.2 表格的应用,表格是页面布局中极为有用的设计工具，,5,案例5-2,用表格工具制作网页,设计并制作出一个名为“书香文轩”的网页，使用,表格作为布局工具，如图所示为制作完成的页面。,5.2 表格的应用,案例5-2 用表格工具制作网页5.2 表格的应用,6,案例5-2,用表格工具制作网页,【案例分析】,制作网页之前，首先要对其进行布局规,划，本例中的页面可以划分为页头、主体、页脚三部,分。我们可以考虑用34个大的表格来实现它。,5.2 表格的应用,案例5-2 用表格工具制作网页5.2 表格的应用,7,案例5-2,用表格工具制作网页,【操作步骤】（演示操作）,1新建文档,2绘制表格，设置表格属性,表格的基本操作：插入表格,合并单元格,拆分单元格,3插入图像，输入文字信息,4保存网页，预览效果,5.2 表格的应用,案例5-2 用表格工具制作网页5.2 表格的应用,8,案例5-2,用表格工具制作网页,案例小结：,表格主要是由行和列以及行列交叉处的单元格构成，利用行和列的合并、拆分功能，可以制作出各种形式的表格。,在用表格制作页面之前，一定要先对这个页面进行规划设计，最好画出草图，标出每一部分的尺寸，结合这个尺寸准备好图片等素材，或者根据找到的素材尺寸来修改规划的草图，这样才能在制作网面的过程中井井有条。,如果希望制作的页面在不同分辨率的屏幕上显示时都位于屏幕的中间，就要在设计时将表格的对齐方式设为居中对齐。,合并和拆分单元格的操作是最为常用的表格操作，一定要多多练习，熟练掌握。,嵌套表格时一定要好好进行规划，由外向内开始设计。,通过属性面板还可以对表格进行多种设置，这些操作只有多加练习才能运用自如。,5.2 表格的应用,案例5-2 用表格工具制作网页5.2 表格的应用,9,案例5-2,用表格工具制作网页,课堂小练习：将本节实例中的图书换成你最喜欢,的图书资料，制作出新的网页。,5.2 表格的应用,案例5-2 用表格工具制作网页5.2 表格的应用,10,案例5-3,使用布局表格工具制作网页,制作出一个名为“我的音乐盒”的网页，使用布局,表格进行设计。,【案例分析】这次的案例不仅使用前面学到的普通表,格设计，而且还要尝试一种在新在布局模式下，使用,布局表格对页面进行规划。仔细分析这个页面，可以,看出，它主要是由logo栏、名称栏、导航条、左侧项,目区、右侧内容区和下方的版权联系区共6个部分组,成，那么在设计时，就可以结合这个特点来进行操,作。,5.2 表格的应用,案例5-3 使用布局表格工具制作网页 5.2 表格的应用,11,案例5-3,使用布局表格工具制作网页,【操作步骤】（演示操作）,1新建文档,2进入布局模式，绘制表格,3切换回标准模式，插入图像，输入文字信息,4保存网页，预览效果,5.2 表格的应用,案例5-3 使用布局表格工具制作网页 5.2 表格的应用,12,案例5-3,使用布局表格工具制作网页,案例小结：,在布局模式中，使用布局表格设计页面，避免了使用表格时“规规矩矩”的感觉和不够灵活的缺点，而是通过鼠标的拖动就可以画出需要大小的单元格。布局模式的使用使设计页面布局更加方便、快捷、灵活。,当然，使用哪一种工具并不是固定的，在具体设计网页的时候，要结合实际情况和自己的使用习惯来决定选择表格还是布局表来进行页面的布局。,课堂小练习：,将本次实例中的内容换成你最喜欢的音,乐，制作出自己的“音乐盒”。,5.2 表格的应用,案例5-3 使用布局表格工具制作网页5.2 表格的应用,13,层是一种网页元素定位技术，使用它可以为页面,元素精确定位。层可以放置在页面上的任意位置，也就,是说，层可以在页面中随意移动和定位，比表格更加灵,活方便。在层里面，可以放置文本、图像等对象。而,且，利用层还可以实现网页的部分重叠效果，这在表格,中是不能做到的。除了可以定位外，利用层还可以控制,页面元素的显示和隐藏。在Dreamweaver 9 中，“层”又,被称为“AP元素”。在本节内容中，将通过两个案例来学,习层在进行页面设计时的使用方法和技巧。,5.3 层的运用,层是一种网页元素定位技术，使用它可以为页面5,14,案例,5-4,使用层实现网页中图片的显示与隐藏,制作一个与旅游相关的网页，单击页面下方的每,一个小图片，都会在中间显示出放大后的效果。,5.3 层的运用,案例5-4 使用层实现网页中图片的显示与隐藏5.3 层的运,15,案例,5-4,使用层实现网页中图片的显示与隐藏,【案例分析】在这个案例中，依然可以用表格或者布,局表来对页面进行布局，不同的是，因为中间的大图,片是会随着浏览者单击不同的小图片而发生变化，所,以这里简单的使用表格是不够的，要使用层来处理图,片的显示和隐藏的效果。,5.3 层的运用,案例5-4 使用层实现网页中图片的显示与隐藏5.3 层的运,16,案例,5-4,使用层实现网页中图片的显示与隐藏,【操作步骤】（演示操作）,1新建文档,2绘制表格,插入图片,3绘制层，设置层属性,4添加行为,5保存网页，预览效果,5.3 层的运用,案例5-4 使用层实现网页中图片的显示与隐藏5.3 层的运,17,案例,5-4,使用层实现网页中图片的显示与隐藏,案例小结：,通过这个案例，了解层的概念，掌握如何创建层,和使用层的方法，也练习通过层的显示和隐藏来实现,页面的切换效果。那么，大家开动脑筋想一想，在平,时浏览网页时，还有哪些效果是可以用层来实现的？,课堂小练习：,你最喜欢的景色是哪里的？将本节实例,内容换成你喜欢的风景图片，动手练习框架的使用。,5.3 层的运用,案例5-4 使用层实现网页中图片的显示与隐藏5.3 层的运,18,案例,5-5,使用层实现网页中图片的显示与隐藏,相信大家都玩过拼图游戏，把一张张小卡片拼,在一起，组合成一个完整的图像。今天这个案例的,目标就是利用层在网页中制作出拼图游戏来。,【案例分析】通过观察图片可以看出，这个拼图游戏是把4个图片拼合起来，而且要实现在页面内的自由移动。为了实现这个目的，需要绘制4个层用来分别放置这些图片。,5.3 层的运用,案例5-5 使用层实现网页中图片的显示与隐藏5.3 层的运,19,案例,5-5,使用层实现网页中图片的显示与隐藏,【操作步骤】（演示操作）,1新建文档,2绘制表格，插入图片,3绘制层，插入图片,4添加行为,5保存网页，预览效果,课堂小练习：,结合上面这个案例，自己学做一个类似,的拼图游戏，练习层的使用方法。,5.3 层的运用,案例5-5 使用层实现网页中图片的显示与隐藏5.3 层的运,20,框架的作用就是把一个页面划分为若干个小窗口，,每个窗口中显示不同的网页，并且在替换窗口中的网页,时，对其他窗口不会有影响。,框架主要由两个部分组成：框架集和单个框架。框,架集定义了一个框架结构的页面中显示的框架数、框架,的大小、框架的位置以及各个框架的网页文件和其他属,性。框架是指在框架页面中定义的一个区域。,5.4 框架的使用,框架的作用就是把一个页面划分为若干个小窗口，5.4,21,案例,5-6,使用框架工具制作网上商店页面,相信大家都知道网上开店吧，下面做一个用来,展示商品的页面，名为“丁铛的店”，如图所示。,5.4 框架的使用,案例5-6 使用框架工具制作网上商店页面 5.4 框架的,22,案例,5-6,使用框架工具制作网上商店页面,【案例分析】,在这个页面中，可以通过单击左侧的,不同分类，来查看对应的不同商品。每次出现的页,面，上部和左部都不会改变，只是右侧的内容变,化。如果在每一个页面中都要做出整个网页来，是,件很麻烦的事情。不过，在这个例子中，只需要利,用框架，就简单多了。,5.4 框架的使用,案例5-6 使用框架工具制作网上商店页面 5.4 框架的,23,案例,5-6,使用框架工具制作网上商店页面,【操作步骤】（演示操作）,1新建文档,2插入框架，保存,3设置框架属性,4在框架内添加表格，插入图片和文字,5设置链接,6保存网页，预览效果,5.4 框架的使用,案例5-6 使用框架工具制作网上商店页面 5.4 框架的,24,案例,5-6,使用框架工具制作网上商店页面,案例小结：,框架页面常被用于信息导航，浏览者单击某一,个项目，相应的内容就会显示在内容框架中，查找,信息非常方便，而且通过这种方法制作网页，避免,了相同部分的重复操作，给设计者带来了便利。,5.4 框架的使用,案例5-6 使用框架工具制作网上商店页面 5.4 框架的,25,本章内容是学习Dreamweaver进行网页设计的基础，分别,具体介绍了页面布局、表格、层和框架的使用方法。,表格主要用来构建网页的结构，控制文本和图形在页面上出现的位置，使网页上的各个元素排列的合理美观。其中需要熟练掌握编辑表格的各种操作及使用表格布局页面的方法。,层可以用来实现一些移动的效果，而且可以随意的往层中放入文字、图片及其他层。用它可以制作出页面中浮动的广告、动态显示的菜单等。用户应掌握层的基本操作方法，如层的创建、编辑、相关属性的设置等。,框架用来划分网页，使不同的文件载入不同页面定义区域中。重点要掌握使用框架布局页面的方法，以及正常保存框架集的方法。,在实际设计网页时，通常不会只使用一种页面元素进行设,计，而是对表格、层、框架等的综合运用。只有掌握好这些工,具的基本操作，才能为将来设计出美观实用的网站打下坚实的,基础。,总结,本章内容是学习Dreamweaver进行网页设计,26,