网站建设与管理 教案

网站建设与管理授课方案（教案）

课程：网站设计开发教师：

班级：编写时间：

课题：中小型网站创建概述

教学目的及要求：

了解网站建设的目的，了解本学期本课程考核要求：掌握建设流程和网站的策划。

教学重点：网站的规划

教学难点：网站的有效规划

教学步骤及内容：

一、回顾自己了解的网站类型

二、学习新课

1.1网站建设的目的

企业的主页是企业在Internet上展示形象的门户，是企业开展电子交易的

基地，是企业网上的“家"，设计制作一个优秀的网站是建站企业成功迈向

互联网的重要步骤。

1.2有效的网站规划

知道了网站的用途后，我们即可进行网站内容的规划，在规划之前有一个

概念很重要，为谁而战，为何而战，很多网站这一点都做的不是很好，以

下便举一个例子作为介绍。

我们下面将以一个销售音响的公司作为介绍。

大部分的网站，在首页的主要链接项目如下：

公司简介最新消息经营理念产品介绍联络我们回首页

1.3网站建设的方案

1、自己公司建设

一般非网站建设公司想要建设一套可发挥网络行销效果的网站，其实成本

是相当高的。

2、购买套餐软件建设

3、外包专业网络公司建设

1.4关于动态网页和静态网页的区别

所谓静态网页就是指没有后台数据库、不含程序和不可交互的网页。你编

的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比

较麻烦,适用于一般更新较少的展示型网站。反之不符合静态网页概念的就

属于动态网页。

静态网页使用语言（超文本标记语言）在网站设计中，一般的静

态网页网址都是以.htm、.html、.shtml、.xml等为后后缀的，但是，并不

是说静态网页就没有动态的效果,有的静态网页也会有动态效果,如.GIF格

式的动画、FLASH,滚动字母等,动态网页使用语言:HTML+ASP或HTML+PHP

或HTML+JSP等。

区别静态网页与动态网页最重要的一点一一程序是否在服务器端运

行。这是最重要标志。

1.5网站的策划书的编写

根据每个网站的情况不同，网站策划书也是不同的，但是最终都不要

离开主的框架，那么在网站建设前期，我们要进行市场分析，然后总结一

下，形成书面报告，对网站建设和运营进行有计划的指导和阶段性总结都

有很好的效果。

网站策划一般可以按照下面的思路来进行整理，当然特殊情况要特殊

对待：我们按照门户网站、企业网站、个人网站的建设来分别进行框架定

位。

网站策划的大体思路如下：

1.5.1网站建设市场分析及网站的定位

我们把市场分析和网站的定位联系起来放在第一章，是因为它们

之间有所联系，我们要根据市场分析得来的情况对网站进行定位和目标调

整。与此同时，我们还要进行网站服务对象分析。

1.5.2网站服务对象分析

第一梯队服务对象：对我们网站具有很高依赖性，或者是我们网

站服务内容主要面向的对象。比如汽车配件网站，它的第一梯队服务对象

就是汽车配件供应商，汽车配件采购商以及汽车配件贸易公司等等。

第二梯队服务对象：对我们网站有兴趣，或者是第一梯队服务对

象替补（所以第一梯队服务对象替补就是一些本来应该是第一梯队服务对旁批栏:

象的，但对网站不了解，对互联网不认同的一些企业或个人。它们随时都

有可能成为第一梯队服务对象），或者是和本行业互补的一些企业和个人。

第三梯队服务对象：包括行业的研究者、学者、新闻媒体等等。

1.5.3网站的内容建设

在对网站进行市场分析调研和定位之后，我们要做的就是网站的

基础设施建设了，它包括网站的前台页面设计制作和网站的后台编程，在

网站全部做完之后还要进行网站测试和上传等工作。

1.网站设计

2.网站编程

1.5.4网站测试和上传

网站的设计和编程全部做完之后，我们要对网站进行测试和上传。

首先我们应该将网站上传到网站空间，然后对网站进行测试，同时也是对

网站空间进行测试。一般来说，网站测试需要进行的就是网站页面的完整

程度，网站编程代码的繁简程度和完整性，网站空间的链接速度和网站空

间的加压测试承受度。

1.5.5网站内容添加

1.5.6网站的推广

网站的推广可是说是网站建设中尤为重要的一部分，推广做的好

可以说网站建设就成功了一大半，那么怎么样进行推广呢？推广的方式有

哪些呢？让我们来看一下：

1.免费推广方式

2.付费推广方式

三、小结重点我们介绍了网站策划书的编写

四、作业

自己做一个网站策划书

网站建设与管理授课方案（教案）

课名：网站设计开发教师:

班级:编写时间:

课题:网站策划书的写法及应用

教学目的及要求：

掌握网站策划书的写法

教学重点：

网站策划书的写法

教学难点：

网站策划书的写法及应用

一、复习网站建立中用到的一些技术

二、学习新课网站的建设策划

网站策划的内容

一、建设网站前的市场分析

1、相关行业的市场是怎样的，市场有什么样的特点，是否能够在互联

网上开展公司业务。

