第2章网页的布局.ppt

1、2.1网页布局示例、2.1.1网页样式在网页上插入各种对象和修改效果之前，请务必确定网页的整体样式。根据不同的网页风格，网页可以大致分为两类：商业网页和个人网页。商业网站一般都有相对统一的布局设计，但个人主页由于内容单一，内容和信息不如商业网站丰富。但是因为这个原因。个人主页的形式更加灵活，更容易创造美感。搜狐主页内容丰富多彩，有许多大型广告和浮动广告栏。2.1.1网页的样式2。微软中国的主页内容具体，内容非常有条理，栏目突出，没有凌乱感。2.1.1网页3的样式。“黑白音乐”是个人主页。它看起来简单，颜色不够丰富，但感觉很新鲜。2.1.2网页布局示例，即所谓的网页布局，通俗地说，就是确定网站标

2、识、导航栏、菜单等元素在网页上的位置。不同的网页和不同的网页元素有不同的位置，所以它们的位置是不同的。一般来说，重要的元素被放在显著的位置。简单划分，网页的布局一般可以分为：“工厂”字体、“相同”字体、标题文字类型、栏目类型、Flash类型、封面类型等。2.1.2网页布局示例1。“工厂”字体结构的特点是内容一目了然。页面顶部是标志和图片(广告)栏，下方左侧是导航链接，右侧是信息发布区。这种结构很常见。2.1.2网页布局示例2，“通”的特点是超链接多、信息量大。网站顶部是标志和图片(广告)栏，下部分为三栏或更多。两边的两栏相对较小，一般是导航超链接和小图片广告等。网站的主要内容在中间，网站的版权

3、信息在底部。2.1.2网页布局示例3，标题文本结构的顶部是网站徽标和标题，下面是网页文本。内容非常简单。2.1.2网页布局示例4，列结构，这种结构一般分为左右(或上下)列，有些分为多列。通常，导航链接和正文放置在不同的列中。这将打开一个新网页，导航链接栏的内容不会改变。2.1.2网页布局示例5，Flash结构是由Flash技术完成的，其视觉效果和听觉效果都不同于传统的网页，往往会给访问者带来很大的影响。这种网页越来越受年轻人的欢迎。2.1.2网页布局示例6，封面结构，通常首先看到的是图片或动画，并且有一个超链接提示文本进入下一级网页下的图片或动画。图片或动画可以用Flash制作。与闪存不同，这

4、种结构不是在闪存中完成的，而是在网页制作软件中完成的。2.1.3网页布局的注意事项，1。平衡，2。对称性，3。对比，4。密度，5。可重复性，6。节奏感。网页的布局是决定网站是否美观的一个重要方面。只有通过合理和创造性的布局，文本，图像和其他内容才能完美地展示在游客面前。2.1.4绘制网页布局草图，2.2使用表格，网页的布局设计一般通过表格来实现。可以说制表是网页制作中最重要的技能之一。制表的应用直接反映了网页设计者的水平。实现网页布局有两种方式，一种是使用表格，另一种是使用布局视图。2.2.1插入表格，在网页中定位光标，然后点击“插入”面板中的“表格”按钮，出现“插入表格”对话框。行数和列数是

5、表的大小；宽度是指表格的宽度，单位可以是像素数或百分比。由像素定义的表格大小是固定的，而由百分比定义的表格将根据浏览器的大小而变化；边框是指表格线条的宽度；间距是指单元格间距；内部距离是指单元格中的文本与边框之间的距离。所谓的单元格是表格中的每个小单元格2.2.2插入和删除表格的行和列，以便光标出现在表格中。右击鼠标打开快捷菜单，将鼠标指针移动到快捷菜单的“表格”上，弹出子菜单，点击下一级菜单中的“插入行或列”，弹出“插入行或列”对话框。以便光标出现在表格中。鼠标右键打开快捷菜单，将鼠标指针移动到快捷菜单的“表格”处，弹出子菜单，点击下一级菜单中的“删除行”，该行将被删除。2.2.3合并和拆分

6、单元格，选择多个单元格，将鼠标指针移动到属性面板，并点击合并单元格按钮来合并这两个单元格。使光标出现在单元格中，将鼠标指针移动到“属性”面板，然后单击“拆分单元格”按钮打开“拆分单元格”对话框。选择拆分方式和编号，点击【确定】，单元格将被拆分，2.2.4表格嵌套，将光标移动到单元格，点击【插入】面板中的【插入表格】按钮，打开【插入表格】对话框。输入表格的行数和列数，然后单击“确定”嵌套表格。2.2.5使用“表属性”对话框。选择表格后，窗口底部的属性面板会显示整个表格的设置。表格的宽度是100%，这意味着无论浏览器打开多大，表格都会占据整个窗口。目前，计算机常用的分辨率是800600，所以我们可

7、以将表格宽度设置为780像素，这样网页的外观在任何计算机上都是一样的。2.2.6设置表格边框，并将表格边框的宽度更改为0。您会发现表格边框变成了虚线，因此表格会隐藏在浏览器中。2.3布局视图，布局视图不仅可以任意绘制表格，还可以任意拖动单元格来改变其位置。布局视图是Dreamweaver MX的一个增强功能，可以非常方便地用来规划网页的布局。完成规划后，您可以返回到熟悉的表格形式。2.3.1布局视图工具栏，在插入面板中，点击“布局”选项卡，您会发现“标准视图”按钮被按下，标准视图是我们设计网站的普通视图，右侧的“布局单元格”按钮和“布局表格”按钮是灰色且不可用的，因此如果他们想使用它，必须切换

8、到布局视图。单击“布局视图”按钮切换到布局视图，将弹出一个对话框，提示您单击“布局单元格”按钮和“布局表格”按钮。2.3.2使用布局视图规划网页布局，点击按钮绘制布局表，编辑区顶部会出现“布局视图”字样。将鼠标移动到编辑区域，按住鼠标指针并拖动以绘制一个绿色表格。用同样的方法，画出其他的表格。单击“插入”面板中的“绘制布局单元格”按钮，将鼠标移动到编辑区域，按住鼠标指针并拖动以绘制单元格。2.4使用框架，可以通过使用框架将页面分成两个或更多部分。2.4.1框架概述，我们可以这样理解框架：一个框架由几个独立的页面组成。一般来说，这些页面只显示全部内容的一部分，我们可以通过滚动条浏览页面的全部内容

9、。或者可以说，该框架实现了在一个窗口中浏览多个页面。2.4.2要建立并保存框架文件，点击菜单栏上的插入，弹出插入菜单，将鼠标指针移动到菜单中的框架上，最后选择下一菜单中的“上下框架”命令。网页分为三个部分。单击顶部的鼠标，您会发现Dreamweaver的标题栏更改为“无标题框架-2”，而左下角的页面名为“无标题框架-3”，右下角的页面名为“无标题框架-1”。这是使用框架与使用表格和布局视图之间的本质区别。2.4.2框架文件的建立和保存，需要注意的是，框架的保存与单个网页的保存略有不同，Dreamweaver为每个框架提供了一个“保存”对话框。单击菜单栏上的“文件”，您会发现“文件”菜单下的“保存”命令变为“保存框架”和“将框架另存为”。单击“保存框架”命令保存当前光标所在的网页。通过改变光标位置和激活其他区域，