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

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

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

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

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

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

知識(shí)架構(gòu)2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文本或圖像</a>基本語(yǔ)法格式

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

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

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

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

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

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

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

錨點(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名">鏈接文本鏈接偽類(lèi)控制超鏈接知識(shí)點(diǎn)概述在CSS中，通過(guò)鏈接偽類(lèi)可以實(shí)現(xiàn)不同的鏈接狀態(tài)，使得超鏈接在點(diǎn)擊前、點(diǎn)擊后和鼠標(biāo)懸停時(shí)的樣式不同。超鏈接標(biāo)記<a>的偽類(lèi)：

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

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

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

【任務(wù)5-4】布局及定義基礎(chǔ)樣式建立站點(diǎn)切圖準(zhǔn)備工作拿到效果圖后的準(zhǔn)備工作對(duì)頁(yè)面進(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)出“穿搭速遞”首頁(yè)面中的素材圖片，存儲(chǔ)在站點(diǎn)中的images文件夾中。準(zhǔn)備工作→切圖

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

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

【任務(wù)5-4】布局及定義基礎(chǔ)樣式效果分析2.“穿搭速遞”首頁(yè)面整體上分為三部分。其中，主體模定義基礎(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