2、市场主要竞争者分析，竞争对手上网情况及其网站策划、功能作用。

3、公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些

竞争力，建设网站的能力（费用、技术、人力等）。

二、建设网站目的及功能定位

1、为什么要建立网站，是为了树立企业形象，宣传产品，进行电子商

务，还是建立行业性网站?是企业的基本需要还是市场开拓的延伸？

2、整合公司资源，确定网站功能。根据公司的需要和计划，确定网站

的功能类型：

企业型网站、应用型网站、商业型网站（行业型网站）、电子商务型网站；

企业网站又分为企业形象型、产品宣传型、网上营销型、客户服务型、电子商务

型等。

3、根据网站功能，确定网站应达到的目的作用。

4、企业内部网（Intranet）的建设情况和网站的可扩展性。

三、网站技术解决方案（与专业公司商议）

根据网站的功能确定网站技术解决方案。

1、采用自建服务器，还是租用虚拟主机。

2、选择操作系统，用Window2003/NT还是Unix、Linux«分析投入成

本、功能、开发、稳定性和安全性等。

3、采用模板自助建站、建站套餐还是个性化开发。

4、网站安全性措施，防黑、防病毒方案（如果采用虚拟主机，则该项由

专业公司代劳）。

5、选择什么样的动态程序及相应数据库。如程序ASP、JSP、PHP;数

据库SQL、ACCESS、ORACLE等。

四、网站内容及实现方式（与专业公司商议）

1、根据网站的目的确定网站的结构导航。

一般企业型网站应包括：公司简介、企业动态、产品介绍、客户服务、

联系方式、在线留言等基本内容。更多内容如：常见问题、营销网络、招贤纳士、

在线论坛、英文版等等。

2、根据网站的目的及内容确定网站整合功能。

如FLASH引导页、会员系统、网上购物系统、在线支付、问卷调查系

统、在线支付、信息搜索查询系统、流量统计系统等。

3、确定网站的结构导航中的每个频道的子栏目。

如公司简介中可以包括：总裁致词、发展历程、企业文化、核心优势、

生产基地、科技研发、合作伙伴、主要客户、客户评价等;客户服务可以包括：

服务热线、服务宗旨、服务项目等。

4、确定网站内容的实现方式。

如产品中心使用动态程序数据库还是静态页面;营销网络是采用列表方

式还是地图展示。

五、网页设计

1、网页美术设计要求，网页美术设计一般要与企业整体形象一致，要

符合企业CI规范。要注意网页色彩、图片的应用及版面策划，保持网页的整体

一致性。

2、在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、

网络速度、阅读习惯等。

3、制定网页改版计划，如半年到一年时间进行较大规模改版等。

六、费用预算

1、企业建站费用的初步预算

一般根据企业的规模、建站的目的、上级的批准而定。

2、专业建站公司提供详细的功能描述及报价，企业进行性价比研究。

3、网站的价格从几千元到十几万元不等。网站建设的费用一般与功能

要求是成正比的。

七、网站维护

1、服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响

应时间。

2、数据库维护，有效地利用数据是网站维护的重要内容，因此数据库

的维护要受到重视。

3、内容的更新、调整等。

4、制定相关网站维护的规定，将网站维护制度化、规范化。

5、说明：动态信息的维护通常由企业安排相应人员进行在线的更新管

理;静态信息（即没用动态程序数据库支持）可由专业公司进行维护。

八、网站测试

网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试

内容：

1、文字、图片是否有错误。

2、程序及数据库测试。

3、链接是否有错误。

九、网站发布与推广

以上为网站策划中的主要内容，根据不同的需求和建站目的，内容也会

在增加或减少。在建设网站之初一定要进行细致的策划，才能达到预期建站目的。

老师讲解并举例分析：见上课的补充材料

1.绍兴团购网商业计划书

2.网站策划书参考模板

3.购物网站规划书

三、学生练习，学生课后根据自己选择的主题进行网站策划

四、作业。完成网站策划

网站建设与管理授课方案(教案)

课名：网站设计开发教师：

班级：编写时间：

课题:1.6-1.8节网站设计原则、色彩、布局

教学目的及要求：

掌握网站布局的设计方法

教学重点：

网站布局

教学难点：

网站布局

一、复习网站策划

二、学习新课

1网站设计原则

1.明确建立网站的目标和用户需求。根据消费者的需求、市场的状况、企

业自身的情况等进行综合分析，以“消费者(customer)”为中心，而不是以“美

术”为中心进行设计规划。明确设计站点的目的和用户需求，从而做出切实可行

的设计计划。

2.网页设计主题鲜明。在目标明确的基础上，完成网站的构思创意即总

体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。

3.版式设计之整体性。即设计作品各组成部分在内容上的内在联系和表

现形式上的相互呼应.并注意整个页面设计风格统一、色彩统一、布局统一，即

形成网站高度的形象统一。使整个页面设计的各个部分极为融洽。

4.版式设计之分割性。即按照内容、主题和信息的分类要求，将页面分

成若干板块、栏目，使浏览者一目了然。吸引浏览者的眼球，还能通过网页达到

