网页制作基础知识.docx

上传人:b****5 文档编号:12678834 上传时间:2023-04-21 格式:DOCX 页数:8 大小:232.14KB
下载 相关 举报
网页制作基础知识.docx_第1页
第1页 / 共8页
网页制作基础知识.docx_第2页
第2页 / 共8页
网页制作基础知识.docx_第3页
第3页 / 共8页
网页制作基础知识.docx_第4页
第4页 / 共8页
网页制作基础知识.docx_第5页
第5页 / 共8页
点击查看更多>>
下载资源
资源描述

网页制作基础知识.docx

《网页制作基础知识.docx》由会员分享,可在线阅读,更多相关《网页制作基础知识.docx(8页珍藏版)》请在冰豆网上搜索。

网页制作基础知识.docx

网页制作基础知识

本文将讲述DREAMWEAVE的一些基本知识点共五几页,涉及HTML基本知识,相对路径和绝对路径超链接滚动文字滚动图片鼠标经过图片加入背景音乐等一些觉的网页元素行为

HTML基本标签

表示该文件为HTML文件

包含文件的标题,使用的脚本,样式定义等

,包含文件的标题,标题出现在浏览器标题栏中

的结束标志

放置浏览器中显示信息的所有标志和属性中内容在浏览器中显示.

的结束标志

的结束标志

链接标志"…"为链接的文件地址

显示图片标志"…"为图片的地址


换行标志

分段标志

采用黑体字采用斜体字


水平画线字体

颜色

,定义表格,HTML中重要的标志

定义表格的行,用在

定义表格的单元格,用在中

字体样式标志

滚动时要用到的动态标识的开始和结束

插入图片时要用到的img图片src路径背景音乐要用到的bgsoundsrc="…"

相对路径和绝对路径

在讲超链接前先讲下路径,路径又有绝对和相对之分

相对路径-以引用文件之网页所在位置为参考基础,而建立出的目录路径

绝对路径以Web站点根目录为参考基础的目录路径。

之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

同一个图片或文本绝对路径是不变的相对路径是可变的,相对就是类似取参考系后的位置类如举一个例子,现在有一个页面index.htm,在这个页面中联接有一张图片photo.jpg。

他们的绝对路径如下:

c:

/website/index.htm(网页的位置)

c:

/website/img/photo.jpg(要联接的图片的位置)

相对路径就是img/photo.jpg

我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接。

假设info.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html如何表示上级目录../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推

假设info.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:

c:

\Inetpub\wwwroot\sites\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html假设info.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\info.html假设index.html路径是:

c:

\Inetpub\wwwroot\index.html在info.html加入index.html超链接的代码应该这样写:

index.html

假设info.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:

c:

\Inetpub\wwwroot\sites\wowstory\index.html

在info.html加入index.html超链接的代码应该这样写

index.html 

如何表示下级目录引用下级目录的文件,直接写下级目录文件的路径即可。

假设info.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\html\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html

假设info.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:

c:

\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

在info.html加入index.html超链接的代码应该这样写:

index.html

HTML绝对路径(Absolute Path)HTML绝对路径(absolute path)指带域名的文件的完整路径。

一般来说在DREAMWEAVER中你要插入图片可以用工具栏上的按扭(在下面的设置图片链接将会讲到)但了解相对和绝对路径还是有好处的

因为你要想真正的做好一个网站引用图片必需要用相对路径,否则要自己电脑上可以正常显示而放到服务器上就无法显示,因为它无法根据绝对路径找到文件的位置,而相对路径就不会出现这样的问题

超链接

超链接在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。

各个网页链接在一起后,才能真正构成一个网站。

所谓的超链接是指从一个网页指向一个目标的连接关系。

而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。

当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。

按照使用对象的不同,网页中的链接主要分为:

文本超链接,图像超链接

网页上的超链接一般分为三种:

一种是绝对URL的超链接。

URL(UniformResourceLocator)就是统一资源定位符,简单地讲就是网络上的一个站点、网页的完整路径,如;第二种是相对URL的超链接。

如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去;还有一种称为同一网页的超链接,这种超链接又叫做书签(这里就要用到路径的问题)

下面主要讲下文本和图片越链接

文本链接我想大家在浏览网页时都看到过文本链接一般有四个状态:

正常状态下一种颜色;鼠标放上去又是一个颜色有时还有下划线,当你点文本的一瞬间又是一种颜色;访问过的又是一种不同的颜色;下面就来讲解一下如何设置这种效果的

