HTML语言是动态网页设计最基本的内容,也是必须要熟悉的基础,ASP等等其他后台程序的设计都是基于HTML的基础之上的。但是,这里讲HTML语言,目的并非是要大家用HTML来编写网页的源代码,但可以作为修改网页源代码的基础,网页细节部分的内容还是必须通过对HTML源代码直接修改来完成的。不过用记事本来编辑网页是锻炼基本功的一个非常好的途径,其实我本人学习网页制作,一开始接触的也是HTML而不是诸如FRONTPAGE、DW之类的软件,FEELING DESIGN最初版本,就是我完全使用记事本写出来的,当然这样做的效率比起用软件来要低得多,但是亲手写出来的网页源代码,结构清晰,层次明确,没有冗余的代码,这也是软件所不能及的,大家用什么方法来学HTML,可以自己把握衡量,如果你想向着网络程序员的方向发展,那么鼓励使用记事本或者其他纯文本编辑器来写网页文件!
本次要说的,如何丰富和美化网页的内容,其实也是一些纯理论的东西,多实践是最好的锻炼方法。
1.给网页加入图片。
图片对于一个网站来说是一把双刃剑,加入图片,给网页的导入带来了负荷压力,图片的文
件大小往往比一个网页(xxx.htm文件)大得多,这会减慢导入网页的速度,然而图片对于网站的美化来说不可缺少的。随着现代网络硬件的发展,网速也提高得非常快,可以说图片导入的速度问题,以不像原来那样占据主要地位了,但是一个好的网站,导入速度与美化必须都要慎重考虑!
理论上说,比起密密麻麻的文字,直观的图片是浏览者更加愿意看的,所以,给网页加上必要的图片,为了加快导入的速度,图片尽量使用网页通用的图片格式例如:GIF JPG等,而不要使用未经压缩的BMP PNG等,在不影响浏览效果的前提下,尽量压缩图片,能用HTML代替的地方尽量不要使用图片。
2.给网页加入背景
方法:<body>标签的属性:background、bgcolor
<body>标签的两个属性,background可以定义背景图片,bgcolor则定义背景的颜,例如:
<body background="bg.gif" bgcolor="#eeeeee">
背景图片会自动重复铺满整个页面,当这两个值都设置时,将显示图片而不显示背景颜,两个都定义的好处就是,如果背景图片由于某些问题没有导入成功,那么就不会显示而显示出背景颜。
3.给网页加入背景音乐
方法:<bgsound>标签
<bgsound src="URL" loop=number>
src属性代表音乐来源URL,loop属性表示音乐重复的次数,如果想让音乐无限循环,取-1。注意,请慎重使用背景音乐,一方面会影响页面的导入速度(音乐文件一般比图片还要大),另一方面,比较正式的网站需要比较严肃的气氛或者浏览者并不希望听到什么声音。
4.给网页加入视频文件
方法:<embed>...</embed>标签
<embed src="tv.wmv" width=500 height=400 autostart="yes"></embed>
src属性表示视频文件的来源URL
width、height 表示视频的宽度和高度
autostart 表示是否在网页导入后自动播放,取值为yes、no
这个标签不仅可以加入视频,音频也可以加入
5.给网页加入FLASH
方法:<embed>...</embed>标记
用法和插入视频相同,此外还可以用<object>...</object>(其实这个更加常用一点),属性比较复杂,用法见下:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia/pub/shockwave/cabs/flash/swflash.cab#version=4,2,0" width="300" height="300" vspace=0 hspace=0 border=0>
<param name=flash value="flash.swf">
<param name="scale" value="noborder">
</object>
<object>标签是插入媒体的标签,<param>是它的子标签,用来设定用<object>插入媒体的一些参数。<object>标签中的classid属性,后面跟着一大堆代码,我们不用去管他,它是代表FLASH播放插件的,codebase代表flash播放插件的位置,也就是说如果浏览者的浏览器上没有安装FLASH播放器的话,就会从这个位置下载播放插件以播放媒体文件。width/height/vspace/hspace 这几个属性我想不用我多介绍了吧:)
<param>是<object>专用的子标签,它只能位于<object>标签内部,用来设定播放插件的参数值,第一个参数值就是代表FLASH文件的地址URL,第二个参数是设定FLASH播放器没有边线显示,参数根据object标签插入媒体的不同而不同,所以属性是比较复杂的,这里我不详细展开,大家可以参考HTML相关的书籍。
6.内部框架
方法:<iframe>...</iframe>
属性:
src 内部框架的内容来源URL
width、height 框架宽度 高度
marginwidth、marginheight 框架内部内容留白
frameborder 框架边线的宽度,取值为整数
例如:
<iframe src="window.htm" width=300 height=200 marginwidth=0 marginheight=0 frameborder=1>无法显示框架</iframe>
iframe的功能,是插入一个内部框架,就像打开了一个窗口,窗口内导入了另外一个网页,合理利用这个标签将给页面的布局带来不少方便,<iframe>...</iframe>标签内的文本,是当浏览器不能支持框架时所显示的内容(目前浏览器的版本基本都支持)
7.加入动态的文字
方法:<marquee>...</marquee>标签
属性:
direction 如何制作网页文件滚动方向,取值:left(从右到左)、right(从左到右)、up(从下到上)、down(从上到下)
behavior 滚动方式,取值:scroll(无限次反复滚动),slide(滑入,就是只滚动一次),alternate(来回振荡)
loop 循环次数,默认无限次
scrollamount 运动速度,取正整数,默认是6
scrolldelay 运动停顿,取正整数,默认是0,也就是没有停顿,如果这个值不为0则在滚动中就会出现停顿现象
align 滚动部分的垂直对齐方式,取值:top middle bottom,默认是middle
bgcolor 滚动部分的背景颜
height 滚动部分的高度
width 滚动部分的宽度
hspace 内部内容留白
一个例子:
<marquee behavior="scroll" direction="up" width=100 height=200 scrollamount=2 scrolldelay=60>
<p>这里是滚动的文字
<p><img src="image.jpg" alt="图片也可以滚动" width=50 height=120 border=0>
<marquee>
8.加入脚本
方法:<script>...</script>标签
可以加入用其他语言编写的脚本文件,例如最常见的Javascript脚本等等,可以帮助网页实现一定的特效功能,这些脚本在网上有很多,他们属于外部代码不包括在HTML语言中,我这里也不详细讨论了。
属性:
language 脚本使用的语言
src 外部脚本文件导入地址,有些网页为了方便将嵌入的脚本程序单独保存为一个文件,然后用这个属性来导入,这样脚本可以被多个网页使用而减少重复写脚本代码的时间。
内部脚本使用的例子:
<script language="Javascript">
<!--
alert("脚本被执行了!");
-->
</script>
运行时会弹出一个警告窗口,并告诉浏览者“脚本被执行了!”,这个弹出警告窗口的功能就是javascript脚本来实现的,这是什么意思呢?这是HTML中使用的注释语句,包括在其中的文本不会显示在网页上,而保存在源代码中,当JAVASCRIPT源代码编写有问题时有时会把源代码当作普通文本显示到网页上,这不是我们想看到的,因为会严重影响网页的内部文本显示,影响美观,用这个注释标签可以保证内部的文字不会被显示,另外,写过程序的朋友也知道,在程序中加入注释可以增加程序的可读性,虽然它并不在网页的显示中体现什么功能或者说是效果,但是给编程人员修改网页,查看代码的时候带来了很大的便利,网页比较复杂,程序比较长的时候必要的地方(如果功能模块等)加入注释是编程的一个好习惯
外部导入脚本文件的例子:
<script language="Javascript" src="javascript.js">...</script>
这段代码从外部导入了一个叫做javascript.js的脚本文档,功能上,与脚本文档中的程序代码直接写到HTML网页里是完全相同的,好处就是一来多个网页可以导入这同一个文档避免重
复写代码,二来修改这个脚本文档,所有导入了这个脚本文档的网页功能也随之会改变,修改起来就减轻了工作量,三来,网页的结构也更加清晰简单,给网页的修改编辑带来了方便。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论