商务网页实例项目06课件.pptx

1、 内容提要表格是用于在HTML页面上显示表格式数据以及对文本和图像进行布局的强有力工具。表格由一行或多行组成，每行又由一个或多个单元格组成。表格是网页制作中的一个非常重要的元素，传统的网页布局以及各元素的组织都是依据表格来进行的，它决定了网页是否美观，内容组织是否清楚。本项目将重点讲解表格布局的方法和技巧，以及表格和单元格的编辑和设置。1网页布局的风格打开一个网站，首先呈现在眼前的就是网站的布局，它可以使访问者比较容易在站点上找到他们所需要的信息，所以网页制作初学者应该对网页布局的相关知识有所了解。（1）网页布局类型网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合

2、框架型、封面型、Flash型和变化型，下面分别论述。1）“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等内容。这种结构是我们在网上最常见的一种结构类型。活动活动1 1 学习商务网页布局相关知识学习商务网页布局相关知识 2）拐角型：这种结构与上一种只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题

3、及广告，左侧是导航链接。3）标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类型。4）左右框架型：这是一种左右分别为两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。5）上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。6）综合框架型：上面两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。7）封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平

4、面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理得好，会给人带来赏心悦目的感觉。8）Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。9）变化型：即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。（2）什么样的布局是最好的这是网页制作初学者可能会问的问题。其实这

5、要具体情况具体分析，比如如果内容非常多，就要考虑用国字型或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；这几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，则封面型是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，这种类型留给读者去考虑，因为只有不断的变化才会提高，才会不断丰富我们的网页！2商务网站页面布局特点电子商务类网站在布局上和咨询类网站有着很多相似的地方。多采用两栏或者三栏的布局。两栏或三栏的布局给人一种开放大气

6、的感觉，适用于信息量大的网站。导航多以搜索为主，横排在页面上部，左侧为栏目的内容区，右侧以产品分类为主，可以运用对比与调和，对称与平衡，节奏与韵律以及留白等手段，建立整体的均衡状态，产生和谐的美感。电子商务类网站在配色上多以动感且有活力的颜色为主，如蓝色、洋红、橙色和黄色等，并且整体页面的明度较高。由于电子商务类网站的产品图片比较多，图片本身的色彩就十分丰富，所以网站的配色应当尽量简单。3网页布局的步骤（1）构思草案新建页面就如一张白纸，没有任何表格，框架和约定俗成的东西，可以尽可能地发挥想象力，根据网站内容的整体风格，设计版面布局。可以参考其他优秀的网站，调用各种知识储备，特别是艺术方面的，

7、在大脑中不断地酝酿、碰撞，往往不经意间就有闪光的思想出现。这时就要抓紧时间把它变成文字的东西，用笔在纸上粗略地勾画出布局的轮廓，不要讲究细节，只要有一个轮廓就行，将你想到的“景象”画上去。当然也可以有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案作为继续创作的脚本。（2）初步填充内容布局在草案的基础上，将确定需要放置的功能模块安排到页面上。功能模块主要包含网站标志，主菜单，新闻，搜索，友情链接，广告条，邮件列表，计数器，版权信息等。注意，这里必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的排放。（3）细化在将各主

8、要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，可以利用网页编辑工具把草案做成一个简略的网页，当然对每一种元素所占的比例也要有一个详细的数字，以便以后修改。经过以上几步，相信你的网页布局已经初具规模了，让别人看一下，给你提些建议，再不断修改，一个很有特色的网页就要浮出水面了。4网页排版布局的原则上面简要介绍了设计网页布局的步骤，事实上，在构思和设计的过程中，还必须掌握以下几项原则。1）平衡性。一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现在文字、图像等要素在空间占用上应分布均匀，而且还有色彩的平衡，要给人一种协调的感觉。2）对称性。对称是一种美，我们

9、生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。3）对比性。让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。4）疏密度。网页要做到疏密有度，即平常所说的“密不透风，疏可跑马”。不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。5）比例。比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。6）凝视。凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果。7）空白。空白有两种作用，一方

