第7章 超文本与网页设计1013.docx

《第7章 超文本与网页设计1013.docx》由会员分享，可在线阅读，更多相关《第7章 超文本与网页设计1013.docx（40页珍藏版）》请在冰豆网上搜索。

第7章超文本与网页设计1013

第七章超文本与网页设计

7.1超文本概念与组成

超文本（Hypertext）是一种按信息之间关系非线性地存储、组织、管理和浏览信息的计算机技术。

超文本技术将自然语言文本和计算机交互式地转移或动态显示线性文本的能力结合在一起，它的本质和基本特征就是在文档内部和文档之间建立关系，正是这种关系给了文本以非线性的组织。

概括的说，超文本就是收集，存储磨合浏览离散信息以及建立和表现信息之间关联的技术。

由若干信息结点和表示信息节点之间相关性的链构成的一个具有一定逻辑结构和语义关系的非线性网络。

超文本的格式有很多，目前最常使用的是超文本标记语言（HyperTextMarkupLanguage，HTML）及富文本格式（RichTextFormat，RTF）。

我们日常浏览的网页上的链结都属于超文本

超文本传输协议（HyperTextTransferProtocol,HTTP）。

它为客户/服务器通信提供了联络方式及信息传送格式。

超文本标记语言（HyperTextMarkupLanguage,HTML）。

它是一种用户与程序都能理解的语言，它是为文献提供表现界面与超文本链接的标记语言。

SGMLHTMLXMLVRML超文本与超媒体是一项正在发展中的技术，虽然它有许多独特的优点，但也存在许多不够完善的方面。

7.2简单的网页设计

7.2.1用WORD、EXCEL、PPT转存

图7-1Word转存为网页

1、Word转存

用Word转存，即将Word文档另存为网页，打开或选择含有要转存的项的工作文档。

在“文件”菜单上，单击“另存为网页”如图7-1所示。

2、EXCEL的转存

和Word类似，即将EXCEL转存为网页。

打开或选择含有要转存的项的工作文档。

在“文件”菜单上，单击“另存为网页”。

如图7-2所示。

3、PPT转存：

同理，将PPT转存也一样，打开或选择含有要转存的项的工作文档。

在“文件”菜单上，单击“另存为网页”。

如图7-3所示。

图7-2Excel转存为网页

图7-3PPT转存为网页

7.2.2frontpage简介

Frontpage，是微软公司出品的一款网页制作入门级软件。

FrongPage使用方便简单，会用Word就能做网页，微软在2006年年底前将停止提供FrontPage软件。

MicrosoftFrontPage，简称FP，是美国微软公司推出的一款网页设计、制作、发布、管理的软件。

FrontPage由于良好的易用性，被认为是优秀的网页初学者的工具。

但其功能无法满足更高要求。

版本历史

MicrosoftFrontPage的当前版本（同时也是最后一个版本）是FrontPage-2003，将不再推出新的版本。

FrontPageExpress（随InternetExplorer4.0附送的简化版）MicrosoftFrontPage1.1（1995年）FrontPage97（1997年）MicrosoftFrontPageExpress2.0（1997年）MicrosoftFrontPageforMacintosh1.0（1998年）FrontPage98（1998年）FrontPage2000（1999年）FrontPage2002（或称XP）（2001年）FrontPage2003（2003年）至于FrontPage会不会繁殖，其实是会的，会被MicrosoftSharePointDesigner取代。

7.3Dreamweaver软件介绍

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

1、软件特性

所见即所得。

Dreamweaver结合了设计、程式码、预览三种模式于一体，也可一起显示程式码和设计检视，与MicrosoftOffice各软件无缝连接，良好的表格控制能力，继承了MicrosoftOffice产品系列的良好的易用性

2、软件版本

DreamWeaver3及早期版本，DeamWeaver4，DreamWeaverMX，DeamWeaverMX2004，DeamWeaver8，AdobeDreamWeaverCS3，

AdobeDreamWeaverCS4

