[电脑基础知识]Dreamweaver网页设计基础.ppt

网页设计基础Dreamweaver CS4 本章学习目标 6.1 网页设计的基本概念 6.2 Dreamweaver工具的使用 6.3 站点的发布与管理 本章习题布置 本章学习目标 本章以Dreamweaver CS4为平台，重点介绍网页的设计、制作与发布。 网页与网站的关系，网站的创建与管理。 文字及图像的处理 网页中添加多媒体元素 网页的超级连接 网页的布局 网页的交互式表单处理 本章学习目标 返回本章首页 图片 字体设置 水平线 编号列表 超级链接 Email链接 日期 锚点链接 鼠标经过图像 6.1 网页设计的基本概念 6.1.1 网页与HTML 6.1.2 网页设计的流程 返回本章首页 6.1.1 网页与HTML HTML（Hypertext Markup Language）是一种超文本标记语言，用来描述万维网上的超文本文件。 从文件的角度来说，一个网页就是一个HTML文件。 6.1.1 网页与HTML 构成网页的基本元素大体相同，主要包括标题、网站Logo、导航、超链接、广告栏、文本、图片、动画、视频与音频等。 按网页的表现形式可将网页分为： 静态网页 动态网页 1、网页与网页文件 HTML（Hypertext Markup Language）是一种超文本标记语言，用来描述万维网上的超文本文件。 HTML的普遍应用就是使用超文本的技术，通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，实现与世界各地主机文件的链接。 6.1.1 网页与HTML 2. 网页制作语言HTML 例1：创建一个网页，显示“祝大家新年快乐！”，标题为“新年快乐”。 6.1.1 网页与HTML 例1 网页效果图 6.1.1 网页与HTML 例1 HTML代码 （1）HTML的结构和常用标签 HTML的结构一般使用以下三对标签来构成。 html/html标签：文档中的所有文本都包含在其中，表示该文档是用超文本标记语言HTML编写的。 head/head头部标签：用以说明整个文件的一些公共属性。 body/body正文标签：标签之间的文本是正文，是在浏览器窗口中要显示的页面内容。 6.1.1 网页与HTML （2）HTML文件的编写与保存 HTML文件的编写主要有两个途径： 作为文本文件通过记事本输入代码，保存时将文件扩展名改写为.html。 通过网页制作工具，在代码视图中直接输入代码并保存。 6.1.1 网页与HTML 常用的网页制作工具有以下几种： Dreamweaver：可视化网页制作工具 FrontPage：表单式网页制作工具 Adobe Pagemile：多框架、表单和Image Map图像的网页制作工具 Claris Home Page：动态网页快速制作工具 6.1.1 网页与HTML 3. 网页制作工具 返回本节首页 6.1.2 网页设计的流程 网页设计的流程主要包括站点设计和网页制作两大部分。 网页设计的流程主要包括： 前期策划 创建站点 创建主页和其他网页 网页设计的版面布局 添加网页基本元素 创建网页超级链接 制作网页表单 6.1.2 网页设计的流程 返回本节首页 6.2 Dreamweaver工具的使用 6.2.1 Dreamweaver的界面 6.2.2 站点的新建与管理 6.2.3 网页元素的添加与处理 6.2.4 网页中的超链接 6.2.5 网页的布局 6.2.6 表单的使用 返回本章首页 6.2.1 Dreamweaver的界面 Dreamweaver是由美国著名多媒体软件开发商Adobe公司推出的一款专业可视化网页制作工具，是集网页制作和网站管理于一身的所见即所得式的网页编辑器，是新网页三剑客之一。 Dreamweaver CS4的界面简洁而高效，集成程度高，提供了众多功能强大的可视化设计工具、应用程序开发环境以及代码编辑支持，使用户能够快捷地创建代码规范的应用程序。 Dreamweaver的界面 6.2.1 Dreamweaver的界面 Dreamweaver主要包括10项主菜单： 6.2.1 Dreamweaver的界面 1. 菜单栏 Dreamweaver工具栏主要有： （1）“插入”工具栏 6.2.1 Dreamweaver的界面 2. 工具栏 （2）“文档”工具栏 （3）“应用程序”工具栏 文档编辑区是编辑和设计网页的主要工作区域 6.2.1 Dreamweaver的界面 3. 文档编辑区 “文档”编辑区 属性面板位于操作界面底部，主要用于编辑和查看页面中各对象的属性设置。