Dreamweaver网页制作基础教程项目三制作学校新闻教学教材.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目三 制作学校新闻 核心技术 ? 熟悉网页中表格布局的方法 ? 掌握表格的各种参数及使用方法 ? 了解表格中常用的代码 任务目标 ? 任务一：简单表格布局基本页面 ? 任务二：嵌套表格布局复杂页面 能力目标 ? 表格的表现形式 ? 表格的创建方法 ? 表格及单元格的设置方法 ? 单元格、行及表格的常用代码 项目背景 学校的网站要改版，需要重新设计一个新闻方面的布局页面，由两个页面构成，一个页面为新闻的列表清单，另一个页面为新闻的详细情况。要求利用Dreamweaver软件完成“校园新闻”静态页面的制作。 “校园新闻”网页要求图文并茂，可实现网页之间的跳转。要求校园网的网络管理员能够在尽快的时间内完成。 项目分析 本项目包含了利用表格进行页面布局的方法。进行页面布局的方法有多种，如表格布局、框架布局、Div+CSS布局等。对于初学者来说，表格布局往往是最容易掌握的布局方法。 任务一 简单表格布局基本页面 知识准备 1．表格简介 在Dreamweaver中，表格由行和列组成，一般行和列的交点称为一个单元格。如图3.1.1所示是一个三行四列的单元格，共有12个单元格。在进行页面布局的时候往往通过表格的单元格来控制不同内容的位置。表格与单元格的关系是整体与局部的关系，如同砌好的墙和砌墙的砖一样，如图3.1.1所示。 图3.1.1 一个三行四列的表格 2．表格的HTML代码 一个表由table开始，以/table结束，表的内容由tr,th和td定义。tr说明表的一个行，表有多少行就有多少个tr；th说明表的列数和相应栏目的名称，有多少栏就有多少个th；td则说明由tr和 th组成的表格。表格重要的基本标记不多，但每个标记都有很多属性。tr与td在同一行 如图3.1.2所示是一个三行四列的表格代码。其中，“nbsp;”代表此单元格内为空格。 图3.1.2 一个表格的代码 任务实施 步骤1： 新建一个HTM网页文件，保存为show.html。 图3.1.8 表格参数 单击常用工具栏中的插入表格按钮，插入一个三行两列的表格，表格宽度为1006，如图3.1.8所示。 步骤2： 步骤3： 选择第一行的两个单元格，单击鼠标右键，从弹出的快捷菜单中选择“表格”→“合并单元格”选项，如图3.1.9所示。 图3.1.9 合并单元格 步骤4： 同样，合并第三行的两个单元格。 步骤5：选择第一行合并的单元格，单击常用工具栏上的插入图片按钮。在弹出的对话框内选择“pic\项目3\images”中的“show_01.gif”图片，然后单击“确定”按钮，如图3.1.10所示。 图3.1.10 选择图片 步骤6：同样，选择第三行合并后的单元格，插入图像“show_04.gif”。 步骤7：选定第二行左侧的单元格，单击鼠标右键，在弹出的快捷菜单中选择“属性”选项，一般会在窗口下面显示属性面板。设置此单元格的属性，宽度设置为205，如图3.1.11所示，并插入图像“show_02.gif”。 图3.1.11 设置参数 步骤8：选定第二行右侧的单元格，插入图片“show_03.gif”，效果如图3.1.12所示。 图3.1.12 插入图片效果 * *