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

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 项目4 表格设计和制作网页 1 网页设计与制作 项目4 表格设计和制作网页 本章简介： 　　网页布局是进行网页设计最基本的工作之一。布局合理的网页额，不仅能彰显网页的个性特点，而且会非常便于管理和修改。网页布局设计的工具有表格、框架和层等。其中表格是常用的布局工具之一。 通过本章的学习，读者可以了解表格的作用，使用表格不仅可以进行页面设计和排版，控制文本和图像在页面上的位置，还可以使页面变得更加清楚直观。本项目将详细介绍表格的使用方法。 项目目标 掌握创建表格的方法 掌握表格的基本操作步骤 掌握表格属性的设置方法 掌握单元格属性的设置方法 了解表格的高级应用技巧 掌握利用“布局模式”规划网页的方法 了解表格数据的导入和导出方法 任务4.1 咖啡网站的介绍 1 本项目要制作的是爱尚咖啡店的网站。爱尚咖啡网站制作目的主要是进行品牌宣传，增加人气、提高知名度。因此网站在设计时整体风格要大方、美观，结构目录要清晰得当，网站内容要突出恰当。首页最终效果 任务4.2 网站的设计 1 爱尚咖啡网站的设计制作主要包括风格特色定位、网页布局规划、网站架构设计及页面制作等四部分。 1．风格特色定位 确立网站格调，从而进一步完成网站的构思创意即总体设计方案 2．网站构架设计 爱尚咖啡网站的内容主要从介绍咖啡饮品知识、特色产品展示、相关服务等几个方面来介绍。网站页面包括“咖啡物语”、“爱尚文化”、“咖啡种类”、“咖啡DIY”、“您的建议”、“联系我们”等。 3．页面设计 任务4.3 进行咖啡馆页面布局 1 4.3.1 网页布局规划 本网站主要介绍爱尚咖啡馆的一些特色咖啡饮品，宣传品牌文化，展示咖啡店的风采。在网页布局时，以方便用户进行信息浏览，能够快速直观地看到网站的内容及分类信息为目的。网页采用“匡”字型布局，最上面是网站的标题Logo和Banner，中间是网站的主要内容，左边是文字链接，中间部分是网页正文内容，最下面是网站的一些基本信息、联系方式、版权声明等。网页布局图如下图示： 任务4.3.2 插入和设置表格 1 利用表格进行网页布局设计，首先利用Dreamweaver建立爱尚咖啡网站点，新建一个HTML空白文档，将文件保存在本站点目录下，命名为index.html，这也是网站的首页。接下来利用表格进行页面的布局。 表格（Table）是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。 1.插入表格 2.对‘“表格”对话框中参数进行设置 任务4.3.3 编辑表格 1 按照布局规划，页面主要分为Logo/Banner、页面内容和版权说明三部分，上面插入的表格为5行，第一行、第三行和第五行可分别对应Logo/Banner、页面内容和版权信息区域，第二行和第四行用来插入相应的分隔线图片，使区域之间自然过渡。这时要对表格进行编辑，以调整布局 。 1.改变第一行的行高 2.改变第三行的行高 3.拆分第一行 4.对第一行两列单元格的宽度、高度进行设置 5.设置表格属性 任务4.4 设计咖啡馆首页 1 首页是网站的门面，也是访问者的第一站，所以内容要引人注目，布局要合理美观。本网站首页是“咖啡物语”，页面内容是一篇优美的散文，介绍的是咖啡饮品的特点和对咖啡的热爱之情，在思想上容易引起访问者的共鸣。网站的Logo和Banner图片需要在事先制作好，尺寸大小分别与上述表格第一行的两列大小相符，图片内容和颜色与网站的整体风格保持协调一致。 任务4.4.1 插入Logo和Banner 1 1.插入logo （1）将光标移至表格第一行第一列的单元格中，单击“插入”→“图像”菜单命令，或在“插入”面板“常用”选项卡中单击“图像”按钮，打开“选择图像源文件”对话框。 （2）在该对话框中，选择站点文件夹下“images”文件夹中的“logo-3.jpg”，如图4-14所示，单击“确定”后完成图片的插入。 2.插入Banner 方法同上。 任务4.4.2 使用嵌套表格 1 1.在第三行中新插入一个表格 2．调整表格 （1）调整嵌套表格的高度和列宽 （2）设置原表格第三行的垂直对齐方式： 刚插入的表格在原表格行中的“垂直”对齐方式默认是“居中”，现根据需要设置为“顶端”对齐。 任务4.4.3 设计导航条 1 导航是网站信息结构的基础分类，也是浏览者进行信息浏览的路标。一般来说，在网页的上端或左侧设置主导航元素的情况是比较普遍的方式。本网