網(wǎng)頁(yè)設(shè)計(jì)教程

上傳人：簡(jiǎn)*** IP屬地：河北上傳時(shí)間：2024-10-27 格式：PDF 頁(yè)數(shù)：38 大?。?.48MB 積分：12 舉報(bào) 版權(quán)申訴

已閱讀5頁(yè)，還剩33頁(yè)未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

表

■

?無(wú)杼擊列表

——序列表

—有序列表

?列表的酸步

2012-8-28SchoolSoochowUniversity2

無(wú)杼擊列表

?無(wú)標(biāo)志列表

-指所要排列的內(nèi)容前后并無(wú)一定次序，在使

用時(shí)并不需要進(jìn)行特別的組織，而且列表前

面不需要特定的標(biāo)志符號(hào)，如數(shù)字等.

?創(chuàng)建無(wú)標(biāo)志列表的方法

-＜br＞標(biāo)記

-＜dl＞...v/dl＞標(biāo)記和vdt＞或者vdd＞標(biāo)記的組

合

2012-8-28SchoolofAppliedTechnologySoochowUniversity

另杼擊列表

利用vbr>標(biāo)記創(chuàng)建無(wú)標(biāo)志列表

<html>

<head>

<body>

vhl>流行快訊v/hl><!-創(chuàng)建標(biāo)題樣式->

<fontsize=4color="#000080”>

劉德華武漢演唱會(huì)取消vbr>

超女冠軍昨晚決出vbr>

</font>

</body>

<html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity

二

vbr＞創(chuàng)建無(wú)標(biāo)志列表效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity5

利用v(H＞…v/dl＞和vdt＞標(biāo)記創(chuàng)建無(wú)標(biāo)記列表

<html>

<body>

vh2>流行快訊v/h2><!-創(chuàng)建標(biāo)題樣式->

vdt>劉德華武漢演唱會(huì)取消

vdt>超女冠軍昨晚決出

</font>

</dl>

</body>

<html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity6

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

2012-8-28SchoolofAppliedTechnologySoochowUniversity7

利用＜dl＞...v/dl＞和vdd＞標(biāo)記創(chuàng)建無(wú)標(biāo)記列表

<html>

<body>

vh3>流行快訊v/h3><!-創(chuàng)建標(biāo)題樣式->

vdd>劉德華武漢演唱會(huì)取消

vdd>超女冠軍昨晚決出

</font>

</dl>

</body>

<html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity8

二

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

21?

2012-8-28SchoolofAppliedTechnologySoochowUniversity9

石杼會(huì)列表Ji吉

?vbr＞標(biāo)記，不會(huì)產(chǎn)生縮進(jìn)

?＜dl＞...v/dl＞和vdt＞組合,不會(huì)產(chǎn)生縮進(jìn)

?vdl＞…v/dl＞和vdd＞組合，會(huì)產(chǎn)生帶縮進(jìn)

的列表

2012-8-28SchoolofAppliedTechnologySoochowUniversity10

有杼擊列忐

?無(wú)序列表

-指列表前面有圓圈等類(lèi)似的標(biāo)志，但這些列

表之間并沒(méi)有什么順序，只是為了使得每個(gè)

條目更加醒目。

?有序列表

-指列表前面存在數(shù)字或者英文字母等有順序

的標(biāo)志，表示這些列表之間存在一定的前后

順序。這樣不但使得列表更加醒目，而且表

明了列表之間的順序關(guān)系。

2012-8-28SchoolofAppliedTechnologySoochowUniversity11

..........麥左.烈盛.............

,創(chuàng)建考限

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

-格式：

?<ul>

-<li>第一個(gè)列表

-<li>第二個(gè)列表

?</ul>

-注意：Qi>是單標(biāo)記，即一個(gè)一個(gè)表項(xiàng)的開(kāi)始,就是

前一個(gè)表項(xiàng)的結(jié)束.

2012-8-28SchoolofAppliedTechnologySoochowUniversity12

一

二.......為感理奏.........

三?羌屋加裝那總

二-列表項(xiàng)目作為一個(gè)整體，與上下段文本間各

二有一行空白;表項(xiàng)向右縮進(jìn)并左對(duì)齊,每行前

二面有項(xiàng)目符號(hào)。每個(gè)表項(xiàng)左端的項(xiàng)目符號(hào)

二可為disc（實(shí)心圓點(diǎn)）、circle（空心圓

二點(diǎn)）、square（方塊），也可為圖像。

二

-例如

一<ultype="disc”>

二

二<ultype=^graphl.giP>

一2012-8-28SchoolofAppliedTechnologySoochowUniversity13

」

無(wú)序列表應(yīng)用示例

<html>

vhead>vtitle>無(wú)序列表v/title>v/head>

<body>

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

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

<ul>

<litype="circle"/U德華武漢演唱會(huì)取消

<litype="square”>超女冠軍昨晚決出

<litype="disc”>劉翔昨晚再獲冠軍

</ul>

</body>

SchoolofAppliedTechnologySoochowUniversity

無(wú)序列表效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity15

無(wú)序列表強(qiáng)音事項(xiàng)

?用Vlll＞和4i＞兩個(gè)標(biāo)簽可以設(shè)計(jì)出想到整

齊的文本段。

,不推薦使用vul＞和vli＞來(lái)開(kāi)發(fā)網(wǎng)頁(yè)。

?一般推薦使用段落vp＞或分區(qū)顯示vdiv＞

顯示標(biāo)記來(lái)格式化文本。

2012-8-28SchoolofAppliedTechnologySoochowUniversity16

二

I:單列表

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

□：?jiǎn)瘟斜硎潜容^常用的無(wú)序列表，它往往用

