第七章 网页制作基本方法.docx

《第七章 网页制作基本方法.docx》由会员分享，可在线阅读，更多相关《第七章 网页制作基本方法.docx（50页珍藏版）》请在冰豆网上搜索。

第七章网页制作基本方法

第七章网页制作基本方法1

7.1HTML语言1

7.1.1题目1

7.1.2标题2

7.1.3分段3

7.1.4预排版文本4

7.1.5字体设置5

7.1.6在网页中加入图形6

7.2超文本链接指针7

7.2.1统一资源定位器7

7.2.2指向一个目标8

7.2.3在同一个HTML文件内标记一个目标8

7.2.4窗口目标9

7.2网页制作概述9

7.2.1制作网页的基本过程9

7.2.2网页制作的组织11

7.2.3动态网页技术12

7.3FRONTPAGE2000的使用13

7.3.1FRONTPAGE2000介绍14

7.3.2FrontPage2000的视图19

7.3.3Web站点创建21

7.3.4FrontPage的基本操作22

7.3.5管理Web站点32

7.4网页制作工具介绍33

7.4.1DREAMWEAVER33

7.4.2FLASH简介37

第七章网页制作基本方法

7.1HTML语言

7.1.1题目

title元素是头元素中唯一一个必须出现的元素，它也只能出现在文件头中，头元素中还可以出现其他元素，但这些元素都不是必须的。

title元素的格式为：

title标明该网页的题目，它不会显示在文本窗口中，而以窗口的名称在浏览器的标题栏中显示出来。

除了标识窗口外，当需要将网页存入书签或文件时，title还用作书签名或缺省的文件名。

title的长度没有限制，但过长的题目会导致折行，一般情况下它的长度不应超过64个字符。

下面是一个使用题目的简单的html文件

西南农业大学的个人网页

注意图7.1中浏览器上方的题目：

图7.1网页的题目

7.1.2标题

像一本书一样，网页也可以将内容分为几节。

为了容易区分这些小节可以使用小标题，HTML设置了一套小标题标记，它们将文本显示为更大的粗体字。

例如：

第一节

第二节李四的故事

第三节王五的故事

第四节张三的故事续篇

第五节

第六节

这样，就得到图7.2中的界面

图7.2标题

可以看出h1,h2,…h6的含义，它用于表示文章中的各种标题。

标题号越小，字体越大。

　hn可以有对齐属性，如上例所示：

align=left标题居左

align=center标题居中

align=right标题居右

7.1.3分段

HTML将多个空格以及回车都视同为一个空格，所以html的分段完全依赖于分段元素

。

比如下段源文件：

第一

节

一二三

四五

第二节

一二三四五

一二三四五

显示的情况见图7.3注意第六与第七行的关系。

图7.3分段

也可以有多种属性，比较常用的属性是：

　　aligh＝left或center或right,其格式、含义与标题中的一样。

例如：

一二三四五

表示一个新段的开始，也就是上一段的结束。

7.1.4预排版文本

HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，若不希望重新排版，可以用

…<／pre>将内容标示出来。
浏览器在输出时，会对这部分内容不做修改地输出，例如：
我在西南农业大学读书！
我是信息学院的学生。
图7.4中的左图是显示的效果，而右图则是将
与
去掉后的效果
图7.4两种效果的比较
7.1.5字体设置
上面所讲的例子中，有一段……，它是设置粗体显示字体的标记。
html有七种字号，1号最小，7号最大。
缺省字号为3，可以用设置缺省字号。
设置文本的字号有两种办法，一种是设置绝对字号，；另一种是设置文本的相对字号；。
用第二种方法时“＋”号表示字体变大，“－”号表示字体变小。
 
我在西南农业大学读书
我是信息学院的学生
图7.5字体的设置
字体风格有黑体、斜体、下划线、
打字机体、强调、特别强调、源代码、例子、键盘输入、变量、定义、引用、较小、较大、上标、下标等等，使用格式与其它标记一样。
字体的颜色用指定；#可以是6位16进数，分别指定红、绿、兰的值，也可以是black,olive,teal,red,blue,maroon,navy,gray,lime,udrsia,white,reen,purple,sliver,yellowaqua之一。
7.1.6在网页中加入图形
为了使网页漂亮些，往往要加上一些背景和图片。
背景其实是体元素的属性，格式为：
，而加入图片则是，它的格式为：
图7.6图片
例子中alt后面的“同学合影”是注释信息，当图片未打开时，对图片的大致内容进行说明，如果没有的话，则只在浏览器上显示出图片的位置。
 
