网页制作大总结.docx
- 文档编号:9113234
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:13
- 大小:26KB
网页制作大总结.docx
《网页制作大总结.docx》由会员分享,可在线阅读,更多相关《网页制作大总结.docx(13页珍藏版)》请在冰豆网上搜索。
网页制作大总结
网页制作大总结
2008/09/0321:
12 [代码总教程 ]
基础知识及滚动文字的制作
我们在浏览网页时,常看到一些网页中的文字会有规律的滚动。
那么,这些滚动文字是怎样制作出来的呢?
通过学习和实践,现将用编写HTML代码让文字实现滚动效果的方法整理出来与朋友们交流分享。
一、基础知识:
HTML是HypertextMarkupLanguage(超文本标记语言)的缩写,是用来表示网上信息的符号标记语言。
WWW(万维网)所使用的出版语言就是HTML语言。
通过HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的Web浏览器来识别,并将这些HTML翻译成可以识别的信息,就是所见到的网页。
用HTML的语法规则建立的文档可以运行在不同操作系统的平台上,HTML文档属于纯文本文件,可以用任意的文本编写器书写。
HTML文件由标记和被标记的内容组成。
标记能产生所需的各种效果。
这些标记名称大都为相应的英文单词首字母或缩写,如P表示Paragraph(段落),IMG是Image(图象)的缩写。
各种标记的效果差别很大,但总的表示形式却大同小异,大多数成对出现,格式为:
<标记>受标记影响的内容标记>
标记只是规定这是什么信息,文本或是图片,但怎样显示或控制这些信息,就需要在标记后面加上相关的属性来表示,每个标记有一系列的属性。
标记要通过属性来制作出各种效果。
格式为:
<标记属性1=属性值属性2=属性值……>受影响的内容标记>
说明:
1)并不是所有的标记都有属性,如换段标记
就没有属性。
2)根据需要可以用该标记的所有属性,也可以只用需要的几个属性。
3)在使用时,属性之间没有顺序。
4)标记忽略大小写,如:
和是等效的。
让文字产生滚动效果的标记
1.文字来回滚动---示例代码:
2.多行文本向上滚动---示例
代码:
你会做文字滚动效果吗?
欢迎你阅读本文!
和我一同来实践吧。
3.各参数详解:
a)scrollAmount属性表示速度,属性值为数字;取值越大速度越快。
如果没有它,默认为6,建议设为1~3比较好。
b)width和height属性表示滚动区域的大小,width是宽度,height是高度,属性值为像素数(数字)。
特别是在做垂直滚动的时候,一定要设height的值。
c)direction属性表示文字滚动的方向,缺省默认为从右向左滚动;可选的属性值有left(从右向左滚动)、right(从左向右滚动)、down(从上向下滚动)、up(从下向上滚动)。
d)scrollDelay属性也是用来控制速度的,默认为90,值越大,速度越慢。
通常scrollDelay是不需要设置的。
音画贴特效的制作
现在一般的音画特效主要为图音文字而组成(也可加入FLASH)
音画帖通用公式:
精美的代码帖子=文字+图片+音乐+FLASH
所以我们只需了解相关标签就行了......
一、文字标记
基本代码如下:
align=center 表示字体居中,可选值为居右(right)居左(left)
1.字体变化..........
a.字体大小
b.指定字型
c.文字颜色
rr:
表红色(red)色码
gg:
表绿色(green)色码
bb:
表蓝色(blue)色码
rrggbb也可用6位颜色代码数字
color=颜色代码
6.区隔标记
作用:
设定字、画、表格等的摆放位置。
以
align="center"
可选值:
center;left;right。
决定字、画、表格等居中、靠左或靠右。
注:
其实常用跟
标签的效果差不多,但是功能比
相对强一些。
7.分隔线
移动方向指令是:
direction=#up向上、down向下、left向左、right向右。
移动方式:
behavior属性值为scroll:
文字单向移动,side:
移动到边界停止,alternate:
到边界后反向移动;
对齐方式:
align,其属性值为center,left,right,top,middle,bottom,分别表示居中,左对齐,右对齐,对齐上沿、中间、下沿;
移动字符的背景色:
bgcolor,属性值为颜色代码,可以是rrggbb16进制数码,r=red,g=green,b=blue,也就是色彩中的三原色,也可是预定义色彩;
移动字符的循环次数:
loop,属性值为数字,若未指定则循环不止(infinite);
文字高度与宽度:
width及height,以象素为单位,属性值为数字;
字符左右留白长度:
hspace,属性值为数字;
字符上下留白长度:
vspace,属性值为数字;
字符的移动速度:
scrollamount,属性值为数字,数值越大速度越大,反之亦然;
a.分隔线的粗细
b.分隔线的宽度
c.分隔线对齐方向
#号可为left:
表向左对齐(预设值)center:
表向中对齐right:
表向右对齐
d.分隔线的颜色
e.实心分隔线
8.居中对齐
。
。
9.文字移动标记
移动速度指令是:
scrollAmount=##最小为1,速度为最慢;数字越大移动的越快。
字符移动每步的延时:
scrolldelay=#属性值为数字,#最小为1,数值越大速度越大,反之亦然。
移动方向指令是:
direction=#up向上、down向下、left向左、right向右。
移动方式:
behavior属性值为scroll:
文字单向移动,side:
移动到边界停止,alternate:
到边界后反向移动;
对齐方式:
align,其属性值为center,left,right,top,middle,bottom,分别表示居中,左对齐,右对齐,对齐上沿、中间、下沿;
移动字符的背景色:
bgcolor,属性值为颜色代码,可以是rrggbb16进制数码,r=red,g=green,b=blue,也就是色彩中的三原色,也可是预定义色彩;
移动字符的循环次数:
loop,属性值为数字,若未指定则循环不止(infinite);
文字高度与宽度:
width及height,以象素为单位,属性值为数字;
字符左右留白长度:
hspace,属性值为数字;
字符上下留白长度:
vspace,属性值为数字;
字符的移动速度:
scrollamount,属性值为数字,数值越大速度越大,反之亦然;
常用指令举例:
a.
.
c.
d.
e.
图片标记
1.插入图片
2.设定图框-->
3.设定图形大小--width、height
4.设定图形上下左右留空--vspace、hspace
5.图形附注
例1:
例2:
表格相关
(我们做帖子背景主要就是表格)
例1:
源代码如下:
帖子内容,文字或图片.....
1.定义表格
: | 标志对用来创建表格中一行中的每一个格子, 此标志对也只有放在 | ||
: | 标志对用来设置表格头,通常是黑体居中文字。 a.水平位置--align #号可为left: 向左对齐center: 向中对齐right: 向右对齐 b.垂直位置--align top: 向上对齐middle: 向中对齐bottom: 向下对齐 c.栏位宽度--width d.栏位垂直合并--rowspan e.栏位横向合并--colspan 四、表格的主要属性 bordercolor定义表格边框的颜色,属性值是各种颜色代码 cellpadding定义单元格内容与单元格边框之间的距离,属性值是数字 cellspacing定义表格中单元格之间的距离 height定义表格的高度,属性值是数字-----接受绝对值(如500)及相对值(如100%)。 width定义表格的宽度,属性值是数字-----接受绝对值(如400)及相对值(如80%)。 bordercolorlight表格边框向光部分的颜色 bordercolordark表格边框背光部分的颜色, 使用bordercolorlight或bordercolordark时bordercolor将会失效,即不能同时使用。 2. | ||
---|---|---|---|
标记。 用 | 标记概况起来的内容表示表格的单元。 其主要属性与属性值和 2层 常用代码如下: 270px;WIDTH: 400px;POSITION: absolute;TOP: 1200px;HEIGHT: 300px"align=rightsrc="透明FLASH连接地址"width=400height=300type=application/octet-streamwmode="transparent"quality="high";;> 说明: TOP: 900px是指FLASH与帖子上边之间的距离(也就是FLASH与IE的距离)。 LEFT: 50px是指FLASH与帖子左边的距离 WIDTH: 400px HEIGHT: 300px 是指FLASH定位的范围宽度和高度 后面的width=400height=3000就是指FLASH的宽和高了。 在使用这种格式时要反复的调整定位距离大小才能达到满意的效果: ) align=right相对背景图片右对齐。 。 。 注意事项: 大家一定发现这个style标签了吧。 。 。 这个是做一些特效,如,滤镜效果,文字特效,所用到的标记即CSS(CascadingStylesheets,层叠样式表) 是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。 。 。 Style属性可以应用在<>标签中,更可广泛应用在 |