BODY标志 body是一个网页代码的绝对主要部分。body是由<body>开始,由</body> 结束。下面我们看一下body部分的元素 bgcolor背景色 background背景图案 text文本颜色 link链接文字颜色 alink活动链接文字颜色vink已访问链接文字颜色 leftmargin页面左侧的留白距离 topmargin页面顶部的留白距离 下面介绍各个部分的功能及用法: bgcolor用于指定页面的背景颜色。在 Microsoft公司的IE浏览器中,默认情况 下是白色, Netscape公司的 Navigator浏览器的默认情况是灰色 语法格式:< body bgcolor="颜色值"> background: background属性用于指定页面的背景图案。 语法格式:bodybackground="http://www.ebok.cn/url"> 下面介绍几种文字的属性,可以改变文字的颜色以及在页面上留出空白 text link alink vlink leftmargin topmargin 他们的作用分别是:非链接文字的颜色:可连接文字的颜色:正被点击的可链接 文字的颜色:已被点击的可链接的文字的颜色:页面左侧的留白;页面顶部的留 学语法格式: <body text="color"link="color"alink="color" Vlink="color"> leftmargin <html> 过|BODY实例如右所示 title>body元素示例<itle 说明:对于link这样的属性, 要达到的效果是鼠标放到有<业不m 大多数hm的页面已经不使0d,gpb=m0rmo 程用这样的用法了。现在多数是 leftmargin10 在head中加入相应的代码。“p>这里 链接的字体上时,字体变色 </html> 点击后字体变为灰色。具体方法如下: A: link (color: #00007f; i A: visited color: #65038e A: active i color:#ff0000 A: hover(color: #ff0000 将这段代码加入到head中,在body中加入有链接的文字,就可以看出效果了。 这一部分是属于cs中的知识。 Aign属性(三种选择) Lef(默认值)文字左对齐 Center文字居中对齐 Right文字据右对 <html><head><title> Align a t </title></head ><body bgcolor="#ffffff"> < hI Align="left">文字左对齐<hl><h2Algn=" center'">文字居中</h2> <h3Algn=" right">文字右对齐</h3x</body></html
教 学 过 程 一、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>就是不换行标记,无论你在代码中将文字写为何种形式,都 会在一行中显示。 <html><head>< title>段落属性显示< / title><head> <body><h3>江雪</h3x<p><nobr 千山鸟飞绝,万径人踪灭。 孤舟蓑笠翁,独钓寒江雪。 hobr><><h4>赤壁<h4> 折戟沉沙铁未销,自将磨洗认前朝。<br>东风不与周郎便,铜雀春深锁二乔。 </body ></html> 通过浏览器,我们可以看到其中的效果,大家也就能体会到其中的用法。还有 种属性叫做预格式化<pre>…….</pre>。请大家看一下下面的例子。 教 示例 <html> ttle>预格式化演示<ttle> <head> <p>卜算子咏梅</p 过 ≤pre 驿外断桥边,寂寞开无主 已是黄昏独自愁,更著风和雨 程|无意苦争春,一任群芳妒。 零落成泥碾作尘,只有香如故。 <body> <html> 通过浏览器看看上面这段代码的产生效果。 、上机练习 、教学反思 学生通过本节课的学习后,大多数同学己经掌握了网页制作掌握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、如何创建一个简单网页 教学重站点及网页创建 点 教学难站点及网页创建
Dreamweaver MX2004 教案 第三周 星期一 第 3、4 节 课 题 Dreamweaver MX 简介 教学目 标 1、了解网页中部分术语；2、如何创建一个站点；3、如何创建一个简单网页。 教学重 点 站点及网页创建 教学难 点 站点及网页创建
复习:1、利用记事本编辑一个网页。 BODY标志符及其属性设置 讲授新课: Dreamweaver简介 、网页的术语: 1、网页:通过浏览器在WwW上看到的页面 2、网站:是网页的集合,设计者先把整个网络结构规划好,然后分别制作各个网页, 在整理过程中,再将网页按一定顺序结合起来,使浏览者在访问该网站时能连接到 各个网页进行观看网页内容。 3、网站开发流程:是集体团结的象征,因一个公司组织开发一个网站时,不是某个 人单独完成的,参与开发的包括主导网站的单位、客户,还有美术设计人员、程序 设计师和维护人员等。 教 定义 建立网)首页的设 站点 站结构 计和制作 学 发布和 技术的 维护 实现 4、服务器:用户在浏览网页时,是由自己的计算机向存放网页的计算机发出的一个 过请求,对方在收到请求后,将所需内容发送给发出请求的计算机 本地计算机被称为客户机,对方计算机被称为服务器 5、CSS:层叠样式表,可控制布局、字体、颜色、背景、滚动条颜色、边框、鼠标 形状等 程三、html标签 1、标签:用来分割和标记网页中的元素以形成网页的布局、文字的格式及画面,通 过标签可在网页中加入文本、图片、声音、动画等多媒体文件 a、单标签:如<br>表示换行 b、双标签:给网页文件发送的指令符号前面和后面分别加上标签,告诉文件从 开始标签开始到结束标签之间执行某个命令。如<html>/htm> 四、工作环境介绍 1、页面编辑器 标题栏:若做更改但未保存,则在文件名后显示星号。 菜单栏: 插入栏 文档工具栏:“设计”“代码”“拆分” 标签选择器:显示环绕当前选定的内容的标签的 层次结构
教 学 过 程 复习：1、利用记事本编辑一个网页。 2、BODY 标志符及其属性设置。 讲授新课： 一、Dreamweaver 简介 二、网页的术语： 1、网页：通过浏览器在 WWW 上看到的页面。 2、网站：是网页的集合，设计者先把整个网络结构规划好，然后分别制作各个网页， 在整理过程中，再将网页按一定顺序结合起来，使浏览者在访问该网站时能连接到 各个网页进行观看网页内容。 3、网站开发流程：是集体团结的象征，因一个公司组织开发一个网站时，不是某个 人单独完成的，参与开发的包括主导网站的单位、客户，还有美术设计人员、程序 设计师和维护人员等。 4、服务器：用户在浏览网页时，是由自己的计算机向存放网页的计算机发出的一个 请求，对方在收到请求后，将所需内容发送给发出请求的计算机。 本地计算机被称为客户机，对方计算机被称为服务器。 5、CSS：层叠样式表，可控制布局、字体、颜色、背景、滚动条颜色、边框、鼠标 形状等。 三、html 标签 1、标签：用来分割和标记网页中的元素以形成网页的布局、文字的格式及画面，通 过标签可在网页中加入文本、图片、声音、动画等多媒体文件。 2、标签分类： a、单标签：如<br>表示换行 b、双标签：给网页文件发送的指令符号前面和后面分别加上标签，告诉文件从 开始标签开始到结束标签之间执行某个命令。如<html></html> 四、工作环境介绍 1、页面编辑器： 标题栏：若做更改但未保存，则在文件名后显示星号。 菜单栏： 插入栏： 文档工具栏：“设计”“代码”“拆分” 标签选择器：显示环绕当前选定的内容的标签的 层次结构。 状态栏： 窗口大小： 定 义 站点 建立网 站结构 首页的设 计和制作 技术的 实现 发布和 维护