網(wǎng)頁設(shè)計與制作項(xiàng)目教程項(xiàng)目5-“穿搭速遞”首頁面課件

項(xiàng)目5“穿搭速遞”首頁面制作·

超鏈接標(biāo)記·CSS偽類·列表標(biāo)記·列表樣式

HTML項(xiàng)目5“穿搭速遞”首頁面制作·超鏈接標(biāo)記·列表標(biāo)記H學(xué)習(xí)目標(biāo)掌握列表標(biāo)記，能夠使用列表對網(wǎng)頁中的信息進(jìn)行簡單的排序。1掌握了解熟悉掌握超鏈接標(biāo)記，能夠使用超鏈接實(shí)現(xiàn)頁面間的跳轉(zhuǎn)。2了解css偽類，能夠運(yùn)用鏈接偽類控制超鏈接。4熟悉列表樣式的控制，能夠運(yùn)用CSS定義豐富的列表項(xiàng)目符號。3學(xué)習(xí)目標(biāo)掌握列表標(biāo)記，能夠使用列表對網(wǎng)頁中的信息進(jìn)行簡單的排

目錄CSS控制列表樣式?點(diǎn)擊查看本小節(jié)知識架構(gòu)超鏈接標(biāo)記?點(diǎn)擊查看本小節(jié)知識架構(gòu)布局及定義基礎(chǔ)樣式【任務(wù)5-1】列表標(biāo)記?點(diǎn)擊查看本小節(jié)知識架構(gòu)【任務(wù)5-2】【任務(wù)5-3】【任務(wù)5-4】目錄CSS控制列表樣式?點(diǎn)擊查看本小節(jié)知識架構(gòu)超鏈接標(biāo)記

目錄制作banner和精品展示模塊制作潮流前沿模塊制作版權(quán)信息模塊【任務(wù)5-5】制作頭部導(dǎo)航模塊【任務(wù)5-6】【任務(wù)5-7】【任務(wù)5-8】目錄制作banner和精品展示模塊制作潮流前沿模塊制作版1無序列表ul有序列表ol

知識架構(gòu)2

【任務(wù)5-1】列表標(biāo)記定義列表dl列表的嵌套應(yīng)用341無序列表ul有序列表ol知識架構(gòu)2

知識架構(gòu)1list-style復(fù)合屬性背景圖像定義列表項(xiàng)目符號2

【任務(wù)5-2】CSS控制列表樣式知識架構(gòu)1list-style復(fù)合屬性背景圖像定義列表項(xiàng)

知識架構(gòu)1創(chuàng)建超鏈接3鏈接偽類控制超鏈接錨點(diǎn)鏈接2

【任務(wù)5-3】超鏈接標(biāo)記知識架構(gòu)1創(chuàng)建超鏈接3鏈接偽類控制超鏈接錨點(diǎn)鏈接2

【任務(wù)5-1】列表標(biāo)記下面將對這三種列表進(jìn)行詳細(xì)地講解。為了便于用戶閱讀，經(jīng)常將網(wǎng)頁信息以列表的形式呈現(xiàn)，為了滿足網(wǎng)頁排版的需求，HTML語言提供了3種常用的列表，分別為無序列表、有序列表和定義列表。【任務(wù)5-1】列表標(biāo)記下面將對這

無序列表ul知識點(diǎn)概述無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因?yàn)槠涓鱾€列表項(xiàng)之間為并列關(guān)系，沒有順序級別之分。<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>......</ul>基本語法格式

【任務(wù)5-1】列表標(biāo)記1.無序列表ul知識點(diǎn)概述無序列表是網(wǎng)頁中最常用的列表，

無序列表ul不贊成使用無序列表的type屬性，一般通過CSS樣式屬性替代。<li>與</li>之間相當(dāng)于一個容器，可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)記中輸入文字的做法是不被允許的。

【任務(wù)5-1】列表標(biāo)記1.無序列表ul不贊成使用無序列表的type屬性，一般通

有序列表ol知識點(diǎn)概述有序列表即為有排列順序的列表，其各個列表項(xiàng)會按照一定的順序排列。<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>......</ol>基本語法格式

【任務(wù)5-1】列表標(biāo)記2.有序列表ol知識點(diǎn)概述有序列表即為有排列順序的列表，

定義列表dl知識點(diǎn)概述定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，與無序和有序列表不同，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號。<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>...<dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋2</dd>...</dl>基本語法格式

【任務(wù)5-1】列表標(biāo)記3.定義列表dl知識點(diǎn)概述定義列表常用于對術(shù)語或名詞進(jìn)行

