网页设计与制作(代码介绍)

《网页设计与制作(代码介绍)》由会员分享，可在线阅读，更多相关《网页设计与制作(代码介绍)（14页珍藏版）》请在装配图网上搜索。

1、网页设计与制作一、HTM L基本语言：1. HTML基本语法：（如图）HTML基本语言:网页的扣:题:.先舟:、血网页正文:、人.:表示HTML文档的开始和结束 . :表示HTML文档的头部。最常用的标记是 .,标记中的容对应浏览窗口标题的信息。. : 标记之的容对应的是浏览器中的容。2. 标记的使用：（如图）网页正文Bgcolor=”颜色”:设置页面背景色。Background=”图像文件的名字及路径”：设置背景文件。Text=颜色：设置页面文字默认颜色。标记属性用来对标记之间的容修饰，标记其属性必须放到“”中，各属性间必须用空 .格隔开。 色彩的表示方法有两各种：1.RGB模式，用16进制

2、的红（Red）、绿（Green）、蓝（Blue值表示的对方试示例left左对齐文字容 right右对齐x字容 center居中对齐h1 align二center”文 字 容值来表示，格式为徘RRGGBB”，字符包括数字09和字母AF,如红色为“#FF0000”2.用英文单词表示彩色，如红色red。二 常用的HTML标记及其属性制作网页:1.页面属性、排版标志.标题标记：格式：.,其中#的取值国为1（字体最大）6（字体最小作用：设置文档的各级标题。常见属性：align,用于定义标题的对齐方式，默认为左对齐，标题标记属性：（如表）.版面格式标记 .分段与换行：（如表）标记名称格式作用段落标记. 或

3、者使标记后面的容另起一段。常用属性：align,用于定义段落的对齐方式，与标题标记类似.以下标记都出现在中出现，标记必须以成对出现，如.换行标记.使标记后面的文字容换行显示 .文本对齐标记可以在标记中使用align属性指定文本对齐方式。另外，居中对齐可以通过居中对齐方式进行设置。格式：.作用：使标记间的容以居中对齐方式显示。 水平线标记格式：作用：在文档中插入水平线。属性名称属性含义示例align定义水平线的对齐方式，默认为“center”右对齐水平线：hralign=right”color定义水平线的颜色绿色水平线：noshade定义水平线为无阴影无阴影水平线：size定义水平线的宽度，单位

4、默认为像素宽度为4像素的水平线:width定义水平线的长度，单位为像素或百分比（相于页面宽度）占页面宽度80%的水平线：常用水平线标记属性：（如表） .字体标记作用：设置标记间文体的字体、大小、颜色等。常用字体标记属性：（如表）属性名称属性含义示例face设置标记间文本的字体font face=隶书”文字容size设置标记间文本的大小，取值围为1 7文字容 color设置标记间文本的颜色 文字容title设置鼠标指向文本时，出现的提示信息 文字容功能格式粗体. 或者.斜体. 字体修饰标记作用：设置标记间文本的样式，如粗体、斜体、下划线等。字体修饰标记（如表）w、服忌留中船愚贺知-旺 - V g

5、 A - VE服忌睦包巨服忌睦取 丑虫探忌 、1 IIAIIH 出-旺 aFlo追瞿皿票)咪 蜩 IEKHQ|p 朦X院 即 近 舟S qU63 4 胡 466d -g n iQ_ g 636S O)63(探反)短舟煮埋.yqns. 或者strike./strikeA.0IEyA.015V.然 夜 K辰K然 a舟 K-旺# 岸煮埋签区分。（格式如右）标记的主要属性为type （如表）注意：项目符号标记在网页中的应用比较广泛，它能清楚地标注文本的层次结构，使用户浏 览网页时能对该网页的架构一目了然。其中，项目符号标记使用.时，必须是成 对出现的，并且其中，项目插入多对.列表项标记组成完整的列表。

6、例：值代表disc实心加点（默认）circle空心圆square实心小方块。标记的主要属性为typeWH默认的无序列表加“实心圆Jj无序列表口心e加方块Ch)无序列表前讪加“空心圆” 结果图为：2.超标记格式：.作用：把当前位置的文本或图像连接到其他的页面、文本或图像。常用超标记属性（如表）属性名称属性含义示例href指定的目标地址，可以是站的文件，也可以某个.target指定的目标窗口，其值是一个窗口 的名称，也可以B_blanks _parents _self、_top,默认为_selfa href=”a.html”target=_blank .title鼠标指向时，所显示的信息a hre

7、f=”a.html title=”信息”.target属性target取值作用_blank在新窗口中打开_parent在上一级窗口中打开_self在当前窗口中打开，此项为默认值_top在浏览器的整个窗口中打开，忽略任何框架绝对路径与相对路径：在网页文档中引用一个文件时，需要给出该文件的路径，这个可以是 网络资源，也可以是本地计算机上的文件资源。HTML有两种路径：绝对路径与相对路径1. 绝对路径：从协议开始的URL地址或从驱动名称开始的本地文件路径都称为绝对路径。如.sina.或 d:11.html2. 相对路径：从文件存储位置开始的路径叫相对路径。在描述相对路径时，需要注意： .如果源文件和

8、引用的文件在同一级目录里，直接写引用文件名即可。./表示源文件所在目录的上一级，././表示源文件所在目录的上上级目录，以 此类推。.引用下级的文件，直接写下级目录文件的路径即可。例如，站点文件夹中有主页文件index.html和图像文件夹imagesjndex.html文件中使用了 images文件夹中的01.jpg图 .像文件，那么图像01.jpg相对于index.html的相对路径就是imges01.jpg. . . . . . . . . . . . . . . . . .3. 图像标记格式：作用：在页面中插入图像或视频文件，图像格式可以是：GIF、JPG、PNG。常用图像标记属性（如

