南安市小学教师信息技术转岗培训

南安市小学教师信息技术转岗培训计算机网络基础及网页制作模块主讲：泉州师范学院吴永明培训内容第一部分计算机网络基础计算机网络因特网因特网常见应用电子邮件网络U盘浏览网页查阅新闻网上读书信息搜索资源下载培训内容第二部分网页制作html基础Frontpage2003基础制作图文网页表格和表格布局网站实例制作“茶韵飘香”计算机网络计算机网络的定义与组成计算机网络的定义所谓计算机网络是指把若干台地理位置不同，且具有独立功能的计算机，用通信线路和通信设备互相连接起来，以实现彼此之间的数据通信和资源共享的一种计算机系统。计算机网络的组成计算机网络涉及计算机技术和通信技术两个领域。一方面，通信网为计算机之间的数据传输和交换提供了必要的手段；另一方面，计算机技术的发展渗透到通信技术中，又提高了通信网的各种性能。计算机网络典型的计算机网络系统示意图如下所示。从图中可以看出，一个计算机网络是由资源子网和通信子网构成。资源子网负责信息处理，通信子网负责网中的信息传递。计算机网络计算机网络的分类局域网（LAN：LocalAreaNetwork）局域网用于将有限范围内（如：一间实验室或办公室、一栋大楼、一个校园）的各种计算机、终端与外部设备连接起来所形成的网。城域网（MAN：MetropolitanAreaNetwork）城域网是介于局域网和广域网之间的一种高速网络。广域网（WAN：WideAreaNetwork）广域网（亦称为远程网）是指连接远距离的计算机组成的网，分布范围可达几百公里乃至上万公里。计算机网络网络传输协议所谓网络协议，是使网络中的通信双方能顺利进行信息交换而双方预先约定好并遵循的规程和规则。计算机网络Internet的产生和发展从网络通信技术的观点来看，Internet是一个以TCP/IP协议连接全世界各个国家、各个部门、各个机构计算机网络的数据通信网。从信息资源的观点来看，Internet网是一个集各个领域、各个学科的各种信息资源为一体的、供网上用户共享的数据资源网。目前Internet最重要的应用有：万维网WWW（WorldWideWeb），电子邮件（Email），远程登录（Telnet），文件传输（FTP），网络办公、视频会议、云计算、云存储等等。计算机网络TCP/IP协议Internet的其他网络协议都要用到TCP/IP协议提供的功能，因而称整个Internet协议族为TCP/IP协议族，简称TCP/IP协议。其中IP是TCP/IP体系中的网际层协议，负责分组数据的传输；TCP是TCP/IP体系中的传输层协议，负责数据的可靠传输。计算机网络IP地址IP地址可以视为网络上的门牌号码，它唯一地标识出主机所在的网络（网络地址部分）和网络中位置的编号（主机地址部分）。IP地址由32位二进制数组成，为了表示方便一般写成由4个十进数构成，比如、计算机网络域名系统域名域名由若干部分组成，它们之间用小数点分开，每个部分由至少两个字母或数字组成，顶级域名在Internet中是标准化的，顶级域名前面还有下级域名，但下级域名一般没有统一的规定和标准。每个域名对应一个IP地址，它们之间的映射对应关系通过域名服务器DNS（DomainNameServer）自动转换。下图是域名的结构：计算机网络计算机网络因特网国际特别委员会把顶级域名分为国际顶级域名与国家顶级域名两类。域名的构成有两类比较特殊的部分，一类由三个字母组成，它表示机构的类型（如表1）；另一类由两个字母组成，它表示国家或地区的名称代码（如表2）。一般来说，域名的格式为：商标名（或企业名）.企业性质代码.国家代码（各部分用小数点隔开）

计算机网络统一资源定位符URLURL（UniformResourceLocaltion）是一种标准化的命名方法，通过各种不同的协议，对Internet上任何地方的信息都用URL定位或访问。URL的格式为：协议名：//用户名：密码@主机地址：端口号/文件路径

