全屏显示专题章节

HTML(hyper text markup language)又叫超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如Unix、Windows等)。自20世纪90年代以来，HTML就一直被用作万维网(world wide web)上的信息表示语言，用于描述网页的格式设计和它与万维网上其他网页的链接信息。

HTML通过利用各种标记(tags)来标示文档的结构以及超链(hyperlink)的信息。虽然HTML描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议Web浏览器(如Mosiac、Netscape等)应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。

2.HTML的标记语法

HTML的标记总是封装在由小于号(＜)和大于号(＞)构成的一对尖括号之中，包括以下类型：

(1)单标记。某些标记称为“单标记”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：

最常用的单标记是＜P＞，它表示一个段落(paragraph)的结束，并在段落后面加一空行。

(2)双标记。与单标记相对应的另一类标记称为“双标记”，它由“始标记”和“尾标记”两部分构成，必须成对使用，其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠(/)即成为尾标记。这类标记的语法是：

＜标记＞内容＜/标记＞

其中“内容”部分就是被这对标记施加作用的部分。例如，你想突出对某段文字的显示，就将此段文字放在一对“＜EM＞＜/EM＞”标记中：

＜EM＞中国教学案例网＜/EM＞

这样标记的结果是“中国教学案例网”被突出显示出来。

(3)标记属性。许多单标记和双标记的始标记内可以包含一些属性，其语法是：

各属性之间无先后次序，属性也可省略(即取默认值)，例如单标记＜HR＞表示在文档当前位置画一条水平线(horizontal line)，一般是从窗口中当前行的最左端一直画到最右端。在HTML3.0中此标记允许带一些属性：

＜HR SIZE=3 ALIGN=LEFT WIDTH=“75%”＞

其中SIZE属性定义线的粗细，属性值取整数，缺省为1;ALIGN属性表示对齐方式，可取LEFT(左对齐，缺省值)、CENTER(居中)、RIGHT(右对齐);WIDTH属性定义线的长度，可取相对值(由引号“”括起来的百分数，表示相对于充满整个窗口的百分比)，也可取绝对值(用整数表示的屏幕像素点的个数，如WIDTH=300)，缺省值是“100%”。

3.HTML的文档结构

除了一些个别的标记外，HTML文档的标记都可嵌套使用，通常由三对标记来构成一个HTML文档的骨架，它们是：

其中＜HTML＞在最外层，表示这对标记间的内容是HTML文档。＜HEAD＞之间是文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。我们还会看到一些网页省略＜HTML＞标记，因为.html或.htm文件被Web浏览器默认为HTML文档。＜BODY＞标记一般不省略，表示正文内容的开始。

5.HTML标记的常用属性

许多HTML标记都使用一些共同的属性，下面是最常用的属性：

●accesskey=“character”——可以键入一个字符来访问文档的元素

●align=“text”——文档中某部分的布局信息

●alt=“text”——用来描述图片、表单、对象或其他部分的替代文本

●char=“character”——在对表格的内容进行排列时，作为排列轴心的字符

●charoff=“number”——在排列表格内容时，轴心字符的偏移量

●class=“text”——文档元素的一个或多个类别名称，中间用空格隔开

●dir=“text”——文本或表格的方向，或者是“ltr”(left-to-right)，或者是“rtl”(right-to-left)

●disabled——使一个表单控件失效的属性，这样它就不能处理用户输入

●id=“text”——给文档元素的名称

●name=“text”——文档元素的名称

●onblur=“script”——当文档元素失去其用户输入焦点时所发生的事件

●onchange=“script”——当文档元素失去其用户焦点以及在有焦点时该值被改变时所发生的事件

●onclick=“script”——当用户在文档元素中点击鼠标时发生的事件

●ondbclick=“script”——当用户在文档元素中双击鼠标时发生的事件

●onfocus=“script”——当文档元素得到用户输入焦点时所发生的事件

●onkeydown=“script”——当一个键被按下时所发生的事件

●onkeypress=“script”——当一个键被按下又释放时所发生的事件

●onkeyup=“vscript”——当一个键被释放时所发生的事件

●onload=“script”——当整个文档或框架集中所有框架被加载时所发生的事件

●onmousedown=“script”——用户将鼠标置于某一文档元素中单击鼠标时所发生的事件