信息宣传的目的，显示出鲜明的信息传达效果。

5.版式设计之对比性。在设计过程中，通过多与少、主与次、黑与白、

动与静、聚与散等对比手法的运用，使网页主题更加突出鲜明而富有生气.

6.网页设计的和谐性。网页布局应该符合人类审美的基本原则，浑然一

体。如果仅仅是色彩、形状、线条等的随意混合，那么设计出来的作品不但没有

生气、灵感，甚至连最基本的视觉设计和信息传达功能也无法实现。如果选择了

与主页内容不和谐的色调，就会传递错误的信息，造成混乱。

7.导向清晰。网页设计中导航使用超文本链接或图片链接，使人们能够

在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。我们

在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动

加载图片的观众能够了解图片的含义。

8.非图形的内容。由于在互联网浏览的大多是一些寻找信息的人们，我

们仍然建议您要确定您的网站将为他们提供的是有价值的内容，而不是过度的装

饰。

1.7网站页面色彩的规划

一般情况下要注意以下几点，1、忌讳使用强烈对比的颜色搭配做主色;2、

配色简洁，主色要尽量控制在三种以内;3、背景和内容的对比要明显，少用花纹

复杂的背景图片，以便突出显示文字内容。

1.8合理的网站栏目结构布局

合理的网站栏目结构主要表现在下面几个方面：

・通过主页可以到达任何一个一级栏目首页、二级栏目首页以及最终内

容页面；

・通过任何一个网页可以返回上一级栏目页面并逐级返回主页；

•主栏目清晰并且全站统一；

•通过任何一个网页可以进入任何一个一级栏目首页。

不同主题的网站对网页内容的安排会有所不同，但大多数网站首页的页

面结构都会包括页面标题、网站LOGO、导航栏、登录区、搜索区、热点推荐

区、主内容区和页脚区，其他页面不需要设置如此复杂了，一般由页面标题、网

站LOGO、导航栏、主内容区和页脚区等构成。

网页布局方法介绍

1.纸上布局法

2.软件布局法

1.8.3网页布局的技术

1.层叠样式表的应用

2.表格布局

3.框架布局

1.8.4网页布局的基本类型

网页布局只能在左右对称结构布局、“同”字型结构布局、"回”字型结构

布局、"匡”字型结构布局、“厂”字型结构布局、自由式结构布局、“另类”结构布

局等几种布局的基本结构中选择。

图片参见教材。

1.8.5网站首页布局设计

网站首页是网站给用户的第一印象，首页页面布局需从主题、导航、内

容等方面入手，下面以百度百科的页面为例进行首页页面布局分析。

1.首页主题

2.首页导航

3.首页内容

1.8.6内页与主页风格保持一致

1.内页与主页的结构要一致

2.内页与主页色彩要一致

3.内页与主页导航统一性

4.个别具有特色的元素贯穿全部网页

1.8.7网站内页如何布局

网站内页布局合理的方法，也就是难的方法：

1.内页的头部

网站的内页的头部应该都要一样，而且要独立的写出来，然后采取调用的方

法,这样就精简了网站的代码，给网站减肥，对网站有很大的好处。

2.网站的内页导航

3.网站内页链接的布局

4.还有一点就是上一页和下一页的布局

三、学生练习，学生根据上一课策划的网站，进行布局选择和设计

四、作业。完成网站布局

网站建设与管理授课方案(教案)

课名：网站设计开发教师：

班级：编写时间：

课题节网站的风格设计到网站发布

教学目的及要求：

掌握网站建设流程

教学重点：

网站建设的全过程介绍

教学难点：

网站建设的全过程介绍

一、复习网站布局

二、学习新课

1网站风格设计

网站的设计必须要形成自己的风格特色，特色就是优势。

所谓网站风格是指，网站页面设计上的视觉元素组合在一起的整体形象，展

现给人的直观感受。这个整体形象包括网站的配色、字体、页面布局、页面内容、

交互性、海报、宣传语等因素。

可以从颜色、线条和形状、版式等方面来进行设计.

2.网站建设的基本条件

网站设计基本条件是：

1.硬件条件

(1)域名：

(2)网站空间：

2.软件条件

1.11网站建设的常用方法

网站设计的方法很多，但常用的一般有以下几种：

1.静态网页组成的网站

2.动态网页组成的网站

3.动态网页数据库

4.WEB应用程序组成的动态网站

1.12网站建设的常用技术

本书我们介绍的是ASP技术，我们在此基础上在学习ASP.NET,PHP,JSP技

术。

1.13常用网站模块功能及说明

1.14中小型网站建设的基本流程

中小型网站的建设流程如下：

1.联系网站建设公司并提交要求

(1)向网站建设公司提出网站建设基本要求；

(2)提供相关文本及图片资料。

公司介绍

项目描述

网站基本功能需求

基本设计要求

2.制定网站建设方案

(1)双方就网站建设内容进行协商，修改、补充，以达成共识；

(2)网站建设方制定《网站建设方案》；

(3)双方确定建设方案具体细节及价格。

3.签署协议，并支付预付款