7.4软件界面与工作环境

1、Dreamweaver界面简介

图7-4Dreamweaver工作界面

第一次启动Dreamweaver，首先看到的是Dreamweaver的编辑窗口，如图7-4所示。

千万别给上面密密麻麻的浮动窗口吓倒，其实常用的，就以下几个：

1主菜单：

在这里可以找到编辑窗口的的绝大部分功能；

2工具栏：

是Dreamweaver的新增功能；

③对象面板（Objects）：

在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应的元素，如图片、表格、层、Flash。

我们称这些元素为为对象。

单击对象面板上的向下箭头，能插入其他类型的对象，如特殊字符（Characters）、表单（Froms）等。

如图7-5所示。

④属性面板：

用于显示所选中的网页元素的属性，并可在属性面板上修改。

选择不同的网页元素，属性面板所显示的内容也有所不同，例如图片和表格所显示的属性是不一样的。

此外，点击属性面板右下角的小三角可以根据使用的需要，缩小或展开属性面板，建议一般情况下都设置为展开模式。

⑤编辑区域：

以"所见即所得"的方式显示被编辑网页内容:

【提示1】如果屏器幕上的浮动面板位置过于凌乱，甚至超出了桌面范围而不便操作的时候（在改变了显示的分辨率后尤其容易出现这种情况），可以选取主菜单中的"Window>ArrangePanels"自动重排浮动面板。

【提示2】以下是几个常用的浮动面板的快速打开和关闭的热键，好好记住，因为将会再制作过程中被频繁地使用：

Properties属性面板：

Crtl+F3CSSStyles样式面板：

Shift+F11

Behaviors行为面板：

Shift+F3Objects对象面板：

Crtl+F2

7.5站点管理器

7.5.1创建Dreamweaver站点

要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。

放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。

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

规划站点结构

　　网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。

而是为了达到最佳效果。

在创建任何Web站点页面之前，要对站点的结构进行设计和规划。

决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。

　　我们可以通过把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。

创建站点。

在Dreamweaver8中可以有效的建立并管理多个站点。

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

　　在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。

例如建立文件夹d:

\myweb，然后将编写的网站程序和文件都放在该目录下。

图7-5站点的新建

打开Dreamweaver界面如图7-5所示：

选择HTML，点击菜单栏里的站点，选择新建站点。

结果如图7-6

所示。

在未命名站点处将站点命名，如myweb。

接着对下面的站点地址进行设置，

如http:

//loaclhost/myweb

设置好后单击下一步，选择。

是；后如图7-7所示。

根据当前网站开发技术的需要，选择合适的服务器技术，比如选择ASPVBScript,然后单击下一步。

出现如图7-8所示界面。

选择在本地进行编辑和测试，然后单击下一步出现如图7-9所示界面，单击下一步，会出现一个界面问是否要使用远程技术，如果你只是在本地进行操作，则选择否。

单击下一步，然后单击完成，一个新站点就建立好了。

图7-6对站点命名

图7-7站点的创建

图7-8站点的建立

图7-9站点的创建图7-10HTML基本页中新建的站点标志

新站点建立好后，打开一个HTML的基本页，在右边就会有站点标志，如图7-10所示。

7.5.2在IIS创建虚拟目录

为了使Dreamweaver创建的站点够正常浏览，还需要配置web服务器中的目录映射。

以常用的IIS（Internet信息服务）为例，我们先创建虚拟目录，如图7-11所示：

下一步，在虚拟目录别名中创建为“myweb”,如图7-12所示：

下一步，在定位网站内容目录窗口中，定位实际网站内容目录d:

\myweb，如图7-13所示：

再下一步，虚拟目录权限可以保持默认为“读取”和“运行脚本”。

最后创建虚拟目录完成。

图7-11创建虚拟目录

图7-12创建虚拟目录别名

图7-13定位实际网站文件目录

7.6编辑基本素材

1、HTML概述