■：于列出幾個(gè)相關(guān)網(wǎng)頁(yè)的索引，以便通過(guò)超鏈接

來(lái)很快選取感興趣的內(nèi)容。

工?格式為：

二.<menu>

q：<ih〉選單列表的標(biāo)題

二：Qi〉第一個(gè)列表項(xiàng)

二〈廿〉第二個(gè)列表項(xiàng)

.?</menu>

,2012-8-28SchoolofAppliedTechnologySoochowUniversity17

二

單列表應(yīng)用示例

?<html>

?<headxtitle>單歹U表應(yīng)用示例</titleX/head>

?<body>

.<menu>

?<lhXfontsize=4>網(wǎng)頁(yè)設(shè)計(jì)過(guò)程

?</fontX/ln>

:<Li>打開(kāi)編輯軟代

:<li>輸入HTML語(yǔ)言

?<li>保存文件

?<li>用瀏覽器瀏覽

.</menu>

:</body>

?</html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity18

1:有序列表

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

,：?創(chuàng)建有序列表

4?-通過(guò)帶序號(hào)的列表可以更清楚地表達(dá)信息的順序。使用〈。1〉

二:標(biāo)記可以建立有序列表，表項(xiàng)的標(biāo)記為<li>

，??格式為：

2^9<oi>

J?<li〉第一個(gè)列表項(xiàng)

音,<li〉第二個(gè)列表項(xiàng)

一?</ol>

一：*在瀏覽器中顯示時(shí)，有序列表整個(gè)表項(xiàng)與上下段之間

??各有一行空白，列表項(xiàng)目向右縮進(jìn)并左對(duì)齊，各表項(xiàng)

■?前帶序號(hào)。

,2012-8-28SchoolofAppliedTechnologySoochowUniversity19

二

有序列表應(yīng)用示例

<html>

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

<body>

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

vb>專(zhuān)業(yè)設(shè)置v/b>v/funt>v/p>

<ol>

vli>計(jì)算機(jī)應(yīng)用

4i>計(jì)算機(jī)軟件

4i>計(jì)算機(jī)圖形學(xué)

</ol>

</body>

</html>

2012-8-28SchoolofAppliedTechnologySoochowUniversity20

有序列表應(yīng)用示例效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity21

有序列表

改變有序列表中的序號(hào)種類(lèi)

-利用<。1〉或Gi>中的type屬性可設(shè)定5種序號(hào)：數(shù)字、大小寫(xiě)

英文字母、大小寫(xiě)羅馬字母。默認(rèn)序號(hào)為數(shù)字。

-在〈。1〉指定的符號(hào)樣式，影響其所有序列表。

-格式為：—TypeNumberingstyle

序號(hào)》

<oltype=1arabicnumbers1,2,3,

<litype=序號(hào),aloweralpha與bja

—例如：AupperalphaAB,J.

ilowerromani,ii,iii,…

nnMn

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

?type="i"：設(shè)定數(shù)目款式，其值有五

種，請(qǐng)參考右表，內(nèi)定為type="l"。

?start="4?：設(shè)定開(kāi)始數(shù)目，不論設(shè)定了哪一數(shù)目款式，其

值只能是等整數(shù)，內(nèi)定為start=nlno

