最新主题学习网站创建

1、第7章 主题学习网站创建学习目标学习目标领会主题学习网站创建的指导思想了解主题学习网站创建的一般步骤熟悉dreamweaver的基本操作掌握用表格及布局视图的方式对网页排版的方法掌握设置超级链接的方法掌握框架网页、表单网页、模板和样式表的制作及应用掌握网站发布的方法7.1 网页制作基础7.1.1 internet与www internet是世界上规模最大、用户最多、影响最大的计算机互联网络，是全球范围内成千上万台计算机相互连接到一起形成的一个集合体。 internet能提供的服务包括：电子邮件、远程登录、文件传输、www等。www（world wide web，万维网），是1989年3月由欧洲

2、量子物理实验室cern发展出来的主从结构分布式超媒体系统，现已发展成为最受人们欢迎的网络信息服务提供方式。 7.1.2 浏览器 浏览器是观看www资源的必备工具。www采用的是客户/服务器结构，如下图所示。 所浏览的网页文件位于此端（服务器端）浏 览 者 位于 此 端 （客户端）internet7.1.3 网站及主页 一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是许多页面的集合，它们具有共同的属性。 主页是网站中的一个特殊页面，它是一个网站的起始页面，其中包含指向其他页面的超链接。通常主页的名称是固定的，例如index.htm或index.html等（.htm或.html后缀表示

3、html文档）。7.1.4 html语言 1. 创建html文件 （1）打开win98下“程序”“附件”“记事本” （2）在空白文件内输入代码和页面显示内容 新建一网页文件 新建一个html网页文件，可以使用任一种文字编辑工具，比如，win98 中附件下的记事本，在空白文件中输入网页的内容，然后保存时，将文件名 的后缀写为htm或html。 （3）保存文件 （4）浏览网页 2查看源文件 最方便的更改网页源文件（源代码）的方式是，若在浏览器下浏览一网页，鼠标在页面内单击右键，在出现的快捷菜单中选择“查看源文件”命令，此时将在“记事本”中打开html文件。 3分析源文件 一个web页实际上对应于一

4、个html文件。html文件使用标记符修饰和限定页面显示的内容，任何html文档包含的基本标记符为：html标记和、首部标记和以及正文标记和。7.1.5 网页制作工具 制作网页可以使用源代码编写工具，例如html语言来编写，也可使用“可视化”的网页制作工具，“可视化”的意思是网页制作成什么样，在浏览器中就能看到什么样，也就是常说的“所见即所得”，这类网页制作工具有frontpage、dreamweaver等，dreamweaver是由macromedia公司推出的，与flash、firework 合称为网页制作的三剑客，由于是同一公司的产品，因而在功能上有一个非常紧密的结合。7.2 dream

5、weaver的基本操作7.2.1 dreamweaver的工作界面 对于dreamweavermx版本，第一次启动后，如下图。 dreamweavermx的操作界面主要由以下几个部分组成：标题栏、菜单栏、常用工具栏、文档窗口、状态栏、属性设置面板及多个浮动面板。如下图。 1. 界面基本对象介绍 （1）标题栏 （2）菜单栏 （3）工具栏 （4）文档窗口 文档窗口可分为三种视图方式： 源代码视图窗口 源代码可视化视图 可视化视图 2. 常用面板 (1)插入面板 选择“窗口”“插入”命令，出现插入面板，在插入面板上包含了多种不同类型的按钮。 (2) 属性设置面板 选择“窗口”“属性”命令，出现属性设

6、置面板，属性设置面板主要用于显示在文档窗口中所选中元素的属性，并允许用户在属性设置面板中对元素属性直接进行修改。 (3) 文件浮动面板 在文档窗口的右侧是面板组，包括设计面板、代码面板、应用程序面板和文件面板。 7.2.2创建站点及文件 1创建本地站点 使用dreamweaver制作网页的第一步，便是如何将一个文件夹定义为一个本地站点。本地站点指的是一个文件夹，保存网页制作过程中所要用到的全部文件。 定义一个本地站点的过程如下： 打开win98的资源管理器，在e盘上新建一个文件夹，命名为sampleclone。 选择菜单“站点”“新建”，弹出定义站点对话框。 在对话框中，要进行以下简单的设置：

