网页设计与网站制作2.ppt

第二章 使用网页工具制作静态网页 【本章内容】 2.1 ?Dreamweaver入门 2.2 在网页中使用表格 2.3 插入图像、动画与媒体元素 2.4 使用表单 2.5 插入超链接 2.6 CSS技术 2.7 层的使用 2.8 创建框架 第2.1节 Dreamweaver入门 【本节内容】 一. Dreamweaver 8的界面 二. 建立本地站点 三. 新建HTML网页 一. Dreamweaver 8的界面 制作网页时的系统界面如图: 一. Dreamweaver 8的界面 菜单栏 菜单栏是描述软件完整功能的方式，它提供软件功能的所有命令选项。 插入栏 插入栏包括多种网页对象（常用、布局、表单、文本、HTML、应用程序、Flash元素和可以自定义的收藏夹），可用于插入相应的对象。 一. Dreamweaver 8的界面 工具栏 工具栏中包含按钮可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 状态栏 状态栏提供与您正创建的文档有关的其它信息，它的作用和含义如图所示。 一. Dreamweaver 8的界面 属性检查器 网页中的对象都有自身的属性，属性检器显示了被选取对象的各种属性，你可以随时进行修改。 文档窗口 文档窗口显示当前的文档的内容或内容代码，也就是你编辑网页文档的地方，在这里可以通过菜单命令、工具栏按钮、插入栏按钮、属性检查器以及面板级等到工具来制作网页，网页文档在设计视图下的显示结果与浏览器中的显示结果基本相同。 一. Dreamweaver 8的界面 选项面板 选项面板可以随时以 直观的方式获得特定功能， 它们一般组合成面板组嵌 入在界面的右边。如图： 二. 建立本地站点 在Dreamweaver下创建本地站点的具体步骤： 1、选择[站点]-[新建站点]，出现“定义站点”对话框。 2、可以使用“高级”选项页进行站点的定义。 3、设置本地信息，如下图所示。 本地信息共有8个项目需要设置：定义“站点名称”、选择网站本地文件夹、确认是否“自动刷新文件列表”、选择“默认图像文件夹”、选择链接相对地址、选择“默认图像文件夹”路径、输入“HTTP地址”、“区分大小写的链接”、确认是否“启用缓存”。 二. 建立本地站点 二. 建立本地站点 举例：定义一个站点“时间的碎片” ① 在“站点名称”文本框中输入 时间的碎片 。 ② 在“本地根文件夹”中输入“D:\web”或是单击右边的文件夹图标后进行选择此文件夹。 ③ 选择“自动刷新本地文件列表”单选框。④ 在“默认图像文件夹”文本框中输入 D:\Web\Pic，同样可以点击文件夹图标以进行选择。 ⑤ 保持“链接相对于”单选框的默认值不变。 ⑥ 在“HTTP地址”文本框中，你可以输入你已经申请的网站的域名，如。 ⑦“区分大小写链接”和“缓存”两项可以保持默认值不变。 ⑧ 单击“确定”按钮完成本地站点的设置。 三.新建HTML网页 新建文档 打开Dreamweaver后，就会显示使用开始页面，在开始页面“创 建新项目”选项区中选择某个新建项目选项，如HTML，即可新 建相应类型的新文档，当然也可以使用菜单来新建网页。 保存网页 新建网页后，先把网页保存在站点目录下，保存新建的HTML文 件时，默认的文件名是Untitled-1等名称，但一般不使用默认 的文件名而是自己定义文件名，如temp，index，login等有一 定的含义的英文（或汉语拼音）名称。默认的位置是在站点文 件夹下面，当然也可以把网页保存在在站点下面的其它文件夹 中，一般不保存在站点文件夹外面。 三.新建HTML网页 预览网页 最常见的浏览正在制作的网页两种方式： ①在Windows（或其它操作系统）中打开站点文件夹，找到已经保存过网页文件，双击文件就可以预览此网页； ②先保存网页，使用菜单[文件]-[在浏览器中预览]-[IExplore6.0]，或使用快捷键F12进行预览网页（推荐使用快捷键F12）。 打开网页 可以在文件面板中看到已经保存过的文件，双击该网页文件就可以打开相应的网页，也要以通过菜单打开网页，操作方法和其它常用的软件相似。 第2.2节 在网页中使用表格 【本节内容】 一.插入表格 二.编辑表格 三.表格的