创建站点

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

教案首页
（以2课时为单元）
课序：1
第一章第1—2节第二章第1—2节
目的要求：
通过此节的学习，读者应掌握网络相关的基础知识，了解网页制作工具，掌握HTML语言，掌握dreamwever工具的使用，掌握站点创建方法，掌握简单网页的制作。

教学内容：
1.internet基础
2.网页制作工具
3.HTML语言的语法结构
4.利用HTML语言制作简单网页
5.Dreamweaver工具界面
6.了解并掌握站点的创建
7.掌握简单网页的制作
重点与难点：
重点：HTML语言和站点的创建
难点：HTML语言
教学方法：多媒体教学
手段：课程讲授为主，学生讨论练习为辅。

教学步骤：
1.首先介绍当前internet发展情况，然后导入WWW、IP及域名、网页及网站
的概念。

2.首先介绍dreamweaver工具，然后讲解站点的创建和简单网页的制作。

复习提问：
作业题目：
习题1-2
预习内容：浏览网站，分析网站结构特点及配色特点。

第1章网页设计基础知识
本章主要介绍了网页设计前需要了解的准备知识，如网络基础知识、网页制作工具以及HTML语言等。

【本章学习目的】
通过本章的学习，读者应了解与网络相关的基础知识，了解网页制作工具，掌握HTML 语言。

一、Internet基础
1、Internet概述
Internet是相互连接的网络集合。

网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。

Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、在线聊天、网上购物等等，而其中WWW和E-mail是最常用的服务。

2、WWW
WWW(World Wide Web)简称为万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。

3、网页与网站
什么是网页？什么是网站？两者有什么样的联系与区别呢？
构建WWW的基本单位是网页。

网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。

通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。

4、域名与IP地址
在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP 地址。

IP地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔，比如：202.100.4.11。

域名系统是一个分层的树状结构组织。

最上面是一个无名的根域，下层为顶级域名，接着是二级……
顶级域名的分类：从组织上和地理上分类，顶级域名的管理和分配由internet网络信息中心控制，网址为：。

美国采用的组织分类形式，而其它国家采用的是地理上分类，用代表国家或地区的顶级域名，中国国内域名由中国互联网信息中心控制，网址为：。

域名的书写格式为：叶节点名.二级域名.顶级域名
例如：，www：web服务器名，sohu：企业名称，com：顶级域名。

二、网页制作工具
目前网页制作工具较多，大多数网页的制作都是通过“所见即所得”的编辑工具完成的，在网页制作过程，还需要进行素材的创作和加工，即图形和动画制作工具。

1、网页编辑工具
网页编辑工具主要分为标记型和所见即所得型。

所见即所得型的编辑软件主要有：微软的Frontpage和Dreamweaver。

其中Frontpage 继承了OFFICE系列软件的界面通用、操作简单的特点，十分适合初学者使用。

但Frontpage与MacroMedia公司的Dreamweaver相比，在HTML源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，本教材主要介绍的网页编辑工具是Dreamweaver。

2、图形和图像处理工具
目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件：Photoshop和MacroMedia公司推出的Fireworks（MacroMedia公司也已被Adobe公司收购）。

Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了Image Ready，能够实现各种专业化的图像处理、动画的制作等。

有兴趣的读者可查阅相关的参考书研究和学习。

Fireworks是由MacroMedia公司出品的首选WEB图形图像处理软件。

它的独特之处在于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成Fireworks HTML，直接导入到网页中，使用非常方便。

本教材将在以后的章节做详细的介绍。

3、动画制作工具
Flash是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。

Flash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。

三、HTML语言
网页的本质是HTML，HTML即为超文本标记语言，超文本使网页之间具有跳转能力，使浏览者可以选择阅读路径。

使用HTML编写的WEB页面称之为HTML文件，这种文件一般以“html”或者“htm”为扩展名，使用网页编辑工具创建HTML文件。

1、HTML语法结构
HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：
<标签>HTML语言元素</标签>
标签分为成对标签和非成对标签，比如：<table>…</talbe>，而<br>、<hr>等属于非成对标签。

标签忽略大小写，书写格式非常灵活。

可使用标签的属性来进一步限定标签，一个标签可以有多个属性项，各属性项的次序不限定，各属性项之间用空格来进行分隔。

例如：<img src="images/girl.gif" width="100" height="87">。

HTML中使用的注释语句为，注释内容可插入文本中任何位置，注释内容不会显示在网页中。

例如：
2、常见的HTML标签
1.<HTML>…</HTML>
2.<HEAD>…</HEAD>
<title>…<title>
●<meta …>
3.<BODY>…</BODY>
(1)<P>…</P>
(2)<FONT>…</FONT>
(3)<IMG>
(4)<A>
(5)<table>…</table>
●<caption>…</caption>表格标题标签，定义表格的标题。

