《网页设计基础》PPT课件.ppt

《《网页设计基础》PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第1章电子商务概述及商务网站的规划1.1电子商务的基本概念1.2电子商务网站的特点和分类1.3电子商务网站的规划与构建北京化工大学北方学院信息学院教研室第2章网页设计基础2.1Dreamweaver8简介2.2创建与编辑本地站点2.3网页文件的基本操作2.4简单网页的制作实例北京化工大学北方学院信息学院教研室Dreamweaver8是Macromedia公司的集网页设计、代码开发、网站创建和管理于一体的软件。它保留了Dreamweaver早期版本的各种优点，提供了可视化的布局工具、快速的Web应用程序开发以及广泛

2、的代码编辑支持。它新增了对ASP、JSP、ASP.NET、PHP等动态网页的支持，可以实现完整的数据库的编写。Dreamweaver8不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后台的各种复杂功能。2.1Dreamweaver8简介北京化工大学北方学院信息学院教研室Dreamweaver8新的工作区环境比早期的版本更加灵活、方便、实用。工作区窗口由标题栏、菜单栏、工具栏、网页文件编辑区、状态栏和浮动面板组等基本部分组成，如下图所示。启动Dreamweaver8后，屏幕显示的是工作区窗口，此时系统打开一

3、个名为Untitled的空白文档，在网页文件编辑区中，设计者可以完成网页的设计。工作区窗口各部分功能如下所述。2.1.1Dreamweaver8的工作环境北京化工大学北方学院信息学院教研室北京化工大学北方学院信息学院教研室1.标题栏标题栏是显示当前网页的标题信息，当前被编辑网页文件的路径和文件名会在括号里显示。用标题栏左边和右边的窗口控制按钮，可以对窗口完成【最大化】、【最小化】、【移动】、【还原】、【关闭】等操作。北京化工大学北方学院信息学院教研室2.菜单栏菜单栏是设计者选择操作命令的地方。菜单栏的选项依次为【

4、文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】。浮动面板上的各项操作基本上都有菜单操作命令与之相对应，在以后的章节中会逐一介绍主要的菜单操作命令。北京化工大学北方学院信息学院教研室3.插入栏选择【窗口】

5、【插入】命令，可显示或隐藏插入栏，快捷键CTRL+F2是显示或隐藏插入栏的切换开关。插入栏默认的9个选项分别为：常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏夹、显示为制表符。单击【显示为制表符】选项，可以改变插入栏的显示方式。北京化工大学北方学

6、院信息学院教研室4.文档工具栏在菜单栏的下面是文档工具栏。文档工具栏最左边的是代码视图和设计视图的切换按钮。利用切换按钮可在【代码】、【设计】、【代码和设计】的3种视图方式之间切换，改变网页的编辑方式。北京化工大学北方学院信息学院教研室5.网页文件编辑区网页文件的编辑区域是Dreamweaver8的主工作区。启动Dreamweaver8时，就创建了一个空白的网页文件等待编辑，网页编辑区的大小可以通过用鼠标拖曳编辑区右面边框线来调整，或者单击编辑区右面边框线上的按钮，完成最大化或还原网页编辑区的操作。北京化工大学北

7、方学院信息学院教研室6.状态栏状态栏显示当前网页的有关信息。在状态栏中自左至右分别是：标签选择器（TagSelector）、页面信息栏（视窗设置框、页面信息框）、快速启动条，它们特点和功能如下所述。1)标签选择器编辑网页时，将光标置于网页某个位置，便会在标签选择器中显示相应的HTML标签，单击HTML标签则可选择网页中相对应的编辑对象。右击某个HTML标签，选择快捷菜单中的相应命令，可对HTML标签做进一步的编辑。北京化工大学北方学院信息学院教研室2)页面编辑工具选取工具：单击该工具后，可以用鼠标选取网页文档中的

8、元素。手形工具：单击该工具后，可以在【文档】窗口中移动当前文档。缩放工具：该工具与【设置显示比例】弹出式菜单可以缩放文档的显示比例。北京化工大学北方学院信息学院教研室3)视窗设置框在视窗设置框中显示的当前文档窗口的大小都是以像素为单位的。这个窗口尺寸是动态显示的，用鼠标拖动文档窗口边框改变窗口大小时，显示的窗口尺寸也会随之改变。单击视窗设置框右边的小按钮，在弹出的快捷菜单中选择【编辑大小】命令，可以定制窗口的大小尺寸。北京化工大学北方学院信息学院教研室4)网页信息框网页信息框显示网页容量、传输速率和该网页在Int

9、ernet上完全下载的时间（系统默认的连接速度为56.0Kbps）。例如表示当前网页文档大小为25KB，下载时间约为4秒。将连接速度改为当前主流产品的速度56Kbps，便可关注当前正在编辑的网页下载所需的时间。北京化工大学北方学院信息学院教研室7.浮动面板和浮动面板组Dreamweaver8的浮动面板是该软件的一个特色，它不同于对话框。用对话框来设置对象的各种属性后，必须