(1)双方签订《网站建设协议》；

(2)客户支付预付款；

(3)客户提供网站相关内容资料

4.完成初稿，经客户确认后进行建设

(1)根据《网站建设方案》)完成初稿设计：

首页风格

频道首页风格

网站架构图

(2)客户审核确认初稿设计；

(3)网站建设方完成整体网站制作。

5.网站开通，客户浏览验收

(1)客户根据协议内容进行验收工作；

(2)验收合格，由客户签发"网站建设验收合格确认书"；

(3)户支付余款，网站开通；

(4)为客户注册域名、开通网站空间、上传制作文件、设置电子邮箱。

6网.站交付使用

(1)验收通过后，网站正式交付使用。向客户移交所有的管理和登陆权限，

以便以后的网站更新和维护。

(2)网站建设公司提供免费的电话技术支持。

1.15网站内容制作的流程

网站创建流程如下：

(1)网站策划

网站策划包括主题策划、内容策划、风格策划、网站创意、目录设计、布

局策划等。

(2)明确网站开放对象

明确网站开放对象：当一个网站主题确定后，我们所要考虑的就是确定网站

服务对象，我们网站的真正浏览者是那些群体。只有正确的定位了网站浏览群体

后，才能真正体现网站的可观性。

(3)绘制网站草图

绘制网站草图，就是把网页的平面效果图画在一张纸上，便于以后的设计和

排版。说起来很容易，但实际上较为复杂，这往往是一个网站成功的关键因素。

当人浏览网站时。网页的精彩度是把握也是吸引浏览者的关键。

在做网站前，一定要先设计好平面效果图。把所有栏目摆放的具体位置和将

用到的一些什么图片一定要计划好。这样便于收集和制作。

(4)建立网站文件夹

(5)收集建站资源

收集网络资料、针对网站平面效果图及版块内容准备好所要用到的资料，然

后存放在对应的文件夹，以便在建站时调用。

(6)设计网站页面内容

(7)网上安家及域名申请

(8)网站发布

(9)网站宣传维护及管理

1.16网站内容制作的详细步骤

1.16.1网站主题策划

1.16.2网站风格和网站创意

1.16.3网站内容规划

在确定了网站主题和网站风格后，还需要考虑规划网站的内容。

1.16.4网站设计的技术路线

网站设计采用什么技术路线是网站策划的一部分。在动手制作网页之前，应

该首先明确网站的定位，从而选择适当的技术路线。互联网上的网站，按照功能

和性质大致可以分为个人网站、商业网站、学术机构和政府团体网站。

1.16.5网站栏目规划及布局目录设计

1.栏目与版块的划分

2.网站的目录结构策划

网站的目录是指在建立网站时所创建的目录。网站的目录设计与网站的栏目

版块设计密切相联，规划网站的目录结构要根据网站的主题和内容来进行分类规

戈U，不同的栏目对应不同的目录。

1.16.6导航设计

1.16.7链接设计

1.16.8网站资料搜集

1.16.9网页设计

在网站规划工作完成后，即可以开始网页设计。网页设计首先需要进行首页

设计。首页是网站的灵魂，一定要在首页设计上多下功夫，然后再设计一级页面、

二级页面，将一级页面、二级页面做成模板或者库进行保存，然后在设计其他一

级、二级页面时即可从模板新建网页或者插入库项目，这样维护起来更较为方便，

设计网页的速度也较快。

设计网页时要注意版面的规划。版面规划主要是如何突出主题内容，如何提

高网页下载打开的速度。

在本书后面章节将以一个企业网站“房产信息网”的建立来讲解网页设计的

基本技巧。

1.16.10网上安家

1.16.11域名申请

在申请网站空间后，接下来要考虑的问题是选择域名。域名被视为企业的网

上商标，其重要性不言而喻。

域名的申请知识及方法参见本书第7章相关内容。

1.16.12网站发布

网站在空间申请及域名申请好以后，则可以进行站点发布，将网站上传到服

务器上。发布站点的方法很多，可以采用Dreamweaver8/CS3/CS4/CS5/CS6

自带的发布站点功能或者采用专门的FTP发布工具进行网站发布。以上两种发

布网站的方法将在网站项目工程建设过程中进行详细讲解。

1.16.13网站宣传维护管理

三、学生练习，学生自己选择策划的网站进行网站的内容、风格设计

四、作业。了解网站建设全过程，并完成网站的主题、内容策划

网站建设与管理授课方案（教案）

课名：网站设计开发教师：

班级：编写时间：

课题:练习网站的策划

教学目的及要求：

掌握网站的策划

教学重点：

策划书的编写、网站的主题、内容、布局规划

教学难点：

策划书的编写、网站的主题、内容、布局规划

一、复习网站建设流程

二、学习新课

完成网站全过程的策划的与初步设计

1.策划书的编写

2.策划网站的主题

3.策划网站的内容

4.策划网站的布局

5.策划网站的风格和色彩等

6.空间和域名的策划

三、学生练习，完成网站的策划

四、作业。完成网站策划，编制完成的策划书

网站建设与管理授课方案（教案）