有一种方法是CSS还有一种方法是用页面属性,后者对于任何人都能接受前者必需要有一定的CSS基础,这次就主要介绍如何用页面属性来设置

打开DREAMWEAVER后在面板下方可以看到一个页面属性面板

点击后会出现一个对话框选择链接可以看到有几个选项,说明一下变换图像就鼠标放上去时的颜色

活动链接的颜色指定当鼠标(或指针)在链接上单击时应用的颜色。

设置好了后就可以选定要链接的文本,选家后下方面板会有相应属性,点链接后的文件夹图标选择要链接的内容,就OK了

下面简单介绍下链接图片的方法,链接图片和链接文本有点不同的是要先在指定位置插入一张图片,点击插入工具栏的常用选项下的图片(和鼠标经过按钮是在一起的)插入后设置一下高宽等属性,再选定图片同样下方属性面板就会显示出该图片的属性,

之后的设置和文本是一样的就不再重复,说明一下垂直边距和水平边距是指图片和网页中其它的元素的距离其它的一些选项像低解析度源行研究一下这里不做介绍

设置鼠标经过图片

先将鼠标放在要插入图片的地方,再选择插入工具栏上的常用选项卡(此选项卡在打开软件时就会在菜单栏下显示),如图所示(要是看不到就将打开查看—工具栏—插入)

 

再点图片选项卡右方的三角形出现下拉菜单

选择鼠标经过选项卡,出现如图所示对话框

选择原始图像后的浏览选择你要的图片A此图片为鼠标不经过时的图片,点鼠标经过时的图像后的浏览选择图片B为鼠标经过时的图片

按确认后在设计里只看的到原始图片,保存后按F12(没保存按F12后会有提示你保存)就可以在网页里看到鼠标不放在图片上是图片A放到A上变为图片B的效果

设置滚动文字效果

这个行为(效果之意)要用到marquee标签,marquee是滚动的意思,例如要把“欢迎大家来到机房管理部门”网页中从右往左滚动出现代码如下:

欢迎大家来到机房管理部门这个代码和欢迎大家来到机房管理部门是同样的效果,方向可以选择rihgtupdownleft没有写方向默认的是从右往左可能是这样符合我们的阅读习惯

设置图片滚动效果

图片滚动和文本滚动差不多但有的图片会加上鼠标经过时就会停下来的效果,文本一般不设置这个效果,下面这段代码可以实现这个行为:

其中后的是图片的路径width是宽度height是高hspace是和其它网页元素的水平距离vspace是和其它网页元素的垂直距离,这是一段使图片从右往左滚动的代码

在marquee中加入onmouseover="this.stop()"onmouseout="this.start()"最终的代码为

就可以实现当鼠标放在图片上时图片停止滚动

添加背景音乐

这个要用到标签,先看一段代码

loop="-1">src是文件的路径在bgsound是背景音乐的意思在DREAMWEAVER中只要你输入<它会自动出现一些词让你选择如图所示

Loop是控制播放次数的设定LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止是指循环播放当你输入src=”时会出现浏览图标如图所示你点击后可以选择你要插入的音乐

当音乐文件和你的网页不在同一驱动器内时,会有提示让你将其复制过去这样才能把路径设成相对路径,要不就是绝对路径

没有复制就是

///E|/MyMusic/冷雨夜.mp3"/>

还有一种方法添加音乐是用标签

这段代码在网页上会出现一个媒体播放器如图所示

(不同PC可能不同)

其中autostart用来设置打开页面时音乐是否自动播放,设置为true就是一打开就会自动播放false就是不播放你一按开始就开始播放,hidden设置是否隐藏媒体播放器也是true,false不过提醒一下要是你将autostart和hidden分别设为false和true那就会出现你打开网页时它不会自动播放但你又看不到播放器图标没有播放器你也就找不到开始这个按钮,要是出现这种问题就有点搞笑了。

这两种方法之间都各有优缺点:

第一种方法当页面打开时音乐播放,如果将页面最小化以后播放音乐会自动暂停,如果使用第二种方法则不会出现这种情况,只要不将窗口关闭,它会一直播放。

所以希望大家在运用过程中根据自己的情况来选择添加音乐的方法。

 

学工部校学工助理机房管理部门赵辉

展开阅读全文
相关搜索
资源标签

当前位置:首页 > 人文社科 > 军事政治

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1