●onmouseout=“script”——当鼠标从一个文档元素中移开时所发生的事件

●onmouseover=“script”——当鼠标移过一个文档元素时所发生的事件

●onmousemove=“script”——当鼠标在一个文档元素中移动时所发生的事件

●onmouseup=“script”——在一个文档元素中当用户释放鼠标时所发生的事件

●onreset=“script”——当一个表单中的所有控件都被重新设定时所发生的事件

●onselect=“script”——当文本编辑用户控件中的文本被选中时所发生的事件

●onunload=“script”——当文档不再加载在窗口或框架中所发生的事件

●readonly——指示表单控件中的值不能被编辑

●style=“text”——单个文档元素的样式信息

●tabindex=“number”——文档元素在表格中的顺序位置

●target=“text”——文档应被打开的框架名称

●title=“text”——文档元素的解释文本

●usemap=“URI”——与文档元素相连接的图片映射的URI，该元素必须与现存的＜MAP＞元素的名称属性相匹配

●valign=“text”——表格单元格中信息的垂直排列

(二)中国教学案例网的设计与制作

“中国视频教学案例库”以“立足本土企业，服务中国高校”为宗旨，重点将本土企业最优秀的管理案例转换成视频教学案例，并充分展现在亿万高校学子面前，克服国外教学案例在中国教学中水土不服的现象，填补国内高校视频教学案例的空白，既为本土企业的发展做下笔录，也为高校教学的改革提供资源与支持。因此，为推动中国高校案例教学的发展，以“中国视频教学案例库”为资源背景的、专业化的视频教学案例展示平台——“中国教学案例网”诞生。

根据“中国教学案例网”建立的目的，我们对其核心功能考虑如下：

视频教学案例是本网站的主要卖点。除了视频教学案例之外，网站还会发布与“视频案例”对应的“文字案例”以及从各种渠道收集来的“传统型文字案例”;同时，在视频案例的制作过程中，与之相关的“视频素材”也会在网上陈列。

作为一个共享平台，“中国教学案例网”还为高校教师提供视频、文字案例之外的其他教学资源，如一些教学课件等。针对高校教学对象大学生群体，“中国教学案例网”为了让其获取更多的课堂资源与课外资源，还会提供专门的学生资源，并将案例企业更加深入地展现在他们面前，为其今后的就业、择业提供更加详尽而真实的信息。

论坛也是“中国教学案例网”的一个需求设置，能将高校教师及学生集合起来，从而将资源共享的平台越做越大。

此外，研究视频教学案例的专家团队也会在网站上予以介绍，其目的是吸引更多的精英人才加入“视频教学案例研究中心”，从而为视频教学案例的发展提供更精良的人才储备，为中国教学事业的改革提供更有力的支持。

根据网站的核心功能，我们按照网站的需求将网站的栏目和框架规划如下(表1-1)：

1.设计网站的页面

在规划好“中国教学案例网”的网站栏目及框架后，设计出的网站页面效果如下：

(1)首页。“中国教学案例网”的受众主要为高校教师、学生以及案例企业的管理人员，因而在色彩的应用上，需活泼而不失庄重，具有科学、教学的严肃性，所以，最后选择以蓝色和橙色为主打色，辅以红色和白色。

根据网站的功能需求及设计需要，LOGO、一级菜单、“网站主页”、“联系我们”按钮位于最顶端，其下分布“搜索栏”、“帮助信息栏”和“滚动信息栏”。中心区域的四个栏目——最新推荐、近期访谈、名企追踪、热点上传由两个图片/动画位隔开。网页右侧按需求设置了会员登录/注册窗口、学生兴趣调查、合作伙伴、本站友情链接四块内容。最下端为网站主页、关于本站、联系我们、广告服务、版权说明、ICP经营许可证号等必备内容。网站首页详见图1-1。

(2)二级页面。二级页面的整体框架与主页相同，仅中心区域的内容被相应子菜单的内容所替代，见图1-2。

视频案例：每个视频教学案例均按照“图片+标题+说明”的形式设计，并设置了“免费获取”按钮，点击图片、标题或按钮，即可进入三级页面。但仅限通过“中国教学案例网”注册的高校教师下载。

文字案例(图1-3)：每个文字案例均以标题的形式进行排列，点击标题，可直接在三级页面中阅读文字案例的具体内容。此部分内容对所有浏览者公开。