10、面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。8）尽量用图片解说。此法对不能用语言说服或用语言无法表达的情感，特别有效。图片解说的内容，可以对浏览者的心理产生更大的影响。5网页布局的技术（1）层叠样式表的应用在新的HTML 4.0标准中，CSS（层叠样式表）被提出来，它能完全精确地定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。可以在网上找到许多关于CSS的介绍和使用方法。当然，日趋炙热的WEB标准（XHTML+CSS）开

11、始强烈推崇内容和表现相分离，并为下一代数据交换XML做过渡（即XHTML）。（2）表格布局表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当用了过多表格时，页面下载速度受到影响。对于表格布局，可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它（要所见即所得的软件），就会看到这个页面是如何利用表格的。6框架布局不知道什么原故，许多人不喜欢框架结构的页面，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个

12、好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。1复习表格操作（1）插入表格单击“插入”工具栏上的“常用”选项中的“表格”按钮或者“布局”中的“表格”按钮，打开“表格”对话框，创建表格如图6-1所示。活动活动2 2 制作网上商城首页布局制作网上商城首页布局“表格大小表格大小”选项选项 行数和列数：插入表格的行数、列数。表格宽度：设置以像素或浏览器窗口百分比为单位的表格宽。边框粗细：指定表格边框的粗细程度。单元格边距：指定单元格边框和单元格内容之间的间距，以像素为单位。单元格间距：指定相邻单元格之间的距离，以像素为单位。“标题

13、标题”选项选项 无：表示对表格不启用列或行标题。左：表示将表格的第一列作为标题列。顶部：表示将表格的第一行作为标题行。两者：表示能够在表中输入列标题和行标题。“辅助功能辅助功能”选项选项 标题：可以创建一个显示在表格外的表格标题。摘要：设置表格的说明。（2）设置表格属性当表格被选定时，“属性”面板所显示的是表格属性，如图6-2所示。各参数含义如下。表格：定义表格名称。宽：表格的宽度。高：表格的高度。填充：表格内的单元格内容和单元格边框之间的距离。间距：表格内的单元格之间的间距。对齐：表格相对于网页的对齐方式。边框：设置围绕表格的边框宽度（单位为像素）。背景颜色：表格的背景颜色。边框颜色：表格的

14、边框颜色。背景图像：表格的背景图像。（3）添加表格行或列在Dreamweaver中，执行“修改”“表格”菜单命令或快捷菜单上的命令都可以添加或删除表格中的行和列。1）添加行和列。执行“修改表格”“插入行或列”命令，或者单击鼠标右键，从快捷菜单中选择“表格”“插入行或列”，在弹出的“插入行或列”对话框中设置相关参数即可，如图6-3所示。2）删除行或列。将光标定位在要删除的行或列的单元格中，执行“修改”“表格”“删除行”或“删除列”命令，或者单击鼠标右键从快捷菜单中选择“表格”“删除行”或“删除列”，即可删除当前行或列。3）在“属性”面板中添加、删除行或列。选中整个表格，在“属性”面板中增加“行”

15、或“列”值以添加行或列，减少“行”或“列”值以删除行或列。该操作将从表格底端添加或删除行，从表格右侧添加或删除列。即使要删除的行和列中包含数据，Dreamweaver也不会提出警告。此外，在输入数据时，如果已经到达表格最后一行的最后一个单元格，则按键可以添加一行。2插人嵌套表格将光标定为在要插入表格的单元格内，单击“表格按钮或执行“插入表格”命令，即可完成嵌套表格的制作，如图6-4所示。3用表格制作网上商城首页（1）活动分析了解表格的构成，掌握表格及单元格的基本操作，掌握表格属性的设置、特殊表格的制作方法。（2）知识要点 掌握表格的基本操作、表格属性设置以及特殊表格的制作。能够利用表格灵活布局

16、网页。（3）动手操作步骤步骤1 建立站点并新建网页建立站点并新建网页1）在D盘建立站点目录web，并使用高级标签定义站点，站点名称为“贸贸精品女装”，如图6-5所示。2）在起始页中的“新建”中单击“html”，创建新网页。3）执行“文件”“保存”命令，将网页保存在站点根目录下，保存文件名为index.html，如图6-6所示。步骤步骤2 页面设置页面设置1）执行“修改”“页面属性”命令，在弹出的“页面属性”对话框中将页面文字字体设置为宋体，大小为12px，颜色为#333深灰色，上边距设置为0px，如图6-7所示。2）切换分类项至“链接（CSS）”，设置链接字体“同页面字体”，下划线样式为始终有