7.2超文本链接指针
7.2.1统一资源定位器
统一资源定位器（UniformResourceLocator）是文件名的扩展。
在一台计算机系统中，定位一个文件需要路径和文件名，对于遍布全球的Internet网，显然还需要知道文件存放在哪个网络的哪台计算机中才行。
在单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在Internet上，各个网络，各台计算机的操作系统都不一样，因此必须指定访问该文件的方法。
一个URL包括了以上所有的信息。
它的构成为：
protocol:
//machinename/directory/filename
其中protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：
http超文本传输协议，该资源是HTML文件
file文件传输协议,用ftp访问该资源
ftp文件传输协议,使用ftp协议访问远程文件系统
gophergopher协议,该资源是gopher文件
news表明该资源是网络新闻等等
machinename是存放该资源计算机的主机名或者IP地址，例如：
http：
//.。
directory和filename是该资源的路径和文件名，例如：
http：
//
 
7.2.2指向一个目标
在HTML文件中用链接指针指向一个目标。
其基本格式为：
字符串，href属性中的统一资源定位器（url）是被指向的目标，随后的“字符串”在html文件中充当指针的角色，它一般显示为蓝色。
当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。
例如：
//”>西南农业大学
用户用鼠标点取“西南农业大学”，即可看到西南农业大学的网站（作为一个网站的引导文件即第一份文件的存放路径和文件名可以省略，由该WEB服务器的具体配置情况给出，一般是INDEX.HTML。
）。
在例子中，充当指针的是“西南农业大学”。
编写HTML文件时，需要知道目标的url。
如何才能得到目标的url呢？
对于自己计算机内的文件，它的url可以根据该文件的实际情况决定。
对于Interner上的资源，在用浏览器观看时，它的url会在浏览器的“地址”栏中显示出来，把它抄下来写到HTML文件中即可。
在编写HTML文件时，对有能确定相对位置关系的一组资源应采用相对url即相对于文件本身所在的目录（有点类似相对路径），这不仅简化HTML文件，而且便于维护。
比如将某个目录整个搬到另外一个地方或把某一计算机的资源移到另一台计算机时，用相对url写的文件用不着更新其中的url。
但如果用绝对url编写HTML，就得修改每个链接指针中的url。
对于各个资源之间没有固定的关系的情况，比如是介绍各大学情况的，它所指向的目标分布在全球的计算机中，这时只能用绝对url了。
例如：
http：
////~soft/first.htm那么就可以写成：
第一页。
7.2.3在同一个HTML文件内标记一个目标
链接指针可以使读者在整个Internet网上方便地链接，同样在一个较长的HTML文件内部也可以利用链接指针。
　　首先，将被指向的地方标识出来：
text
它放置被指向的地方，标记为“name”，name是全文唯一的标记，text部分可有可无。
这样，就把放置标记的地方做了一个叫做“name”的标记，又叫“锚点”。
做好标记后，再用下列方法来指向它：
text
url是放置标记的html文件的urlname是标记名，因为是同一个文件，可以写为：
text
这时就可以点击text跳转到标记名为name的部分了。
例如：
…
开始处
7.2.4窗口目标
如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。
格式为：
文本
将url代表的资源显示在一个新的窗口中，该窗口的名字叫“窗口名”
例如：
页首
//”>中央电视台
//”target=“中央电视台”>中央电视台
//”>西南农业大学
//”target=“西南农业大学”>西南农业大学
……
到页首
在新窗口打开
其中在“在新窗口打开”一行中target后是空格，不能什么也没有。
 