定義列表dl知識點(diǎn)概述在網(wǎng)頁設(shè)計中，定義列表常用于實(shí)現(xiàn)圖文混排效果，其中<dt></dt>標(biāo)記中插入圖片，<dd></dd>標(biāo)記中放入對圖片解釋說明的文字。

【任務(wù)5-1】列表標(biāo)記3.定義列表dl知識點(diǎn)概述在網(wǎng)頁設(shè)計中，定義列表常用于實(shí)列表的嵌套應(yīng)用知識點(diǎn)概述要想在列表項(xiàng)中定義子列表項(xiàng)就需要將列表進(jìn)行嵌套。

【任務(wù)5-1】列表標(biāo)記4.列表的嵌套應(yīng)用知識點(diǎn)概述要想在列表項(xiàng)中定義子列表項(xiàng)就實(shí)際工作中常常需要對列表的樣式進(jìn)行美化，為此CSS提供了一系列的列表屬性。下面，將針對CSS中相關(guān)的列表樣式屬性進(jìn)行詳細(xì)講解。

【任務(wù)5-2】CSS控制列表樣式實(shí)際工作中常常需要對列表的樣式進(jìn)行美化，為此CSS提供了一系list-style復(fù)合屬性知識點(diǎn)概述定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，與無序和有序列表不同，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號。list-style:列表項(xiàng)目符號列表項(xiàng)目符號的位置列表項(xiàng)目圖像;基本語法格式

【任務(wù)5-2】CSS控制列表樣式1.list-style復(fù)合屬性知識點(diǎn)概述定義列表常用于單調(diào)的列表項(xiàng)目符號往往并不能滿足網(wǎng)頁制作的需求，這時就需要使用CSS中的背景圖像屬性，通過圖像的url（路徑）為各列表項(xiàng)設(shè)置更豐富的圖像，使列表的樣式變得更加美觀。實(shí)際工作中，通常通過為<li>設(shè)置背景圖像的方式實(shí)現(xiàn)列表項(xiàng)目符號的控制。

【任務(wù)5-2】CSS控制列表樣式2.

背景圖像定義列表項(xiàng)目符號單調(diào)的列表項(xiàng)目符號往往并不能滿足網(wǎng)頁制作的需求，這時就需要使

背景圖像定義列表項(xiàng)目符號知識點(diǎn)概述由于列表樣式對列表項(xiàng)目圖像的控制能力不強(qiáng)，所以實(shí)際工作中常通過為<li>設(shè)置背景圖像的方式實(shí)現(xiàn)列表項(xiàng)目圖像。

【任務(wù)5-2】CSS控制列表樣式2.背景圖像定義列表項(xiàng)目符號知識點(diǎn)概述由于列表樣式對列表一個網(wǎng)站通常由多個頁面構(gòu)成，如果想從首頁跳轉(zhuǎn)到其他頁面，就需要在首頁相應(yīng)的位置添加超鏈接。下面，將對超鏈接標(biāo)記的創(chuàng)建及樣式控制進(jìn)行詳細(xì)講解。

【任務(wù)5-3】超鏈接標(biāo)記一個網(wǎng)站通常由多個頁面構(gòu)成，如果想從首頁跳轉(zhuǎn)到其他頁面，就需創(chuàng)建超鏈接知識點(diǎn)概述在HTML中創(chuàng)建超鏈接非常簡單，只需用<a></a>標(biāo)記環(huán)繞需要被鏈接的對象即可。<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">

文本或圖像</a>基本語法格式

【任務(wù)5-3】超鏈接標(biāo)記1.創(chuàng)建超鏈接知識點(diǎn)概述在HTML中創(chuàng)建超鏈接非常簡單，

創(chuàng)建超鏈接對超鏈接標(biāo)記的常用屬性解釋如下：href用于指定鏈接目標(biāo)的url地址，當(dāng)為<a>標(biāo)記應(yīng)用href屬性時，它就具有了超鏈接的功能。target用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，意為在原窗口中打開，_blank為在新窗口中打開。

【任務(wù)5-3】超鏈接標(biāo)記1.創(chuàng)建超鏈接對超鏈接標(biāo)記的常用屬性解釋如下：href用

創(chuàng)建超鏈接知識點(diǎn)概述創(chuàng)建圖像超鏈接時，在某些瀏覽器中，圖像會自動添加邊框效果，這時為了不影響頁面的美觀，通常需要清除超鏈接圖像的邊框，使圖像正常顯示。具體示例代碼如下：<ahref="#"><imgsrc="images/logo.gif"border="0"/></a>

【任務(wù)5-3】超鏈接標(biāo)記1.創(chuàng)建超鏈接知識點(diǎn)概述創(chuàng)建圖像超鏈接時，在某些瀏覽器中