7、 站点名称：为网站起一个名字，这个名字只起识别的作用，与网站发布后真实的名字无关， 本地根文件夹：设置网站在本地硬盘的位置， 缓存：建立缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议钩选此项。 2. 制作简单的网页文件 （1）新建网页文件 （2）设置页面属性 （3）添加网页文本 （4）保存文件 （5）浏览网页 7.2.3 格式化文本 1. 格式化首页文件的内容 （1）打开文件 （2）打开属性面板 （3）格式化 （4）保存文件 （5）浏览网页 2. 改变首页文件的字体 3. 改变文档窗口的大小 7.3 制作任务的提出7.3.1 明确制作任务 1. 制作学习的任务 通过本章

8、的学习，你将逐步学会用dreamweaver制作一个“关注克隆”的主题学习网站。 网站的设计要体现先进的教学理念，有利于学生的自主探究学习。网站的制作要界面美观简洁，颜色明快柔和，文本简明、通俗易懂，整体结构清晰、统一、易于操作。网站资源要丰富，能满足学习者的要求，运行要安全、可靠。 2制作技术 在主题学习网站制作过程中，应学习并掌握以下dreamweaver的操作技术： dreamweaver的基本操作 图文混排网页的制作 用表格对网页排版 网页的布局视图排版 框架网页的制作 创建表单 模板的应用 超级链接的应用 样式表的创建及应用 网站的发布 3设计思想 设计主题学习网站是将素质教育、研究

9、性学习等先进的教育理念融合到具体的教学实践中，将培养学生的信息素养与探究科学知识有机地结合起来。主题学习网站是学生在课外进行科学研究和探索的场所，本网站结合教学的实际，综合应用多种教学模式，首先提出具体的任务，然后提供一定的资源，最后根据目标对任务完成情况进行评价。7.3.2 范例网站设计 1. 分析学生特点 2. 确定教学目标 知识目标 能力目标 情感目标 3. 规划网站内容 网站主页设置七个栏目，分别是导言、任务、资源、评价、结论、讨论区和教学指导。 导言。概述专题的内容，导言是带有激励性的文字说明，要能引发学生的兴趣，为学生的进一步学习起引导的作用。网站的导言页如下图。 导言网页 任务。

10、具体提出本专题学习的任务，本网站的任务网页，如下图。 资源。是网站设计的重点，资源分三种类型： 本地资源：教师精心选择、组织、设计的本网站的资源，与任务密切相关。网站把“克隆”专题分了三部分，分别是克隆技术、最新进展及各界反应，每一部分都链接有56篇相关的文章，通过阅读、分析这些文章学生可以完成任务的80%。 远程资源：链接到其他相关网站，与内容有一定的关联。 泛资源：链接到搜索引擎，与内容的关联最小。下图是网站提供的远程资源和泛资源的内容。远程资源网页 泛资源网页 评价。也是网站设计的重点。采取多元化评价的方式，对学生的知识、能力、情感的目标进行综合的评价。评价方法包括提供一定数量的客观题，

11、包括单选题、多选题和简述题；以及完成项目报告，填写评价量规。下图为评价网页。 结论。对本专题学习的总结。 讨论区。提供师生讨论交流的场所。 教学指导。教师阐述本专题教学的目的、步骤、内容、教学安排等。 4确定网站结构 网站结构如图主页面导言教学指导讨论区克隆技术任务资源评价结论最新进展各界反应相关链接搜索引擎 5编制链接结构图 网站的主要页面的链接关系如图。indexdaoyanjinzhan搜索引擎jishufanying相关网站shitirenwuziyuanpingjiajieluntaolunjiaoxue公共链接：可返回主页 6编写故事板 本例中选用了一种比较简单的故事板样式，书中图