●<tr>…</tr>表格的行标签，定义表格中的一行。

●<td>…</td>表格的单元格标签，定义表格行中的一个单元格。

第2章创建站点
本章主要介绍了Dreamweaver 8的主要功能、工作界面及各个面板的用途等。

【本章学习目的】
本章重点讲解了Dreamweaver 8工作界面的组成、常用的工具面板和工具栏的功能等，通过学习，读者应了解Dreamweaver 8功能以及面板的使用方法，掌握创建站点的方法。

一、Dreamweaver MX 8工作界面
Dreamweaver是集网页制作和网站管理于一身的网页制作软件，它是专门为网页设计师量身定制的可视化网页制作软件，利用它可以方便、快捷地制作跨平台和跨浏览器的动感网页。

Dreamweaver 8是Dreamweaver 系列产品的最新版本，它在原来版本的功能基础之上进行了改进和升级，功能更加强大，而且界面更美观、操作更方便，也更适于网页制作和网站管理。

二、定义本地站点
在Dreamweaver中，“站点”一词既表示Web站点，又表示属于Web站点的文档的本地存储位置。

在开始构建Web站点之前，您需要建立站点文档的本地存储位置。

Dreamweaver 站点可组织与Web 站点相关的所有文档，跟踪和维护链接、管理文件、共享文件以及将站点文件传输到Web服务器上。

要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作，放置在本地磁盘上的网站被称为本地站点，传输到位于互联网web服务器里的网站被称为远程站点。

Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。

因而应用Dreamweaver 8不仅可以创建单独的文档，还可以创建完整的Web站点。

1、创建站点
在Dreamweaver 8中可以有效的建立并管理多个站点。

创建站点有两种方法，一是利用向导完成，二是利用高级设定来完成。

2、管理站点
单击“站点”菜单｜“管理站点”命令，弹出“管理站点”对话框，进行新建、编辑、删除、复制站点等操作。

3、创建网页
在建好站点之后，就是创建网页。

●新建网页
●保存网页
●网页制作过程
第一步，在“文档”工具栏中输入网页标题，将在浏览器的标题栏中显示。

第二步，添加背景图像。

单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，选择“外观”选项，设置背景图像。

第三步，输入文字，居中对齐。

第四步，插入FLASH动画。

第五步，插入图像。

教案首页
（以2课时为单元）
课序：2
第一章第1—2节第二章第1—2节
目的要求：
通过此节的学习，读者应掌握网络相关的基础知识，了解网页制作工具，掌握HTML语言，掌握dreamwever工具的使用，掌握站点创建方法，掌握简单网页的制作。

教学内容：
1.internet基础
2.网页制作工具
3.HTML语言的语法结构
4.利用HTML语言制作简单网页
5.Dreamweaver工具界面
6.了解并掌握站点的创建
7.掌握简单网页的制作
教学内容：
1. internet的概述
2.HTML语言
3.如何创建站点；
4.掌握简单网页的制作
5.掌握站点的测试与发布
重点与难点：
重点：HTML语言和站点的创建
难点：站点的创建
教学方法：上机实训
手段：学生实操为主，教师辅导为辅。

教学步骤：
HTML语言简介；
创建站点和制作简单的制作。

复习提问：
作业题目：
预习内容：
网页更深层次的编辑
上机实训
1.背景知识
根据已经掌握的网络知识和本章学习的html语言的知识，编写简单网页的源代码；浏览网站，分析网站的特点。

根据本章所学的内容，创建站点和创建网页。

2.实训准备工作
保证internet连接畅通，学生主机安装相应的网页设计与制作软件：dreamweaver、fireworks、flash、photoshop等。

在本地硬盘创建一个空文件夹myweb，并建一个子文件夹images。

3.实训要求
(1)打开浏览器，浏览某个网页，查看其源代码，了解HTML代码的含义。

(2)打开记事本，试用HTML语言编写一个简单的网页，网页中要包含以下内容：网
页标题、文字、图像、超链接等。

(3)上网浏览不同的电子商务网站，比如：淘宝、联想等，分析站点结构、站点风格及
网页配色等，写出分析报告。

(4)创建站点和创建网页要求：定义本地站点和新建一个网页并进行编辑。

4.课时安排：2课时
5.实训指导
(1)如何查看网页源代码？
打开浏览器，点击“查看”菜单｜“源文件”命令。

(2)如何编写HTML代码？
打开记事本，手工编写HTML代码，注意HTML代码的编写顺序及网页元素对应的标签。

保存网页时，网页的后缀名为html或htm。

(3)略
(4)创建站点和制作简单网页
步骤1定义本地站点，新建若干文件夹，如：images、flash、templates等，有些文件夹可暂时为空，以备将来存放设定的内容。

步骤2在定义好的站点下新建一个网页，第一个网页为index.htm或是index.html，输入文本，插入Flash动画和图像。