静态网页文档都是用超文本标记语言HTML（hypertextmarkuplanguage）编写而成。

HTML是一种符号标记语言，于20世纪80年代初由万维网w3c（worldwidewebconsortium）制定。

由于制作网页与编写文档很相似，所以HTML包括一些定义页面内容和格式的符号，称之为标记。

1980年，人们开发了一种创建文档的的标记语言，用它创建的文档，在不同硬件和操作系统的计算机的显示是一致的，称之为标准一般化标记语言SGML（standardandgeneralizedmarkuplanguage）。

HTML是基于SGML的精简子集，它不仅能够将文本、图像、声音和动画结合在一个网页文档中，还可以通过超链接反问其他的信息资源。

2、HTML的语法特性

顾名思义，超文本标记语言，其语言构成主要是通过各种标记（Tag）来标示和排列各对象，通常标记由“<”、“>”符号以及其中所包容的标记元素组成，例如，如果希望在浏览器中显示一段加粗的文本，可以采用标记和，如下所示：

加粗的文本

在用浏览器显示时，标记和不会被显示，浏览器在文档中发现了这对标记，就将其中包容的文字（这里是“加粗的文本”5字）以粗体形式显示。

一般来说，HTML的语法有三种表达方式，如下所示：

<标记>对象

<标记属性1=参数1属性2=参数2...>对象

<标记>

注意：

标记的书写是大小写无关的。

严格地说，标记和标记元素不同，标记元素是位于“<”和“>”符号之间的内容，而标记则包括了标记元素和“<”和“>”符号本身。

但是我们通常将标记元素和标记当作一种东西，因为脱离了“<”和“>”符号的标记元素毫无意义。

在本书后面的章节里，如非必要，我们将不区分标记和标记元素，而统一称作“标记”。

下面分别对这三种形式进行介绍。

<标记>对象

该语法示例显示了使用封闭类型标记的形式。

大多数标记是封闭类型的，也就是说，它们成对出现，在对象内容的前面是一个标记，而在对象内容的后面是另一个标记，第二个标记元素前带有反斜线，表明结束标记对对象的控制。

下面是一些示例：

这是标题1

这段文字是斜体文字                  浏览器以斜体格式显示标记间的文本。

如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误，随浏览器不同，可能出错的结果也不同。

例如，如果忘记以标记封闭对文字格式的设置，可能后面所有的文字都会以标题1的格式出现。

<标记属性1=参数1属性2=参数2>对象

该语法示例显示了使用封闭类型标记的扩展形式。

利用属性可以进一步设置对象某方面的内容，而参数则是设置的结果。

例如，在如下的语句中，设置了标记的href属性。

和是锚标记，用于在文档中创建超级链接，href是该标记的属性之一，用于设置超级链接所指向的地址，在“=”后面的就是href属性的参数，在这里是Macromedia公司的网址。

“Macromedia公司主页”等文字是被和包容的对象。

一个标记的属性可能不止一个，可以在描述完一个属性后，输入一个空格，然后继续描述其他属性。

<标记>

该语法示例显示了使用非封闭类型标记的形式。

在HTML语言中，非封闭类型很少，但的确存在，最常用的是回行标记
。

例如，如果希望使一行文字回行（但是仍然同上面的文字属于一个段落），则可以在文字要换行的地方添加标记
，在一段完整的段落
中间被回行处理，则在浏览器上会将之显示为两行，但它们仍然同属于一段。

标记嵌套

几乎所有的HTML代码都是上面三种形式的组合，标记之间可以相互嵌套，形成更为复杂的语法。

例如，如果希望将一行文本同时设置粗体和斜体格式，则可以采用下面的语句：

这是一段既是粗体又是斜体的文本

在嵌套标记时需要注意标记的嵌套顺序，如果标记的嵌套顺序发生混乱，则可能会出现不可预料的结果。

例如，对于上面的例子，也可以这样写：

这是一段既是粗体又是斜体的文本

但是，尽量不要写成如下的形式：