7.2网页制作概述
7.2.1制作网页的基本过程
着手策划制作一个主页。
首先面临的问题便是要制作什么内容，选择什么样的主页题材，简单的说就是"为什么做"和"为谁而做"。
对于个人的Web：
1．一般来说，个人主页的选材要小而精。
如果我们想制作一个包罗万象的站点，把所有我们认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色，样样有却样样都很肤浅，因为我们不可能有那么多的精力去维护它。
2．题材最好是你自己擅长或者喜爱的内容。
比如：
我们对诗歌感兴趣，可以放置自己的诗词；对足球感兴趣，可以报道最新的球场战况等等。
这样在制作时，才不会觉得无聊或者力不从心。
3．不要太滥或者目标太高。
“太滥”是指到处可见，人人都有的题材；“目标太高”是指在这一题材上已经有非常优秀、知名度很高的站点，你要超过它是很困难的。
如果你已经有一个绝妙的主题了，那我们开始下一步，规划框架。
这是很重要的一步。
每个网站都是一项庞大的工程。
好比造高楼，没有设计图纸、规划好结构，就盲目地建造，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱、虎头蛇尾。
全面、仔细规划架构好自己的网站，不要急于求成。
规划一个网站，可以用树状结构先把每个页面的内容大纲列出来，尤其当你要制作一个很大的网站（有很多页面）的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，十分累人，也十分费钱。
大纲列出来后，你还必须考虑每个页面之间的链接关系。
是星形，树形，或是网形链接。
这也是判别一个网站优劣的重要标志。
链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。
为了提高浏览效率，方便资料的寻找，一般网站的框架基本采用“蒲公英”式，即所有的主要链接都在首页上，每个主链接再分别展开，主链接之间相互链接。
框架定下来了，下一步就可以动手制作具体内容了。
具体说来，根据实际的情况考虑到底能够搜集到多少合适的资料。
题材选定，框架选定，接下来就开始往主页里面填内容。
我们称之为资料收集。
就个人主页而言，很少有人有能力完全靠自己来创作所有的内容。
但大部分人的方法是：
从报纸、杂志、光盘等媒体中把相关的资料收集整理，再加上一定的编辑后就可以了。
另外一个好的方法是从网络上收集。
我们只要到雅虎、搜狐等搜索引擎上查找相应的关键字，就可以找到一大堆的资料。
从网上下载的材料可以利用Coreldraw、Photoship、Gif、Animation等软件自己制作，要多采用图形、声音、多媒体、文字等围绕主体框架展开。
应该尽量使得整个网页的外表更加漂亮、更加吸引人的注意力，内容要充实，整体要保持一致性。
例如，尽量使第一页更加漂亮，多采用艺术化的标语、简捷的目录与颜色、具有鲜明对比的文字效果等。
但是，在第一页中尽量不要使用比较大的图片、多媒体等对象，这样会影响其他人访问Web页的速度。
总之，要使得整个网页“清晰”、“集中”、“平衡”、“漂亮”，保持其统一性、连续性、个性化，争取使我们的网页成为人人喜欢的Web页。
在选择好之后，就开始着手制作网页。
制作网页第一件事就是选定一种网页制作软件。
FrontPage2000是一个所见即所得的Web编辑器，利用FrontPage2000提供的“个人Web”（PersonalWeb）模板建立一个主页。
但是需要注意的是，这是一个相当单调、相当乏味、非常简单的页，没有任何精美的动画效果，没有任何生动的多媒体。
但是，通过这个简单的例子，可以对FrontPage2000有一个了解。
当然除了FrontPage2000以外，我们也可以选择其他的网页制作工具来制作网页，当前比较流行的制作工具有网页制作三剑客（Dreamweaver，Flash,Fireworks）,比较使用的网页制作语言呢，当然是动态网页技术（比如ASP，JSP，PHP等等，都是现在流行的网页制作语言。
7.2.2网页制作的组织
在做完"网站定位"工作、确定了网站"为什么做"和"为谁而做"，接下来就需要根据目标访问者的潜在需求确定网站的内容。
重视交互内容
对于一般的站点，网站内容大致可以分为两类：
静态信息内容和与访问者的交互内容。
前者主要是一些文字及图片的信息，如介绍、服务的说明等等；而交互功能则更多是需要运行后台CGI程序的一些内容，如论坛、BBS、数据库接口、查询等等。
由于对网络的不够了解，很多人在建站过程中常常没有考虑交互部分，他们更多的以为站点只是一个宣传册的电子版。
因此，站点策划人员在收集准备网站内容时一定要特别强调这种交互功能，这样可以让站点更加充分地利用互联网的互动特性。
按访问者兴趣分组信息
收集了各方面的内容，确定了相应的交互功能后，下一步就是这些内容的分组。
分组的目的是为了根据浏览者的访问习惯，有序地展示内容，吸引访问者看下去，同时在分组过程中还可发掘潜在的信息内容---换句话说就是确定站点的导览系统。
经过上述一系列的分析整理，最后我们就得到了网站的完全信息结构。
这个信息结构除了包括站点的导览系统外，还要包括交互设计部分，同时还要确定的就是：
站点的首页。
首页设计很关键
除了那些完全树立形象的页面外，一个站点的首页基本上反映了该站点大部分设计思想：
导览系统、设计风格、交互内容、主要更新，所以首页对于一个网站来说非常重要。
首页定下来了，可以说一个站点完成了一半，实际上我们记住的一些站点，也就是记住了他们的首页。
首页中有些什么内容、图片（如广告BANNER位）、提交表单（如邮件列表订阅）等等，这些在分析一个网站的信息结构时都必须确定。
注意视觉的设计
另外在视觉设计上的一些内容也需要在这一阶段确定。
网站的设计按照什么样的分辨率，是800×600，还是600×480，或者1024×728。
在前几年，800×600特别流行，现在国内的站点基本上都是1024×728了，但是如果主要面向国外访问者的，建议仍然使用600×480。
浏览器的兼容问题，当然现在IE所占的市场份额越来越大，但是我们仍然需要考虑到Netscape以及Opera这些浏览器用户。
设计风格的考虑，如色彩的搭配，图形、线条的使用等等，建议这时最好能有建站公司的VI（VisualIdentification）作为参考。
到这里，可以说是完成了一个站点的准备工作，下面就是设计制作人员以及技术人员的具体制作了。
7.2.3动态网页技术
　　“静态”网站的致命弱点就是不易维护，为了不断更新网页内容，你必须不断地重复制作HTML文档，随着网站内容和信息量的日益扩增，你就会感到工作量大得出乎想象。
　那么什么是动态网站呢？
   所谓“动态”，并不是指那几个放在网页上的GIF动态图片，在这里笔者为动态页面的概念制定了以下几条规则：