2012-8-28SchoolofAppliedTechnologySoochowUniversity22

列表的愛(ài)步

-列表嵌套把主頁(yè)分為多個(gè)層次，例如書(shū)的

目錄，給人以很強(qiáng)的層次感。

嵌套方式：-

-自身列表嵌套

-混合嵌套

2012-8-28SchoolofAppliedTechnologySoochowUniversity23

一e多列表就布（1）

二

三?嵌套無(wú)標(biāo)志列表

二<html>

vheadxtitle>列表嵌套的應(yīng)用</title></head>

二

<bodytext=navy>

二vh4>使用標(biāo)記<dt>產(chǎn)生無(wú)標(biāo)志列表嵌套v/h4>

二dl>

vdt>在歌曲庫(kù)中增加周惠的《約定》——2004.4.21

二

vdt>新增林憶蓮的《至少還有你》----2000.4.21

二vdl>王菲金曲：<!-第二層標(biāo)記->

<dt>《明月幾時(shí)有》

二

:vdt>年度最佳歌曲

二

vdt>當(dāng)月排行榜第一

二?

vdt>MTV制作最佳作品

二?

?</dl><!-第三層標(biāo)記結(jié)束->

2012-8-28SchoolofAppliedTechnologySoochowUniversity24

二一

&多列表愛(ài)布(1)

<dt>《棋子》

<dt>《天空》

<dt>《愛(ài)哭鬼》

v/dl><!”第—?層標(biāo)記結(jié)束-->

vdt>動(dòng)力火車(chē)火爆金曲一2000.4.25

v/dl><!—第一1層標(biāo)記結(jié)束-1>

</body>

</html>

一2012-8-28SchoolofAppliedTechnologySoochowUniversity25

二

43列表就布（1）歿果

文件《日編輯也）查看（y）收藏（獨(dú)工具（D幫助（a）

◎總會(huì)◎搜索山收藏夾金媒體J二_V3，@

地址9）區(qū)1Dg.HTML

-3-網(wǎng)頁(yè)-MP3-立即搜索-②攔翻▼|令工a▼3網(wǎng)站導(dǎo)航▼包j松注

使用標(biāo)記<d?產(chǎn)生的標(biāo)志列表嵌套

在歌曲庫(kù)中增加周惠的《約定》-----2004.4.21

新增林憶蓮的《至少還有你》——2000.4.21

王菲金曲：

《明月幾時(shí)有》

年度最佳歌曲

當(dāng)月排行榜第一

MTV制作最佳作品

《棋子》

《天空》

《爰哭鬼》

動(dòng)力火車(chē)火爆荃曲一2000.4.25

，由完畢自我的電腦

