网页设计教程

上传人：简*** IP属地：河北上传时间：2024-10-27 格式：PDF 页数：38 大小：4.48MB 积分：12 举报 版权申诉

已阅读5页，还剩33页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

表

■

•无杼击列表

——序列表

—有序列表

•列表的酸步

2012-8-28SchoolSoochowUniversity2

无杼击列表

•无标志列表

-指所要排列的内容前后并无一定次序，在使

用时并不需要进行特别的组织，而且列表前

面不需要特定的标志符号，如数字等.

・创建无标志列表的方法

-＜br＞标记

-＜dl＞...v/dl＞标记和vdt＞或者vdd＞标记的组

合

2012-8-28SchoolofAppliedTechnologySoochowUniversity

另杼击列表

利用vbr>标记创建无标志列表

<html>

<head>

<body>

vhl>流行快讯v/hl><!-创建标题样式->

<fontsize=4color="#000080”>

刘德华武汉演唱会取消vbr>

超女冠军昨晚决出vbr>

</font>

</body>

<html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity

二

vbr＞创建无标志列表效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity5

利用v(H＞…v/dl＞和vdt＞标记创建无标记列表

<html>

<body>

vh2>流行快讯v/h2><!-创建标题样式->

vdt>刘德华武汉演唱会取消

vdt>超女冠军昨晚决出

</font>

</dl>

</body>

<html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity6

Vdl＞…v/dl＞和Vdt＞组合效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity7

利用＜dl＞...v/dl＞和vdd＞标记创建无标记列表

<html>

<body>

vh3>流行快讯v/h3><!-创建标题样式->

vdd>刘德华武汉演唱会取消

vdd>超女冠军昨晚决出

</font>

</dl>

</body>

<html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity8

二

1：vdl＞…v/dl＞和vdd＞组合效果

21•

2012-8-28SchoolofAppliedTechnologySoochowUniversity9

石杼会列表Ji吉

•vbr＞标记，不会产生缩进

•＜dl＞...v/dl＞和vdt＞组合,不会产生缩进

•vdl＞…v/dl＞和vdd＞组合，会产生带缩进

的列表

2012-8-28SchoolofAppliedTechnologySoochowUniversity10

有杼击列忐

•无序列表

-指列表前面有圆圈等类似的标志，但这些列

表之间并没有什么顺序，只是为了使得每个

条目更加醒目。

•有序列表

-指列表前面存在数字或者英文字母等有顺序

的标志，表示这些列表之间存在一定的前后

顺序。这样不但使得列表更加醒目，而且表

明了列表之间的顺序关系。

2012-8-28SchoolofAppliedTechnologySoochowUniversity11

..........麦左.烈盛.............

,创建考限

-<ul>.......v/ul>和vli>组合。

-格式：

•<ul>

-<li>第一个列表

-<li>第二个列表

•</ul>

-注意：Qi>是单标记，即一个一个表项的开始,就是

前一个表项的结束.

2012-8-28SchoolofAppliedTechnologySoochowUniversity12

一

二.......为感理奏.........

三•羌屋加装那总

二-列表项目作为一个整体，与上下段文本间各

二有一行空白;表项向右缩进并左对齐,每行前

二面有项目符号。每个表项左端的项目符号

二可为disc（实心圆点）、circle（空心圆

二点）、square（方块），也可为图像。

二

-例如

一<ultype="disc”>

二

二<ultype=^graphl.giP>

一2012-8-28SchoolofAppliedTechnologySoochowUniversity13

」

无序列表应用示例

<html>

vhead>vtitle>无序列表v/title>v/head>

<body>

<palign=left><fontcolor=bluesize=4>

vb>流行快讯v/b>v/funt>v/p>

<ul>

<litype="circle"/U德华武汉演唱会取消

<litype="square”>超女冠军昨晚决出

<litype="disc”>刘翔昨晚再获冠军

</ul>

</body>

SchoolofAppliedTechnologySoochowUniversity

无序列表效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity15

无序列表强音事项

•用Vlll＞和4i＞两个标签可以设计出想到整

齐的文本段。

,不推荐使用vul＞和vli＞来开发网页。

•一般推荐使用段落vp＞或分区显示vdiv＞

显示标记来格式化文本。

2012-8-28SchoolofAppliedTechnologySoochowUniversity16

二

I:单列表

w:1受前裹...................................

□：单列表是比较常用的无序列表，它往往用

■：于列出几个相关网页的索引，以便通过超链接

来很快选取感兴趣的内容。

工•格式为：

二.<menu>

q：<ih〉选单列表的标题

二：Qi〉第一个列表项

二〈廿〉第二个列表项

.•</menu>

,2012-8-28SchoolofAppliedTechnologySoochowUniversity17

二

单列表应用示例

•<html>

•<headxtitle>单歹U表应用示例</titleX/head>

•<body>

.<menu>

•<lhXfontsize=4>网页设计过程

•</fontX/ln>

:<Li>打开编辑软代

:<li>输入HTML语言

•<li>保存文件

•<li>用浏览器浏览

.</menu>

:</body>

•</html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity18

1:有序列表

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

,：•创建有序列表

4•-通过带序号的列表可以更清楚地表达信息的顺序。使用〈。1〉

二:标记可以建立有序列表，表项的标记为<li>

，••格式为：

2^9<oi>

J•<li〉第一个列表项

音,<li〉第二个列表项

一・</ol>

一：*在浏览器中显示时，有序列表整个表项与上下段之间

・•各有一行空白，列表项目向右缩进并左对齐，各表项

■•前带序号。

H•

,2012-8-28SchoolofAppliedTechnologySoochowUniversity19

二

有序列表应用示例

<html>

<head><title>W序列表v/title>v/head>

<body>

<palign=left><fontcolor=bluesize=4>

vb>专业设置v/b>v/funt>v/p>

<ol>

vli>计算机应用

4i>计算机软件

4i>计算机图形学

</ol>

</body>

</html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity20

有序列表应用示例效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity21

有序列表

改变有序列表中的序号种类

-利用<。1〉或Gi>中的type属性可设定5种序号：数字、大小写

英文字母、大小写罗马字母。默认序号为数字。

-在〈。1〉指定的符号样式，影响其所有序列表。

-格式为：—TypeNumberingstyle

序号》

<oltype=1arabicnumbers1,2,3,

<litype=序号,aloweralpha与bja

—例如：AupperalphaAB,J.

ilowerromani,ii,iii,…

nnMn

<oltype=istart=4></ol>Iupperromaiti,n,m,

•type="i"：设定数目款式，其值有五

种，请参考右表，内定为type="l"。

•start="4«：设定开始数目，不论设定了哪一数目款式，其

值只能是等整数，内定为start=nlno

2012-8-28SchoolofAppliedTechnologySoochowUniversity22

列表的爱步

-列表嵌套把主页分为多个层次，例如书的

目录，给人以很强的层次感。

嵌套方式：-

-自身列表嵌套

-混合嵌套

2012-8-28SchoolofAppliedTechnologySoochowUniversity23

一e多列表就布（1）

二

三•嵌套无标志列表

二<html>

vheadxtitle>列表嵌套的应用</title></head>

二

<bodytext=navy>

二vh4>使用标记<dt>产生无标志列表嵌套v/h4>

二dl>

vdt>在歌曲库中增加周惠的《约定》——2004.4.21

二

vdt>新增林忆莲的《至少还有你》----2000.4.21

二vdl>王菲金曲：<!-第二层标记->

<dt>《明月几时有》

二

:vdt>年度最佳歌曲

二

vdt>当月排行榜第一

二•

vdt>MTV制作最佳作品

二•

•</dl><!-第三层标记结束->

2012-8-28SchoolofAppliedTechnologySoochowUniversity24

二一

&多列表爱布(1)

<dt>《棋子》

<dt>《天空》

<dt>《爱哭鬼》

v/dl><!”第—•层标记结束-->

vdt>动力火车火爆金曲一2000.4.25

v/dl><!—第一1层标记结束-1>

</body>

</html>

一2012-8-28SchoolofAppliedTechnologySoochowUniversity25

二

43列表就布（1）殁果

文件《日编辑也）查看（y）收藏（独工具（D帮助（a）

◎总会◎搜索山收藏夹金媒体J二_V3，@

地址9）区1Dg.HTML

-3-网页-MP3-立即搜索-②拦翻▼|令工a▼3网站导航▼包j松注

使用标记<d»产生的标志列表嵌套

在歌曲库中增加周惠的《约定》-----2004.4.21

新增林忆莲的《至少还有你》——2000.4.21

王菲金曲：

《明月几时有》

年度最佳歌曲

当月排行榜第一

MTV制作最佳作品

《棋子》

《天空》

《爰哭鬼》

动力火车火爆荃曲一2000.4.25

，由完毕自我的电脑

;拿开蛤|MlG3伞多,A本地磁盘»：）j®]Chap2-5Html语言…|②UltraEda>32.[D:\br....11苞3列表嵌套的应用-…!桌面》三《©区cJ暮黑国13:27

2012-8-28SchoolofAppliedTechnologySoochowUniversity26

一e多列表爱布（2）

二

三•嵌套有标志的无序列表

二<html>

列表的嵌套

二<head><title>Wv/title>v/head>

<bodytext=navy>

二vh4>使用标记<ul><H>产生的标志列表嵌套v/h4>

二<ul>最外层标记

vli>在歌曲库中增加周惠的《约定》----2004.4.21

二

vli>新增林忆莲的《至少还有你》----2000.4.21

二<ul>王菲金曲：<!—第二层标记—>

《明月几时有》

二<li>

:vli>年度最佳歌曲

二

vli>当月排行榜第一

二•

vli>MTV制作最佳作品

二•

•</ul><!-第三层标记结束->

2012-8-28SchoolofAppliedTechnologySoochowUniversity27

二一

&多列表爱布(2)

<li>《棋子》

<li>《天空》

<li>《爱哭鬼》

v/ul><!―.第—^层标记结束-->

vli>动力火车火爆金曲一2000425

v/ul><!--第一1层标记结束—>

</body>

</html>

•说明：

-有标志列表嵌套时，使用vul>、4i>组合标记会自动产生带有

方框、圆圈等标志的列表效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity28

43列表成布(2)殁果

2012-8-28SchoolofAppliedTechnologySoochowUniversity29

一e多列表爱布（3）

二

三•嵌套有标志的有序列表

二<html>

列表的嵌套

二<head><title>Wv/title>v/head>

<bodytext=navy>

二vh4>使用标记<ul><H>产生的标志列表嵌套v/h4>

二<ol>

vli>在歌曲库中增加周惠的《约定》----2004.4.21

二

vli>新增林忆莲的《至少还有你》----2000.4.21

二<oltype=a>王菲金曲：<!—第二层标记—>

《明月几时有》

二<li>

<oltype=i><!—第三层标记

:vli>年度最佳歌曲

二

vli>当月排行榜第一

二•

vli>MTV制作最佳作品

二•

•</ol><!-第三层标记结束->

2012-8-28SchoolofAppliedTechnologySoochowUniversity30

二一

&多列表爱布(3)

<li>《棋子》

<li>《天空》

<li>《爱哭鬼》

v/ol><!--第—•层标记结束—>

vli>动力火车火爆金曲一2000425

v/ol><!--用一'层标记结束—>

</body>

</html>

一2012-8-28SchoolofAppliedTechnologySoochowUniversity31

二

43列表就布（3）殁果

等有列表的冰套-MicrosoftInternetExplorer

文件（日编辑《0查看过）收藏（㈤工具（D和助比）

J画H◎搜索」收藏夹W媒体3/，3•二］0口

地址（0>隹）Dg.HTML三］谈转到|链盘叫俺.

习阿页-MP3立即搜索▼②拦截▼।工具.3巴站导航二J3）标注

使用标记<。1><li>产生的标志列表嵌套

1.在歌曲库中增加周惠的《约定》----2004.4.21

新增林忆莲的《至少还有你》——-2000.4.21

王菲金曲：

《明月几时有》

i.年度最佳歌曲

ii.当月徘行榜第一

ii-MTV制作最佳作品

《快子》

《天空》

《爰哭鬼》

动力火车火爆金曲一2000.4.25

总完毕国我的电脑

3B开始|0日⑨发》»》本地磁盎9：）I篁］Chap2-5Html语百|②Ut"aEdit-32-R:\br…巷］有列表的嵌套-Mtcr...，桌面>>与弋。网运;二9G氧B313:56

2012-8-28SchoolofAppliedTechnologySoochowUniversity32

一泯合牵

二It

三•混合嵌套

二<html>

列表的嵌套

二<head><title>Wv/title>v/head>

<bodytext=navy>

二vh4>使用标记<ul><H>产生的标志列表嵌套v/h4>

二<ol>

vli>在歌曲库中增加周惠的《约定》----2004.4.21

二

vli>新增林忆莲的《至少还有你》----2000.4.21

二<oltype=a>王菲金曲：<!—第二层标记—>

《明月几时有》

二<li>

:vli>年度最佳歌曲

二

vli>当月排行榜第一

二•

vli>MTV制作最佳作品

二•

•</ul><!-第三层标记结束->

2012-8-28SchoolofAppliedTechnologySoochowUniversity33

二一

泯合It牵

<li>《棋子》

<li>《天空》

<li>《爱哭鬼》

v/ol><!--第—•层标记结束—>

vli>动力火车火爆金曲一2000425

v/ol><!--用一'层标记结束—>

</body>

</html>

一2012-8-28SchoolofAppliedTechnologySoochowUniversity34

二

阍合成步效果

的藉I-।-r

:拿开始IHe3

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计教程

文档简介

温馨提示

最新文档

评论

网页设计教程

文档简介

温馨提示

最新文档

评论

相关文档