錨點(diǎn)鏈接知識點(diǎn)概述瀏覽網(wǎng)站時，為了提高信息的檢索速度，常需要用到HTML語言中一種特殊的鏈接——錨點(diǎn)鏈接，通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。創(chuàng)建錨點(diǎn)鏈接跳轉(zhuǎn)到定位位置

【任務(wù)5-3】超鏈接標(biāo)記2.錨點(diǎn)鏈接知識點(diǎn)概述瀏覽網(wǎng)站時，為了提高信息的檢索速度

錨點(diǎn)鏈接使用“<ahref="#id名">鏈接文本</a>”創(chuàng)建鏈接文本。使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。

【任務(wù)5-3】超鏈接標(biāo)記2.錨點(diǎn)鏈接使用“<ahref="#id名">鏈接文本鏈接偽類控制超鏈接知識點(diǎn)概述在CSS中，通過鏈接偽類可以實(shí)現(xiàn)不同的鏈接狀態(tài)，使得超鏈接在點(diǎn)擊前、點(diǎn)擊后和鼠標(biāo)懸停時的樣式不同。超鏈接標(biāo)記<a>的偽類：

【任務(wù)5-3】超鏈接標(biāo)記3.鏈接偽類控制超鏈接知識點(diǎn)概述在CSS中，通過鏈接偽類可以實(shí)同時使用鏈接的4種偽類時，通常按照a:link、a:visited、a:hover和a:active的順序書寫，否則定義的樣式可能不起作用。除了文本樣式之外，鏈接偽類還常常用于控制超鏈接的背景、邊框等樣式。

【任務(wù)5-3】超鏈接標(biāo)記鏈接偽類控制超鏈接3.同時使用鏈接的4種偽類時，通常按照a:link、a:visi網(wǎng)站項(xiàng)目“穿搭速遞”首頁面制作怎樣制作“穿搭速遞”首頁呢？“穿搭速遞”首頁面制作網(wǎng)站項(xiàng)目“穿搭速遞”首頁面制作怎樣制作“穿搭速遞”首頁呢？“

【任務(wù)5-4】布局及定義基礎(chǔ)樣式【任務(wù)5-4】布局及定拿到效果圖后的準(zhǔn)備工作對頁面進(jìn)行布局，并添加CSS樣式。定義基礎(chǔ)樣式效果分析

【任務(wù)5-4】布局及定義基礎(chǔ)樣式建立站點(diǎn)切圖準(zhǔn)備工作拿到效果圖后的準(zhǔn)備工作對頁面進(jìn)行布局，并添加CSS樣式。定義準(zhǔn)備工作→建立站點(diǎn)1.創(chuàng)建網(wǎng)站根目錄新建站點(diǎn)站點(diǎn)建立完成在根目錄下新建文件step1step2step3step4

【任務(wù)5-4】布局及定義基礎(chǔ)樣式準(zhǔn)備工作→建立站點(diǎn)1.創(chuàng)建網(wǎng)站根目錄新建站點(diǎn)站點(diǎn)建立完成在根1.使用AdobeFireworksCS6的切片工具，導(dǎo)出“穿搭速遞”首頁面中的素材圖片，存儲在站點(diǎn)中的images文件夾中。準(zhǔn)備工作→切圖

【任務(wù)5-4】布局及定義基礎(chǔ)樣式1.使用AdobeFireworksCS6的切片工具，導(dǎo)效果分析2.HTML結(jié)構(gòu)分析CSS樣式分析“導(dǎo)航”模塊和“版權(quán)信息”模塊通欄顯示，主體模塊寬980px且居中顯示。另外，頁面背景為淺橙色，頁面中的文字多為微軟雅黑字體，可以通過CSS公共樣式進(jìn)行定義?！按┐钏龠f”頁面整體上分為“導(dǎo)航”模塊、“主體”模塊、“版權(quán)信息”模塊三部分。其中，主體模塊又可以分為“banner”模塊、“精品展示”模塊、“潮流前沿”模塊三部分。

【任務(wù)5-4】布局及定義基礎(chǔ)樣式效果分析2.HTML結(jié)構(gòu)分析CSS“導(dǎo)航”模塊和“版權(quán)效果分析2.“穿搭速遞”首頁面整體上分為三部分。其中，主體模塊又可以分為banner模塊、精品展示模塊、潮流前沿模塊三部分。

【任務(wù)5-4】布局及定義基礎(chǔ)樣式效果分析2.“穿搭速遞”首頁面整體上分為三部分。其中，主體模定義基礎(chǔ)樣式3./*重置瀏覽器的默認(rèn)樣式*/*{margin:0;padding:0;list-style:none;}/*全局控制*/body{background:#fff9ed;font-family:"微軟雅黑";font-size:14px;}a:link,a:visited{text-decoration:none;color:#ff