NEB应用基础Lab2 1引 本实验主要介绍两个HTML文档编辑器的使用。在开始实验之前,如果你还未充分掌握 HTML语法及其应用的话,请阅读我们提供的实验参考资料中有关HTML语言的部分,或者 查阅HTML语言参考(文件名为:HTML语言参考chm)。在这次实验过程中,我们将介绍 Editplus30和 Dreamweaver8.0的安装和使用,并利用这两个工具来进行HTML基本语法的练 习。实验过程中,如果有问题,可以找助教帮忙解决 2实验过程 21实验要求 本次实验包括的内容主要有 了解 Dreamweaver的安装过程,熟悉并掌握它的WEB网页制作功能。 利用 Dreamweaver进行HTML文档编写。 ·利用 EditPlus手动编写HTML文档。 实验结果提交 实验提交物包括:分别在 Dreamweaver和 Editplus环境下编写的HTML文档,共两个 HTML文档的编写要求及评分细则见后面的实验内容。 在实验结束之前,将实验过程中创建的站点文件夹(包含了所有实验结果)提交到课程 FTP上的 WORK UPLOAD/Lab2下(注意,需要创建一个文件夹,命名规则为“学号姓 名”,比如082053012李某某)。 22 Dreamweaver的实验内容 221 Dreamweaver安装与配置 步骤一:安装 Dreamweaver 载课程FTP中Lab/Lab2/ Software中的 Macromedia dreamweaver v80简体中文版文 件夹。双击安装程序 Macromedia Dreamweaver V80简体中文版exe,依照系统提示完 成安装。安装成功后,在开始所有程序菜单中的 Micromedia中启动 Micromedia Dreamweaver8,第一次启动,程序提示用户选择工作区(选择设计者)
WEB 应用基础 Lab2 1 引言 本实验主要介绍两个 HTML 文档编辑器的使用。在开始实验之前，如果你还未充分掌握 HTML 语法及其应用的话，请阅读我们提供的实验参考资料中有关 HTML 语言的部分，或者 查阅 HTML 语言参考（文件名为：HTML 语言参考.chm）。在这次实验过程中，我们将介绍 EditPlus3.0 和 Dreamweaver8.0 的安装和使用，并利用这两个工具来进行 HTML 基本语法的练 习。实验过程中，如果有问题，可以找助教帮忙解决。 2 实验过程 2.1 实验要求 z 本次实验包括的内容主要有： · 了解 Dreamweaver 的安装过程，熟悉并掌握它的 WEB 网页制作功能。 · 利用 Dreamweaver 进行 HTML 文档编写。 · 利用 EditPlus 手动编写 HTML 文档。 z 实验结果提交 实验提交物包括：分别在 Dreamweaver 和 EditPlus 环境下编写的 HTML 文档，共两个， HTML 文档的编写要求及评分细则见后面的实验内容。 在实验结束之前，将实验过程中创建的站点文件夹（包含了所有实验结果）提交到课程 FTP 上的 WORK_UPLOAD/Lab2 下（注意，需要创建一个文件夹，命名规则为“学号_姓 名”，比如 082053012_李某某）。 2.2 Dreamweaver 的实验内容 2.2.1 Dreamweaver 安装与配置 步骤一：安装 Dreamweaver 载课程 FTP 中 Lab/Lab2/Software 中的 Macromedia Dreamweaver V8.0 简体中文版文 件夹。双击安装程序 Macromedia Dreamweaver V8.0 简体中文版.exe，依照系统提示完 成安装。安装成功后，在开始所有程序菜单中的 Micromedia 中启动 Micromedia Dreamweaver 8，第一次启动，程序提示用户选择工作区（选择设计者）：
工作区设置 请选择您喜欢的工作区布局。以后您可以在“首选参数”中切换布局。 ⊙设计者) ◎代码编写者￠ 步骤二:激活 Dreamweaver 由于 Dreamweaver是个商业产品,不能免费使用,因此我们这里的版本是破解版 接下来程序会提示系统使用方式,试用或者输入序列号,选择输入序列号,利用 Macromedia. v80注册机exe生成一个序列号,输入该序列号,完成系统的激活 222熟悉 Dreamweaver 2221新建站点 步骤一:点击 Dreamweaver菜单栏站点,在下拉菜单中选择新建站点,见下图。 未命名站点1的站点定义为 基本高级 站点名称Q:围道 本地根文件夹):D:、 Docunent5 and Settings\ENLHMMy 布局 回自动刷新本地文件列丧 默认图像文件夹);: 相对于:⊙文档①)○站点根目录) 轻用器话岛 区分大小写的链接:口便用区分大小写的链接检查①D 駑斑建贤語被諱窪提體地 匚确定取消彬助
步骤二：激活 Dreamweaver 由于 Dreamweaver 是个商业产品，不能免费使用，因此我们这里的版本是破解版， 接下来程序会提示系统使用方式，试用或者输入序列号，选择输入序列号，利用 Macromedia.v8.0.注册机.exe 生成一个序列号，输入该序列号，完成系统的激活。 2.2.2 熟悉 Dreamweaver 2.2.2.1新建站点 步骤一：点击 Dreamweaver 菜单栏站点，在下拉菜单中选择新建站点，见下图
步骤二:在弹出的窗口中,选择选项卡:高级,选择本地信息,输入站点名称(名称自 定)和本地根文件夹(文件保存的位置), Http Url可以为空。见下图。 FUDAK)D82Web用基础LAB\ah2 WebSite\test. ht…上回囟 女牛便)辨@)查看的斯入①修改文本①)命令站点6)[口)帮助 捐入常用布局表单文本|M|应用程序ns 右禮单击以自定义收英对象 管理站点思) 3.or/1998 Cont emnt-Type cont ent 报售() 检查站点范的链液0ct1+8 文件资源代片 131田R上 TPs胆务 图桌面项目 步骤三:完成站点创建。查看 Dreamweaver的右下角,可以看到新的站点。如下图所示。 文件吧)编辑〔)查看0插入)修改Q)文本①)命令C)站点G)曹口帮动 抽入常用布局表单艾本肌应用程序|nah元索收夹 右键单击以自定义收浓夹对象 Cs样式、层 全部正在 宁X所选内容的要 回代码四拆分团设计 无标题文档 魏国三内籍梨 哪些Cs属性 <htal niNe= ,v3,org/1999/ xhtml” 苔菜⑩ GE标题若 -ont ent- ype content=" text/htn1: charset=b23122/ 标签检查器 </htal> 2本地视图y Bc8y合 C志
步骤二：在弹出的窗口中，选择选项卡：高级，选择本地信息，输入站点名称（名称自 定）和本地根文件夹（文件保存的位置），HTTP URL 可以为空。见下图。 步骤三：完成站点创建。查看 Dreamweaver 的右下角，可以看到新的站点。如下图所 示
2222熟悉 Dreamweaver工作区 步骤一:在上面创建的站点中添加HTML文档, test htm。这里有两种方法,一种是从 Dreamweaver菜单栏的文件下来菜单中选择新建,另一种则是通过在站点节点上右键单 击弹出菜单,选择新建文件,两种方式分别如下面的图形所示 a acron 丰①)编辑〔)查看C插入〔)修改)文 打开 Ctrl+o 打开最近的文件 Ctrltshi:t+o 关闭C) 全部关闭 Ctrl+shif+标贴文 Carts 2312/ 保存全部①) 42++4 保存到远程服务器 应用程序 另存为模板) 标签检查器 回复至上次的保存 Ctrl+P 文件\资L新文件 Yeblab22新建文件夹B) 导入① 导出) 打开方式0 转换Q 1K/1秒 在浏咒器中预览 上传①) 退出C 消取出 是示取出者E test. htm创建成功后,在站点树形结构中看到多了 test htm节点。如下图所示 a夏 acromedia dreamweaver8-[C:\ y Document \FUDAR082veb应用基础\LAab2 WebSite\test. ht.…回区 文件()鳊辑)查看m入g)修议文本)命令C)站点)它口①)帮助 H括入常用布局表单文本|H机应用程序|nsh元素收夹 E,E vCSS 右键单击以自定义收藏夹对 cs样式、月 全部正在 est. html 回代码回拆分国设十 标题文档 xhtnll-transitional dt Ixnins=http://www.v3,org/1999/xhtn1"> t1e无标题文档√tit1e Content-Iype" content="text/html; charset=gb2312"/> 争应用程序 标签检查器 ⊙L2本地视图 日②站点-YbLa2c:y test h v屎性 C页面性列表项目 1个本地项目选中日志
2.2.2.2熟悉 Dreamweaver 工作区 步骤一：在上面创建的站点中添加 HTML 文档，test.html。这里有两种方法，一种是从 Dreamweaver 菜单栏的文件下来菜单中选择新建，另一种则是通过在站点节点上右键单 击弹出菜单，选择新建文件，两种方式分别如下面的图形所示： test.html 创建成功后，在站点树形结构中看到多了 test.html 节点。如下图所示：
步骤二:双击 test htm(其实它已经被打开了,因为只有一个文档),观察位于 Dreamweaver中部的工作区,工作区有代码、拆分、设计三种视图,代码视图只显示 HTML源码,拆分分别显示HTML源码和HTML元素的可视化效果,而设计视图则只显 示可视化效果。开发人员可以根据自己的习惯随意切换视图 a夏 acromedia Dreamweaver8-Ic: y Docment\FUDAR\082Web应用基础 LAB\lab2 \ebSite\test,ht.回 文件)编)查看0)插入①)修改)文本()命令c)站点()窗口0)帮助0 用·回园国,,圜助勤·即 I v CS cs样式E ×全部正在 回代码回拆分国设计标题:无标题文档 姚国所法内的更 1/DTD/xhtnll-transitional dtd tnlxnins="hTtp://www.v3.org/1999/xhtn1> 日图图,图图M图M图H…,图,图标查哥 Bc|會ya 9100598x95v1累/1秒 ab2(: Vy Doce d test, htl w屎性 格式无 样式 无 CB主三≡链接 字体默认字 大小无 想目标 □面性。为项目 1个本地项目被选中日志 步骤三:关注位于工作区上方的工具栏和菜单栏。在设计一个网页是,用到最多的便是 工具栏,即上图中红色区域。在工具栏左侧的下拉菜单中选择不同的项目,可以让工具 栏显示不同的插入项,选择下拉菜单底部的“显示为制表符”,菜单栏可以切换为下图 的视图: 文件)编辑)查看⑩插入①)修改)文本)命令￠)站点()窗口)帮助 插入常用布局表单文本HM应用程序|Fash元素|收藏夹 回愚田回回,,茴·回 若希望显示工具栏的初始状态,则在工具栏上右击,选择“显示为菜单”。工具栏方便 了开发人员向HTML文档中添加各种HTML元素。 步骤四:查看工作区下方的属性面板以及工作区左侧与 Dreamweaver的HTML智能标记 提示有关的面板。当鼠标停留在代码或者元素上时,属性面板会显示当前的元素的属性 你可以通过可视化的方式修改它们的属性,而不必在HTML代码中修改。而下面的页面 属性按钮则可以方便开发者设置HTML页面的全局属性。利用智能标记面板提供的功能 可以检查HTML文档中不合法的HTML片断,以及折叠和打开某些标记,方便HTML页
步骤二：双击 test.html（其实它已经被打开了，因为只有一个文档），观察位于 Dreamweaver 中部的工作区，工作区有代码、拆分、设计三种视图，代码视图只显示 HTML 源码，拆分分别显示 HTML 源码和 HTML 元素的可视化效果，而设计视图则只显 示可视化效果。开发人员可以根据自己的习惯随意切换视图。 步骤三：关注位于工作区上方的工具栏和菜单栏。在设计一个网页是，用到最多的便是 工具栏，即上图中红色区域。在工具栏左侧的下拉菜单中选择不同的项目，可以让工具 栏显示不同的插入项，选择下拉菜单底部的“显示为制表符”，菜单栏可以切换为下图 的视图： 若希望显示工具栏的初始状态，则在工具栏上右击，选择“显示为菜单”。工具栏方便 了开发人员向 HTML 文档中添加各种 HTML 元素。 步骤四：查看工作区下方的属性面板以及工作区左侧与 Dreamweaver 的 HTML 智能标记 提示有关的面板。当鼠标停留在代码或者元素上时，属性面板会显示当前的元素的属性， 你可以通过可视化的方式修改它们的属性，而不必在 HTML 代码中修改。而下面的页面 属性按钮则可以方便开发者设置 HTML 页面的全局属性。利用智能标记面板提供的功能 可以检查 HTML 文档中不合法的 HTML 片断，以及折叠和打开某些标记，方便 HTML 页 面调试