认识因特网今天，计算机技术、网络技术飞速发展，信息资源日益丰富，在工作、学习及生活中，我们经常要通过电脑网络获取、分析、处理和发布信息。网络正在不断改变人们的生活方式和工作方式，它已经给社会带来了巨大的变化。了解因特网了解因特网的服务及应用认识因特网（续）了解因特网因特网曾经有过多种中文译名。1997年将Internet定名为因特网。因特网是全球最大的电脑网络，它是由成千上万个广域网和局域网通过网间互联形成的一个国际网，也称国际互联网。因特网上的网站是由世界上各地的组织、机构或个人创办的，存储大量的信息，而且信息还在不断更新。认识因特网（续）因特网的服务与应用浏览新闻阅读数字图书中国少儿数字图书馆听广播、看电视、观赏电影、动画等查找资料购物信息交流电子邮箱电子邮箱（E-MAILBOX）是通过网络电子邮局为网络客户提供的网络交流电子信息空间。电子邮箱具有存储和收发电子信息的功能，是因特网中最重要的信息交流工具。注册电子邮箱网易邮箱新浪邮箱搜狐邮箱QQ邮箱电子邮箱客户端使用网络U盘（网盘）网盘，又称网络U盘、网络硬盘，是由互联网公司推出的在线存储服务，向用户提供文件的存储、访问、备份、共享等文件管理等功能。用户可以把网盘看成一个放在网络上的硬盘或U盘，不管你是在家中、单位或其它任何地方，只要你连接到因特网，你就可以管理、编辑网盘里的文件。不需要随身携带，更不怕丢失。免费网盘注册百度网盘115网盘360云盘网盘客户端的使用浏览网页因特网提供了丰富的信息资源，我们可以在因特网上浏览各种信息，在因特网上浏览信息，需要浏览器软件的支持。浏览器的使用系统自带IE浏览器其他公司的浏览器搜狗浏览器QQ浏览器360浏览器猎豹浏览器百度浏览器查阅新闻看新闻，了解天下事。过去，我们都是从报纸、广播和电视中看新闻。现在，因特网为我们提供更加方便快捷、更加实时的新闻报道。在国家新闻媒体网站上查阅当日新闻查看数字报刊平台上的新闻在地方政府网站上查看政务动态在商业门户网站上查看体育娱乐等新闻。网上读书在因特网上有许多数字图书馆，那里不仅有成千上万的书籍期刊，还有动听的歌曲、优美的动漫及益智游戏，各种资源应有尽有。中国少儿数字图书馆中国儿童资源网查找资料我们在因特网上不仅可以浏览网站信息，查看新闻，还可以围绕某一个主题查找资料。但面对浩如烟海的网络信息，我们如何才能迅速地找到所需的信息？百度搜索搜狗搜索SOSO搜索谷歌搜索有道资源下载在浏览网页的时候可以根据需要获取文字、图片等信息，但有时候我们需要下载一些音乐、视频、软件等资源，这里介绍常见的下载工具迅雷腾讯QQ旋风快车静态网页制作基础网页在制作网页之前，我们先来认识一下网页，上网冲浪（即浏览网页）时，呈现在人们面前一个个漂亮的页面就是网页那网页如何制作出来呢？网页制作-HTML基础HTML其实网页的主体是一个格式化的文本文件，它是用HTML代码来创建的。使用HTML中的相应标签，就可以将文本、图像、动画及音乐等内容包含在网页中。网页制作-HTML基础文本文本是网页最基本的组成元素，通过它可以非常详实地将要传达的信息传送给浏览者。网页中最常用的中文字体是宋体，且绝大部分使用黑色作为文本的颜色。正文文本的大小通常为12像素（即12px），行间距一般为20px，而标题文本可以设置为14px或16px。网页中的字体不能太大，否则看起来很不精致，且尽量避免多种字体混合使用，这样会显得杂乱不堪。网页制作-HTML基础图像图像是网页中不可或缺的元素，网页中有了图像，页面效果随之大大提升。但受网络传输速度的影响，图像不能太大，应保证一定的清晰度的条件下最小字节数。网页中支持的图像格式有：jpg、gif、png网页制作-HTML基础动画动画在网页中应用也不少，有它的加入，平静的网页也变得生机勃勃。网页中常用的动画格式主要有两种，一种是gif动画，一种是swf动画。Gif动画是逐帧动画，相对比较简单，而swf动画则更富表现力和视觉冲击力，还可以结合声音和互动功能，给浏览者震撼的试听效果。参考：三金药业网页制作-HTML基础网页制作软件图像处理软件photoshop、fireworks等动画制作imageready、flash等网页布局dreamweaver、frontpage等网页制作-HTML基础HTML是（HypertextMarkupLanguage）超文本标记语言。所谓超文本，是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本，用户可以自行选择要阅读的路径。网页制作-HTML基础HTML是Internet上用于编写网页的主要语言。HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件(.html)。它能独立于各种操作系统平台（如UNIX，WINDOWS等）。可以用任何文本编辑器编写和查看。网页制作-HTML基础由尖括号包围的关键词，比如<html>通常是成对出现的，比如<html>和</html>标签对中的第一个标签是开始标签，第二个标签是结束标签部分标签开始即结束，比如<br/>、<hr/>开始标签中可以包含属性，比如:<标签名属性1=参数1属性2=参数2...>标签的书写是大小写无关的网页制作-HTML基础HTML文件的基本结构<html><head><title>学习HTML</title></head><body><h1>

