(3)URL路径 URL( Universal resource loca tor,统一资源定位器)路径是一种互联网地址的表示法。 在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服 务器( Server)里文件的完整路径和文件名称等信息。在HM中,URL路径分为两种形式:绝对路 经和相对路径。 a.绝对路径: 绝对路径是将服务器上磁盘驱动器名称完整的写出来,同时也会表现出磁盘上的目录结构 语法格式 例如: htt <A href=file: ///D: /test/html. htm">/A> b.相对路径 相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。 语法格式 相对关系/部分路径/文件名 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。 1>相对文档: 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种 学表现形式。“…/”表示上一级目录,没有“…/”表示当前目录 例如当前文档的路径是:test/ projectI/ index.htm。我们要找test目录下的 hml.htm。而当前的目录是 project1,我们要回到上一级目录中,所以路径是“../html.htm” 2>相对根目录: 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个 字符是“/”,这个符号表示这个路径是一个相对于根目录的表达式。 、上机练习 程\1利用记事本制作一个简单的页面 例如 <htmI> Head> < title>欢迎光临</ title></head <body> font color=red>我的主页</font><br> < font color=”#00ff00”>欢迎光临我的主页!</font </body>/html> 2、接上面例题,将“我的主页”创建一个链接 、教学反思 在介绍的过程中,结合机房的各种设备,来展示网页制作的魅力。以此来吸引学生的注意力。在实际 的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题,就是学生对网页制 作语言htm的认识还是很基础的,这需要在以后的教学过程中更加注意这个方面的锻炼 四、作业
教 学 过 程 （3）URL 路径 URL(Universal Resource Locator，统一资源定位器)路径是一种互联网地址的表示法。 在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服 务器(Server)里文件的完整路径和文件名称等信息。在 HTML 中，URL 路径分为两种形式：绝对路 经和相对路径。 a. 绝对路径： 绝对路径是将服务器上磁盘驱动器名称完整的写出来，同时也会表现出磁盘上的目录结构。 语法格式： 例如： http://www.frontfree.net <A href="file:///D:/test/html.htm"></A> b. 相对路径： 相对路径是相对于当前的 HTML 文档所在目录或站点根目录的路径。 语法格式： 相对关系/部分路径/文件名 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。 <1>相对文档： 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种 表现形式。“../”表示上一级目录，没有“../”表示当前目录。 例如 当前 文 档的 路径 是： test/project1/index.htm 。我 们要 找 test 目录 下 的 html.htm 。而当前的目录是 project1，我们要回到上一级目录中，所以路径是“../html.htm”。 <2>相对根目录： 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个 字符是“/”，这个符号表示这个路径是一个相对于根目录的表达式。 二、上机练习 1、利用记事本制作一个简单的页面。 例如： <html> <head> <title>欢迎光临</title></head> <body><font color=red>我的主页</font><br> <font color=”#00ff00”>欢迎光临我的主页！</font> </body></html> 2、接上面例题，将“我的主页”创建一个链接 三、教学反思： 在介绍的过程中，结合机房的各种设备，来展示网页制作的魅力。以此来吸引学生的注意力。在实际 的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题，就是学生对网页制 作语言 html 的认识还是很基础的，这需要在以后的教学过程中更加注意这个方面的锻炼 四、作业
Dreamweaver MX2004教案 第二周星期三第1,2节 课题HM语言教程(二) 教学目标1、掌握BODY标志的应用:2、了解BODY标志中属性 教学重点BODY标志中属性 教学难点BODY标志中属性 BODY标志 body是一个网页代码的绝对主要部分。body是由<body>开始,由</body>结束。下面我们 看一下body部分的元素: color背景色 background背景图案 text文本颜色 link链接文字颜色 alink活动链接文字颜色 vlink已访问链接文字颜色 leftmargin页面左侧的留白距离 topmargin页面顶部的留白距离 下面介绍各个部分的功能及用法 bgcolor用于指定页面的背景颜色。在 Microsoft公司的IE浏览器中,默认情况下是白色, Netscape 公司的 Navigator浏览器的默认情况是灰色。 语法格式:< body bgcolor="颜色值"> background: background属性用于指定页面的背景图案 语法格式:bodybackground="http://www.ebok.cn/url> 下面介绍几种文字的属性,可以改变文字的颜色以及在页面上留出空白 教 text link alink vlink leftmargin topmargin 他们的作用分别是:非链接文字的颜色:可连接文字的颜色:正被点击的可链接文字的颜色 已被点击的可链接的文字的颜色:页面左侧的留白:页面顶部的留白。 语法格式: 4 <body text="color"link="color"alink="color"vlink="color"> dy leftmargin="value"topmargin=value"> BODY实例如右所示: <html> 过|说明:对于lnk这样的属性,大多数hml 的页面已经不使用这样的用法了现在多数hody元素示例/us 是在head中加入相应的代码。要达到的效head 果是鼠标放到有链接的字体上时,字体变 bgcolor="#ff0000 text="#ffff00 程色,点击后字体变为灰色。具体方法如下 leftmargin=100"> p>这里显示body的示例。</p> A: link (color: #00007f, </body> A: visited color: #65038e; i </html> A: active color: #ff0000; i A: hover color: #ff0000; 1 将这段代码加入到head中,在body中加入有链接的文字,就可以看出效果了。这一部分是属 于css中的知识 Algn属性(三种选择) Lef(默认值)文字左对齐 Center文字居中对齐 Right文字据右对齐 html><head><title> Align A t</title></head><body bgcolor="#ffffff"> < h1 Align="left">文字左对齐<hl><h2Algn=" center">文字居中<h2> <h3Algn=" right">文字右对齐</h3></body><hmb>
Dreamweaver MX2004 教案 第二周 星期三 第 1，2 节 课 题 HTML 语言教程（二） 教学目标 1、掌握 BODY 标志的应用；2、了解 BODY 标志中属性。 教学重点 BODY 标志中属性 教学难点 BODY 标志中属性 教 学 过 程 一、BODY 标志 body 是一个网页代码的绝对主要部分。body 是由<body>开始，由</body>结束。下面我们 看一下 body 部分的元素： 下面介绍各个部分的功能及用法： bgcolor 用于指定页面的背景颜色。在 Microsoft 公司的 IE 浏览器中，默认情况下是白色，Netscape 公司的 Navigator 浏览器的默认情况是灰色。 语法格式：<body bgcolor="颜色值"> background：background 属性用于指定页面的背景图案。 语法格式：<body background="http://www.ebok.cn/URL"> 下面介绍几种文字的属性，可以改变文字的颜色,以及在页面上留出空白： text link alink vlink leftmargin topmargin 他们的作用分别是：非链接文字的颜色；可连接文字的颜色；正被点击的可链接文字的颜色； 已被点击的可链接的文字的颜色；页面左侧的留白；页面顶部的留白。 语法格式： <body text="color" link="color" alink="color" vlink="color"> <body leftmargin="value" topmargin="value"> BODY 实例如右所示： 说明：对于 link 这样的属性，大多数 html 的页面已经不使用这样的用法了。现在多数 是在 head 中加入相应的代码。要达到的效 果是鼠标放到有链接的字体上时，字体变 色，点击后字体变为灰色。具体方法如下： A:link {color:#00007f;} A:visited {color:#65038e;} A:active {color:#ff0000;} A:hover {color:#ff0000;} 将这段代码加入到 head 中，在 body 中加入有链接的文字，就可以看出效果了。这一部分是属 于 css 中的知识。 Align 属性(三种选择) Left(默认值) 文字左对齐 Center 文字居中对齐 Right 文字据右对齐 bgcolor 背景色 background 背景图案 text 文本颜色 link 链 接 文字 颜 色 alink 活 动链 接 文 字 颜色 vlink 已 访 问 链 接文 字 颜 色 leftmargin 页面左侧的留白距离 topmargin 页面顶部的留白距离 <html> <head> <title>body 元素示例</title> </head> <body bgcolor="#ff0000" text="#ffff00" leftmargin="100"> <p>这里显示 body 的示例。</p> </body> </html> <html><head><title>Align 属性</title></head><body bgcolor="#ffffff"> <h1 Align="left">文字左对齐</h1><h2 Align="center">文字居中</h2> <h3 Align="right">文字右对齐</h3></body></html>
<br>是换行标记,夹在代码的最后,显示出的网页将自动换行。同样,<nobr>..</nobr>就是 不换行标记,无论你在代码中将文字写为何种形式,都会在一行中显示。 <htm><head>< title>段落属性显示< Ititle><head> <body><h3>江雪</h3x<p><nobr> 千山鸟飞绝,万径人踪灭 孤舟蓑笠翁,独钓寒江雪 <hobr><><h4>赤壁<h4> 折戟沉沙铁未销,自将磨洗认前朝。<br>东风不与周郎便,铜雀春深锁二乔。 </body ></html> 通过浏览器,我们可以看到其中的效果,大家也就能体会到其中的用法。还有一种属性叫做预格 式化pre>.</pre>。请大家看一下下面的例子 < title>预格式化演示<ttle> <head> 学 p>卜算子咏梅<p> 过/驿外断桥边,寂寞开无主 已是黄昏独自愁,更著风和雨 无意苦争春,一任群芳妒。 零落成泥碾作尘,只有香如故。 程 </pre> <htmI> 通过浏览器看看上面这段代码的产生效果 、上机练习 、教学反思 学生通过本节课的学习后,大多数同学已经掌握了网页制作掌握BODY标志的应用。在教学过程中取 得了较好的效果,对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性。 四、作业
教 学 过 程 <br>是换行标记，夹在代码的最后，显示出的网页将自动换行。同样，<nobr>……</nobr> 就是 不换行标记，无论你在代码中将文字写为何种形式，都会在一行中显示。 通过浏览器，我们可以看到其中的效果，大家也就能体会到其中的用法。还有一种属性叫做预格 式化<pre>……</pre>。请大家看一下下面的例子。 示例： <html> <head> <title>预格式化演示</title> </head> <body> <p>卜算子 咏梅</p> <pre> 驿外断桥边，寂寞开无主。 已是黄昏独自愁，更著风和雨。 无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。 </pre> </body> </html> 通过浏览器看看上面这段代码的产生效果。 二、上机练习 三、教学反思 学生通过本节课的学习后，大多数同学已经掌握了网页制作掌握 BODY 标志的应用。在教学过程中取 得了较好的效果，对于基础较差的学生单独辅导。应该应用较多的实例来调动学习积极性。。 四、作业 <html><head><title>段落属性显示</title></head> <body><h3>江雪</h3><p><nobr> 千山鸟飞绝，万径人踪灭。 孤舟蓑笠翁，独钓寒江雪。 </nobr></p><h4>赤壁</h4> 折戟沉沙铁未销，自将磨洗认前朝。<br>东风不与周郎便，铜雀春深锁二乔。 </body></html>
Dreamweaver MX2004教案 第三周星期 第3、4节 课题 Dreamweaver MX简介 教学目标1、了解网页中部分术语:2、如何创建一个站点:3、如何创建一个简单网页 教学重点站点及网页创建 教学难点站点及网页创建 复习:1、利用记事本编辑一个网页。 BODY标志符及其属性设置 授新课 、 Dreamweaver简介 网页的术语 网页:通过浏览器在WwW上看到的页面 2、网站:是网页的集合,设计者先把整个网络结构规划好,然后分别制作各个网页,在整理过程中, 再将网页按一定顺序结合起来,使浏览者在访问该网站时能连接到各个网页进行观看网页内容 3、网站开发流程:是集体团结的象征,因一个公司组织开发一个网站时,不是某个人单独完成的 参与开发的包括主导网站的单位、客户,还有美术设计人员、程序设计师和维护人员等。 定义 建立网 首页的设 站点 站结构 计和制作 教 发布和 技术的 维护 实现 学 、服务器:用户在浏览网页时,是由自己的计算机向存放网页的计算机发出的一个请求,对方在收 到请求后,将所需内容发送给发出请求的计算机 本地计算机被称为客户机,对方计算机被称为服务器 过 5、CSS:层叠样式表,可控制布局、字体、颜色、背景、滚动条颜色、边框、鼠标形状等。 、html标签 1、标签:用来分割和标记网页中的元素以形成网页的布局、文字的格式及画面,通过标签可在网页 中加入文本、图片、声音、动画等多媒体文件 程|2、标签分类: a、单标签:如<br>表示换行 b、双标签:给网页文件发送的指令符号前面和后面分别加上标签,告诉文件从开始标签开始到 结束标签之间执行某个命令。如<htm1>/html 四、工作环境介绍 1、页面编辑器: 标题栏:若做更改但未保存,则在文件名后显示星号。 菜单栏 插入栏 文档工具栏:“设计”“代码”“拆分” 标签选择器:显示环绕当前选定的内容的标签的层次结构 状态栏: 窗口大小:
Dreamweaver MX2004 教案 第三周 星期一 第 3、4 节 课 题 Dreamweaver MX 简介 教学目标 1、了解网页中部分术语；2、如何创建一个站点；3、如何创建一个简单网页。 教学重点 站点及网页创建 教学难点 站点及网页创建 教 学 过 程 复习：1、利用记事本编辑一个网页。 2、BODY 标志符及其属性设置。 讲授新课： 一、Dreamweaver 简介 二、网页的术语： 1、网页：通过浏览器在 WWW 上看到的页面。 2、网站：是网页的集合，设计者先把整个网络结构规划好，然后分别制作各个网页，在整理过程中， 再将网页按一定顺序结合起来，使浏览者在访问该网站时能连接到各个网页进行观看网页内容。 3、网站开发流程：是集体团结的象征，因一个公司组织开发一个网站时，不是某个人单独完成的， 参与开发的包括主导网站的单位、客户，还有美术设计人员、程序设计师和维护人员等。 4、服务器：用户在浏览网页时，是由自己的计算机向存放网页的计算机发出的一个请求，对方在收 到请求后，将所需内容发送给发出请求的计算机。 本地计算机被称为客户机，对方计算机被称为服务器。 5、CSS：层叠样式表，可控制布局、字体、颜色、背景、滚动条颜色、边框、鼠标形状等。 三、html 标签 1、标签：用来分割和标记网页中的元素以形成网页的布局、文字的格式及画面，通过标签可在网页 中加入文本、图片、声音、动画等多媒体文件。 2、标签分类： a、单标签：如<br>表示换行 b、双标签：给网页文件发送的指令符号前面和后面分别加上标签，告诉文件从开始标签开始到 结束标签之间执行某个命令。如<html></html> 四、工作环境介绍 1、页面编辑器： 标题栏：若做更改但未保存，则在文件名后显示星号。 菜单栏： 插入栏： 文档工具栏：“设计”“代码”“拆分” 标签选择器：显示环绕当前选定的内容的标签的层次结构。 状态栏： 窗口大小： 定 义 站点 建立网 站结构 首页的设 计和制作 技术的 实现 发布和 维护
2、面板组:是分组在某个标题下面的相关面板的集合 3、属性检査器:用于测试和编辑当前所选页面元素的属性。 五、站点的建立: 步骤:1、在硬盘上新建一个用来存放网站内容的文件夹 2、“站点”“管理站点” 3、“新建”“站点” 4、定义“编辑文件”第一部分:为站点输入名称 5、定义“编辑文件”第二部分:服务器技术的运用与否。 6、定义“编辑文件”第三部分 7、定义“共享文件” 8、完成。 、编辑网页 1、用记事本:<html> <head> < title>欢迎光临我的第一个网页!</ title </head> 学 <body> 这是我的第一个网页!</body </html> 2、用 dreamweaver编辑 七、教学反思: 学生通过本节课的学习后,大多数同学已经掌握了网页制作软件 dreamweaver创建站点的应用,制作 程个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学 习积极性 八、课外作业:上机练习
教 学 过 程 2、面板组：是分组在某个标题下面的相关面板的集合。 3、属性检查器：用于测试和编辑当前所选页面元素的属性。 五、站点的建立： 步骤：1、在硬盘上新建一个用来存放网站内容的文件夹。 2、“站点”“管理站点” 3、“新建”“站点” 4、定义“编辑文件”第一部分：为站点输入名称。 5、定义“编辑文件”第二部分：服务器技术的运用与否。 6、定义“编辑文件”第三部分。 7、定义“共享文件” 8、完成。 六、编辑网页 1、 用记事本：<html> <head> <title>欢迎光临我的第一个网页！</title> </head> <body> 这是我的第一个网页！</body> </html> 2、 用 dreamweaver 编辑 七、教学反思： 学生通过本节课的学习后，大多数同学已经掌握了网页制作软件 dreamweaver 创建站点的应用，制作 一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的实例来调动学 习积极性 八、课外作业：上机练习