课名：网站设计开发教师：

班级：网络18011802编写时间：

课题：HTML结构及字体

教学目的及要求：

了解HTNL的结构及字体

教学重点：

了解HTML的概念及结构，字体的属性

教学难点：

HTML结构及字体属性

教学步骤及内容：

导入新课

1.了解学生的学习情况

2.介绍本门课的任务、教学目标、教学内容、教学方法、考评方法和教学

要求。

考评方法：平时成绩50%,考试50%,考查。

教学要求：每个同学完成一个简单的网站系统。

教学方法：理实一体化

一、介绍WEB客户端程序设计这门课程

学习这门课程的目的：让学生掌握HTMLCSSDW制作动态网站

的方法。

二、新课学习

1.HTML的概念

Html是英文HyperTextMarkupLanguage的缩写，中文意思是“超文

本标志语言”，用它编写的文件（文档）的扩展名是.html或.htm,它们是可供

浏览器解释浏览的文件格式。您可以使用记事本、写字板或Frontpage

Editor等编辑工具来编写Html文件。Html语言使用标志对的方法编写文

件，既简单又方便，它通常使用〈标志名＞＜/标志名＞来表示标志的开始和结

束（例如＜html＞＜/html＞标志对），因此在Html文档中这样的标志对都必须是

成对使用的。

当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML

（HyperTextMarkupLanguage）语言所构成。HTML（超文件标记语言）是

一种建立网页文件的语言，透过标记式的指令（Tag）,将影像、声音、图片'

文字等连结显示出来。

HTML标记是由<和>所括住的指令，主要分为：单标记指令、双标记

指令(由<起始标记>.</结束标记〉所构成)。HTML网页文件可

由任何文本编辑器或网页专用编辑器编辑，完成后(以.htm或.html为

文件后缀保存)将HTML网页文件由浏览器打开显示，若测试没有问题则

可以放到服务器(Server)上，对外发布信息。

2.HTML的结构

HTML文件基本架构

<HTML>文件开始

<HEAD>标头区开始

<TITLE>...</TITLE>标题区

</HEAD>标头区结束

<BODY>本文区开始

旁批栏:

本文区内容

</BODY>本文区结束

</HTML>文件结束

<HTML>网页文件格式。

<HEAD>标头区：记录文件基本资料，如作者、编写时间。

<TITLE>标题区：文件标题须使用在标头区内，可以在浏览器最上面看到

标题。

<BODY>本文区：文件资料•，即在浏览器上看到的网站内容。

注意事项

通常一份HTML网页文件包含二个部份：<HEAD>...</HEAD>标头

区、<BODY>...</BODY>本文区。而<HTML>和</HTML>代表网页

文件格式。

习惯上一个网站的首页名称通常订为index.htm或index.html这样

只要浏览网站，浏览器便会自动的找出index.htm文件。

3.HTML的字体

(1)文字样式设置的基本标签一<font>

设置字体样式的基本标签是<font></font>,被其包含的文本为样式作用区。

1.2.2设置文字的颜色

color是<font></font>标签的属性之一，用于设置文字颜色。在D:\web\目录

下创建网页文件，命名为font_color.htm,编写代码如代码1.7所示。

代码1.7字体颜色的设置：font_color.htm

<html>

<head>

<title>字体颜色的设置</title>

</head>

<body>

浅红色文字：<fontcolor="#ddOO（X）">HTML学习的本质就是该是什么就用什么</fonl><br/>

深红色文字：〈fontcolor="#660000">HTML学习的本质就是该是什么就用什么</font><br/>

浅绿色文字：<fontcolor="#00dd00">HTML学习的本质就是该是什么就用什么</font><br/>

深绿色文字：<fontcolor="#006600">HTML学习的本质就是该是什么就用什么</font><br/>

浅蓝色文字：〈fontcolor="#0000dd">HTML学习的本质就是该是什么就用什么</fonl"br/>

深蓝色文字：〈fontcolor="#000066">HTML学习的本质就是该是什么就用什么</font><br/>

浅黄色文字：（fontcolor="#ddddOO">HTML学习的本质就是该是什么就用什么</fonl><br/>

深黄色文字：〈fontcolor="#666600">HTML学习的本质就是该是什么就用什么</font><br/>

浅青色文字：<fontcolor="#00dddd">HTML学习的本质就是该是什么就用什么</font><br/>

深青色文字：〈fontcolor="#006666">HTML学习的本质就是该是什么就用什么</font><br/>

浅紫色文字：〈fontcolor="#dd00dd">HTML学习的本质就是该是什么就用什么</font><br/>

深紫色文字：<fontcolor="#660066">HTML学习的本质就是该是什么就用什么</font><br/>

</body>

</html>

在浏览器地址栏输入http://localhost/font_color.htm,浏览效果如图1.7所示。

1.2.3设置文字的尺寸

size也是vfont></fom>标签的属性，用于设置文字大小。size的值为1-7,默认为3。我们可以size

属性值之前加上“+”、“一”字符，来指定相对于字号初始值的增量或减量。在D:\web\目录下创建