1、“交互性”即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面，这将是今后WEB发展的大势所趋。
2、“自动更新”即无须手动地更新HTML文档，便会自动生成新的页面，可以大大节省工作量。
3、“因时因人而变”，即当不同的时间、不同的人访问同一网址时会产生不同的页面，是不是很酷？
将网站“动态”化的方法？
   将网站“动态”化的方法很多，这要看你是出于何种需求。
如果你是个人网站的维护者，使用的是免费主页空间，那么绝大多数情况下你只能使用Java、JavaScript和最新的DHTML技术，费力地自己编写网页脚本；如果你的主页空间提供者能给予你CGI权限或ASP支持，那么你将能非常幸运地发挥真正的动态技术。
这里针对个人网站仅就最新的DHTML技术进行重点介绍。
究竟什么是DHTML？
它与传统的HTML有什么不同？
DHTML就是当网页从WEB服务器下载后无须再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式、动画。
比如，当鼠标移至文章段落中，段落能够变成蓝色，或者当你点击一个超链后会自动生成一个下拉式的子超链目录。
这就是DynamicHTML（动态HTML），它是近年来网络飞速发展进程中最振奋人心也是最具实用性的创新之一。
它是一种通过各种技术的综合发展而得以实现的概念，这些技术包括JavaScript,VBScript,DocumentObjectModel（文件目标模块），Layers和CascadingStyleSheets（CSS样式表）等。
非常遗憾的是在网景Netscape和微软IE浏览器几番大战后，我们仍没有得到一个对DHTML支持的统一标准。
因此本文在介绍DHTML时不得不分别讲述。
让我们先来看看
动态网页技术的原理是：
使用不同技术编写的动态页面保存在WEB服务器内，当客户端用户向WEB服务器发出访问动态页面的请求时，WEB服务器将根据用户所访问页面的后缀名确定该页面所使用的网络编程技术，然后把该页面提交给相应的解释引擎；解释引擎扫描整个页面找到特定的定界符，并执行位于定界符内的脚本代码以实现不同的功能，如访问数据库，发送电子邮件，执行算术或逻辑运算等，最后把执行结果返回WEB服务器；最终，WEB服务器把解释引擎的执行结果连同页面上的HTML内容以及各种客户端脚本一同传送到客户端。
虽然，客户端用户所接收到的页面与传统页面并没有任何区别，但是，实际上页面内容已经经过了服务端处理，完成了动态的个性化设置。
目前实现动态网页主要有以下3种技术。
（1）、CGI---CommonGatewayInterface，公用网关接口。
它可以称之为一种机制。
因此您可以使用不同的程序编写适合的CGI程序，如VisualBasic、Delphi或C/C++等，您将已经写好的程序放在WEB服务器的计算机上运行，再将其运行结果通过WEB服务器传输到客户端的浏览器上。
我们通过CGI建立WEB页面与脚本程序之间的联系，并且可以利用脚本程序来处理访问者输入的信息并据此作出响应。
事实上，这样的编制方式比较困难而且效率低下，因为你每一次修改程序都必须重新将CGI程序编译成可执行文件。
最常用于编写CGI技术的语言是Perl（PracticalExtractionandReportLanguage，文字分析报告语言），它具有强大的字符串处理能力，特别适合用于分割处理客户端Form提交的数据串；用它来编写的程序后缀为.pl。
　
（2）、IDC（InternetDatabaseConnector）互联网数据库连接头是WindowsNTServer内含InternetInformationServer（简称IIS）2.0的特征之一，它提供了一种使你的互联网数据库内容得以发布并可与用户交互的方法，它实际上是一个包含于IIS中的ISAPI应用程序。
你只需掌握HTML和SQL的基本知识并写为数不多的代码就能编出具有交互能力的数据库应用程序，让使用者在浏览器界面中得以查询、输入、更新、和删除WEB服务器上的数据资料。
正如VB程序员所喜欢的那样，构成IDC应用程序的文件是解释