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属性 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 页 面调试
223在 Dreamweaver下编辑HTML文档 在熟悉了 Dreamweaver创建站点以及HTML文档等操作之后,接下来将介绍如何在 Dreamweaver编写的HTML,以帮助同学们掌握 Dreamweaver的HTML网页编写技巧,在熟 悉了这些技巧之后,将会让同学们编写一个HTML文档,作为本部分实验的提交内容 插入HTML元素 前面提到工具栏是HTML网页开发人员最经常用到的部分,通过工具栏开发人员可以方 面快捷的插入HTML元素,而不用手写HTML代码。你可以在选择在代码或者页面设计 窗口中某个位置作为元素插入的位置。比如要插入一个超级链接,如下图所示: 文件①)编辑C)查看C)插入〔)修改)文本①T)命令〔)站点)窗口⑦)帮助Qo 插入常用布局表单文本m肌应用程序F1ash元索「收藏夹 回晶回国,·的助因助·回 tnT命thn1 回代码回拆分第二步:点击速无标题文档 p搶.c回圆 CTY里添知级链接 W3c//didXhiNl1.0Transitional//enhttp://ww.v3.org/ir/xhtmll/did/XhtNl tit1e)无标题文档 title head <body 109道本元素的位置 第一步:用标点击这里 插入基本元素的位置 或者点击这 在跳出来的窗口中设置该超级链接的属性 起级链接 文本:显示的名称 确定 链接:a2Fin2hm 取消 目标: parent 标题 访问键 Tab键索引
2.2.3 在 Dreamweaver 下编辑 HTML 文档 在熟悉了 Dreamweaver 创建站点以及 HTML 文档等操作之后，接下来将介绍如何在 Dreamweaver 编写的 HTML，以帮助同学们掌握 Dreamweaver 的 HTML 网页编写技巧，在熟 悉了这些技巧之后，将会让同学们编写一个 HTML 文档，作为本部分实验的提交内容。 z 插入 HTML 元素 前面提到工具栏是 HTML 网页开发人员最经常用到的部分，通过工具栏开发人员可以方 面快捷的插入 HTML 元素，而不用手写 HTML 代码。你可以在选择在代码或者页面设计 窗口中某个位置作为元素插入的位置。比如要插入一个超级链接，如下图所示： 在跳出来的窗口中设置该超级链接的属性：
点击确定,即可添加一个超级链接,注意黄色区域的代码(程序自动生成): a夏 acronedia Dreamweaver8-[c: Document\FUDA\082eb应用基础\LA1ab2\要ebS st htal 文件①)编辑)查看①插入〔)修改)文本①)命令c)站点您)窗口帮助QD H插入常用布局表单|文本|Hw.应用程序|nah元索收藏夹 回回回,自·的因助· Vate htnlTesthtml* 回代码回拆分设计十标题:无标题文档 p8@.c PUB //ww, w3, ore/1999/xhtml quiv="Content-Type" content="text/html; charset=gb2312"/> 8 ∵小*元素的位置,21里开的 B10501050800800 插入基本元素的位置:显示的名秘 其他的元素添加方法类似,在工具栏中,可以被添加的常见元素见下表: 工具栏选项卡 HTML元素 说明 常用 超级链接、电子邮件链接以 及命名错定 表格 图像 布局 表单 inp 全部的表单控件 文本 粗体文本 斜体文本 加强文本 段落 等 标题 </u等 列表 你可以把鼠标放在相应的选项上,程序会有相应的提示: 插入常用|布局表单文本|m眈应用程序|門1sh元索|收藏夹 口欧 圖团国口网 表单 1 Sina html Vote. html Test.html* 代码程服示标题无题档 l PUBLIC"//W3C//DTD XHTML 1.0 Transitional//
点击确定，即可添加一个超级链接，注意黄色区域的代码（程序自动生成）： 其他的元素添加方法类似，在工具栏中，可以被添加的常见元素见下表： 工具栏选项卡 HTML 元素 说明 常用 超级链接、电子邮件链接以 及命名锚定 表格 层 图像 布局 表格 层 表单 表单 全部的表单控件 文本 粗体文本 斜体文本 加强文本 段落 等 标题 等 列表 你可以把鼠标放在相应的选项上，程序会有相应的提示：
当然,在开发过程中一定要善于利用工作区下方的属性面板,通过它可以为我们修改 HTML元素属性带来很多方便,在代码或者设计面板中点击鼠标,程序会自动找到最近 的HTML元素(指鼠标点击的地方落在该元素的内部,即…鼠标点击/a>),然后 属性面板中会显示该元素的属性,比如我们在刚刚插入超链接的地方点击鼠标,那么属 性面板将显示超链接的属性 c: Document\FUDAN082b用基础LAB\ab2 ebSite\Test. ht.…回回囟 文件①)编辑①)查看0插入①)修改)文本①)命令c)站点)菌口)帮助Q w插入常用布局表单文本M应用程序|Ph元素|收夹 口口四国回回目固团国口囡口 部正在 b2-LabList html Sina htal Vete htnlTesthtol 所选内容的摘要 回代码回拆分团设计十标题无标题文档 o.3t ..cB.a. 人丰元的位繁,如12FmBm:mm 插入基本元来的位置:显示的名称 L2本视图 c|會y Obody)(a> lab2 TextFornat, ht 格式段落 式无 字体默认 Test. ht 页面属性,列表项自 O备妥 ●在浏览器中浏览HTML文档 在站点属性文件结构中选择要浏览的文件,按F12或者鼠标右键单击,选择在浏览器中 预览。如下图所示 a夏 acronedia Dreamweaver8=IC:1 Document \FUDAh1082Wb应用基础 文件①)编错()查看0)插入)修改)文本①)命令)站点区)面口①)助0)新建文件吧 ˇ描入常用|布局表单文聿H应用程序Hash元索|收瘰夹 回回图 选择 回代码回分国设计标题:千标题女档 8c获取 http://ww nlnlnsz"http://www.w3.org/1999/xhtal"> <neta 人基丰元赛的位置,he 2 Finale.1 位健 设计备 a10x50x151新本地文件0 格式段落 样式2 C面属性列项日
当然，在开发过程中一定要善于利用工作区下方的属性面板，通过它可以为我们修改 HTML 元素属性带来很多方便，在代码或者设计面板中点击鼠标，程序会自动找到最近 的 HTML 元素（指鼠标点击的地方落在该元素的内部，即….鼠标点击….），然后 属性面板中会显示该元素的属性，比如我们在刚刚插入超链接的地方点击鼠标，那么属 性面板将显示超链接的属性： z 在浏览器中浏览 HTML 文档 在站点属性文件结构中选择要浏览的文件，按 F12 或者鼠标右键单击，选择在浏览器中 预览。如下图所示：
224HTML文档编写 实验目的:综合考察学生对HTML语言以及对 Dreamweaver的HTML网页制作方法的掌握 实验任务:需要利用 Dreamweaver编写符合要求的HTML文档lab2 dw oneal. htm以及 lab2 dw vote html,文档能够在IE6或旧E7中显示。 实验提交物:lab2 dw oneal. htm,ab2 dw vote. htm以及助教提供图片文件(注意:提交时 要注意文件的组织结构,确保图片可以被htm文件链接上) 评分细则:按实现的结果是否符合要求给分。 实验要求(以下要求若非特指,则仅针对lab2 dw oneal. htm,具体参照下面的两幅截图): 页面背景图片为课程FTP中Lab2/mage文件下的lab2 Bg jpg(2分) 页面的图片(ab/mage/ab2pc1jpg)和文字居中且被正确显示(定位可以采用 Table, 图片的显示大小为原图的75%),主要文字在Lab2ext/ Text. txt中给出(4分) 文章标题为2号标题,下面有关于投票的标题为3号(2分) 超级链接两处,链接的href可以自己设定,但是不能为空值或者非法值(2分) 奥尼尔的职业生涯的字体为黑体5号(2分) 文中三处红色文本以及删除线设置(2分) 表单中的单选按钮组,包括默认选项为巴特尔(2分) 提交按钮、重置,按提交页面跳转到Vote.htm,重置则单选按钮组恢复初始状态,页 面不刷新(3分) 点击 Vote htm中的返回,页面跳转至主页面(如下图所示)(1分) 总分:20分 Vote html页面的效果 O Vote- zilla fief 回区 文件)编辑￠)查看历史〖)书签①)工具〔)帮助Q cxa①an.∥/0mm,,(a,c 现观察…L提交…L提交…疆沙董尔奥…奥尼尔体…口vt园 谢谢投票 返回 完成 心「ayra:sm。■’
2.2.4 HTML 文档编写 实验目的：综合考察学生对 HTML 语言以及对 Dreamweaver 的 HTML 网页制作方法的掌握 实验任务：需要利用 Dreamweaver 编写符合要求的 HTML 文档 lab2_dw_oneal.html 以及 lab2_dw_vote.html，文档能够在 IE6 或 IE7 中显示。 实验提交物：lab2_dw_oneal.html, lab2_dw_vote.html 以及助教提供图片文件（注意：提交时 要注意文件的组织结构，确保图片可以被 html 文件链接上） 评分细则：按实现的结果是否符合要求给分。 实验要求（以下要求若非特指，则仅针对 lab2_dw_oneal.html，具体参照下面的两幅截图）： · 页面背景图片为课程 FTP 中 Lab2/Image 文件下的 lab2_Bg.jpg（2 分） · 页面的图片（lab/Image/lab2_pic1.jpg）和文字居中且被正确显示（定位可以采用 Table， 图片的显示大小为原图的 75%），主要文字在 Lab2/Text/Text.txt 中给出（4 分） · 文章标题为 2 号标题，下面有关于投票的标题为 3 号（2 分） · 超级链接两处，链接的 href 可以自己设定，但是不能为空值或者非法值（2 分） · 奥尼尔的职业生涯的字体为黑体 5 号（2 分） · 文中三处红色文本以及删除线设置（2 分） · 表单中的单选按钮组，包括默认选项为巴特尔（2 分） · 提交按钮、重置，按提交页面跳转到 Vote.html，重置则单选按钮组恢复初始状态，页 面不刷新（3 分） · 点击 Vote.html 中的返回，页面跳转至主页面（如下图所示）（1 分） · 总分：20 分 Vote.html 页面的效果：
ab2 dw onealhtm的效果图: 奥尼尔( Shaquille0Nea1) 来源:新浪体育 34 职业生涯介绍 NBA历史上最伟大的50名球员之 1992年以新秀状元身份被魔术队选中,1996年以自由球员身份加盟湖人队,2004年7月14日被交 换到热队。 2000-2002年率湖人队三获NBA总冠军 次获得NBA总决赛最有价值球员*称号(2000年,2001年,392002年)1999-2000赛季获常 规襄最有价值球员称号 6次入选NBA"最佳阵容"(1997-98、1999-2000、2000-01、2001-02、2002-03、2003-04赛 季),2次第二阵容(1994-95,1998-99赛季),3次第三阵容1993-94,1995-961996-97赛季 11次入选牷明星阵容“1993、1994、1995、1996、1997、1998、2000、2001、2002年、 荣获2000、2004年NBA全明星最有价值球员称号;1994-1995赛季(平均得分293分) 1999-2000赛季(平均得分297)两获常规赛得分王 荣获1992-93赛季“最佳新秀称号,入选最佳新秀阵容 荣获1996年奥运会篮球比赛冠军:1994年世界男篮锦标赛冠军 您认为NBA史上最强大的中锋是? ○张伯伦 姚明 ⊙巴特尔 O其他 提交[重置
lab2_dw_oneal.html 的效果图：