这是一段既是粗体又是斜体的文本

上面的语句中，标记嵌套发生了错误。

很幸运，在这个例子里，大多数浏览器可以正确理解它，但是对于其他的一些标记，如果嵌套发生错误的话，就不一定有这么好的运气了。

为了保证文档有更好的兼容性，尽量不要发生标记嵌套顺序的错误。

3、统一资源定位符（URL）

要深入了解HTML，还需要了解什么是URL（UniformResourceLocator——统一资源定位符），它是在Internet中用于指定信息位置的表示方法，可以看作是Internet上文件名称命名规范的一种扩展，换句话说，它是Internet上的地址。

我们在进行WWW浏览时，通常要在浏览器的地址栏中输入地址，这个地址就是URL的一种形式。

URL通常以“协议:

//文件路径/文件名称”的形式出现，采用URL，我们可以描述如下的一些文件属性：

文件名称

文件在本地计算机上的位置，目录和文件名等。

文件在网络计算机上的位置，包括网络计算机名称，目录和文件名等。

访问该文件的协议。

注意：

在URL中的路径采用UNIX命名规范，其表示目录的斜线是/，同基于MS-DOS和Windows的命名规范正好相反。

根据协议的不同，URL分为多种形式，最常用的是以HTTP开头的网络地址形式和以FILE开头的文件地址形式。

采用HTTP（HypertextTransferProtocol——超文本传输协议）开头的URL通常指向WWW服务器，主要用于进行网页浏览，这种URL我们通常称作网址，它是Internet上应用最广泛的URL方式，下面是一些例子：

              指向某个网站的主页

         指向某个网站的指定网页

如果基于HTTP的URL末端没有文档的文件名称（如上面的第一个例子），则使用浏览器浏览该地址网页时会打开默认的网页（通常称作主页），其文件名多为index.htm或index.html。

如果希望指向一个FTP站点或本地计算机上的文件，则通常可以用FILE作为URL的前缀，FTP（FileTransferProtocol——文件传输协议）主要用于文件传递。

包括文件的上载（从本地计算机发送到Internet上的服务器）和下载（从Internet上的服务器接收到本地的计算机）。

目前Internet上很多软件下载站点都采用这种FTP的方式；在很多提供主页免费存放空间的网站上，都要求用户通过FTP程序将他们自己编写的网页上传到服务器上。

下面是一些例子：

file:

//index.html                            指向当前目录下的文件file:

//C:

/Winnt/System32/Blank.htm指向某个绝对路径下的文件file:

//                  指向FTP服务器的目录file:

//

7.6.1文本与文档

文本文档是以txt后缀名的文件，在windows页面重点及鼠标右键-〉新建-〉在下拉子菜单中既有文本文档一项

详细：

txt文件是微软在操作系统上附带的一种文本格式，是最常见的一种文件格式，早在DOS时代应用就很多，主要存文本信息，即为文字信息，在微软在操作系统等于直接存，就是它了，现在多用的操作系统得使用记事本等程序保存，大多数软件可以查看如记事本，浏览器等等。

通俗：

txt即文本文件，在桌面或文件夹右键即可建立。

TXT格式是一种文本文档，TXT即扩展名。

其他：

同时TXT格式的小说作为现在最流行，目前TXT格式小说正规的网站有飘零书社最通用的阅读格式，可以用在传统的PC机上，也可以用在手机上阅读，PSP,MP3.MP4等上阅读。

7.6.2图像

1、HTML图像链接基本语法

#=图象的URL

#=在浏览器尚未完全读入图象时，在图象位置显示的文字。

2、图像和文字的对齐

#=top,middle,bottom

]Myface!

当然，也可以在基本页里直接插入图像，如图7-14所示。

图7-14图像的插入图7-15表格的插入

3、图像在页面中的对齐/布局（FloatingImage）

#=left,right

MyFace！

Itisalways

smiling.

Hahaha....

MyFace!

Itisalways

smiling.Hahaha....

#=value