如何在网页中插入带链接的滚动文字.doc

如何在网页中插入带链接的滚动文字1、在制作网页之前，首先需要了解一些与网页有关的知识。在Internet的飞速发展，WWW(英文全名为World wide Web，中文称万维网)是一个不容忽视的角色，它是由Internet上的信息服务器连成的网络，可以显示文字、图片、声音等交互性超媒体对象，并可以让普通人方便地访问。URL(英文全名这Uniform Resource Locator，中文称统一资源定位器)，URL好比Internet的门牌号码，它可以帮助用户在Internet的信息海洋中定位到所需要的资料。在网上的每一个文件都有一个用URL来标识的地址，它的结构也可以理解为DOS中的目录结构。例如：(此网址为假设)。其中http是超文本传输协议，即盘符；是站点名，即根目录；myweb是子目录；mfxx.html是文件名。协议(Protocol)是关于信息格式及信息交换规则的正式描述。在信息技术中，协议就是一些特殊的规则集合，它被通信的接收方和发送方认可，接收到的信息和发送的信息均以这种规则加以解释。在网络的各层中存在着许多协议，它是定义通过网络进行通信的规则，接收方的发送方同层的协议必须一致，否则一方将无法识别另一方发出的信息，以这种规则规定双方完成信息在计算机之间的传送过程。协议就好比每个国家都有自己特定的交流准则和交流方式，在Internet上，它统一了人们在网上的交流方式。HTTP协议(英文全名为Hypertext Transfer Protocol，中文称超文本传输协议)它是用来在Internet上传送超文本的传送协议。它是运行在TCP/IP协议族之上的HTTP应用协议，它可以使浏览器更加高效，使网络传输减少。任何服务器除了包括HTML文件以外，还有一个HTTP驻留程序，用于响应用用户请求。您的浏览器是HTTP客户，向服务器发送请求，当浏览器中输入了一个开始文件或点击了一个超级链接时，浏览器就向服务器发送了HTTP请求，此请求被送往由IP地址指定的URL。驻留程序接收到请求，在进行必要的操作后回送所要求的文件。其实您只要记住它是专门为World Wide Web设计的协议就行了。网页是WWW的基本文档，它是用HTML(Hypertext Markup Laguage即超文本标识语言)编写的。HTML语言严格来说并不是烦人的编程语言，其实它只是一些能让浏览器看懂的标记，当网页中包含正常文本和HTML语言标记时，浏览器会翻译由这些HTML语言标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来，而不是显示一堆奇怪的标记。您现在所看到的这个页面就是网页了。超文本(Hypertext)是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。只要用鼠标点一下文本中通常带下划线的条目，便可获得相关的信息。我们通常所说的网站或网页，就是由一个或多个超文本组成的，而我们进入网站首先看到的那一页称首页或主页(HomePage)。网页的出色之处在于能够把超链接(Hyperlink)嵌入网页中，这使用户能够从一个网页站点方便地转移到另一个相关的网页站点。它可以指向其他网页、文、多媒体文件、图像甚至程序。超链接是内嵌在文本或都图像中的，文本超链接在游览器中通常是带下划线，而图像超链接是看不到的，但如果用户的鼠标碰到它，鼠标的指标通常会变成手指状(文本超链接也是如此)。2、网页制作的基本设计思路要设计出一个精美的网站前期工作是必不可少的。一个网页的成功与否，很重要的一个因素在于它的构思，好的创意及丰富详实的内容才能够让您的网页充满勃勃生机。1、网页的选题在制作自己的网页之前，首先要确定自己网页的内容。个人网页的设计内容可以从自己的专业或兴趣爱好多做些考虑。例如自己在计算机、书法、绘画等方面有独到的工夫，可以此专题做为网页的内容。但网页涉及的内容切勿过广，这样虽然内容比较丰富，但往往涉及各个方面的内容会比较肤浅。2、网页的组织结构网页的选题确定好以后，接下来就要确立网站的总体结构了。总体结构的确立至关重要，它是网站设计能否成功的关键所在。如果我们对网站的总体结构了如指掌，设计起来就会得心应手，游刃有余，但是如果网站的总体结构比较混乱，在设计的过程中也就会颠三倒四，无法将自己的想法表达出来，这样的网站一般不会很成功。一般网页的组织结构是采用树形结构。3、资料的收集与整理在对自己未来的网页有了一个初步的构思后，还需要有丰富的内容去充实。网页的基本组成元素有三个：文字内容、图片和超级链接。而Internet的最迷人之处在于它信息的极大丰富，如果你的网而只有漂亮的外观而实质内容很少，那么就不会有多少人在你的网页中停留。要注意的一点是，网站的内容必需合法。4、选择网页的设计方法要建立一个网站，要选择用何种方法来实现它。现在，能够用来设计网站的方法有很多，可以使用HTML语言来编辑，也可以使用网页制作工具(如：ProntPage)来设计网站。对于一个初学者来说，建议您使用所见即所得的网页制作工具来设计出网站的框架，然后再用Java和JavaScriptT等编辑语言来对网站进行修饰。5、设计网页要注意的问题(1)网页的标题要简洁，明确。(2)在文本要使用水平线，以分割不同部分。(3)对重点段落要强调显示。(4)网页中插入的图片要尽量的小。(5)图形要附加文字说明，以便关闭图象时查看。(6)网页中引用的资料及商标(或图标)，不能侵犯版权。二、建站造页篇千里之行，始于足下。在做网页之前第一步就是要学会做网站。作为一个网站，里面有很多的图片、网页文件甚至Flash动画，如果不进行管理归档，分散在硬盘的各个地方就无法进行网页发布了。因此建网站就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面以便进行网页的制作和管理。下面我们就来用Dreamweaver 3建立一个网站。启动Dreamweaver进入Dreamweaver，一般首先会进入页面编辑器。在页面编辑器中，选择菜单Site-Newsite。系统弹出站点定义对话框。下面我们需要做这几步工作：Site name：填上网站的名称。名称没有规定，您可以填入您想要的名称。Local Root：站点本地目录。在这个地方，您必须给您的网站在硬盘上指定一个目录。以后所有的网页文件就都放在该目录里面。相当于造房子先选地址一样。单击黄色文件夹，系统弹出对话框。可以选择目录。选好目录以后按打开，再按保存即可。如果没有建立过目录，也没关系。在这个对话框中一样可以建立。只要再对话框中按右键选择新建文件夹马上可以建立目录了。选中Refresh Local File List Automatically选项：自动刷新本地文件列表。这个功能有了以后，当你往网站的目录中复制文件的时候，网站文件列表会自动的刷新。为了方便起见我们选择。选中Cache：选项。Cache不少读者肯定不会陌生，就是缓存。这个选项非常有用，他可以自动跟踪网站内的文件链接情况。当你的文件改名、移动、删除以后。原来指向这个文件的链接会段掉。有了Cache就可以及时发现问题，并加以纠正。OK，所有的工作都完了。一个空白的网站就做好了。下面我们来仔细观察站点管理器。网站内所有的文件都会显示在管理器的右侧。怎么样看上去是不是有点象windows的资源管理器啊?大家可以发现一点，就是这里的根目录就是先前我们选择的目录。这是因为相对于要做的网站而言，所有文件都是放在这个目录里面的。所以这个目录就是网站的根目录。做网页的时候会用到很多的图片，把所有的图片文件都归档在一个目录里这是一种比较好的习惯。下面我们在站内先建立一个images目录用于存放图片文件。在站点管理器右侧空白处，单击右键弹出菜单。选择New Folder新建目录，输入目录名即可。一个网站建立好以后，下次启动Dreamweaver时。会自动打开这个网站，那么您所做的每一个文件都保存在这个站内。如果您建立了很多网站的话就要确保您要的网站是否打开了。可以在页面编辑器中选择打开的网站。使用菜单Site-Open site。如何快速进入站点管理器呢?我们可以用快速启动栏。在快速启动栏中第一个按钮就可以快速切换到站点管理器。在页面编辑器的右下脚，也有一个袖珍的启动栏。可以同样操作。好，本次教程我们主要学习了怎样制作一个站点。一个站点，简单的说就是搭一个网站的架子。所有的网页和相关的文件都必须放在站内。网站所在的目录就是网站的根目录。大家可能觉得有些枯燥吧?没关系，有了这些基础，下一次我们就可以进入到正式的网页制作中来了。和大家探讨了怎样用Dreamweaver制作一个网站，现在来实际制作一张简单的网页。先对这个页面进行一下分析：网页的标题栏有机器猫的小窝字样网页中的机器猫的小窝标题是一张Gif图片左下角的机器猫是一张gif图片当中是一段文字，设置了文字的字型和颜色网页背景用图片制作先启动Dreamweaver3，确保你已经用站点管理器建立好了一个网站，并且打开了这个网站。1、插入标题图片进入页面编辑器。在对象面板中单击按钮。(如果对象面板看不见，可以按Ctrl+F2打开面板)系统弹出插入图片对话框。在硬盘中找到这个图片。选中后，对话框右侧会看到这个图片的预览图。按Select按钮确定。系统弹出一个信息框，大致意思是说要求插入图片后保存网页。按OK确定。接下来的对话框提示大家，这个图片不在站点目录内，当前的站点目录是D：dmedia是否要将这个图片文件复制到站点内。还记得我们上一期反复强调的重点么?和网站相关的所有文件都必须放在站内！如果不这样做，会导致发布网页时候图片失踪。所以，理所当然。我们选择是。系统弹出复制文件Copy file as对话框。我们为了文件管理的方便，把这个图片放在images目录下面。(注：这个目录是为了方面自己建立的。您也可以直接把图片放在站点根目录，或者随便什么站内的目录中)。直接按保存即可。注意文件名不能用中文，否则要出现一些意想不到的情况。一个标题图片就插入完毕了。接下来要让标题图片居中安放。单击图片，在属性面板中(如果面板不出现，按Ctrl+F3打开)。选择面板中的居中按钮将图片居中。(如果面板中看不见这个按钮，是因为面板没有展开。可以按面板右下角的按钮展开面板)。知道了这张网页的结构以后我们就来可以制作了。2、插入机器猫图片插入文字回车换一行，按照上面的步骤插入机器猫图片。这张图片要求不用居中。如果图片继承上面的格式居中。可以通过属性面板中的按钮让其居左安放。接着我们开始按照上面的样例输入文字。大家会发现文字并没有按照期望的那样排在图片周围。而是出现在图片的下方。这是因为没有设置图片的对齐方式。单击机器猫图片，在属性面板中。Align对齐方式选择Left(图片出现在文字的左边)。图片的周围会出现一个黄色的标记。这是Dreamweaver专用的对齐符号。不会影响任何显示和效果。文字就都按照我们期望的方式和图片对齐了。下面我们来设置文字的格式。选中第一第二行文字。在属性面板中将Format字体格式设置成为Heading 3标题三号。并选中B将字体变粗。选中第三行，在属性面板中将Format字体格式设置为Heading 2标题二号。选中I将字体变斜。设置机器猫的颜色。首先选中这三个字，在属性面板中，单击颜色盒，在弹出的颜色盒中用吸管吸取颜色即可。同样设置其他后面文字的颜色。最后的三行文字我们想让他们前面带有项目符号的小圆点。单击属性面板中的按钮。选中的文字就带有列表符号了。3、设置网页的标题和背景图片选择菜单Modify-Page Properties。系统弹出Page Properties页面属性对话框。在Title域中输入标题文字机器猫的小窝在Background Image处单击Browse按钮，系统弹出图片选择对话框。选中背景图片，如果图片在站外将其保存在站内。按OK关闭对话框。网页的标题和背景图片设置完毕。在页面编辑器中按F12预览网页效果。嗯?怎么凡是图片的地方都是一个叉呢?原因很简单在前面插入图片的时候要求我们将网页文件存盘。选择File-Save。网站中的第一页(也就是首页)，我们通常存盘取名为index.html。重新预览，网页的效果就出现了。小结：在今天的教程中我们制作了一张完整的网页。实际上对于三大部分进行了操作。文字：可以设置文字的格式。首先选中文字，然后在属性面板中可以使用Format域设置文字的格式，还可以设置文字加粗加斜的样式和文字的颜色。列表分为有序和无序列表今天我们使用的是无序列表即圆点项目符号。文本可以设置对齐方式分别是左、中、右。插入图片可以通过对象面板来实现。插入图片要注意一定要保存在网站内，这样才能保证图片的正确显示。图片也象文字一样有对齐方式。另外图片有Align对齐方式，这种对齐方式指图片和文字怎样对齐。设置页面属性，我们操作了两个地方。其一设置网页的标题。这会在浏览器的标题栏中显示出来。还可以制定背景图片。网页的背景图片是一张小图片，他在网页中重复贴，充满整个网页。最后是预览。预览用于观察网页在浏览器中的实际效果。直接按F12就可以预览。如果出现图片不出现的情况，要先将网页存盘观看效果。三、页面之间的超级连接网站肯定有很多的页面，如果页面之间彼此是独立的。那么网页就好比是孤岛。为了建立起网页之间的联系我们必须使用超级链接。为什么说它是超级链接呢?他什么都能链，连网页，连下载文件，连网站地址、邮件地址。下面我们就来谈谈怎样在网页中指做超级链接。在网页中，最多见的就是这种超级链接。在网页中，单击了某些图片或者有下划线就会跳转到相应的网页中去。好了我们下面开始制作。1、在网页中选中要做超级链接的文字或者图片。2、在属性面板中单击黄色文件夹，选中相应的网页文件。就OK了。做好超级链接的文字下面会有蓝色的下划线。3、预览网页。光标移到超级链接的地方就会变成手型。提示：你也可以手工在链接域中输入地址。给图片加上超级链接的方法和文字完全相同。在Frontpage中制作过超级链接的图片会有蓝色的边框，那是因为Border属性没有设置成为0的缘故。在Dreamweaver中超级链接的图片边框Border属性自动设置为0所以不会有蓝色边框出现。要想看到边框可以把图像的边框Border属性设置成为非0就可以看到边框了。如果超级链接指向的不是一个网页文件。而是其他文件例如zip文件等等，单击链接的时候就会下载文件。超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。例如，在链接域里写上。那么，单击链接就可以跳转到相应的网站。四、邮件地址的超级连接在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，连联系人的地址也已经写好了。这也是一种超级链接。在Dreamweaver 3之前的版本，做一个邮件地址链接比较麻烦需要手动的写。在Dreamweaver 3中新增了一个插入邮件地址的对象。在对象面板中单击这个对象，系统弹出对话框。在对话框Text域中填上相应的文字。E-Mail中填上地址。OK一个连接就做好了。提示：还可以选中图片或者文字，直接在地址栏中填写mailto：邮件地址就可以了。除了上面的写法，还可以有更加复杂的参数。参数之间用问号分隔。Subject=邮件的标题CC=抄送邮件地址BCC=暗送邮件地址Body=正文内容这些都是可以指定的例如下面的样子。单击以后的效果为mailto：?Subjec=biaoti&CC=&BCC=&body=这是我的意见五、书签锚点的制作前面所介绍的超级链接单击以后会直接跳转到相应的页面。如果想在同一个页面里面进行跳转，或者直接跳转到别的页面的某一个地方那该如何制作呢，这就需要用到一个小东西叫做锚点(Anchor)在以前的Frontpage中叫做书签(Bookmark)。锚点概念很形象，在某一个地方抛锚，然后超级链接指向锚，单击链接就可以跳转过去。下面我们来做一个简单例子。假设一个网页中有这样的一本象书的页面。想要完成这样的功能，单击目录就会跳转到相应的章节。首先要在章节的头上安放一个锚点。然后将目录中的文字做上超级链接指向锚点就可以了。下面step by step开始。1、将光标定位在第一章开头的飞狐外传前面2、选择菜单Insert-Nanmed Anchor插入锚点。系统弹出插入对话框。输入相应的锚点名称。注意不能使用中文作为名字。3、单击OK结束锚点的制作。页面中出现一个锚点的标记。这个标记只是页面中用于标记锚点的，在正式浏览网页的时候不会出现。4、接下来我们会使用一个瞄准器来制作指向锚点的链结。选中文字，在属性面板中拖拽瞄准器到锚点上面，就可以了。5、按F12预览网页效果就做好了。注意观察指向锚点的超级链接，在属性面板中这种连接指向的地址是#开头后面加上一个锚点的名称。例如上面例子中的超级链接地址指向的就是#chapter1。若是想要将链接指向某一页中的某一个地方可以在链结域中输入XXXX.htm#XXX就是某页的某书签。六、制作图片上的超级链接Imagemap注意，我们这里所说的Imagemap是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张世界地图的照片，单击了不同的州跳转到不同的网页。这张图片就是一个imagemap，可点的区域就是热区。下面我们就来制作一个简单的例子，来体会制作方法。1、首先插入一张图片。2、单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。并且选择相应的文件。3、预览网页就可以看到效果。提示：对于复杂的热区图形我们可以直接选择多边形工具来进行描画。其中Alt域是用来填写说明文字的。填写了说明文字以后，光标移上热区就会显示出相应的说明文字。七、网页制作技巧(一)、灵活运用DREAMWEAVER的SITE功能在DREAMWEAVER中，有一个SITE菜单，利用它可以实现对网站设计阶段的管理。有了它，可以大大减少在网站开发阶段的维护工作量。下面我们具体看看它的一些功能：1、利用Site更改文件名在制作网站的过程中往往需要更改文件名，但是，这些文件名可能是某些超级连接所链接的对象。如果我们按照常规的方法去更改文件名，不仅工作量大，而且有可能由于工作的疏忽而造成某些链接找不到相应的链接对象，从而影响到网站的形象。利用dreamweaver的site功能可以大大简化这一工作。点击site菜单下的open site命令，选择要打开的site名。这里我们选择hongen site。这时dreamweaver便会弹出一个site的操作窗口，如要将jiqiao001.html改为jiqiao003.html，我们便选中jiqiao001.html文件，然后按F2键，遍可以为jiqiao001.html更名，输入新的文件名后，dreamweaver会弹出一个对话框如图所示：提示是否需要对整个site文件进行更新(update)，选择yes，系统便会自动的更改与该文件相关的所有链接。2、利用site查找链接错误和检查浏览器支持程度在开发建设网站的过程中，如果我们的页面越来越多，则链接出错的可能性会很大，单凭我们人力去检查这些链接显然是特别麻烦的，而且有些隐蔽的链接我们也不会一一点击，有没有自动检查链接错误的功能呢?其实Dreamwaver为我们提供了一个很好的链接检查器，让它帮我们检查不但速度快而且准确，为何不试一试呢?点击File菜单下Check Links项(快捷键为Shift+F8),Dreamwaver便开始检查当前Site下的所有连接，如果发现了链接的错误则会在弹出的Link Checker对话框中列出链接错误所在的页面，接下来我们要做的只是记下出错页面，然后打开页面修改错误，既快又方便。由于我们制作的网页上传后，并不能知道网友使用何种浏览器，而我们应用在网页制作中的有些技巧，并不是所有的浏览器都能支持的，也就是说别人也许看不到网页应有的效果，甚至是一团糟，所以我们必须保证自己的网页被主流的浏览器所支持。Dreamwaver提供了这样一个功能，即检查目标浏览器，我们在Site中选中要测试的文件，然后在File菜单中找到Check Target browser并单击，这时会弹出一个对话框。我们一般选择IE 4.0和Netscape4.0检查即可，如果检查结果发现有浏览器不支持的地方，我们在测试结果窗口中能够看到是哪个语句有问题，我们只须做相应的修改即可。(二)、使用Dreamweaver工具加入CSS码在页面中加入CSS码，改变页面的显示，但是对于不动CSS语法规则的人来说，使用Dreamweaver同样能加入CSS码来改变显示，这儿有两个小例子。1、改变链接显示。通常页面的文字链接显示会自动加上下划线，这样看起来比较清晰，让阅读这一看就知道这里有链接，但是整个页面的美观度有损。在Dreamweaver中只要设定Styles就可以轻易的加入CSS码，改变链接显示。具体制作如下：(1)选择菜单Windows下的子菜单styles，打开Styles对话框，点击对话框底部的按键StyleSheet，弹出Edit Style Sheet对话框；(2)在Edit Style Sheet对话框中选择New按键；弹出如下对话框如上图红线所圈的图示选择，然后选择确定，弹出对话框Styler defination for a：link，在其中设定Text-decoration为none；同上设定a：visted的Text-decoration为none；以上述步骤设定a：hoverText-decoration为underline；打开该页面的Html文档，可以发现在文件头有如下代码：style type=text/css！-a：link(text-decoration：none)a：visted(text-decoration：none)a：hover(text-decoration：underline)-/style这样你可以不必了解有关CSS的各项规则语法，就可以轻松加入CSS码，而在页面中的链接处文字就不会有下划线出现，但当鼠标移到其上时会有下划线出现。你还可以用这种方法设定链接处文字的颜色、文字背景等，增加页面的美观度。2、创建自己喜爱的字体你一定会发现，一般页面中的default字体往往是12pt的宋体，显得有些大大咧咧，不够细腻，同时过大的字体会让文章占用过多的篇幅，怎么办，教你一招。同上面的(1)、(2)步骤，打开New style对话框，所不同的是这次我们选择Make Custome Styler(class)，在下面的文本输入框中输入：useFont，选择确定，弹出对话框Styler defination foruseFont，在其中设定字体为宋体，字体大小为9points，然后选择确定，我们可以看到在Styles窗口中出现了userFont的选项；在需要使用该字体的段落，再在Styles窗口中选择userFont即可。这个字体就是你在我