网页文件，命名为font_size.hlm,编写代码如代码1.8所示。

代码1.8字体尺寸的设置：font_size.htm

<html>

<head>

字体尺寸的设置</title,

</head>

<body>

size为1:<fontsize="1">HTML学习</font><br/>

size为2：vfonlsize="2n>HTML学习</font>vbr/>

size为3:<fontsize=,'3,,>HTML学习</font><br/>

size为4：<fontsize="4">HTML学习</fonl>vbr/>

size为5：<fontsize=,,5,'>HTML学习</font><br/>

size为6：<fontsize="6">HTML学习v/font>vbr/>

size为7：<fontsize="7">HTML学习v/font><br/>

</body>

</html>

1.2.4设置文字的字体

face也是vfont></font>标签的属性，用于设置文字字体（字型）。HTML网页中显示的字型从浏览

端的系统中调用，所以为了保持字型一致，建议采用宋体，HTML页面也是默认采用宋体。在

D:\web\目录下创建网页文件，命名为fontface.htm,编写代码如代码1.9所示。

代码1.9字体字型的设置：font_face.htm

<html>

<head>

字体字型的设置</出招>

</head>

<body>

字型为宋体：<fontface""宋体">沁园春・长沙・毛泽东v/fontxbr/>

字型为楷体：<fonlface="楷体",沁园春•长沙-毛泽东</font><br/>

字型为黑体：<fbntface="黑体”>沁园春•长沙.毛泽东</font><br/>

字型为隶书：〈fontface二“黑体”,沁园春・长沙-毛泽东<仟0113

</body>

</html>

3.文字效果

vi>这是斜体文字v/i>

<em>这也是斜体文字</em>

用双标签<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的标题部分.<strong></strong>

被称为特别强调标签，也是文字加粗

1.2.7给文字加下划线

用双标签<u></u>可添加下划线到被作用文字。

练习

<html>

<head>

字体修饰的设置

</head>

<body>

<fontsize="5">斜体：园春・长沙•毛泽东</em><br/>

加粗体：〈strong〉沁园春•长沙-毛泽东v/strongxbr/>

下划线：<u>沁园春•长沙-毛泽东</u><br/>

斜体+加粗体+下划线：vem>vslrong><u>沁园春・长沙-毛泽东v/u></strong>v/em></font>

</body>

</html>

总结本次我们介绍了HTML的基本结构及字体属性，要求大家能上机操作掌握

作业：上机

网站建设与管理授课方案（教案）

课名：网站设计开发教师：

班级：网络18011802编写时间：

课题：HTML的表格及标示标记

教学目的及要求：

本次课使学生了解HTML的表格及标示标记，并能够上机操作，制作带表格的网页。

教学重点：

HTML表格属性

教学难点：

不同表格的设计

教学步骤及内容：

一、复习并导入新课

二、学习HTML表格

表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的

表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐旁批栏:

美观。

常用表格标记

<table>...</table>表格指令。

相关属性：

,align调整

,bgcolor背景颜色

•border边框

,height高度

,width宽度

<caption>...</caption>表格标题。

相关属性：

,align调整

<tr>...</tr>表格列（</tr>可省略）。

相关属性：

,align调整

<th>...</th>表格栏标题（表头）粗体字（</th>可省略）。

相关属性：

,align调整

,colspan栏宽

,rowspan栏高

<td>...</td>表格栏资料（储存格）（</td>可省略）.

相关属性：

,align调整

,bgcolor背景颜色

,height高度

,width宽度

,colspan栏宽

,rowspan栏高

举例

如：（基础型）

<tableborder=lalign=center>

vt»<td>太平洋网络学院vtd>太平洋网络学院

<tr><td>太平洋网络学院<td>太平洋网络学院

</table>

太平洋网络学院太平洋网络学院

太平洋网络学院太平洋网络学院

如：（加强型）增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。

<tableborder=lalign=centerbgcolor=#ccccff>

<caption>表格标题（/caption〉

<tr>

<td>

<thcolspan=2>行标题1

<thcolspan=2>行标题2

<tr>

<throwspan=2>歹ij标题1

<td>a<td>a<td>a<td>a

<tr><td>b<td>b<td>b<td>b

<tr>

<throwspan=2>列标题2

<td>c<td>c<td>c<td>c

<tr><td>d<td>d<td>d<td>d

</table>

表格标题

行标题1行标题2

aaaa

列标题1

bbbb

cccc

列标题2

|dd|dd

三、学习标示标记

标示

html提供许多种类的标示标记，作项目标示，而且可以作巢状式标示!

常用标示标记

<li>标示项目o

如：

<ol>

vli>第一项

<li>第二项

</ol>

第一项

第二项

<01>...</01>编号标示，可标示数字或英文、罗马字母。

如：

<oltype=i>

<li>第一项

<li>第二项

</ol>

第一项

第二项

<ul>...</ul>符号标示，可标示数字或英文、罗马字母。

如：

<ul>

<li>第一项

<li>第二项

</ul>

第一项

第二项

<dt>定义项目。

<dd>定义资料。