12、7.27是网页的故事板示例。 7网站文件夹结构 在硬盘上建立文件夹clone，这就是网站名称，主页上的栏目分别为：导言、任务、资源、评价、结论、讨论区、教学指导，对应地在clone文件夹下分别建立子文件夹introduction、task、resource、evaluation、conclusion及pic，其中pic文件夹用于存放图片文件，主页保存在clone文件夹下，而其他文件分别存放在对应的文件夹下，文件夹均以英文小写字母命名，文件以汉语拼音命名。 7.4 主题学习网站的编制7.4.1 准备工作 1定义站点clone 定义站点的过程同第2节。 2建立站点文件夹结构 站点主页面下包含有导言

13、、任务、资源、评价、结论等栏目，因此，站点下应建立相应的文件夹，过程如下。 （1）选择站点clone 点开文件面板，在站点选择栏中选clone站点。 （2）新建文件夹 在站点窗口，选中clone文件夹，单击菜单“文件”“新建文件夹”。7.4.2 制作图文混排的网页 1. 浏览网页 网页duoli.htm完成后的最终效果如下图。 2操作步骤 （1）新建网页文件 （2）设置页面属性 （3）插入页面内容 （4）保存网页 （5）浏览网页7.4.3 表格在排版中的应用 表格是用于排版的重要工具，可用来控制图像和文字的位置、大小等。表格也是网页制作中使用较多的工具，利用表格可以实现多样的版面。浏览网站，会

14、发现几乎所有的网页都要或多或少地采用表格。可以说，不能够很好地掌握表格，就等于没有学好网页制作。 以下将通过制作首页index.htm来熟悉表格在排版中的应用。 1. 浏览网页 首页文件index.htm完成后的最终效果如图。 2分析网页结构 网页设置了桔黄色的背景色，插入了10个表格： 1行2列的表格，用于制作网页圆角的效果，表格是直角的，要想有圆角的效果，须插入图片； 1行2列的表格，第一个单元格用于插入网站标题，第二个单元格拆分为3行2列； 1行1列的表格，用于制作水平线； 1行8列的表格，插入菜单条； 1行1列的表格，用于制作水平线； 1行3列的表格，中间的单元格插入图片； 1行3列的

15、表格，中间的单元格插入专题的标题“关注克隆”； 1行1列的表格，用于制作水平线； 1行1列的表格，插入版权等信息； 1行2列的表格，用于制作网页圆角的效果。 3操作步骤 （1）新建主页文件 （2）设置页面属性 （3）插入表格制作网页圆角的效果 （4）插入表格制作网页标题 （5）制作水平线 （6）制作菜单条 （7）制作另一水平线 （8）插入反转图 （9）插入标题文字 （10）再次制作一水平线 （11）输入版权符号 （12）制作网页下方的圆角的效果7.4.4 布局视图排版 表格排版最大的好处是形状固定，外观不会受浏览器的影响，缺点是制作起来非常麻烦，另外，表格排版缺少灵活性，大多数都是横平竖直的构

16、图方式。用布局视图排版克服了表格排版的缺点，给排版增添了许多灵活性。 1关于布局视图的基本知识 下面将继续网站clone的建设，在布局视图下完成网页right.htm的设计，掌握布局视图下网页设计的方法。 2操作步骤 （1）浏览网页 完成后的网页文件right.htm，最终效果如下图。 (2) 新建网页文件及设置属性 (3) 布局视图下添加表格 (4) 在表格中添加两个单元格 (5) 制作网页圆角的效果 （6）绘制第二个表格 （7）绘制第三个表格并制作水平线 （8）绘制第四个表格制作菜单 （9）绘制第五个表格并制作另一条水平线 （10）绘制第六个表格 （11）本页其余部分可参照前面的步骤自行完