欢迎来到HTML世界</h1></body></html>HTML网页结构头部部分以<head>开始以</head>结束主体部分以<body>开始以</body>结束网页制作-HTML基础HTML元素HTML文档是由HTML元素定义的。HTML元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码。HTML元素语法HTML元素以开始标签起始HTML元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些HTML元素具有空内容，空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数HTML元素可拥有属性元素示例：<p>元素<p>Thisismyfirstparagraph.</p>这个<p>元素定义了HTML文档中的一个段落。这个元素拥有一个开始标签<p>，以及一个结束标签</p>。元素内容是：Thisismyfirstparagraph。网页制作-HTML基础HTML基本元素标题：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>段落：<p>换行符：<br>预先格式化：<pre>列表：<ul>/<li>、<ol>/<li>水平线：<hr>图像：<img>超级链接：<a>表格：<table>/<tr>/<td>网页制作-HTML基础HTML标题标题（Heading）是通过<h1>-<h6>等标签进行定义的。H1到H6标签用于指定不同级别的标题<html><head><title>动物世界</title></head>

<body><h1>从大自然获得灵感</h1><h2>从大自然获得灵感</h2><h3>从大自然获得灵感</h3><h4>从大自然获得灵感</h4><h5>从大自然获得灵感</h5><h6>从大自然获得灵感</h6></body></htlm>网页制作-HTML基础HTML段落<p>…</p>标签用于标记段落<html><head><title>诗词学习</title></head><body><p>我是第一段</p><p>我是第二段</p><palign="left">左对齐显示<p><p

lign="center">居中显示<p><palign="right">右对齐显示<p></body></html>网页制作-HTML基础换行标签文本中<br>(break)标签，就会强制换行<html><head><title>诗词学习</title></head><body><br>我是第一行<br>我是第二行

<p>我是第一段</p><p>我是第二段</p></body></html>网页制作-HTML基础预定义格式标签<pre>标签用于显示具有预先定义格式的文本（如HTML文档中所示）该元素中的文本保留空格、换行符，文本为等宽字体。<html><head><title>诗词学习</title></head><body><H1>静夜思</H1><pre>

床前明月光疑是地上霜

举头望明月低头思故乡</pre></body></html>网页制作-HTML基础列表简介列表用于按逻辑方式对数据分组玫瑰花向日葵兰花苹果桔子水仙芒果水果苹果

芒果桔子花卉水仙兰花向日葵玫瑰花网页制作-HTML基础无序列表无序列表<ul>也称为“项目列表”，<li>是每一项…<body><h1>星期中的每一天</h1><ul>

<li>星期日<li>星期一<li>星期二<li>星期三<li>星期四<li>星期五<li>星期六</ul></body>…网页制作-HTML基础有序列表在有序列表<ol>中，列表项以自动生成的顺序显示，<li>是每一项…<body><h1>星期中的每一天</h1><ol>

