网 页 制 作 教 程.docx

网 页 制 作 教 程.docx

《网 页 制 作 教 程.docx》由会员分享，可在线阅读，更多相关《网 页 制 作 教 程.docx（7页珍藏版）》请在冰豆网上搜索。

网页制作教程

网页制作教程

（未完）

1.网页基本概念

什么是网页（WebPage）？

网页就是一种以超文本和超媒体形式显示信息的载体文件。

其中的重要概念就是超级链接，它使网页的信息量更大，阅读起来更加方便。

什么是网站（WebSite）？

网站就是由多个信息相关的网页构成，网页之间通过超级链接互相连接在一起的网络组织，又称为站点。

2.网页制作的相关术语

▪国际互联网因特网（Internet）

▪统一资源定位器（URL）

▪万维网（WWW）

▪超文本传输协议（HTTP）

▪浏览器

▪超文本标记语言（HTML）

▪主页

3.Internet简介

▪Internet是遍布全球的各种网络系统（如：

局域网、数据通信网、公用电话交换网等）组织在一起的世界性计算机网络系统，它是通过统一的网络协议TCP/IP协议连接在一起所组成的。

▪Internet的功能：

电子邮件、文件传输（FTP）、远程登录（Telnet）、网上查询（IE、Netscape、Gopher等浏览器）和网上交流（BBS、网络新闻组USENET、QQ等）。

4.URL地址

▪URL（UniformResourceLocater）即统一资源定位器，俗称“网址”。

▪Internet中的各种资源实际上分散在各地的计算机主机中，定位器（Locater）的作用就是要指出这些资源的所在位置。

URL就是一个可以带领用户到所要资源的所在位置，并通过适当的方式取得该资源的工具。

▪例如下面的URL地址：

▪其含义是该URL地址使用的通讯协议为HTTP协议，要查找的主机是，在该主机的news文件夹中的china文件夹里，有一个名为index.htm的文件。

5.WWW简介

▪万维网也就是WorldWideWeb，又称WWW（3W），它是Internet世界最为重要的成员之一。

▪WWW是一个基于超文本（Hypertext）和超媒体（Hypermedia）方式的信息检索服务工具。

▪超文本：

由文本组成，可以与其它文件相关联。

▪超媒体：

可以与多种形式的数据文件相关联。

6.HTTP协议

▪为了能够实现网络资源的网上传输和共享，就必须制定一个客户端与服务器端双方在交流信息时都能够理解的统一的“共同语言”，这就是网络传输协议。

它要求每个使用者必须遵循相同的标准，以保证信息和数据的传输畅通无阻。

▪HTTP协议（HypertextTransferProtocol，超文本传输协议）就是实现这一功能的WWW中的主要协议，允许数据以任意的类型（包括多媒体文件）在网络中通信，并支持超文本和超媒体的形式。

7.网页浏览器

▪浏览器（Browser）：

阅读浏览网页信息的应用程序。

它是一个翻译器，它将各种控制字符翻译成合适的屏幕显示方式，从而得到人们最后看到的网页。

▪浏览器有很多种，如：

MicrosoftInternetExplorer（IE）、NetscapeNavigator（网景）、TencentTraveler（腾讯TT）等。

▪由于各个浏览器对同一控制字符的解释方式不完全相同，所以即使是同一个网页，在不同浏览器下的显示也可能有所不同。

8.HTML简介

▪HTML语言（HyperTextMarkupLanguage，超文本标记语言）是一种用于网页制作的排版语言，是用来表示网上信息的符号标记语言。

▪HTML并非是一种编程语言，我们只需要用HTML给文档添加标记，并保存成扩展名为.Html或.Htm的文件（即网页的源文件），发布到网上即可。

▪浏览器可以识别用HTML编写的文件，并将这些HTML符号标记翻译成人们可以识别的信息，就是网页。

9.HTML的编辑环境

▪HTML是一种纯文本文件，我们可以用任何文本编辑器（包括记事本、写字板、Word、WPS）来编辑和创建它，保存时文件扩展名要改成.htm或.html。

▪在网页上点击鼠标右键，选择菜单中的“查看源文件”，就可以通过记事本看到网页的HTML内容。

HTML的常用标记

——HTML文件开始和结束的标记

　　——HTML文件头标记，可以省略

　　　　——网页的标题，显示在浏览器窗口的标题栏，可以单独出现

　　——HTML文件主体标记，定义了网页上显示的主要内容与显示格式

******你好！

欢迎光临本站******

▪网页标题概括了网页内容，能迅速了解网页的大意，加入收藏夹时和使用搜索引擎时显示的结果都是网页的标题。

HTML的构成

▪一个HTML文件是由标记组成的，不同的标记代表不同的元素和效果。

▪大多数标记是成对出现的，名称多数是其英文缩写。

▪如：

表示一个段落（Paragraph），表示一个图片（Image），表示设置字体。

标记的格式

▪标记的格式

▪标记的基本格式为：

<标记属性1=属性值属性2=属性值…>受标记影响的内容

▪其中：

（1）标记必须用“<>”围住，否则认为是普通文本，表示结束标记。

标记字母不区分大小写

（2）对一段内容可以用多个标记来共同作用，产生一定的效果。

此时，各个标记间的顺序也是任意的，但是不能交叉使用。

（3）根据需要可以只用该标记的几个属性，也可以不用属性，在使用时属性之间没有顺序。

不是所有的标记都有属性和结束标记，如单标记
表示换行。

标记的使用:

例如：

