...第四章 信息技术支持的网页设计制作、互联网工具和....pdf

信息技术支持的网页设计制作、互联网工具和服务 作为教师，在信息技术特别是网络技术的飞速发展的情况下，单纯地掌握单机课件地 制作已经不能完全适应教学的需求，网络课件和网络课程的设计与制作也成为要掌握的技 能。电子邮箱、网络论坛、博客为教师进行网络交流提供了方便的平台和工具，常用软件的 使用、网络收藏夹和网络硬盘、好看簿服务和 Wiki 服务、概念图和思维导图这些网络工具 和服务为教师加工信息、组织处理信息提供了方便，是学习、备课、上课的得力助手。 第一节 网页设计与制作 学习网页设计与制作技术可以从两个方面参照着学习，一方面是基本的超文本标记语 言即 HTML 的学习，另一方面是可视化网页编辑软件的学习。此外，要提高自己的网页设 计与制作水平，还必须多研究一些优秀网页，尝试应用到自己的作品中去。 一、基本的超文本标记语言  1、基本结构 图 10.1 HTML 结构图 使用超文本标记语言生成网页的方法就是在基本结构中的各标签内编写代码， 而这些代 码都是非常容易掌握的。  2、编写工具——记事本 图 10.2  记事本程序 单击“开始”→“附件”→“记事本” ，即可调出记事本工具。  3、将超文本标记语言保存为网页（扩展名为 htm或者 html） 图 10.3-⑴ 保存 图 10.3-⑵ 保存  4、基本的标签 l 主体背景颜色标签 body bgcolor=green  l 主体背景图片标签 body background=beijing.jpg  l 文本换行标签  br  l 段落标签  p段落/p  l 文本居中标签  center文本/center  l 文本字体、字号、字的颜色标签  font face 黑体  size=3 color=red文本/font  l 图片标签  img  src 路径/ 图片  1.jpg  alt 提 示词  width 宽度  height 高度  align center border=0  l 文本超链接标签  a href=链接到百度网站/a  l 图片超链接标签a  href 路径/图片  2.jpg  img  src 路径/图片  1.jpg    alt 提示词  width 宽度 height 高度  align center border=0/a  l 水平线标签hr size=4 color=fffaaa  width=80%   align=left  二、可视化网页标记软件——Dreamweaver  Dreamweaver 是 Macromedia 公司出品的一款非常强大的可视化网页编辑软件，但同时 也支持代码视图，方便代码的编写。我们以 Macromedia Dreamweaver8 为例向大家介绍。  1、界面 ⑴．开始界面 图 10.4  开始界面 开始界面主要提供了打开最近项目、创建新项目和从范例创建三个选项，方便我们开始 工作。 ⑵．工作界面 点击创建 HTML文件，即可看到工作界面。Dreamweaver 继承了微软开创的窗口风格， 也是由标题栏、菜单栏、工具栏、状态栏、工作区和任务窗格等几部分组成。此外，在工作 区的上面还提供了代码、拆分、设计三种视图。 工具栏 视图 任务窗格 工作区 状态栏 图 10.5  工作界面 2、网页制作的“三板斧” ⑴．新建站点 图 10.6-⑴ 新建站点