;拿開(kāi)蛤|MlG3傘多,A本地磁盤(pán)?：）j?]Chap2-5Html語(yǔ)言…|②UltraEda>32.[D:\br....11苞3列表嵌套的應(yīng)用-…!桌面》三《?區(qū)cJ暮黑國(guó)13:27

2012-8-28SchoolofAppliedTechnologySoochowUniversity26

一e多列表愛(ài)布（2）

二

三?嵌套有標(biāo)志的無(wú)序列表

二<html>

列表的嵌套

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

<bodytext=navy>

二vh4>使用標(biāo)記<ul><H>產(chǎn)生的標(biāo)志列表嵌套v/h4>

二<ul>最外層標(biāo)記

vli>在歌曲庫(kù)中增加周惠的《約定》----2004.4.21

二

vli>新增林憶蓮的《至少還有你》----2000.4.21

二<ul>王菲金曲：<!—第二層標(biāo)記—>

《明月幾時(shí)有》

二<li>

:vli>年度最佳歌曲

二

vli>當(dāng)月排行榜第一

二?

vli>MTV制作最佳作品

二?

?</ul><!-第三層標(biāo)記結(jié)束->

2012-8-28SchoolofAppliedTechnologySoochowUniversity27

二一

&多列表愛(ài)布(2)

<li>《棋子》

<li>《天空》

<li>《愛(ài)哭鬼》

v/ul><!―.第—^層標(biāo)記結(jié)束-->

vli>動(dòng)力火車(chē)火爆金曲一2000425

v/ul><!--第一1層標(biāo)記結(jié)束—>

</body>

</html>

?說(shuō)明：

-有標(biāo)志列表嵌套時(shí)，使用vul>、4i>組合標(biāo)記會(huì)自動(dòng)產(chǎn)生帶有

方框、圓圈等標(biāo)志的列表效果

2012-8-28SchoolofAppliedTechnologySoochowUniversity28

43列表成布(2)歿果

2012-8-28SchoolofAppliedTechnologySoochowUniversity29

一e多列表愛(ài)布（3）

二

三?嵌套有標(biāo)志的有序列表

二<html>

列表的嵌套

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

<bodytext=navy>

二vh4>使用標(biāo)記<ul><H>產(chǎn)生的標(biāo)志列表嵌套v/h4>

二<ol>

vli>在歌曲庫(kù)中增加周惠的《約定》----2004.4.21

二

vli>新增林憶蓮的《至少還有你》----2000.4.21

二<oltype=a>王菲金曲：<!—第二層標(biāo)記—>

《明月幾時(shí)有》

二<li>

<oltype=i><!—第三層標(biāo)記

:vli>年度最佳歌曲

二

vli>當(dāng)月排行榜第一

二?

vli>MTV制作最佳作品

二?

?</ol><!-第三層標(biāo)記結(jié)束->

2012-8-28SchoolofAppliedTechnologySoochowUniversity30

二一

&多列表愛(ài)布(3)

<li>《棋子》

<li>《天空》

<li>《愛(ài)哭鬼》

v/ol><!--第—?層標(biāo)記結(jié)束—>

vli>動(dòng)力火車(chē)火爆金曲一2000425

v/ol><!--用一'層標(biāo)記結(jié)束—>

</body>

</html>

一2012-8-28SchoolofAppliedTechnologySoochowUniversity31

二

43列表就布（3）歿果

等有列表的冰套-MicrosoftInternetExplorer

文件（日編輯《0查看過(guò)）收藏（㈤工具（D和助比）

J畫(huà)H◎搜索」收藏夾W媒體3/，3?二］0口

地址（0>隹）Dg.HTML三］談轉(zhuǎn)到|鏈盤(pán)叫俺.

習(xí)阿頁(yè)-MP3立即搜索▼②攔截▼?工具.3巴站導(dǎo)航二J3）標(biāo)注

使用標(biāo)記<。1><li>產(chǎn)生的標(biāo)志列表嵌套

1.在歌曲庫(kù)中增加周惠的《約定》----2004.4.21

新增林憶蓮的《至少還有你》——-2000.4.21

王菲金曲：

《明月幾時(shí)有》

i.年度最佳歌曲

ii.當(dāng)月徘行榜第一

ii-MTV制作最佳作品

《快子》

《天空》

《爰哭鬼》

動(dòng)力火車(chē)火爆金曲一2000.4.25

總完畢國(guó)我的電腦

3B開(kāi)始|0日⑨發(fā)》?》本地磁盎9：）I篁］Chap2-5Html語(yǔ)百|(zhì)②Ut"aEdit-32-R:\br…巷］有列表的嵌套-Mtcr...，桌面>>與弋。網(wǎng)運(yùn);二9G氧B313:56

2012-8-28SchoolofAppliedTechnologySoochowUniversity32

一泯合牽

二It

三?混合嵌套

二<html>

列表的嵌套

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

<bodytext=navy>

二vh4>使用標(biāo)記<ul><H>產(chǎn)生的標(biāo)志列表嵌套v/h4>

二<ol>

vli>在歌曲庫(kù)中增加周惠的《約定》----2004.4.21

二

vli>新增林憶蓮的《至少還有你》----2000.4.21

二<oltype=a>王菲金曲：<!—第二層標(biāo)記—>

《明月幾時(shí)有》

二<li>

:vli>年度最佳歌曲

二

vli>當(dāng)月排行榜第一

二?

vli>MTV制作最佳作品

二?

?</ul><!-第三層標(biāo)記結(jié)束->

2012-8-28SchoolofAppliedTechnologySoochowUniversity33

二一

泯合It牽

<li>《棋子》

<li>《天空》

<li>《愛(ài)哭鬼》

v/ol><!--第—?層標(biāo)記結(jié)束—>

vli>動(dòng)力火車(chē)火爆金曲一2000425

v/ol><!--用一'層標(biāo)記結(jié)束—>

</body>

</html>

一2012-8-28SchoolofAppliedTechnologySoochowUniversity34

二

閽合成步效果

的藉I-?-r

:拿開(kāi)始IHe3

人人文庫(kù)> 全部分類(lèi)> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

網(wǎng)頁(yè)設(shè)計(jì)教程

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

網(wǎng)頁(yè)設(shè)計(jì)教程

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