17、下划线，如图6-8所示。3）切换分类项至“标题/编码”，如图6-9所示。将网页标题设置为“贸贸精品女装”，编码为“UTF-8”，设置以上几项后，单击“确定”按钮完成设置。图6-9 设置标题/编码属性 步骤步骤3 完成页面基本完成页面基本布局布局1）插入表格。单击“插入”工具栏“常用”选项中的“表格”按钮，打开“表格”对话框，设置表格大小为2行1列，表格宽度为1004像素，边框粗细、单元格边距及单元格间距都设置为0，并单击“确认”按钮，如图6-10所示。2）选择标签上的标签，全选表格，在属性面板上将对齐设置设为居中对齐。3）将光标定位在第一行的单元格内，插入一个两行一列的表格，表格宽度为100%

18、，对齐方式为默认。按组合键进入扩展表格模式，如图6-11所示。4）选择第一行，在属性面板上设置水平对齐方式为右对齐，输入文字。效果如图6-12所示。5）将光标定位在第二行的单元格内，再插入一个1行2列的表格，表格宽度100%，对齐方式为默认。效果如图6-13所示。6）将光标定位在新插入表格的第一个单元格里，设置单元格宽度为308像素。执行“插入”“图像”命令，在弹出的对话框中选择素材文件夹中的图片文件logo.gif，单击插入后会出现复制文件对话框，如图6-14所示，选择“是”按钮。在弹出的“复制文件为”对话框中，在web文件夹下新建images文件夹，如图6-15所示。将图片保存在image

19、s文件夹里，如图6-16所示。在弹出的“图像标签辅助功能属性”对话框中设置替换文本为“logo”，如图6-17所示。单击“确定”按钮，完成了将图片插入网页中的操作，最后效果如图6-18所示。7）将光标定位在图片右边的单元格内。插入1行2列表格，宽度为100%，高度为27像素。设置新插入表格左边的单元格水平对齐为居中对齐、垂直对齐为中部对齐，设置右边单元格宽度为100像素。8）定位在左边的单元格内，选择表单工具中的文本域，插入单行文本域。在右边的单元格里插入图片sousuo.gif，如图6-19所示。9）将光标定位在最外部表格的第二行，设置背景颜色为#069BEB。插入1行13列表格，宽度为10

20、0%。在奇数单元格里写入文字，在偶数单元格里插入图片fgx1.gif，如图6-20所示。10）在头部表格外单击，插入宽为1004像素的1行1列的表格。设置单元格格式为高度40像素，如图6-21所示。11）在页面空白处单击，再次插入宽1004像素的1行3列的表格。分别设置单元格宽度为188、24、792像素。12）将光标定位在左边单元格里，插入宽188像素的2行1列的表格。在第一行里插入图片quanbufenlei.gif。在第二行里输入文字，如图6-22所示。13）设置最右边的单元格水平对齐为居中对齐，垂直对齐为顶端对齐。插入3行1列、宽为792像素的表格。在新插入的表格第一行内插入图片fla

21、sh.gif，如图6-23所示。14）在第三行里插入宽792像素的2行1列的表格，在第一行插入图片xingpinshangjia.gif，如图6-24所示。15）在“新品上架”图片下的单元格插入1行4列的表格，宽度为100%。设置单元格对齐都为居中对齐。16）在插入的1行4列表格的第一个单元格里插入宽185像素的2行1列的表格。在第一行插入图片1.gif，在第二行输入文字，如图6-25所示。17）选择这个2行1列的表格，单击鼠标右键选择“复制”选项，在右边的单元格内右击选择粘贴。将相同的布局效果粘贴进去即可。多个商品排列效果如图6-26所示。18）用同样的方法完成推荐商品和热卖商品的布局。最后

