ASP动态网页设计实用教程 主讲教师: 开课单位:
第2章 网页编辑工具 Dreamweaver MX 2004 主要内容 学习目标 新课讲授 本章小结 本章习题 返回
本章主要内容 Dreamweaver MX 2004是网页编辑最方便最实用的工具。本章首先介绍Dreamweaver MX 2004的界面,然后讲解网页编辑的基本操作和网站的建设与管理。 目录页
本章学习目标 熟悉Dreamweaver MX 2004的基本操作。 熟悉Dreamweaver MX 2004的网站建设与管理 目录页
第2章网页编辑工具 Dreamweaver MX 2004 2.2 页面的基本操作 2.3网站建设与管理 2.4 小结 目录页
第2章网页编辑工具 Dreamweaver MX 2004 可视化的Web网站开发工具Dreamweaver MX 2004具有强大的功能,它使得建立Web站点和设计制作网页的工作变得非常简单和愉悦。Dreamweaver MX 2004具有许多功能向导,这些易于执行的技术能够使你轻松完成原来很复杂的操作。Dreamweaver MX 2004提供的各种面板使网页设计工作变得轻松而且有趣。
2.1.2 Dreamweaver MX 2004的界面 插入栏:包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。 文档窗口: 显示您当前创建和编辑的文档。 属性检查器:用于查看和更改所选对象或文本的各种属性。 面板组:如是分组在某个标题下面的相关面板的集合。 文件面板: 使您可以管理您的文件和文件夹.
2.2 页面的基本操作 1.输入文本 首先选择“文件”>“新建”菜单,建立一个HTML空白文件,在这个空白页中就可以输入文本。然后使用文本属性面板就可以对输入的文本进行字体、字号、颜色、超链接及对齐属性等的设置,也可以使用层叠样式表 (CSS) 样式创建和应用您自己的自定义样式。文本属性面板如图所示。
2.2 页面的基本操作 2.插入图片 首先在在文档窗口中确定图片的插入点,然后在“设计”或“代码”视图中,点击常用工具栏中间的“插入图像”按钮 ,出现一个“选择图片”对话框,可以在本站点内或其他位置选择需要的图像,确定后将图像插入到文档中。 3.创建超链接:选中页面中需要链接的文字或图像后,在“属性”面板的链接文本框中输入链接目标的URL。 4.插入表格: Dreamweaver MX 2004创建表格的手段是相当灵活的,“属性”面板、“插入”菜单都能帮助用户生成形式多样的表格,然后用户就可以在表格内组合内容,将不同的网页素材存放在所选的单元格内,达到秩序排版的目的。
2.2 页面的基本操作 5.应用图层:Dreamweaver中的“图层”是一个相对独立于网页的区域,它不受网页排版的束缚,可放置在网页中的任何位置。图层中可包含文本,图像,插件甚至其他的图层,凡是出现在HTML文档中的任何元素都可以放置在图层中。 两种创建图层的方法:利用“插入”面板插入图层的操作方法 ; 利用“菜单”插入图层的操作方法 . 6.框架的应用:框架是将一个浏览器窗口划分为多个区域,每个区域显示不同的HTML文档。 ⑴ 创建框架集 ⑵ 设置框架集及框架的属性 ⑶ 使用超链接控制框架内容 ⑷ 保存框架文件
2.2 页面的基本操作 7.表单的应用 表单的作用是可以与Web站点的访问者进行交互或从他们那里收集信息。表单先从用户那里收集信息,再将这些信息提交给服务器进行处理。表单包含了进行交互的各种对象,如文本域、列表域、复选框和单选按钮等。 练习插入一个或多个表单 8.CSS样式的应用 CSS(Cascading Style Sheets,层叠样式表)又称为格式页。利用CSS可以精确地控制页面里每一个元素的字体样式、背景、排列方式和区域尺寸等,统一网页的设计风格。
2.3网站建设与管理 1.创建新站点 ⑴ 选择菜单:“站点”“管理站点”命令,会弹出如图所示的对话框 ⑵ 单击“新建”按钮,再选择随后出现的“站点”命令,则弹出如图2.26所示的“定义站点”对话框。在“您打算为您的站点起什么名字?”文本框中,给网站起个名字,如命名为“ASP网站设计”。
2.3网站建设与管理 ⑶ 单击“下一步”按钮,系统会提示是否使用服务器技术,选择“是”指目前该站点是一个动态站点,选择使用“ASP VBScript服务器技术”,. ⑷ 再单击“下一步”按钮,系统将提示如何使用文件,是在本地编辑还是在远程服务器上进行编辑。选取“在本地进行编辑和测试”;文本框允许在本地磁盘上指定一个文件夹,Dreamweaver将在其中存储站点文件的副本。单击文本框旁边的文件夹图标,指定文件夹及存放位置。 ⑸ 单击“下一步”按钮,弹出“您应该使用什么URL来浏览站点根目录?”。 ⑹ 单击“下一步”按钮将出现“是否要使用远程序服务器”对话框,选择“否”。再单击“下一步”,显示设置概要,单击“完成”按钮,完成新站点的创建,
2.3网站建设与管理 2.域名注册 以“中国万网http://www.net.cn/”域名注册服务商注册www.lnfxjsj.com为例,进行注册。 ⑴ 首先在“中国万网”注册一个用户,成为万网的一个会员。 ⑵ 注册成功后,进行会员登录。 ⑶ 进入域名注册页面,进行域名注册操作。 第一步:进行域名查询,检查域名是否被注册。 第二步:选择注册。如果域名未被注册,则可单击“单个注册”按钮进行注册。 第三步:选择年限。即选择域名注册的年限和价格。 第四步:信息填写。可再添加域名,一次最多可注册10个域名。 第五步:信息确认及选择支付方法。 第六步:显示注册成功信息。
2.3网站建设与管理 3.空间申请 ⑴ 购置自己的服务器 ⑵ 租用专用服务器 ⑷ 免费网站空间 ⑶ 使用虚拟主机 4.网站上传 ⑴ 使用CuteFTP上传站点 ⑵ 使用IE游览器FTP上传站点 ⑶ 使用Dreamweaver MX 2004上传站点
2.4 小结 是网页编辑最方便最实用的工具。要求学生首先要了解它的工作环境,能够正确建立和管理站点,同时还要掌握域名注册、虚拟主机空间申请等流程,为今后网站开发打下基础。
第2章 网页编辑工具 Dreamweaver MX 2004 The End!