知识目标：了解网页布局的主要类型，了解网页布局设计，掌握使用表格设计网页布局的方法。

设计网页布局，详细操作步骤详见教材P2-6
1、单击“开始”按钮，选择“程序” →“Dreamweaver”，启动Dreamweaver。选择“文件”→“新建”，弹出“新建文档”对话框，在“常规”选项卡下“类别”列表中选择“基本页”，在“基本页”列表中选择“HTML”，单击“创建”，打开网页编辑窗口。
2、在页面左上角单击鼠标左键放置插人点，选择【插入】->【表格】，弹出【插入表格】对话框，设置好表格属性包括行数、猎术、表格宽度、边框粗细、单元格边距和单元格间距。并进行确认。说明：网页中插人表格后，当选定表格或表格中有插人点时，Dreamweaver会显示表格宽度和表格选择器中每个表格列的列宽，宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。通过选择【查看】-【可视化助理】-【表格宽度】可启用或禁用宽度和菜单的显示。
3、在表格右侧单击鼠标左键，选择【插入】-【表格】，弹出【插入表格】对话框，设置好相关属性，单击确定。第二个表格即出现在第一个表格下方。
4、在第二个表格右侧单击鼠标左键，选择【插入】-【表格】，弹出插入表格对话框，设置好相关属性，单击确定。第三个表格即出现在第二个表格下方。
说明：如果出现【开始使用扩展表格模式】对话框，请单击【确定】。扩展表格模式是用于临时添加表格的单元格边距和间距并增加表格边框以简化编辑的一种功能，易于精确地放置插人点，而不会意外选择错误的表格或其他表格内容。在【扩展表格】模式下完成对表格属性的设置后，应返回到【标准】模式。扩展表格模式不属于所见即所得环境，因此某些操作(如调整大小)不会得到预期的结果。
5、在第一个表格的第一行内单击鼠标左键，选择【窗口】-【属性】，在属性检查器中设置好【单元格高度】并按enter确认。并以此设置好每一行的【单元格高度】。
6、按照上面的方面依次设置好第二个表格每一列的【单元格宽度】和第三个表格每一行的【单元格高度】。网页布局完成后可以在单元格中插入网页，例如文字、图像或者多媒体元素。

网页布局是进行网页设计的首要工作，选择适宜的网页类型才能够充分发挥商业网页的价值。
网页的布局大致可以分为“国”字型、拐角型、标题止文型、左右框架型、上下框架型,综合框架型、封面型、Flash型和变化型。 

也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型，通常用于首页设计。优点：页面容纳内容多，信息量大。
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接 。特点：方便导航，也有充分的版面展示文章内容。
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。这种类型简洁明快，没有其他干扰信息，显得较为正规。
这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，风格易于更改，减少了更新的工作量。
与左右框架型类似，区别仅仅在于是一种上下分为两页的框架。
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。优点：内容丰富、信息量大，表现形式多样化
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。   
其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。   
即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。  

三、网页布局的一般原则

文字、图像等要素的空间占用上分布均匀。色彩的平衡，要给人一种协调的感觉。
对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。
让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。
网页要做到疏密有度，即平常所说的“密不透风，疏可跑马”。不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。
比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。

由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在的情况下，页面的显示尺寸为：。从以上数据可以看出，分辨率越高页面尺寸越大。
这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如
矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；
圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；
三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；
菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。
虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。
所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800×600的屏幕显示模式（这也是最常用的）下，在IE安装后默认的状态（即工具栏地址栏等没有改变）下，IE窗口内能看到的部分为778px×435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。
导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。

层在Dreamweaver中职的是带有定位CSS样式的“div”或者“span”代码。它使用方便，在使用时应参照对象描绘层，精确掌握层的大小
DIV+CSS网页布局的优势：
（1）使页面载入得更快。
（3）修改设计时更有效率
（4）保持视觉的一致性
（5）对浏览者和浏览器更具亲和力
DIV+CSS网页布局的缺点：
（1）DIV CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。
（2）CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。
（3）虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。
应用表格布局页面是最为广泛的网页布局工具，表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它 (要所见即所得的软件)，你会看到这个页面是如何利用表格的。
应用框架结构布局页面的兼容性较差，但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。

知识目标：了解网页图形图像在网页中的应用，了解网页图形图像设计原则，掌握网页图形图像设计方法。

设计网站的logo。具体操作过程详见教材P12-15。

二、图形图像在网页中的应用

网站标志是指那些造型单纯、意义明确的统一、标准的视觉符号，一般是网站的文字名称、图案记号或两者相结合的一种设计。标志具有象征功能、识别功能，是网站形象、特征、信誉和文化的浓缩。它是一种简洁但不简单的图形符号，具有以小见大、以少胜多、以一当十的特点。在现代社会生活中，经过精心设计而具有高度实用性和艺术性的图形标志，以其特有的功能和新颖别致的艺术效果，感染和影响着人们，知道人们的认知和选择。
背景插图可以把浏览器变成一个特定的环境，用图形为背景来衬托主题，可以增加层次感，也可以与网页主题图像形成对比或共鸣，从而突出主题形象，彰显网页的风格。
网页主图是指网页中表达主题、突出主题的较大幅面的图形图像。一幅好的主图，可以使浏览者见其图即知其内容，主图能够形成整个页面的视觉中心，它具有直观性强的特点，不需要像文字那样去逐字逐句地阅读，可以不受文化水平的限制，并能在瞬间给人以深刻的印象。因此主图的选材一定要与主题紧密关联。
将图形设计成超链接形式，能够使网页链接变得样式丰富，可以使网页更为美观,深圳网站制作公司。若能利用标志性符号，便可以减弱语言的障碍。图形按钮具有直观、形象的特点，可以为单调的文字信息增添活力，更加明确地表现它所要进行的操作。

三、图形图像的创意设计原则