<dl>...</dl>定义标示。

如：

<dl>

<dt>十进制：<dd>0、1、2、3、4、5、6、7、8、9

<dt>十六进制：<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

</dl>

十进制：

0、1、2、3、4、5、6、7、8、9

十六进制：

0、1>2、3、4、5、6、7、8、9、a、b^c、d>e^f

巢状式标示

巢状式标示如：

第一章

<oltype=i>

<li>第一节

<ul>

<li>第一段

<li>第二段

</ul>

<li>第二节

</ol><li>第二章

<li>第三章

</ol>

第一章

第一节

第一段

第二段

第二节

第二章

第三章

其他标示标记

<dir>...</dir>目录式标示（自动加圆点）。

如：

网络学院：

<dir>

<li>新手上路

<li>软件教室

<li>设计教室

<li>开发教室

</dir>

网络学院：

新手上路

软件教室

设计教室

开发教室

注意事项

标示项目符号也可以用<font>...</font>标记，以符号字元（。、♦、

◎、★、■…等）标示。

如:<fontcolor=#ff（X）OO>•</font>

四.学生上机操作

要求手写代码，不能直接复制。

五.总结

六.作业。完成表格和标示标记的练习

网站建设与管理授课方案（教案）

课名：网站设计开发教师：

班级：网络18011802编写时间:

课题：链接图片

教学目的及要求：

学习链接图片的标记和代码

教学重点：

掌握链接图片代码

教学难点：

HTML链接及图片添加方法。

回顾表格、文字和基本的HTML标记

学习链接及图片标记

链接可说是html中最重要的功能！因为html拥有链接的功能，使你能接

上internet、www享受多姿多彩的网络世界。<a>...</a>链接指令。

相关属性：

•href链接的url位址或文件

,name名称

target指定链接到的url位址或文件显示于那一个视窗（可和<frame>视

窗标记配合使用或开新的视窗）

如：

外部链接

<ahref="http:"/">・</a>

<ahref="http:///"target=frame1>■</a>

内部链接

,chl.htm文件

<ahref=#a>H</a>（欲链接至html文件a点）

<aname=a>・</a>（html文件a点）

,ch2.htm文件

<ahref=chl.htm#a>・</a>（欲链接至chl.htm文件a点

"■"表示链接点，可以是文字或图案。（即游标移到时，会变成手指形

状的地方）

<link>链接指令（用于head区，设定css文件）。

<meta>储存应用资讯，可设定时间载入网页（用于head区）..

相关属性：

,charset设定

•content回应表头资料内容，若是数字表示秒数

,http-equiv回应表头，若设定为refresh载入url设定

,urlhtml位置

如：

设定中文自动跳行。

<metahttp-equiv="content-type"content="text/html;charset=gb2312">

•设定十秒回到首页。（若不设定html文件位置则再载入原html文件）

<metahttp-equiv="refresh"content=10url=index.htm>

设定链接、未链接部份颜色

设定链接、未链接部份颜色，用vbody>...v/body>标记。

相关属性：

•alink按下链接部份未放开时颜色

,link未看过的链接部份颜色

•vlink已看过的链接部份颜色

如:<bodylink=#0000ffalink=#ffOOOOvlink=#OOffOO>

图片添加方法

设定图片。<img>标记。

设定地图。vmap>...</map>标记。

常用图片标记

<img>指令

相关属性：

•align调整

•alt提示字

•border边框

,height高度

,src文件或url位址

•usemap地图名称

•width宽度

如：可插入图片（gif、jpg格式）、avi电影

<center>

<img51第”../../../血&8©$仅©<111」0g「"11二"太平洋网络学院”@电11二功border=l>

</center>

<map>...</map>地图

相关属性：

,name名称

<area>设定地图动作区域

相关属性：

•coords设定动作区域座标（左上角座标：xl,yl;右下角座标：x2,y2）

•href动作区域连结点（可载入位址或文件）

•nohref动作区域连结点不动作

,shape外型

举例

设定地图

<imgborder=0src=a.gifusemap=#a>

<mapname=a>

<areashape=rectcoords=0,0,200,100href=l.htm>

<areashape=rectcoords=0,100,200,200nohreft>

<areashape=rectcoords=0,200,200,300href=3.htm>

</map>

四、上机练习并总结

五.作业学生自己配置环境演示新闻发布系统网站

网站建设与管理授课方案（教案）

课名：网站设计开发教师：

班级：网络18011802编写时间：

课题：声音和滚动条

教学目的及要求:

学习HTML的声音和滚动条的代码。

教学重点：

掌握掌握声音加入和滚动条跑马灯加入的方法

教学难点：

掌握掌握声音加入和滚动条跑马灯加入的方法。

一、复习

二、学习新课

1.声音

html不仅能插入图片，也可以载入midi音乐、wav音效喔！

常用音乐标记

<bgsound>背景音乐、音效。

相关属性：

•loop循环，背景音乐播放次数

,src文件或url位址（可为wav、midi格式）

如：

<bgsoundsrc=m-1.midloop=true>

内嵌音乐插件

<embed>...</embed>内嵌插件。

