电子商务网页制作项目5.pptx

电子商务网页制作项目5.pptx

《电子商务网页制作项目5.pptx》由会员分享，可在线阅读，更多相关《电子商务网页制作项目5.pptx（33页珍藏版）》请在冰豆网上搜索。

DW项目五电子商务网页制作网页版式设计与布局学习网页版式设计的概念；了解有关网页造型和分辨率的知识；了解网页布局的原则和方法；学习使用表格进行网页布局。

项目目标看一看网页设计欣赏网页布局是指在浏览器空间里，依照建站目的和审美的规律，结合各种平面设计的具体特点，将信息内容和页面视觉元素加以组合编排。

第一步：

打开IE浏览器，在地址栏中输入http:

/CS5的表格能帮助亲轻松完成网页的布局。

在实际应用中，通常使用表格来进行网页布局，对网页元素进行精确定位。

例如在制作商品列表页面时，如果不用表格而直接将商品图像插入网页中，很难精确控制图像的位置，商品的文字描述更是难以和相应图片对齐：

表格布局概述在此可以使用一个2行4列的表格来对此商品列表页面进行布局，每个单元格内嵌套一个1行2列的表格分别放置商品图像和文字描述，如图5-12所示，效果会好很多：

使用表格布局的商品列表表格布局概述在DreamweaverCS5中，表格分为两种：

原始表格和布局表格。

原始表格和布局表格在本质上都是网页表格，都是由行、列、单元格组成，在DreamweaverCS5“代码”视图中，它们的代码也都是一样的。

区别在于它们是DreamweaverCS在设计表格时所用到的两种不同的模式或方法。

原始表格和布局表格是Dreamweaver处理表格的两种模式，即“标准模式”和“布局模式”，二者之间可以随意切换。

在“标准模式”下为原始表格，一般是通过对话框和属性面板对表格的尺寸、对齐、背景等属性进行设置；在“布局模式”则为布局表格，可以由设计者手工绘制表格和单元格，其大小可以手工调整。

在布局时使用布局表格更为直观和简单。

小贴士表格布局的方法1使用布局表格布局打开“查看”菜单，选择“表格模式”子菜单中的“布局模式”命令，或者按快捷键+F6，可以切换到布局模式。

在“布局模式”下，设计者可以在页面中所见即所地手工绘制布局表格和布局单元格，从而直观地进行网页布局。

在插入栏中选择“布局”类别，运用“绘制布局表格”和“绘制布局单元格”按钮可以绘制布局表格和布局单元格。

表格布局的方法通常要先绘制一个布局表格，然后在布局表格中绘制布局单元格，在“设计”视图中，布局表格外框为绿色，而布局单元格外框为蓝色。

如果不在布局表格中绘制布局单元格，DreamweaverCS5会自动创建一个布局表格以容纳该单元格，所以，布局单元格不能独立存在于布局表格之外。

布局表格和布局单元格具有自动吸附功能，当新绘制的布局表格或布局单元格距离另一个布局表格或布局单元格的边界很近时，就会自动吸附。

如果要取消该功能，可以在绘制时按住Alt键。

表格布局的方法2使用原始表格布局除使用布局表格工具进行布局外，直接插入原始表格同样可以进行网页布局。

创建表格时须注意除了要设置表格的行数、列数和宽度以外，还需要将“边框粗细”、“单元格边距”、“单元格间距”都设置为0，这样创建的表格没有边框和间距，也适合用于网页布局。

表格布局的方法3相临表格之间的位置关系不论表格的宽度是多少，两个相临的表格必然是上下的位置关系，因此，在使用表格布局时，可以根据功能将页面划分为若干个区块，每个区块使用一个表格。

如图5-16所示为一个上中下结构的布局，可以分别使用三个表格完成header区、主体区和页脚区的布局。

表格布局的方法设置布局表格的属性这里主要是根据实际需要设置表格的行数、列数、宽度、高度，对齐方式、背景等属性，从而实现网页内容的布局。

特别是表格以及单元格的宽度和高度，它们决定了网页布局内容的尺寸。

在向单元格内添加内容时，比如添加一张图片，如果图片尺寸比单元格的尺寸大，将会把单元格“撑大”，这样可能会破坏页面的整体外观，所以在创建表格以及设置单元格尺寸时，要预先算好尺寸，留出合适的空间以存放内容小贴士表格布局的方法嵌套表格的应用在使用表格布局时，大的功能区块内部还有小的区块，各小区块内部还有更具体的内容需要放置，这些情况都需要使用嵌套表格来实现。

简而言之，使用嵌套表格可以将大的区块划分为小的区块，也可以将小区块划分更小的区域，从而实现网页元素的精确定位。

如下图中使用一个1行2列的嵌套表格将主体区划分为左、右两个子区块。

使用嵌套表格时，要注意内层表格的宽度不能超过其外层单元格的宽度，否则会将外层单元格“撑大”而引起外层表格变形。

小贴士项目总结本项目介绍了网页版式设计与布局的基础知识。

网页版式设计能够将文字和图形图像等视觉元素进行组合配置，使浏览者对网页的内容一目了然，并获得悦目的视觉效果，从而实现信息传达的最佳效果，因此，版式设计在网页设计中具有非常重要的作用。

表格布局具有易于使用，布局效果好的特点。

运用表格把网页分为大的区块，再通过嵌套表格将大区块划分为小的区块，从而实现对网页元素的布局和精确定位。

推荐资源站酷（ZCOOL）：

http:

/