第二章节网页设计基础.pptVIP

第1章电子商务概述及商务网站的规划 1.1 电子商务的基本概念 1.2 电子商务网站的特点和分类 1.3 电子商务网站的规划与构建 第2章 网页设计基础 2.1 Dreamweaver 8简介 2.2 创建与编辑本地站点 2.3 网页文件的基本操作 2.4 简单网页的制作实例 2.1 Dreamweaver 8简介 Dreamweaver 8是Macromedia公司的集网页设计、代码开发、网站创建和管理于一体的软件。它保留了Dreamweaver早期版本的各种优点，提供了可视化的布局工具、快速的Web 应用程序开发以及广泛的代码编辑支持。它新增了对ASP、JSP、ASP.NET、PHP等动态网页的支持，可以实现完整的数据库的编写。 Dreamweaver 8不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后台的各种复杂功能。 2.1.1 Dreamweaver 8的工作环境 Dreamweaver 8新的工作区环境比早期的版本更加灵活、方便、实用。工作区窗口由标题栏、菜单栏、工具栏、网页文件编辑区、状态栏和浮动面板组等基本部分组成，如下图所示。 启动Dreamweaver 8后，屏幕显示的是工作区窗口，此时系统打开一个名为Untitled的空白文档，在网页文件编辑区中，设计者可以完成网页的设计。 工作区窗口各部分功能如下所述。 1. 标题栏 标题栏是显示当前网页的标题信息，当前被编辑网页文件的路径和文件名会在括号里显示。用标题栏左边和右边的窗口控制按钮，可以对窗口完成【最大化】、【最小化】、【移动】、【还原】、【关闭】等操作。 2. 菜单栏 菜单栏是设计者选择操作命令的地方。菜单栏的选项依次为【文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】。 浮动面板上的各项操作基本上都有菜单操作命令与之相对应，在以后的章节中会逐一介绍主要的菜单操作命令。 3. 插入栏 选择【窗口】|【插入】命令，可显示或隐藏插入栏，快捷键 CTRL + F2是显示或隐藏插入栏的切换开关。 插入栏默认的9个选项分别为：常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏夹、显示为制表符。 单击【显示为制表符】选项，可以改变插入栏的显示方式。 4. 文档工具栏 在菜单栏的下面是文档工具栏。文档工具栏最左边的是代码视图和设计视图的切换按钮。利用切换按钮可在【代码】、【设计】、【代码和设计】的3种视图方式之间切换，改变网页的编辑方式。 5. 网页文件编辑区 网页文件的编辑区域是Dreamweaver 8的主工作区。 启动Dreamweaver 8时，就创建了一个空白的网页文件等待编辑，网页编辑区的大小可以通过用鼠标拖曳编辑区右面边框线来调整，或者单击编辑区右面边框线上的按钮，完成最大化或还原网页编辑区的操作。 6. 状态栏 状态栏显示当前网页的有关信息。在状态栏中自左至右分别是： 标签选择器（Tag Selector）、页面信息栏（视窗设置框、页面信息框）、快速启动条，它们特点和功能如下所述。 1) 标签选择器 编辑网页时，将光标置于网页某个位置，便会在标签选择器中显示相应的HTML标签，单击HTML标签则可选择网页中相对应的编辑对象。右击某个HTML标签，选择快捷菜单中的相应命令，可对HTML标签做进一步的编辑。 2) 页面编辑工具 选取工具：单击该工具后，可以用鼠标选取网页文档中的元素。 手形工具：单击该工具后，可以在【文档】窗口中移动当前文档。 缩放工具：该工具与【设置显示比例】弹出式菜单可以缩放文档的显示比例。 3) 视窗设置框 在视窗设置框中显示的当前文档窗口的大小都是以像素为单位的。这个窗口尺寸是动态显示的，用鼠标拖动文档窗口边框改变窗口大小时，显示的窗口尺寸也会随之改变。单击视窗设置框右边的小按钮，在弹出的快捷菜单中选择【编辑大小】命令，可以定制窗口的大小尺寸。 4) 网页信息框 网页信息框显示网页容量、传输速率和该网页在Internet上完全下载的时间（系统默认的连接速度为56.0Kbps）。 例如表示当前网页文档大小为25KB，下载时间约为4秒。将连接速度改为当前主流产品的速度56Kbps，便可关注当前正在编辑的网页下载所需的时间。 7. 浮动面板和浮动面板组 Dreamweaver 8的浮动面板是该软件的一个特色，它不同于对话框。用对话框来设置对象的各种属性后，必须关闭对话框才能看到设置的效果。利用浮动面板对网页对象进行属性设置，在网页编辑窗口中可以直接看到操作的结果，从而避免了属性设置的盲目性，真正实现了“所见即所得”的实时编辑功能。 浮动面板组也是Dreamweaver 8的一个特色。设计者可以