22、的效果，如图6-27所示。19）插入页脚版权。在页面空白处单击，插入宽1004像素，高100像素，对齐方式默认的1行1列的表格，在单元格内输入文字，如图6-28所示。1复习表格修改编辑（1）设置单元格属性，如图6-29所示。各参数含义如下。水平：设置单元格内容的水平对齐方式。有4个值，即浏览器默认（即普通单元格左对齐、标题单元格居中对齐）、左对齐、右对齐和居中对齐。垂直：设置单元格内容的垂直对齐方式。有5个值，即浏览器默认（通常为中间对齐）、上端对齐、中间对齐、底端对齐和基准线对齐。活动活动3 3 制作网上商城商品列表页布局制作网上商城商品列表页布局 宽和高：以像素为单位设置选定单元格的宽度和

23、高度。要使用百分比请在数值后添加百分比符号（%）。背景颜色：设置单元格的背景颜色。背景颜色只出现在单元格内部。也就是说，它不会在单元格间距或表格边框的上面出现。这意味着如果单元格间距和单元格填充没有被设置，那么即使边框被设置为0，在着色区域之间也还会存在缝隙。不换行：设置单元格的内容不换行。标题：将单元格设置为表格标题。在默认情况下，表格标题单元格中的内容将被设置为粗体并居中。（2）复制和粘贴单元格在表格的编辑中复制、粘贴单元格是经常会使用的一种手段，我们可以一次复制和粘贴多个表格单元格并保留单元格格式。当然，也可以只复制和粘贴单元格内容，单元格可以在插入位置被粘贴，也可以替换表格中选定的内容

24、。如果要粘贴多个表格单元格，那么剪贴板中的内容必须和表格结构保持一致。（3）合并和拆分单元格1）合并单元格。选取需合并的单元格，执行“修改”“表格”“合并单元格”命令，或单击“属性”面板中的“合并单元格”按钮，即可完成单元格的合并。2）拆分单元格。选定需拆分的单元格，执行“修改”“表格”“拆分单元格”命令，或单击“属性”面板中的“拆分单元格”按钮。在弹出的“拆分单元格”对话框中设置拆分的参数即可，如图6-30所示。2布局商品列表页（1）活动分析已完成主页的操作，列表页和主页除了中间主体部分不一样，其他区域和主页操作相似。（2）知识要点 掌握表格的基本操作、表格属性设置以及特殊表格的制作。能够利

25、用表格灵活布局网页。（3）动手操作1）商品列表页的效果和主页很相似，可以利用布局主页的方法布局商品列表页。这里我们使用修改主页方法快速创建商品列表页。用Dreamweaver打开index.html，选择“文件”“另存为”，文件名为list.html，如图6-31所示。3）将光标定位在空白区域，插入4行4列、宽792像素的表格，如图6-33所示。4）在4行4列的表格第一个单元格内再插入一个2行1列的表格，宽度100%。5）在表格第一行插入图片1.gif，第二行插入文字，如图6-34所示。6）用同样的方法将剩下的两行表格都插入图片和文字，如图6-35所示。7）选择第4行全部单元格，单击鼠标右键选

26、择“表格”“合并单元格”。设置合并后的单元格的对齐方式为右对齐。插入图片shangyiye.png和xiayiye.png，如图6-36所示。1活动分析商品详情页面没有左侧的分类导航，它和主页的头部和版权是相同的。2知识要点 掌握表格的基本操作、表格属性设置以及特殊表格的制作。能够利用表格灵活布局网页。3动手操作1）复制主页，删除中间区域内容只保留头部和版权，如图6-37所示。活动活动4 4 制作商品详情页布局制作商品详情页布局 2）将光标定位在“您现在所在的位置：首页”表格下方插入1行1列，宽1004像素，填充20的表格。再在里面插入一个宽100%的1行1列的表格，如图6-38所示。3）在表格内依次插入文字和图片。最终效果如图6-39所示。使用表格布局网页是网页制作中的一个非常重要的内容，传统的网页布局以及各元素的组织都是依据表格来进行的，它决定了网页是否美观，内容组织是否清楚。运用表格布局时，要注意运用标签选择器选定表格、行或单元格，然后在属性面板中设置对象的相关属性以达到布局的要求。有时需要在表格中嵌套表格来完成对网页更精确的布局。项项 目目 小小 结结