ASP动态网页设计实用教程 主讲教师： 开课单位:.

Presentation on theme: "ASP动态网页设计实用教程 主讲教师： 开课单位:."— Presentation transcript:

1 ASP动态网页设计实用教程 主讲教师： 开课单位:

2 第2章 网页编辑工具 Dreamweaver MX 2004
主要内容 学习目标 新课讲授 本章小结 本章习题 返回

3 本章主要内容 Dreamweaver MX 2004是网页编辑最方便最实用的工具。本章首先介绍Dreamweaver MX 2004的界面，然后讲解网页编辑的基本操作和网站的建设与管理。 目录页

4 本章学习目标 熟悉Dreamweaver MX 2004的基本操作。 熟悉Dreamweaver MX 2004的网站建设与管理 目录页

5 第2章网页编辑工具 Dreamweaver MX 2004
2．2 页面的基本操作 2．3网站建设与管理 2．4 小结 目录页

6 第2章网页编辑工具 Dreamweaver MX 2004
可视化的Web网站开发工具Dreamweaver MX 2004具有强大的功能，它使得建立Web站点和设计制作网页的工作变得非常简单和愉悦。Dreamweaver MX 2004具有许多功能向导，这些易于执行的技术能够使你轻松完成原来很复杂的操作。Dreamweaver MX 2004提供的各种面板使网页设计工作变得轻松而且有趣。

7 2．1．2 Dreamweaver MX 2004的界面 插入栏：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。
文档窗口： 显示您当前创建和编辑的文档。 属性检查器：用于查看和更改所选对象或文本的各种属性。 面板组：如是分组在某个标题下面的相关面板的集合。 文件面板： 使您可以管理您的文件和文件夹.

8 2．2 页面的基本操作 1．输入文本 首先选择“文件”>“新建”菜单，建立一个HTML空白文件，在这个空白页中就可以输入文本。然后使用文本属性面板就可以对输入的文本进行字体、字号、颜色、超链接及对齐属性等的设置，也可以使用层叠样式表 (CSS) 样式创建和应用您自己的自定义样式。文本属性面板如图所示。

9 2．2 页面的基本操作 2．插入图片 首先在在文档窗口中确定图片的插入点，然后在“设计”或“代码”视图中，点击常用工具栏中间的“插入图像”按钮 ，出现一个“选择图片”对话框，可以在本站点内或其他位置选择需要的图像，确定后将图像插入到文档中。 3．创建超链接：选中页面中需要链接的文字或图像后，在“属性”面板的链接文本框中输入链接目标的URL。 4．插入表格: Dreamweaver MX 2004创建表格的手段是相当灵活的，“属性”面板、“插入”菜单都能帮助用户生成形式多样的表格，然后用户就可以在表格内组合内容，将不同的网页素材存放在所选的单元格内，达到秩序排版的目的。

10 2．2 页面的基本操作 5．应用图层:Dreamweaver中的“图层”是一个相对独立于网页的区域，它不受网页排版的束缚，可放置在网页中的任何位置。图层中可包含文本，图像，插件甚至其他的图层，凡是出现在HTML文档中的任何元素都可以放置在图层中。 两种创建图层的方法:利用“插入”面板插入图层的操作方法 ; 利用“菜单”插入图层的操作方法 . 6．框架的应用:框架是将一个浏览器窗口划分为多个区域，每个区域显示不同的HTML文档。 ⑴ 创建框架集 ⑵ 设置框架集及框架的属性 ⑶ 使用超链接控制框架内容 ⑷ 保存框架文件

11 2．2 页面的基本操作 7．表单的应用 表单的作用是可以与Web站点的访问者进行交互或从他们那里收集信息。表单先从用户那里收集信息，再将这些信息提交给服务器进行处理。表单包含了进行交互的各种对象，如文本域、列表域、复选框和单选按钮等。 练习插入一个或多个表单 8．CSS样式的应用 CSS(Cascading Style Sheets，层叠样式表)又称为格式页。利用CSS可以精确地控制页面里每一个元素的字体样式、背景、排列方式和区域尺寸等，统一网页的设计风格。

12 2．3网站建设与管理 1．创建新站点 ⑴ 选择菜单：“站点”“管理站点”命令，会弹出如图所示的对话框
⑵ 单击“新建”按钮，再选择随后出现的“站点”命令，则弹出如图2.26所示的“定义站点”对话框。在“您打算为您的站点起什么名字？”文本框中，给网站起个名字，如命名为“ASP网站设计”。

13 2．3网站建设与管理 ⑶ 单击“下一步”按钮，系统会提示是否使用服务器技术，选择“是”指目前该站点是一个动态站点，选择使用“ASP VBScript服务器技术”，. ⑷ 再单击“下一步”按钮，系统将提示如何使用文件，是在本地编辑还是在远程服务器上进行编辑。选取“在本地进行编辑和测试”；文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中存储站点文件的副本。单击文本框旁边的文件夹图标，指定文件夹及存放位置。 ⑸ 单击“下一步”按钮，弹出“您应该使用什么URL来浏览站点根目录？”。 ⑹ 单击“下一步”按钮将出现“是否要使用远程序服务器”对话框，选择“否”。再单击“下一步”，显示设置概要，单击“完成”按钮，完成新站点的创建，

14 2．3网站建设与管理 2．域名注册 以“中国万网 ⑴ 首先在“中国万网”注册一个用户，成为万网的一个会员。 ⑵ 注册成功后，进行会员登录。 ⑶ 进入域名注册页面，进行域名注册操作。 第一步：进行域名查询，检查域名是否被注册。 第二步：选择注册。如果域名未被注册，则可单击“单个注册”按钮进行注册。 第三步：选择年限。即选择域名注册的年限和价格。 第四步：信息填写。可再添加域名，一次最多可注册10个域名。 第五步：信息确认及选择支付方法。 第六步：显示注册成功信息。

15 2．3网站建设与管理 3．空间申请 ⑴ 购置自己的服务器 ⑵ 租用专用服务器 ⑷ 免费网站空间 ⑶ 使用虚拟主机 4．网站上传
⑴ 使用CuteFTP上传站点 ⑵ 使用IE游览器FTP上传站点 ⑶ 使用Dreamweaver MX 2004上传站点

16 2．4 小结 是网页编辑最方便最实用的工具。要求学生首先要了解它的工作环境，能够正确建立和管理站点，同时还要掌握域名注册、虚拟主机空间申请等流程，为今后网站开发打下基础。

17 第2章 网页编辑工具 Dreamweaver MX 2004
The End！