9、表）属性名称属性含义示例src指定插入图像名称或路径 或者 alt替换文本，当浏览器不能显示图像时、在 鼠标指向图像时、或图像加载时间过长 时，所要显示的文本使标记后面的文字进行换行显示width指定图像宽度，单位是像素height指定图像高度，单位是像素border指定图像边框，默认为0hspace指定图像左右两侧与其他对象（如文本）之间的距离，单位为对象img src= imagesa.gif hspace= 30 vspace= 20 vspace指定图像上下两端与其他对象（如文本）之间的距离，单位为像素align指定图像与文本的对齐方式，取值有： top、middle、bottom、l

10、eft、right。当取值为lefts right时，可以实现图像义字左右绕排的效果4. 表格标记表格的几种标记作用表格是最基本的网页布局的技术表格的主要标记（如表）标记描述.表示整个表格的开始、结束.用来设置整个表格的名称，表格中可不用此标记.代表表格中一行.代表单个普通的单元格，此标记必须放在一对tr标记.用于定义表头单兀格，单兀格中的文字将以粗体显示，此 标签必须放在一对tr标记，在表格中也可以不用此标记格式（如图）caprLijj 表格标题心匹0心1：*第一死标题油沁1：*tr第一n泡第一个单n：格g9 第二行的第二个单元格新A/trtable标记的主要属性（如表）属性名称属性含义bo

11、rder表格边框的宽度（以像素为单位；若不设置此属性，则边框的宽度默认为0， 即不显示边框bordercolo r表格边框颜色background设置表格的背景图像bgcolor设置表格的背景颜色width表格宽度；其值可用像素表示，也可用占窗口的百分比表示height表格高度；其值可用像素表示，也可用占窗口的百分比表示align表格在页面的水平位置；取值为：lefts rights center;默认为在对齐cellspacing单兀格之间的间距；其值可用像素来表示cellpaddin g单兀格容与单兀格边界之间的距离;其值可用像素来表示标记属性属性名称属性含义align行谷的水平对齐方式；

12、取值为：lefts rights center ；默认为左对齐valign行谷的垂垂直对齐方式；取值为：top、middle、bottom ；默认为局中对齐height行高；其值可用像素或表格高度百分比表示title鼠标指向该行时，显示的指示信息bgcolor行的背景颜色bordercolo r行的边框颜色nowrap本行所有单兀格谷不能自动换行td和比 标记主要属性属性名称属性含义align单元格容的水平对齐方式；取值为：left、right、center ；默认为左对齐（若与tr标签的属性冲突时，以单兀格自身的设置为主valign单兀格容的垂直对齐方式；取值为：top、middle、bot

13、tom;默认为垂直居中（若与tr标签的属性冲突时，以单兀格自身的设置为主）（续表）属性名称属性含义width单兀格的宽度，可用像素值或表格宽度的百分比来表示height单兀格的高度，可用像素值或表格高度的百分比来表示bgcolor单元格的背景颜色bordercolor单元格的边框颜色nowrap单兀格容不能自动换行rowspan单元格所占的行数colspan单元格据占的列数合并单元格若需要建立不规则表格，就要用到td标记的rowspan属性和colspan属性来合并单元格。如实现下图到下图的转化。A1A2A3A4BIB4C1C304原始表格合并单元格后的表格进行单元格合并时，需要遵循如下几条原

14、则：.整个表格中，每行的列数要相同。.若某个单元格中，设置了属性colspan=2，表示该单元格在横向占据了两个单元格 的位置，所以，在当前行tr中，就需要少写一个tr标签（如B3单元格）.依此类推， 若设置了属性colspan=”3”,当前行tr中，就需要少写两个td标签（如C2单元格）。.若某个单元格中，设置了属性rowspan=”2”,表示该单元格在纵向占据了两个单元格 的位置，所以，在下一个比 中，该列处就需要少写一个td标签（如A2单元格），若设 置了属性rowspan=”3”在下两行tr 中，该列处都需要少一个tds标签，依此类推。borderrl r，-A2 A3A4B3C2合并

15、后的表格代码为：5. 框架标记框架的主要标记有：和，分别表示整个框架和单个框架框架集标记的几种常用属性有cols、rows、frameborde .cols:创建纵向分割框架时，通过该属性指定各框架的列宽，取值可以是像素和, 分割左右窗口，用*表示剩余部分。rows:创建横向分割框架时，通过该属性指定各框架的行高，取值可以是像素和”, 分割左右窗口，用*表示剩余部分。Frameborder:指定框架周围是否显示边框，取值为0”或no”表示不显示边框， 取值为1”或yes ”则表示显示边框（默认值）边框无法调整粗细。.框架标记frame的几种常用属性有src、name、frameborder、s

16、crolling.src:设置此框架中要显示的网页的文件名（路径），每个框架对应一个网页。name:设置该框架的名称，当有超指定要打开的页面在此框架中显示时，需要使用到 target=框架，此时如果省略了框架名就无法了。frameborder:指定框架周围是否显示边框，“0”是不显示，“1”是显示。Scrolling:设置是否显示滚动条，“yes”表示显示，“no”表示不显示，“auto”表示自 动调整（默认值在包含框架HTML文档中，要使用框架标记frameset取代bodys标记，然后通 过框架标记frame定义单个框架。 除了以上所学到的标记之外，HTML中还包含可以让文本移动的标记 marquee./marquee ;用于在网页中插入音乐、视频和动画的标记embed ;背 景音乐标记bgsound等，如果要实现页面之间的过渡效果，可以通Hmeta标记的属 性来实现。HTML语言拥有许多功能丰富标记，由于时间与能力有限，就不在介绍了。