17、成7.4.5 框架的应用 1为什么要用框架 在浏览网页时会发现，网页中的某些内容，比如说导航菜单，在每个网页中都是一样的，内容和位置是固定不变的，若把这些不变的内容（导航菜单）做成一网页，那么浏览时就会减少这部分内容的下载量，这样就会加快网页浏览的速度，这就是使用框架的原因。 2创建框架网页 创建框架网页ziyuan.htm。网页ziyuan.htm是由left.htm和right.htm两个网页合成的。 在resource文件夹下已经保存了创建好的网页文件left.htm和right.htm文件。 （1）新建框架网页 （2）选择框架网页的形式 （3）设置框架属性 （4）保存框架网页 （5）在

18、框架中链接网页 （6）保存网页 （7）浏览网页 3框架页面中超级链接的设置 下面要制作框架网页ziyuan.htm中左侧框架页上的文字“克隆及克隆技术”的链接，链接后的页面在右侧框架页打开。打开框架网页ziyuan.htm，进行以下操作。 （1）给框架命名 （2）添加超级链接 （3）浏览网页7.4.6 表单的创建 表单的主要功能是收集浏览者的信息或进在线自测，创建的表单的标识符是 。 表单需递交到服务器，服务器上的脚本程序负责对表单上的信息进行处理，脚本程序可以使用cgi语言来编写，也可以使用asp或者php等。 1熟悉对象面板的表单工具按钮 单击插入面板上的“表单”，打开表单工具按钮如图。

19、2表单的属性面板 3. 制作表单网页 表单形式的自测题shiti.htm网页的效果如下图。 （1）新建网页及设置属性（2）在表单中插入表格（3）制作标题（4）表单中加入文本域（5）表单中加入单选按钮（6）表单中加入列表/菜单（7）表单中加入复选框（8）表单中加入文本区域（9）添加按钮（10）制作页面底部圆角的效果 7.4.7 模板的应用 模板是dreamweaver中提供的一种机制。通过模板技术，能够帮助网页制作者快速制作大量布局相似的网页。 1. 创建模板的方法 （1）直接创建模板 （2）将普通网页另存为模板 2. 模板的创建 （1）新建模板文件 （2）编辑模板文件 （3）保存模板文件 3使

20、用模板创建网页7.4.8 超级链接 超级链接是有效组织网站中各种对象的纽带。通过级链接，可以使分散的网页变成一个整体，可以使访问者方便地从一个网页转移到另一个网页，或者从网页的一个位置转移到另一个位置。 下面将通过网站clone的网页中建立超链接，介绍常用的超级链接的创建。 1. 创建文本的超级链接 (1)为网页文本添加超级链接 (2) 给菜单项添加超链接 （3）选择被链接文件将要打开的位置 （4）浏览网页 2. 搜索引擎添加超链接 将网站的网址http:/填入属性面板的链接列表框，与上不同的是，目标列表框后要选择blank，因为要在新窗口中打开搜狐网页，而不关闭原网页。 3. 框架中的文字加

21、超链接 4. 电子邮件地址加超链接 给电子邮件地址jiaoxue_加超链接，可以采用两种方法。7.4.9 创建样式表 样式表css（cascading style sheets）用来对网页的外观进行格式化。 下面为网站clone中的主页index.htm添加样式表。 1. 样式表的创建 创建样式表 .font文件，设置字体为宋体，字号为9 points，颜色为黑色，行间距为15 points。 （1）打开样式面板 （2）打开新建样式对话框 （3）选择新建样式表的类型 （4）定义样式 （5）应用新建的样式表格式化网页 2. 标记样式的创建及应用 下面要使用标记样式去除链接文字的下划线，并将有链接的文字字号设为12 points。html属于标记语言，很多标记都是成对出现。对于html中标记的样式的定义，被称为标记样式。比如，超级链接的文字就是位于标记（ ）之间，标记a的样式可以对链接的文字的格式进行设置。下面是具体设置的