相关属性：

,height高度

•width宽度（可设百分比％）

,src设定内嵌物件的url位址

•loop循环，背景音乐播放次数

,autostart自动播放

如：

<embedsrc=m-l.midwidth=145height=60autostart=trueloop=true></embed>

【文字卷动标记】

<marquee>...</marquee>文字卷动（滚动条）。

【相关属性】

,behavior=设定卷动方式

—alternate交替来回卷动

-scroll卷动（预设）

-slide滑动

•bgcolor=color背景颜色

•direction=设定卷动方向

,height=n高度

•loop=n循环，卷动次数（预设循环）

,scrollamount=n设定卷动距离

•scrolldelay=milliseconds设定卷动时间

,truespeed=milliseconds设定卷动速度

•width=n宽度（可设百分比%）

【举例】

如：〈marqueebgcoloi-redbehavior=altematedirection=leftscrollamout=10

scrolldelay=100><fontcolor二white〉太平洋网络学院<开0①></01@吗11©©>

如：<marqueebgcolor=greenheight=5Obehavior=scrolldirection=up

scrollamout=10scrolldelay=300><fontcolor=white>〈center>太平洋网络学院

</center></fbntx/marquee>

复习HTML代码

网站建设与管理授课方案（教案）

课名：网站设计开发教师：

班级：网络18011802编写时间：

-课题：提供一个网页的图片，完成网页的首页制作

教学目的及要求：

DreamweaverCS6与HTML结合，实现首页的制作

教学重点：

HTML的标记的综合应用

教学难点：

HTML的标记的综合应用

一、复习

二学习新课

提供一个图片，然后提供一些切片图片，学生通过HTML和DW完成首页的制作

旁

批

栏:

会员登隘［公司新问〉雇务项目

快遑递送公司.主要业务是援供西安市内、GB内.田际，文

用丹

件、包裹和货物配送服务的专业公司•训姓有案的遑通人员；

S网：|机动灵活的车队；电周雌提调度指挥系统.先进的全喷

餐录|清除|叫中心系斑充分愠保证客户的快怦及物融递安全睢确通送

就用户汪田

复卬打字翻译

联系我们

便利服务装订、塑封名片制

名称：西安古班快询津公司

办公用尉日售金色数吗冲印吉利/鲜花礼品

峨：西到i长安中的斓

电g/p>

传X/p>

电即•x&l11858126.con

酸实名：酸螃

法律声明Insoff।联系物n|

三、学生上机操作，通过DW做一个框架，然后修改HTML代码完成网页

四、作业。

网站建设与管理授课方案（教案）

课名：网站设计开发教师：

班级：网络18011802编写时间：

课题：建立数据库

教学目的及要求：

建立ACCESS数据库

教学重点：

操作数据库

教学难点：

掌握ACCESS数据库的操作方法

一、复习复习HTML

二、学习新课

1.安装ACCESS

2.建立ACCESS数据库并保存

3.建立ACCESS数据表并保存

注意字段名称、字段类型，举例说明：如用户表、新闻表的创建。

自动

本

文

本

文

本

文

本

文

期

日

字

额

党

最

4.输入字段和编辑字段内容：操作数据表，如增加、删除等。

三、学生上机操作，完成数据库及表的设计

四、作业。

网站建设与管理授课方案（教案）

课名：网站设计开发教师：

班级：网络18011802编写时间：

课题：构建动态网站开发环境

教学目的及要求:

掌握开发环境是哪些？掌握配置方法

教学重点：

开发环境的配置方法

教学难点：

开发环境的配置方法

一、复习复习HTML

二、学习新课

从今天开始我们学习动态网站

1.动态网站的概念

所谓“动态”，并不是指GIF动态图片、FLASH,滚动字幕等，我们为动态页面的概

念制定了以下几条规则：

(1)、“交互性”：即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客

户端界面，这将是今后WEB发展的大事所趋。

(2)、“自动更新”：即无须手动地更新HTML文档，便会自动生成新的页面，可以大大

节省工作量。

(3)、“因时因人而变”：即当不同的时间、不同的人访问同一网址时会产生不同的页面,

是不是很酷？

2.动态网站的种类：ASPASP.NETPHPJSP

3.动态网站的发展趋势：.NETJSPPHP发展，ASP是基础

4.ASP动态网站的开发环境包含哪些？

♦安装并配置IIS的方法。

♦默认网站的配置方法。

♦新建网站的配置方法。

♦虚拟主机网站的配置方法。

♦本地站点的定义的方法。

5.ASP动态网站的相关知识

ASP文件

ASP文件由文本、HTML标记、ASP脚本命令等几部分组成。

ASP程序工作原理

数据传送

客户端服务器数据库

数据反馈

(1)客户端输入网页地址(URL),通过网络向服务器发送一个ASP的文件请求。

(2)服务器开始运行asp文件代码，从数据库中取需要的数据或写数据。

(3)服务器把数据库反馈的数据发送到客户端上显示。

♦配置ASP运行环境简介

要使用ASP创建动态网页，首先要从硬件和软件方面配置好A