<li>星期日<li>星期一<li>星期二<li>星期三<li>星期四<li>星期五<li>星期六</ol></body>…有序列表的属性<litype=“I”>大罗马<litype=“I”>小罗马<litype=“A”>大写字母<litype=“a”>小写字母网页制作-HTML基础使用水平线<hr>标签用于在页面上绘制水平线<htmlL><html><title>动物世界</title></head><body><h3>老虎的夜间视觉</h3><hrnoshadesize=5align=centerwidth=50%><hrsize=15align=leftwidth=80%><hr><p>老虎的夜视能力优于人类的夜视能力五倍以上</p></body></html>网页制作-HTML基础插入图像<img>标签用于在HTML文档中插入图像。<img>标签的两个常用属性是src和align。src属性用于指定要插入的图像位置。align属性用于指定图像相对于文本的对齐方式。<html><head><title>动物世界</title></head><h1><fontsize=“3”color=“#007500”><b>让我们看看这些可爱的动物</b></font></h1><body><p>

<imgalign=“bottom”src=“Animal.jpg”>底部对齐</p><p><imgalign=“top”src=“Animal.jpg”>顶部对齐</p><p><imgalign=“middle”src=“Animal.jpg”>居中对齐</p></body></html>网页制作-HTML基础HTML链接HTML使用超级链接与网络上的另一个文档相连。点击链接可以从一张页面跳转到另一张页面。<a>标签可用于创建超级链接超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。使用<a>标签创建超链接的方式：通过使用href(hyperlinkreference超级链接引用,href)属性-创建指向另一个文档的链接链接的HTML代码:<ahref="url">Linktext</a>开始标签和结束标签之间的文字被作为超级链接来显示。链接示例：

<ahref="">我的主页</a>网页制作-HTML基础<html><head><title>搞笑图片</title></head><body><h1>会弹琴的狗狗</h1><ahref=“dog.htm”>单击此处查看</a></body></html>网页制作-HTML基础链接到同一文档的某个部分锚标签<a>还可用于使用户“跳”到文档的某个部分<a>的name属性用于创建锚标记为达到这种跳转效果，请在href参数中使用该标记<a

name=“marker”>主题名称</A><ahref=“#marker”>主题名称</A>网页制作-HTML基础...<body><ahref=“#Lion”>狮子</A><br><ahref=“#Zebra">斑马</A><br><ahref=“#Cheetah”>印度豹</A><br><aname=“Lion”>狮子</a><p>狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达250公斤。而雌狮则要轻得多，只有180公斤。</p><br><aname=“Zebra”>斑马</a><p>没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马网页制作-HTML基础链接到其他文档的特定位置…<P>让我们深入了解一些动物<BR><AHREF=AnimalDetails.htm#Lion>狮子</A><BR><AHREF=AnimalDetails.htm#Zebra>斑马</A><BR><AHREF=AnimalDetails.htm#Zebra>印度豹</A>…网页制作-HTML基础表格行列在HTML文档中，广泛使用表格来存放网页上的文本和图像单元格表格标题网页制作-HTML基础创建表格<html><head><title>使用表格</title></head><body><tableborder=“2”>

<tr>

<td>姓名</td><td>性别</td><td>分数</td>

</tr><tr><tr>Robert</tr><tr>M</tr><tr>80</tr></tr>

</table></body></html><table>标签代表表格的开始，border=2表示边框尺寸为2<tr>表示行，这是表格的第一行，有三列数据，<td>代表列

网页制作-HTML基础HTML图像通过使用<img>图像标签，可以在文档中显示图像。定义图像语法为：<imgsrc="url"/>其中URL为存储图像的位置。可以是相对位置或绝对位置<img/>标签常见属性属性描述align排列对齐方式：right、left、center、top、middle、bottomalt描述图片的文本border图片边框，以像素为单位，值为0不显示边框title包含图片告示信息的文本短语，通常比alt文本更具描述性width图片宽度，像素为单位src

