网页设计与制作：项目4 表格设计和制作网页

1、项目4 表格设计和制作网页,1,网页设计与制作,项目4 表格设计和制作网页,本章简介： 网页布局是进行网页设计最基本的工作之一。布局合理的网页额，不仅能彰显网页的个性特点，而且会非常便于管理和修改。网页布局设计的工具有表格、框架和层等。其中表格是常用的布局工具之一。 通过本章的学习，读者可以了解表格的作用，使用表格不仅可以进行页面设计和排版，控制文本和图像在页面上的位置，还可以使页面变得更加清楚直观。本项目将详细介绍表格的使用方法,项目目标,掌握创建表格的方法 掌握表格的基本操作步骤 掌握表格属性的设置方法 掌握单元格属性的设置方法 了解表格的高级应用技巧 掌握利用“布局模式”规划网页的方法

2、了解表格数据的导入和导出方法,本项目要制作的是爱尚咖啡店的网站。爱尚咖啡网站制作目的主要是进行品牌宣传，增加人气、提高知名度。因此网站在设计时整体风格要大方、美观，结构目录要清晰得当，网站内容要突出恰当。首页最终效果,爱尚咖啡网站的设计制作主要包括风格特色定位、网页布局规划、网站架构设计及页面制作等四部分。 1风格特色定位 确立网站格调，从而进一步完成网站的构思创意即总体设计方案 2网站构架设计 爱尚咖啡网站的内容主要从介绍咖啡饮品知识、特色产品展示、相关服务等几个方面来介绍。网站页面包括“咖啡物语”、“爱尚文化”、“咖啡种类”、“咖啡DIY”、“您的建议”、“联系我们”等。 3页面设计,4.

3、3.1 网页布局规划 本网站主要介绍爱尚咖啡馆的一些特色咖啡饮品，宣传品牌文化，展示咖啡店的风采。在网页布局时，以方便用户进行信息浏览，能够快速直观地看到网站的内容及分类信息为目的。网页采用“匡”字型布局，最上面是网站的标题Logo和Banner，中间是网站的主要内容，左边是文字链接，中间部分是网页正文内容，最下面是网站的一些基本信息、联系方式、版权声明等。网页布局图如下图示,利用表格进行网页布局设计，首先利用Dreamweaver建立爱尚咖啡网站点，新建一个HTML空白文档，将文件保存在本站点目录下，命名为index.html，这也是网站的首页。接下来利用表格进行页面的布局。 表格（Tabl

4、e）是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。 1.插入表格 2.对“表格”对话框中参数进行设置,按照布局规划，页面主要分为Logo/Banner、页面内容和版权说明三部分，上面插入的表格为5行，第一行、第三行和第五行可分别对应Logo/Banner、页面内容和版权信息区域，第二行和第四行用来插入相应的分隔线图片，使区域之间自然过渡。这时要对表格进行编辑，以调整布局 。 1.改变第一行的行高 2.改变第三行的行高 3.拆分第一行 4.对第一行两列单元格的宽度、高度进行设置 5.设置表格属性,首页是网站的门面，也是访问者的第一站，所以内容要引人注目，布

5、局要合理美观。本网站首页是“咖啡物语”，页面内容是一篇优美的散文，介绍的是咖啡饮品的特点和对咖啡的热爱之情，在思想上容易引起访问者的共鸣。网站的Logo和Banner图片需要在事先制作好，尺寸大小分别与上述表格第一行的两列大小相符，图片内容和颜色与网站的整体风格保持协调一致,1.插入logo （1）将光标移至表格第一行第一列的单元格中，单击“插入”“图像”菜单命令，或在“插入”面板“常用”选项卡中单击“图像”按钮，打开“选择图像源文件”对话框。 （2）在该对话框中，选择站点文件夹下“images”文件夹中的“logo-3.jpg”，如图4-14所示，单击“确定”后完成图片的插入。 2.插入Ba

6、nner 方法同上,1.在第三行中新插入一个表格 2调整表格 （1）调整嵌套表格的高度和列宽 （2）设置原表格第三行的垂直对齐方式： 刚插入的表格在原表格行中的“垂直”对齐方式默认是“居中”，现根据需要设置为“顶端”对齐,导航是网站信息结构的基础分类，也是浏览者进行信息浏览的路标。一般来说，在网页的上端或左侧设置主导航元素的情况是比较普遍的方式。本网站的导航条设置在页面左侧，主要分为6个栏目。为了使导航文字排列整齐，可在上面刚插入的表格（嵌套表格）左列再插入一个7行1列的表格。 1插入新表格 2设置原表格列的对齐方式 3输入导航文字及设置对齐方式 4插入水平线 5插入图像及空格符,1输入网页内

7、容 将光标定位于导航条右侧的单元格中，输入文字内容，每段内容输入完后，按“Shift + Enter”组合键进行换行。 2定义CSS 网页文字输入时格式保持默认，与我们要求的字体大小、行距有差别，现需要设置格式。在DreamWeaver 中可以定义CSS样式 。 3.定义网页超链接文字的样式 4应用CSS样式 网页文档中选择需要应用样式的文字，在属性面板的“类”下拉列表框中选择已经设置好的样式,上述已经设计制作好首页的Logo/Banner区、导航区和正文内容区，下面要进行的是页面中的版权信息制作、各区块之间分隔线图片的插入以及Logo行背景颜色的设置。 1在首页文字内容的上、下方插入相应的分

8、隔线图片。 2输入版权信息 3设置背景颜色 将光标移至表格的第一行（Logo所在的行中）中，设置该行的背景颜色为“#BC630 7,效果图如图所示,4.5.1 表格数据处理 1.导入外部数据 2.导出表格数据 3.对表格数据进行排序,在实际的表格应用中，我们可以利用表格的属性、借助CSS样式等完成各式各样的表格，细线表格是其中常见的特色表格之一，其制作步骤如下： 1建立一个表格，设置“间距”为1，选择一个背景颜色（注意：是表格的背景颜色，而不是单元格的）。 2选中所有单元格，把背景设为白色或其他颜色，和表格的背景颜色有区别。 注意：表格的背景颜色就是边框的颜色，间距就是边框的粗细，如果用表格边框为1的话是达不到这个效果的，因为边框有亮边和暗边，即使为1也有2个像素的宽,上机实践】 实践1 进行健康美食网站首页布局规划； 1利用Dreamweaver CS5的表格进行美食网站首页布局，运用嵌套表格； 2制作网站首页，设计Logo和Banner，制作导航条； 3.定义CSS样式，运用样式； 4制作健康美食网站其他页面,常见面试题】 1 Dreamweaver CS5 布局表格与绘制布局单元格有