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

項目5“穿搭速遞”首頁面制作·

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

HTML學(xué)習(xí)目標(biāo)掌握列表標(biāo)記，能夠使用列表對網(wǎng)頁中的信息進行簡單的排序。1掌握了解熟悉掌握超鏈接標(biāo)記，能夠使用超鏈接實現(xiàn)頁面間的跳轉(zhuǎn)。2了解css偽類，能夠運用鏈接偽類控制超鏈接。4熟悉列表樣式的控制，能夠運用CSS定義豐富的列表項目符號。3目錄CSS控制列表樣式?點擊查看本小節(jié)知識架構(gòu)超鏈接標(biāo)記?點擊查看本小節(jié)知識架構(gòu)布局及定義基礎(chǔ)樣式【任務(wù)5-1】列表標(biāo)記?點擊查看本小節(jié)知識架構(gòu)【任務(wù)5-2】【任務(wù)5-3】【任務(wù)5-4】目錄制作banner和精品展示模塊制作潮流前沿模塊制作版權(quán)信息模塊【任務(wù)5-5】制作頭部導(dǎo)航模塊【任務(wù)5-6】【任務(wù)5-7】【任務(wù)5-8】1無序列表ul有序列表ol知識架構(gòu)2

【任務(wù)5-1】列表標(biāo)記定義列表dl列表的嵌套應(yīng)用34知識架構(gòu)1list-style復(fù)合屬性背景圖像定義列表項目符號2

【任務(wù)5-2】CSS控制列表樣式知識架構(gòu)1創(chuàng)建超鏈接3鏈接偽類控制超鏈接錨點鏈接2

【任務(wù)5-3】超鏈接標(biāo)記

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

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

【任務(wù)5-1】列表標(biāo)記1.

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

【任務(wù)5-1】列表標(biāo)記1.

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

【任務(wù)5-1】列表標(biāo)記2.

定義列表dl知識點概述定義列表常用于對術(shù)語或名詞進行解釋和描述，與無序和有序列表不同，定義列表的列表項前沒有任何項目符號。<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知識點概述在網(wǎng)頁設(shè)計中，定義列表常用于實現(xiàn)圖文混排效果，其中<dt></dt>標(biāo)記中插入圖片，<dd></dd>標(biāo)記中放入對圖片解釋說明的文字。

【任務(wù)5-1】列表標(biāo)記3.列表的嵌套應(yīng)用知識點概述要想在列表項中定義子列表項就需要將列表進行嵌套。

【任務(wù)5-1】列表標(biāo)記4.實際工作中常常需要對列表的樣式進行美化，為此CSS提供了一系列的列表屬性。下面，將針對CSS中相關(guān)的列表樣式屬性進行詳細講解。

【任務(wù)5-2】CSS控制列表樣式list-style復(fù)合屬性知識點概述定義列表常用于對術(shù)語或名詞進行解釋和描述，與無序和有序列表不同，定義列表的列表項前沒有任何項目符號。list-style:列表項目符號列表項目符號的位置列表項目圖像;基本語法格式

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

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

背景圖像定義列表項目符號

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

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

【任務(wù)5-3】超鏈接標(biāo)記創(chuàng)建超鏈接知識點概述在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)建超鏈接對超鏈接標(biāo)記的常用屬性解釋如下：href用于指定鏈接目標(biāo)的url地址，當(dāng)為<a>標(biāo)記應(yīng)用href屬性時，它就具有了超鏈接的功能。target用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，意為在原窗口中打開，_blank為在新窗口中打開。

【任務(wù)5-3】超鏈接標(biāo)記1.

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

【任務(wù)5-3】超鏈接標(biāo)記1.

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

【任務(wù)5-3】超鏈接標(biāo)記2.

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

【任務(wù)5-3】超鏈接標(biāo)記2.鏈接偽類控制超鏈接知識點概述在CSS中，通過鏈接偽類可以實現(xiàn)不同的鏈接狀態(tài)，使得超鏈接在點擊前、點擊后和鼠標(biāo)懸停時的樣式不同。超鏈接標(biāo)記<a>的偽類：超鏈接標(biāo)記<a>的偽類含義a:link{CSS樣式規(guī)則;}未訪問時超鏈接的狀態(tài)a:visited{CSS樣式規(guī)則;}訪問后超鏈接的狀態(tài)a:hover{CSS樣式規(guī)則;}鼠標(biāo)經(jīng)過、懸停時超鏈接的狀態(tài)a:active{CSS樣式規(guī)則;}鼠標(biāo)點擊不動時超鏈接的狀態(tài)

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

【任務(wù)5-3】超鏈接標(biāo)記鏈接偽類控制超鏈接3.網(wǎng)站項目“穿搭速遞”首頁面制作怎樣制作“穿搭速遞”首頁呢？“穿搭速遞”首頁面制作

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

【任務(wù)5-4】布局及定義基礎(chǔ)樣式建立站點切圖準備工作準備工作→建立站點1.創(chuàng)建網(wǎng)站根目錄新建站點站點建立完成在根目錄下新建文件step1step2step3step4

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

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

【任務(wù)5-4】布局及定義基礎(chǔ)樣式效果分析2.“穿搭速遞”首頁面整體上分為三部分。其中，主體模塊又可以分為banner模塊、精品展示模塊、潮流前沿模塊三部分。

【任務(wù)5-4】布局及定義基礎(chǔ)樣式定義基礎(chǔ)樣式3./*重置瀏覽器的默認樣式*/*{margin:0;padding:0;list-style:none;}/*全局控制*/body{background:#fff9ed;font-family:"微軟雅黑";font-size:14px;}a:link,a:visited{text-decoration:none;color:#fff;font-size:16px;}

【任務(wù)5-4】布局及定義基礎(chǔ)樣式制作頭部導(dǎo)航模塊1.效果圖如下所示：【任務(wù)5-5】制作頭部導(dǎo)航模塊制作banner和精品展示模塊1.效果圖如下所示：【任務(wù)5-6】制作banner和精品