src指"source"源。源属性的值是图像的URL地址或文件名height图片高度，像素为单位网页制作-HTML基础<head><title>图像示例</title></head><body><h2>网页插入图像</h2><imgsrc="../images/fg.png"alt="风景"/></body>网页制作-HTML基础多媒体标签在HTML文档中需要插入一些媒体，比如音乐、视频、flash影片等，可以使用多媒体标签<embed><embed>常见属性src：定义多媒体文件的位置autostart：定义是否自动播放：true或falseheight：定义媒体播放区域的高度width：定义媒体播放区域的宽度<embedsrc=“girl.swf”autostart=“true”height=“300px”width=“300px”/>网页制作-HTML基础背景音乐标签设置html文档的背景音乐，可以使用<BGSOUND>标签，通常使用mid文件作为背景音乐文件主要属性如下：LOOP：声音播放的次数。-1无限次SRC：播放的声音文件的URL。<bgsoundsrc=“hutao.mid”loop=“true”/>网页制作-Frontpage2003FrontPage2003是Office2003组件之一，运行与启动Office其他软件相同。启动成功后，出现的初始画面可能因机器使用情况的不同而不同，菜单部分与Office中的其他软件相似，最大区别是工作区的左端有一个视图栏，包含：网页、文件夹、报表、导航、超链接、任务。网页制作-Frontpage2003网页制作-Frontpage2003视图1．网页。编辑网页需在“网页”视图中进行。在“网页”视图中，有“设计”、“拆分”、“代码”和“预览”4张选项卡。2．远程网站视图。同步此网站和远程网站之间的文件。3．文件夹视图。用于管理站点中的文件和文件夹。4．报表视图。分析网站并管理其内容。5．导航视图。显示站点的导航结构，用于对站点结构的管理。6．超链接视图。用于显示站点中每一页的超链接。7．任务视图。用于创建和管理站点中的任务。网页制作-Frontpage2003站点的创建所谓站点就是多个相关网页通过各种链接关联起来的集合。在使用FrontPage2003设计网页之前,应建立一个本地站点，用来管理创建的网页。在FrontPage2003的主窗口下，单击菜单栏上的“文件”，在弹出的下拉菜单中选中“新建”，在窗口的右边出现“新建”面板，在新建项中选择“其他网站模板”。在“站点”列表框中，选中“只有一个网页的网站”图标，并在右边“指定新网站的位置”框中，输入新站点的名称。网页制作-Frontpage2003新建一个网页在FrontPage2003的主窗口中，单击“视图”栏上的“网页”视图，使当前处于网页视图模式下。单击菜单栏上的“文件”，在弹出的下拉菜单中选中“新建”，在窗口的右边出现“新建”面板，在新建网页项中选择“其他网页模板”。网页制作-Frontpage2003保存网页当前网页是新建的网页并且尚未保存，则单击“常用”工具栏中的“保存”按钮，在弹出的“另存为”对话框中找到并双击要保存网页的文件夹，然后在“文件名”下拉列表框中输入网页的文件名“index.htm”，再单击“保存”按钮即可。如果当前网页是从当前网站打开的，则单击“常用”工具栏中的“保存”按钮即可。如果当前网页是从当前网站之外的位置打开的，则单击“文件”|“另存为”命令，在弹出的“另存为”对话框中找到并双击要保存网页的文件夹，并在“文件名”下拉列表框中输入网页的文件名，最后单击“保存”按钮即可。网页制作-Frontpage2003网页属性设置网页的属性包括网页的背景颜色、图片、网页的标题和网页的页边距等。选择菜单“文件”→“属性”命令或在页面空白处右键单击选择“页面属性”命令则可以在弹出的对话框中进行设置，如图所示，或者在没有选中任何对象的情形下，选菜单“格式”→“背景”，直接进行背景颜色图片的设置。网页制作-图文网页制作在网页中使用最多的网页元素就是文本、图像了，那如何在网页中添加文本、图像并进行这些对象的设置呢？文本键盘输入（和word类似使用键盘输入文本）从剪贴板粘贴过来（这里需要注意的是粘贴过来可能有段落格式，通常使用“选择性粘贴”