教师资源(图1-4)：教师资源的显示形式与视频案例相同，点击图片、标题或“免费获取”按钮，进入免费获取的三级页面，此内容只有通过“中国教学案例网”注册的教师会员才能获取。

学生资源(图1-5)：学生资源与教师资源同位于教学资源子栏目下，且与教师资源的显示形式相同，点击图片、标题或“免费获取”按钮，进入免费获取的三级页面，此内容只有通过“中国教学案例网”注册的会员才能获取。

企业在线(图1-6)：此栏目的企业都与“中国教学案例网”进行了视频教学案例合作项目，点击该页面的企业图片、企业名称及“查看详情”按钮，均可进入相应企业的三级页面。

名流访谈(图1-7)：在视频教学案例的制作过程中，需要与案例企业进行深入沟通，尤其是企业的高层管理人员。“中国教学案例网”将合作过程中的采访素材编辑后，组合成名流访谈栏目，供广大学生学习、下载。点击每个访谈的图片、标题或“免费获取”按钮可直接在线观看或下载，此栏目只有通过“中国教学案例网”注册的会员才能下载。

研究中心(图1-8)：包括研究中心简介及成员介绍，传达了“中国教学案例网”的最终目标，并详细介绍了视频教学案例研究中心的每一位专家。点击照片或“详细介绍”按钮，可查看专家的详细资料。

(3)三级页面。免费获取页面：免费获取页面中的信息主要是为了帮助老师注册成为“教师会员”并签订《视频教学案例使用协议》，以便及时获取所需资源，同时保护视频教学案例的版权，见图1-9。

文字案例页面：此页面为文字案例的内容显示页面，任何浏览者均可无偿查阅此内容，见图1-10。

案例企业页面：案例企业的具体页面中，显示了案例企业的简介及案例企业的相关信息。点击信息标题，可直接查看每条信息的详细内容，见图1-11。

成员介绍页面：网站对每一位视频教学案例研究中心的专家的详细介绍，可让浏览者进一步了解每位专家的特长及“中国教学案例网”的智囊团，见图1-12。

(4)新窗口页面。企业信息页面：新页面中显示了企业相关信息的详细内容，可直接查看，见图1-13。

财富共享页面：财富共享实质是一个论坛，通过论坛注册的会员，可阅览、下载论坛中的资源，也可上传自己的资源与大家共享，但需通过版主审核，见图1-14。

2.申请网站的域名与空间

网站的域名需与网站的中文名称形成对应，同时还要容易记忆，不易与其他网站域名混淆。确定好网站的域名后，便可到专门的网站(如中国万网、中国频道等)申请域名。

(1)不一定要在网站建成后才去申请域名，尤其是比较好的域名，更要抢先注册，以防止他人恶意抢注。

(2)建成后的网站需要空间来存放网站内容，才能正式上线，可根据网站功能及需求购买相应的空间，目前很多网络服务商都提供空间。

3.填充网站内容与上线测试

各功能模块及网站的整体框架建成后，便可填充内容，并上线测试。

填充了内容、处于测试阶段的“中国教学案例网”的首页截图如图1-15所示：

4.正式发布网站

如果在测试过程中，没有出现缺陷、功能不完善或其他问题，则可以正式上传到网络空间;若有问题，则需要调试无误后，再上传到网络空间。

正式上线后的“中国教学案例网”首页截图如图1-16所示：

经过一段时间的运行后，可能会发现一些问题，此时就需要对网站进行升级改版。“中国教学案例网”也是一样，为了更加突出“视频教学案例”这一特色产品，在运行一段时间后进行了升级改版。

此次改版，主要调整如下：

(1)改变导航栏内容。导航栏菜单从左到右依次改为：视频案例、文字案例、案例教学、案例企业、案例素材、研究中心。

(2)改变主页面的显示内容。原“最新推荐”保持不变;原“近期访谈”改为“热点案例”，形式保持不变，由“视频案例”栏目推荐而来;原

“名企追踪”改为“案例企业”;原“热点上传”改为“精选素材”，由“案例素材”栏目推荐而来。

(3)改变部分栏目的显示方式。在“视频案例”页面中添加“案例片断在线观看”链接，而“免费获取”按钮则链接到“视频案例”的下载地址。