这是6号字，隶书，红色；：

这个标记是用来插入图片的，其中的“＃”代表的是图片的URL地址。

例如：

：

该标记的意思是在网页中插入图片pic.gif，该图片存放的位置在站点文件夹根目录下的images目录下。

二、网页构成的基本要素

▪在制作网站之前要先了解网页的基本要素：

▪页面标题（Title）

▪网站标志（Logo）

▪页面尺寸、整体造型

▪导航栏（主菜单）

▪主体内容、超级链接

▪版权说明

三、建站的基本流程

▪第一步——对站点进行规划。

包括：

网站主题、网站名称、网站标志、网站色彩、页面尺寸。

▪第二步——规划和创建站点的基本结构。

建立站点的各类文件夹，并在各个文件夹中合理的安置文档。

▪第三步——具体的网页制作过程。

包括：

制作Logo、创建导航栏、制作超级链接、设计网页的框架和版式、添加网页内容。

▪第四步——上传站点到远程服务器。

发布与推广网站，包括：

申请空间、上传网页、推广网站。

四、Dreamweaver8简介

▪Dreamweaver是一种较好的所见即所得的网页编辑工具，它对网页有很强的控制能力，可以直观方便的设计网页。

▪主要优点：

1：

使用方便，易学易用，既可以使用可视化的编辑器又可以使用HTML编辑器设计网页。

2，提供了强大的设计工具和模板，不用编写代码就可以快速的创建各种极具动态HTML特性的网页，如动画和分层等。

3，兼容性好，适用于各种平台和浏览器。

4，产生的HTML代码精简高效。

Dreamweaver8功能简介

▪Dreamweaver8的工作界面

▪站点的创建和管理

▪文档的基本操作

▪基本网页制作（插入对象、设置格式等）

▪网页的布局技术（表格、层、框架）

▪表单、模板和库项目的使用

▪行为和时间轴（动态网页技术）

初识Dreamweaver8启动：

“开始”菜单－所有程序－Macromedia－选择MacromediaDreamweaver8，工作区布局设置：

工作区布局选择：

第一次启动Dreamweaver8会显示“工作区设置”对话框，请选择“设计器”方式；以后再更改布局：

“窗口－工作区布局”使用起始页；打开最近使用过的网页；创建新的网页；显示与隐藏起始页：

“编辑－首选参数”

Dreamweaver8的工作界面

▪基本组成：

▪由标题栏、菜单栏、工具栏、编辑区、状态栏、插入栏、属性面板和面板组等组成。

▪插入栏

▪标准工具栏

▪文档工具栏

▪状态栏

▪面板的展开与折叠、打开与关闭

站点的相关概念

▪站点：

一个网站所有文档的集合。

▪一个设计良好的网站通常具有科学的结构，用不同的文件夹分门别类的保存不同类型的文件，便于管理和更新。

▪Internet服务器：

它只是一个逻辑名称，就是用于提供Internet服务（包括WWW、FTP、E-MAIL等）的计算机。

主要用于存储我们所浏览的Web站点的文件。

▪远程站点：

指存储于Internet服务器上的站点文件。

▪本地站点：

在本地计算机的磁盘上构建的站点文件。

站点的相关概念

▪静态站点：

网页的内容在建立网页时确定，以后不能根据浏览者的意愿改变。

▪动态站点：

网页的内容是由程序自动生成的，随着浏览者的意愿改变，例如用户注册页面，留言板等。

创建本地站点的必要性及方法

1.在某个驱动器的根目录下新建一个文件夹,用英文命名，作为站点文件夹，用来存放本地站点的相关文件。

2.执行“站点—新建站点”，在“站点定义”对话框中进行选择。

3.执行“窗口—站点”或“文件—站点”，或按F8快捷键，打开“文件”面板，在面板中管理站点文件。

管理站点：

在站点面板中，单击下拉列表中的“编辑站点”，或“站点—编辑站点”，可以进行以下操作：

1.编辑站点

2.删除站点

3.复制站点

4.创建文件和文件夹

5.删除文件和文件夹：

从磁盘上真正删除

6.移动和复制文件和文件夹

创建站点内容：

创建站点目录结构：

站点中的文件需要分类分层管理，例如图片存放在images文件夹中，声音文件存放在music文件夹中等。

▪创建首页文件（主页）：

首页文件的名称通常为index.htm、index.html、default.htm或default.html，这个名称不能随便起，由你所申请空间的远程服务器决定。

网页文档的基本操作：

新建网页：

保存网页；关闭、打开网页；重命名文件与文件夹；移动或复制文件与文件夹；删除文件与文件夹。

网页制作时需要注意的要点；1，在网页中若插入中文名的网页元素文件，浏览时出错的话，可在【代码视图】中作相应的修改，用合适的中文替换乱码。

一般最好不要使用中文命名的文件，包括站点文件夹名字，文件名以及图片、视频和音频的文件名，都不要使用中文命名。

2，初次在本地计算机上制作网页时，就先规划好存放文件的文件夹，建立好本地站点，以后每次制作网页时应检查本地站点是否正确。

3、把网页中用到的全部素材复制到规划好的文件夹内。

制作好的网页也要放在本地站点中。

4、每次新建一个网页时，应该先设置好网页的页面属性，然后将该网页保存在本地站点中，以后在该网页中插入的网页元素都能以相对路径插入。

网页中的图像文件、声音文件、动画文件以及超级链接都要以相对路径的方式来处理。

5、每个网站至少要有一个默认主页，一般主页可以使用index.html为文件名。