《電子商務(wù)網(wǎng)頁設(shè)計與制作》 課件 項目1、2 網(wǎng)站制作基礎(chǔ)知識、html 結(jié)構(gòu)標簽的使用_第1頁
《電子商務(wù)網(wǎng)頁設(shè)計與制作》 課件 項目1、2 網(wǎng)站制作基礎(chǔ)知識、html 結(jié)構(gòu)標簽的使用_第2頁
《電子商務(wù)網(wǎng)頁設(shè)計與制作》 課件 項目1、2 網(wǎng)站制作基礎(chǔ)知識、html 結(jié)構(gòu)標簽的使用_第3頁
《電子商務(wù)網(wǎng)頁設(shè)計與制作》 課件 項目1、2 網(wǎng)站制作基礎(chǔ)知識、html 結(jié)構(gòu)標簽的使用_第4頁
《電子商務(wù)網(wǎng)頁設(shè)計與制作》 課件 項目1、2 網(wǎng)站制作基礎(chǔ)知識、html 結(jié)構(gòu)標簽的使用_第5頁
已閱讀5頁，還剩147頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

01網(wǎng)站制作基礎(chǔ)知識1任務(wù)1創(chuàng)建“helloworld”網(wǎng)頁任務(wù)2制作宋詞《清平樂》網(wǎng)頁任務(wù)3制作家用電器排行榜網(wǎng)頁2創(chuàng)建“helloworld”網(wǎng)頁任務(wù)13●1.了解網(wǎng)頁的本質(zhì)和網(wǎng)頁中的常見元素。●2.了解IP地址、域名和網(wǎng)址等基本概念。4談到網(wǎng)頁，大家并不陌生，人們平時使用瀏覽器閱讀新聞、查詢信息、查看圖片等都是在使用網(wǎng)頁。但是，大家知道網(wǎng)頁是怎么制作出來的嗎？我們可以通過在記事本中使用html語言對網(wǎng)頁進行標記來完成一個簡單網(wǎng)頁的制作。本任務(wù)將針對網(wǎng)頁相關(guān)概念以及網(wǎng)頁文件結(jié)構(gòu)來對網(wǎng)頁進行詳細介紹，并完成圖所示的網(wǎng)頁效果。5“helloworld”網(wǎng)頁效果6步驟一：新建一個文本文檔，在文檔中使用html語言寫出網(wǎng)頁文件的結(jié)構(gòu)，如圖所示。網(wǎng)頁文件的結(jié)構(gòu)7步驟二：在<title></title>中輸入“這是我的第一個網(wǎng)頁”，如圖所示。輸入標題內(nèi)容8步驟三：保存文檔。選擇記事本菜單欄中的“文件”→“保存”命令，彈出“另存為”對話框。保存文件9步驟四：操作完成后單擊“保存”按鈕，文本文件就已保存為html文件，此時可以觀察到文本文件的圖標變成了網(wǎng)頁文件的圖標，如圖所示。文件保存完成后，可以使用瀏覽器打開，打開后的效果如圖所示。保存后的html文件網(wǎng)頁標題10步驟五：繼續(xù)向h1.html文件中添加內(nèi)容，定位到<body></body>，在其中添加“helloworld”，如圖所示。在網(wǎng)頁文件中添加內(nèi)容11步驟六：保存文件后使用瀏覽器打開網(wǎng)頁文件，網(wǎng)頁效果如圖所示?！癶elloworld”網(wǎng)頁效果12一、網(wǎng)頁的本質(zhì)網(wǎng)頁是人們上網(wǎng)時在瀏覽器中看到的一個個畫面，網(wǎng)站則是一組相關(guān)網(wǎng)頁的集合。圖所示為京東商城網(wǎng)站主頁及其組成文件，從中可以看出，網(wǎng)頁由圖像、html文件、CSS文件、JS文件等組成。在瀏覽器中單擊鼠標右鍵選擇“另存為”命令，可將網(wǎng)頁存入本地計算機的硬盤中。13京東商城網(wǎng)站主頁及其組成文件14二、網(wǎng)頁中的常見元素從瀏覽者的角度看，網(wǎng)頁中好像只有一些文字、圖像、動畫等。但從專業(yè)人員的角度來看，網(wǎng)頁中通常包含站標、導(dǎo)航條、廣告條、文字鏈接和按鈕等元素，如圖所示。構(gòu)成網(wǎng)頁的常用元素151.文本文本一直是最重要的信息載體與交流工具，網(wǎng)頁中的信息一般以文本為主。在網(wǎng)頁中可以通過字體、大小、顏色、底紋、邊框等設(shè)置文本的屬性。網(wǎng)頁設(shè)計者還可以在網(wǎng)頁中設(shè)計各種各樣的文字列表，清晰地表達一系列項目。2.圖像我們現(xiàn)在看到的網(wǎng)頁之所以豐富多彩，都是因為有了圖像，可見圖像在網(wǎng)頁中的重要性。163.超鏈接超鏈接是從一個網(wǎng)頁指向另一個目的端的鏈接。這個目的端通常是另一個網(wǎng)頁，但也可以是一幅圖片、一個電子郵件地址、一個文件、一個程序，或者是本頁中的其他位置。4.表單表單是用來收集站點訪問者信息的域集。站點訪問者填寫表單的方式是輸入文本、單擊單選框與復(fù)選框，以及從下拉菜單中選擇選項。175.表格使用表格排版是現(xiàn)在網(wǎng)頁的主要制作形式。通過表格可以精確地控制網(wǎng)頁元素在網(wǎng)頁中的位置。6.動畫動畫是網(wǎng)頁上最活躍的元素，通常制作優(yōu)秀、創(chuàng)意出眾的動畫是吸引瀏覽者的最有效方法。網(wǎng)頁中的廣告條一般都是動畫的形式。網(wǎng)頁中除了這些最基本的元素外，還包括橫幅廣告、字幕、懸停按鈕、計數(shù)器、音頻、視頻等。18三、IP地址、域名和網(wǎng)址1.IP地址互聯(lián)網(wǎng)雖然連接了不計其數(shù)的服務(wù)器與客戶機，但并不是雜亂無章的。每一個主機在互聯(lián)網(wǎng)上都有唯一的地址，這個地址稱為IP地址（internetprotocoladdress）。IP地址由4組0～255之間的整數(shù)組成，數(shù)字之間用點間隔。例如，“26”就是一個IP地址。192.域名由于IP地址在使用過程中難于記憶和書寫，人們又用一種與IP地址對應(yīng)的字符來表示地址，這就是域名。每一個網(wǎng)站都有自己的域名，并且域名是獨一無二的。例如，只需在瀏覽器地址欄中輸入“”，就可以訪問新浪網(wǎng)站。3.網(wǎng)址網(wǎng)址又稱為URL，英文全稱是“uniformresourcelocator”，即統(tǒng)一資源定位器。它是一種網(wǎng)絡(luò)上通用的地址格式，用于標識網(wǎng)頁文件在網(wǎng)絡(luò)中的位置。一個完整的網(wǎng)址由通信協(xié)議名稱、域名或IP地址、網(wǎng)頁在服務(wù)器中的路徑和文件名四部分組成。20四、html文件的結(jié)構(gòu)在前面的html文件里用到了多個html標簽，下面依次介紹它們的作用。實際上，它們構(gòu)成了最簡單的完整html文件結(jié)構(gòu)。1.html標簽html標簽放在html文件的開頭，并沒有實質(zhì)性的功能，只是一個形式上的標記，但在編寫html文件時仍要形成一個良好的習(xí)慣，在html文件開頭使用html標簽開始。212.head標簽head稱為頭標簽，一般放在html標簽里，其作用是放置關(guān)于此html文件的信息，如提供索引、定義CSS樣式等。3.title標簽title稱為標題標簽，包含在head標簽內(nèi)，其作用是設(shè)定網(wǎng)頁標題，在瀏覽器左上方的標題欄中將顯示這個標題。此外，在Windows任務(wù)欄中顯示的也是這個標題。224.body標簽body稱為主體標簽，網(wǎng)頁上所要顯示的內(nèi)容都放在這個標簽內(nèi)，它是html文件的重點所在。在后面的項目中所介紹的html標簽都將放在這個標簽內(nèi)。然而它并不僅僅是一個形式上的標簽，其本身也可以控制網(wǎng)頁的背景顏色或背景圖像，這將在后續(xù)項目中介紹。另外，在構(gòu)建html結(jié)構(gòu)的時候要注意一個問題：標簽是不可以交錯的，否則將會造成結(jié)構(gòu)錯誤。例如，在圖所示的代碼中就存在標簽交錯的情況。23標簽交錯制作宋詞《清平樂》網(wǎng)頁任務(wù)2

24●1.了解常用的網(wǎng)站制作工具?！?.熟悉HBuilderX軟件的安裝與啟動方法?！?.認識HBuilderX軟件的界面?！?.掌握在HBuilderX軟件中新建web項目和運行web項目的方法。●5.掌握html基礎(chǔ)標簽的用法。25本任務(wù)計劃使用現(xiàn)在流行的網(wǎng)頁編輯工具HBuilderX和html基礎(chǔ)標簽來完成圖所示《清平樂》網(wǎng)頁效果。本任務(wù)主要利用HBuilderX新建web項目，打開及保存html文件，使用p段落標簽、hr分隔線標簽等功能，將《清平樂》詩詞展示在網(wǎng)頁上。26《清平樂》網(wǎng)頁效果27步驟一：在HBuilderX中新建一個web項目，在項目下新建一個html文件，在body標簽中加入<h2></h2>，在h2標題標簽中加入文字信息“清平樂”，網(wǎng)頁效果如圖所示。28加入標題標簽29步驟二：在h2標題標簽下方加入hr水平線標簽。加入水平線標簽30步驟三：在hr水平線標簽的下方加入p段落標簽，并在p段落標簽中間加入宋詞《清平樂》的內(nèi)容，網(wǎng)頁效果如圖所示。加入段落標簽31加入段落標簽32步驟四：此時，詩詞文字在html代碼中是換行的，但是在網(wǎng)頁的效果中是不換行的。為了讓其在網(wǎng)頁效果中達到換行的效果，需要添加若干個br換行標簽，如圖所示。加入換行標簽33步驟五：保存文件后使用瀏覽器打開網(wǎng)頁文件，網(wǎng)頁效果如圖所示?！肚迤綐贰肪W(wǎng)頁效果34一、網(wǎng)站制作工具1.AdobeDreamweaver圖所示為AdobeDreamweaver軟件的界面，AdobeDreamweaver簡稱“DW”，中文名稱為“夢想編織者”，最初為美國Macromedia公司開發(fā)，2005年被Adobe公司收購。DW是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁代碼編輯器。利用其對html、CSS、JavaScript等內(nèi)容的支持，設(shè)計師和程序員可以在幾乎任何地方快速制作網(wǎng)站和進行網(wǎng)站建設(shè)。35AdobeDreamweaver軟件的界面362.VisualStudioCode美國Microsoft公司在2015年4月30日Build開發(fā)者大會上正式宣布了VisualStudioCode項目，這是一個運行于MacOSX、Windows和Linux中，針對編寫現(xiàn)代web和云應(yīng)用的跨平臺源代碼編輯器。其優(yōu)點是智能提示功能強大，可以很方便地進行插件安裝，具有強大的調(diào)試功能，可以跨平臺支持源代碼編輯，現(xiàn)在已經(jīng)成為很多前端開發(fā)者的必備工具。圖所示為VisualStudioCode軟件界面。37VisualStudioCode軟件界面383.WebStormWebStorm是捷克JetBrains公司推出的一款JavaScript開發(fā)工具，被廣大中國JS（JavaScript，簡稱JS）開發(fā)者譽為web前端開發(fā)神器、最強大的html5編輯器、最智能的JavaScriptIDE等。它與IntelliJIDEA同源，繼承了IntelliJIDEA強大的JS部分的功能。圖所示為WebStorm軟件界面。其優(yōu)點是能進行智能代碼補全、代碼格式化、代碼檢查和快速修復(fù)等。39WebStorm軟件界面404.HBuilderXHBuilderX是DCloud公司[數(shù)字天堂（北京）網(wǎng)絡(luò)技術(shù)有限公司]推出的一款支持html5的web開發(fā)IDE。HBuilderX的編寫用到了Java、C、Web和Ruby。HBuilderX本身主體由Java編寫。它基于Eclipse，所以順其自然地兼容了Eclipse的插件。快是HBuilderX的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升了html、JS、CSS的開發(fā)效率。41二、HBuilderX的安裝與啟動Windows操作系統(tǒng)和Mac操作系統(tǒng)上都可以安裝HBuilderX。其安裝步驟如下。1.直接從DCloud-HBuilder官方網(wǎng)站上下載最新版本的安裝文件。DCloud-HBuilder官方網(wǎng)站422.對下載的文件夾進行解壓縮，HBuilderX不用安裝，解壓完成后即可使用。HBuilderX壓縮包433.打開解壓后的文件夾，找到圖所示的“HBuilderX.exe”可執(zhí)行文件，這個可執(zhí)行文件就是HBuilderX的啟動文件，雙擊該文件即可打開HBuilderX編輯器。4.可以將HBuilderX.exe這個可執(zhí)行文件發(fā)送到桌面快捷方式，這樣每次使用時直接在桌面就可以打開。HBuilderX文件目錄44三、HBuilderX界面圖所示為HBuilderX界面布局，HBuilderX的開發(fā)界面主要由菜單欄、項目管理器、編輯窗口、視圖模式和控制臺五部分構(gòu)成。HBuilderX界面布局451.菜單欄菜單欄位于界面的左上方，是所有界面功能的集合和導(dǎo)航。其中常用的選項有“文件”和“運行”。2.項目管理器項目管理器位于界面左側(cè)，是管理項目的工具，可以添加、刪除、修改、查看項目文件。關(guān)閉項目管理器后，按F9鍵可重新打開。3.編輯窗口在項目管理器中雙擊某個文件，該文件可在編輯窗口中打開。在編輯窗口中可以同時打開并編輯多個文件。464.視圖模式視圖模式位于界面右側(cè)，單擊“預(yù)覽”按鈕將出現(xiàn)web瀏覽器，可以在web瀏覽器中看到代碼生成的網(wǎng)頁效果。5.控制臺調(diào)試代碼時，控制臺顯示代碼運行狀態(tài)和報告信息。運行代碼時，控制臺會自動彈出。當控制臺被關(guān)閉后，可以通過菜單欄中的“視圖”找到控制臺并打開控制臺。47四、新建項目和運行項目HBuilderX可以創(chuàng)建兩種項目，即web項目和移動App項目。web項目開發(fā)主要指傳統(tǒng)的PC端網(wǎng)頁開發(fā)，頁面主要運行在PC端瀏覽器中；移動App項目開發(fā)主要指針對移動設(shè)備的頁面開發(fā)，頁面主要在移動設(shè)備上運行。1.新建web項目在菜單欄中選擇“文件”→“新建”→“項目”命令，在出現(xiàn)的“新建項目”對話框中選擇“普通項目”，設(shè)置項目所在的位置和模板，這里選擇第二個模板“基本HTML項目”，單擊“創(chuàng)建”按鈕即可，之后新創(chuàng)建的web項目會在左側(cè)的項目管理器中出現(xiàn)。48創(chuàng)建web項目492.新建App項目在菜單欄中選擇“文件”→“新建”→“項目”命令，在出現(xiàn)的“新建項目”對話框中選擇uni-app，設(shè)置項目所在的位置和模板，這里選擇第一個默認模板，單擊“創(chuàng)建”按鈕即可，之后新創(chuàng)建的App項目會在左側(cè)的項目管理器中出現(xiàn)。這里創(chuàng)建的項目名稱為Demo，如圖所示。50創(chuàng)建App項目51五、html基礎(chǔ)標簽1.標題標簽html提供了6個等級的標題標簽，即h1、h2、h3、h4、h5和h6，從h1至h6，標題的重要性遞減。標題標簽的基本語法格式如下。52該語法中n的取值為1至6，align屬性為可選屬性，用于指定標題的對齊方式。下面通過圖所示案例來演示標題標簽的應(yīng)用。標題標簽的應(yīng)用53在上圖中，使用h1至h6標題標簽設(shè)置6種級別的標題。運行上圖中的代碼，效果如圖所示。標題標簽效果542.段落標簽在html中通過p段落標簽來定義段落，其基本語法格式如下。該語法中align屬性為p段落標簽的可選屬性，和標題標簽h1至h6一樣，同樣可以使用align屬性設(shè)置段落文本的對齊方式。55p段落標簽是html文檔中最常見的標簽，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。下面通過一個圖所示案例來演示p段落標簽的應(yīng)用。段落標簽的應(yīng)用56在上圖中，通過h1標題標簽和p段落標簽定義了一個標題和兩個段落。運行上圖所示代碼，效果如圖所示。從圖中可以看出，通過使用p段落標簽，每個段落都會單獨顯示，并且段落與段落之間有一定的間隔距離。段落標簽效果573.水平線標簽在網(wǎng)頁中，常常會看到一些水平線將段落與段落之間隔開，使得文檔層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以通過標簽來定義。hr就是創(chuàng)建水平線的標簽，其基本語法格式如下。hr是單標簽，在網(wǎng)頁中輸入一個<hr>，就添加了一條默認樣式的水平線。58hr水平線標簽的屬性、含義及屬性值見表。hr水平線標簽的屬性、含義及屬性值594.換行標簽在html中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。換行標簽的應(yīng)用60在上圖中使用了br換行標簽。運行圖所示代碼，效果如圖所示。換行標簽的應(yīng)用615.文本格式化標簽在網(wǎng)頁中，有時需要為文字設(shè)置粗體、斜體或下畫線效果，為此，html準備了專門的文本格式化標簽，使文字以特殊的方式顯示。常用的文本格式化標簽及顯示效果見表。常用的文本格式化標簽及顯示效果62下面通過圖所示案例來演示文本格式化標簽的應(yīng)用。文本格式化標簽的應(yīng)用63運行上圖所示代碼，效果如圖所示。文本格式化標簽效果646.特殊字符標簽瀏覽網(wǎng)頁時，常常會看到一些包含特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。常用特殊字符的表示65下面通過圖所示案例來演示常用特殊字符的應(yīng)用。常用特殊字符的應(yīng)用66運行上圖所示代碼，效果如圖所示。特殊字符效果制作家用電器排行榜網(wǎng)頁任務(wù)367●1.掌握超鏈接標簽的用法。●2.掌握圖像標簽的用法。68本任務(wù)主要通過使用超鏈接標簽去嵌套文字標簽和圖像標簽，來完成家用電器排行榜網(wǎng)頁的制作，最終網(wǎng)頁效果如圖所示。69家用電器排行榜網(wǎng)頁效果70步驟一：使用HBuilderX軟件創(chuàng)建一個web項目，在項目目錄下新建一個html網(wǎng)頁文件，在新建的html網(wǎng)頁文件中的body標簽里面分別寫入h2標簽和a標簽，將a標簽的href屬性設(shè)置為百度網(wǎng)頁地址“”，然后在a標簽里面插入一些文字信息，代碼和網(wǎng)頁效果如圖所示。當在瀏覽器中單擊這些文字信息時，網(wǎng)頁就會跳轉(zhuǎn)到百度網(wǎng)站。71添加h2標簽和a標簽72步驟二：在a標簽里面的文字信息的上方插入img標簽，同時將創(chuàng)維電視機圖片復(fù)制、粘貼到項目下的img目錄中去，代碼和網(wǎng)頁效果如圖所示。添加img標簽73添加img標簽74步驟三：在a標簽下方加入hr水平線標簽，代碼和網(wǎng)頁效果如圖所示添加hr水平線標簽75步驟四：將其他四種電視機圖片素材也都復(fù)制、粘貼到項目目錄下的img目錄中，在hr標簽的下方依照步驟一至步驟三，分別再寫4組a標簽和hr標簽，設(shè)置每組a標簽中的相關(guān)文字信息和其中img標簽的src屬性內(nèi)容，代碼如圖所示。添加其他四種電視機信息76添加其他四種電視機信息77步驟五：保存文件后使用瀏覽器打開網(wǎng)頁文件，網(wǎng)頁效果如圖所示。家用電器排行榜網(wǎng)頁效果78一、超鏈接在html中添加超鏈接時，只需要將a標簽環(huán)繞到需要添加超鏈接功能的其他網(wǎng)頁標簽上即可。a標簽的基本語法格式如下。79在a標簽的語法中，a標簽是一個行內(nèi)標簽，用于實現(xiàn)超鏈接。href和target為其常用屬性，具體含義如下。1.hrefhref用于指定鏈接目標的URL地址，當為a標簽應(yīng)用href屬性時，它就具有了超鏈接的功能。通常用URL來表示鏈接地址的意思（形式）。鏈接地址有絕對地址和相對地址的區(qū)別，絕對地址指通過該地址就可以“直達”該頁面。相對地址是指相對于當前a標簽所在的網(wǎng)頁所在位置（文件夾）的一個相對位置。802.targettarget用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種。其中_self為默認值，意為在原窗口中打開；_blank意為在新窗口中打開。下面通過創(chuàng)建一個帶有超鏈接功能的簡單網(wǎng)頁，來演示超鏈接標簽的應(yīng)用，代碼如圖所示。81超鏈接標簽的應(yīng)用82在上圖中，創(chuàng)建了兩個超鏈接，通過href屬性將它們的鏈接目標分別指定為淘寶網(wǎng)站和百度網(wǎng)站，同時通過target屬性定義第一個鏈接網(wǎng)站在原窗口打開，第二個鏈接網(wǎng)站在新窗口打開。運行上圖所示代碼，效果如圖所示。帶有超鏈接的網(wǎng)頁83當用鼠標單擊文本時，將會在新窗口中打開鏈接網(wǎng)頁，如圖所示。在原窗口中打開鏈接網(wǎng)頁84在新窗口中打開鏈接網(wǎng)頁85二、錨點鏈接瀏覽網(wǎng)頁時，為了提高信息的檢索效率，常需要用到html語言中一種特殊的鏈接ii錨點鏈接，它屬于超鏈接的一種。通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。86下面通過一個案例對創(chuàng)建錨點鏈接的方法做具體演示，如圖所示。創(chuàng)建錨點鏈接87創(chuàng)建錨點鏈接88下運行圖中的代碼，效果如圖所示。使用錨點鏈接的網(wǎng)頁89如上圖所示，當用鼠標單擊新用戶注冊或登錄的鏈接時，頁面會自動跳轉(zhuǎn)到本網(wǎng)頁的目標位置。通過上圖可以總結(jié)出，創(chuàng)建錨點鏈接分為定義錨點和鏈接到錨點兩步，具體如下。1.使用id名標注目標的位置。2.使用<ahref="#id名">鏈接文本</a>創(chuàng)建能鏈接到目標的文本。90三、圖像標簽在html中使用img圖像標簽來定義圖像，其基本語法格式如圖所示。其中，src屬性用于指定圖像文件的路徑和文件名，它是img圖像標簽?zāi)苷ｏ@示圖像的必需屬性。img圖像標簽的基本語法格式91要想在網(wǎng)頁中靈活應(yīng)用圖像，僅僅靠src屬性是不夠的。html還為img圖像標簽設(shè)計了很多其他屬性，具體見表。img圖像標簽的屬性、屬性值及描述92由于某些原因，圖像可能無法正常顯示。因此，為頁面上的圖像加上文本是一個很好的編程習(xí)慣，當圖像無法正常顯示時，可以通過文本告知用戶該圖像的內(nèi)容。alt屬性用于定義圖像無法顯示時的文本，下面通過一個案例來演示alt屬性的應(yīng)用，如圖所示。img圖像標簽alt屬性的應(yīng)用93運行上圖中的代碼，正常情況下效果如圖所示。如果圖像不能正常顯示，則出現(xiàn)圖所示效果。在過去網(wǎng)速比較慢的年代，alt屬性主要用于使看不到圖像的用戶能夠了解圖像的內(nèi)容。圖片正常顯示圖片不能正常顯示94圖像標簽img有一個和alt屬性十分相似的屬性title，title屬性用于設(shè)置光標懸停于圖像上時的提示文字。下面通過一個案例來演示title屬性的應(yīng)用，如圖所示。img圖像標簽title屬性的應(yīng)用95運行上圖中的代碼，當網(wǎng)頁中鼠標光標移動到圖像上時，會出現(xiàn)提示文本，如圖所示。img圖像標簽的title屬性應(yīng)用02html結(jié)構(gòu)標簽的使用96任務(wù)1制作計算機樹形列表網(wǎng)頁任務(wù)2制作3C電子商務(wù)網(wǎng)站首頁97制作計算機樹形列表網(wǎng)頁任務(wù)198●1.掌握ul無序列表標簽、ol有序列表標簽和dl定義列表標簽的用法。●2.掌握列表標簽的嵌套用法。99本任務(wù)主要通過嵌套使用ul無序列表標簽來完成樹形列表網(wǎng)頁的制作，網(wǎng)頁完成效果如圖所示。100樹形列表網(wǎng)頁效果101步驟一：新建html文件，在body標簽中加入<h4></h4>，并在h4標簽中加入標題內(nèi)容“我的電腦文件列表”，代碼和網(wǎng)頁效果如圖所示。加入標題標簽網(wǎng)頁102步驟二：在標題標簽下方加入無序列表標簽ul，這里注意，只需要一個列表項，所以只用寫一組“<li></li>”，如圖所示。加入無序列表網(wǎng)頁103步驟三：在“<li></li>”里“我的電腦”文字下方加入一組新的無序列表標簽ul，這里注意，需要寫兩個盤符列表項，所以寫兩組“<li></li>”，如圖所示。加入嵌套ul標簽網(wǎng)頁1104步驟四：在“本地磁盤（C:）”和“本地磁盤（D:）”文字的下方重復(fù)步驟三中的操作，這里注意，在“本地磁盤（C:）”下方的ul標簽中加入兩組“<li></li>”，在“本地磁盤（D:）”下方的ul標簽中加入三組“<li></li>”，列表項中文字信息添加如圖所示。105加入嵌套ul標簽網(wǎng)頁2106步驟五：保存文件后使用瀏覽器打開網(wǎng)頁文件，網(wǎng)頁效果如圖所示。樹形列表網(wǎng)頁效果107一、無序列表無序列表是網(wǎng)頁中最常見的列表，之所以稱為“無序列表”，是因為其各個列表項之間沒有順序級別之分，通常以并列的形式呈現(xiàn)。定義無序列表的基本語法格式如下。108在上述語法中，<ul></ul>用于定義無序列表，<li></li>嵌套在<ul></ul>中，用于描述具體的列表項，每對<ul></ul>中至少包含一對<li></li>。下面通過一個案例來演示無序列表的應(yīng)用，如圖所示。無序列表的應(yīng)用109無序列表的type屬性可以取不同的值，用于指定不同的列表項符號，見表。無序列表的type屬性值110二、有序列表有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列，例如，網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。定義有序列表的基本語法格式如下。111在上述語法中，<ol></ol>用于定義有序列表，<li></li>為具體的列表項，和無序列表類似，每對<ol></ol>中也至少包含一對<li></li>。下面通過一個案例來演示有序列表的應(yīng)用，如圖所示。有序列表的應(yīng)用112從上圖中可以看出，有序列表默認的列表項為阿拉伯數(shù)字，并且按照1、2、3…的順序排列。有序列表的type屬性可以取不同的值，用于指定不同的排序編號，見表。有序列表的type屬性舉例及說明113三、定義列表定義列表常用于對術(shù)語或名詞進行解釋和描述，與無序列表和有序列表不同，定義列表的列表項前沒有任何項目符號。其基本語法如下。114在上面的語法中，<dl></dl>用于指定定義列表，<dt></dt>和<dd></dd>并列嵌入<dl></dl>中，其中，<dt></dt>用于指定列表項標題，<dd></dd>用于指定列表項內(nèi)容。一對<dt></dt>可以對應(yīng)多對<dd></dd>。下面通過一個案例來演示定義列表的應(yīng)用，如圖所示。定義列表的應(yīng)用115上圖中定義了一個定義列表，其中<dt></dt>內(nèi)為列表項標題“物聯(lián)網(wǎng)”，其后緊跟著三對<dd></dd>，為“物聯(lián)網(wǎng)”列表項的具體內(nèi)容。運行上圖中的代碼，效果如圖所示。定義列表網(wǎng)頁效果制作3C電子商務(wù)網(wǎng)站首頁任務(wù)2

116●1.掌握表格的創(chuàng)建方法?！?.掌握table標簽、tr標簽、td標簽、th標簽的用法?！?.熟練使用表格相關(guān)標簽制作網(wǎng)頁。117本任務(wù)主要通過使用表格相關(guān)標簽的嵌套，來完成3C電子商務(wù)網(wǎng)站首頁的制作，最終網(wǎng)頁效果如圖所示。1183C電子商務(wù)網(wǎng)站首頁效果119步驟一：新建一個html文件，在body標簽中創(chuàng)建一個寬度為1300像素、邊框為1、單元格之間沒有間距且內(nèi)容居中的表格，表格3行1列，代碼如圖所示。120創(chuàng)建表格的基本結(jié)構(gòu)121步驟二：設(shè)置表格第一行tr標簽的高度為50像素，背景顏色為藍色，然后在表格中寫入5組超鏈接<a></a>，中間的空隙用空格標簽“ ”來填充，每組a標簽中加入文字信息，文字信息統(tǒng)一通過font標簽的color屬性設(shè)置為白色“white”，第一個文字信息“首頁”通過size屬性值設(shè)置為“5”，使它的字體變大。代碼如圖所示，網(wǎng)頁效果如圖所示。表格寫入第一行代碼后的網(wǎng)頁效果122表格的第一行代碼123步驟二：設(shè)置表格的第二行即第二個tr標簽，通過分析網(wǎng)頁設(shè)計圖可知需要在這一行的唯一列中嵌套一個3行7列的子表格，且子表格第一行需要跨7列，設(shè)置子表格第一行的高度為50像素；第二行的第1列需要跨2行，設(shè)置高度為250個像素；第三行的高度也設(shè)置為250像素。代碼如圖2-2-5所示，網(wǎng)頁效果如圖所示。表格的第二行代碼124表格的第二行代碼表格寫入第二行代碼后的網(wǎng)頁效果125步驟四：表格的第三行即第三個tr標簽，在其唯一列中放上一張圖片，代碼如圖所示。表格的第三行代碼126一、表格的創(chuàng)建表格的開始是<table>，結(jié)束是</table>，即所有的表格內(nèi)容都位于<table></table>之間。要想創(chuàng)建一個完整的表格，除了要有表格標簽外，還需要有行標簽tr和單元格標簽td。創(chuàng)建表格的具體語法格式如下127對上述語法的具體解釋如下。1.<table></table>用于定義一個表格。2.<tr></tr>用于定義表格中的一行，必須嵌套在<table></table>中，在<table></table>中一般包含多對<tr></tr>。3.<td></td>用于定義表格中的單元格，必須嵌套在<tr></tr>中，一對<tr></tr>中一般包含多對<td></td>。128下面來舉例創(chuàng)建一個表格，如圖所示。創(chuàng)建表格129創(chuàng)建表格130二、table標簽的屬性html語言為table標簽提供了一系列屬性，用于控制表格的顯示樣式，見表。table標簽的屬性、含義及常用屬性值1311.border屬性在table標簽中，border屬性會為每個單元格應(yīng)用邊框。如果border的屬性值改變，那么單元格的邊框就會改變。默認情況下border的屬性值為1，如果想去掉邊框，則需設(shè)置border的屬性值為0。為了更好地理解border屬性的用法，現(xiàn)將上圖中table標簽的border屬性值設(shè)置為10，即將代碼<tableborder="1">更改為<tableborder="10">。132保存html文件，刷新頁面，效果如圖所示。從圖可以看出，表格的外邊框變寬了，內(nèi)邊框沒有發(fā)生變化。其實，在出現(xiàn)的雙線邊框中，外邊框為表格table的邊框，內(nèi)邊框為單元格td的邊框。也就是說，table標簽的border屬性值改變的是外邊框?qū)挾?，?nèi)邊框?qū)挾热匀粸?像素。設(shè)置border="10"后的網(wǎng)頁效果1332.cellspacing屬性cellspacing屬性用于設(shè)置單元格與單元格之間的空白間距，默認值為2像素?，F(xiàn)將上圖中table標簽的cellspacing屬性值設(shè)置為20，即將代碼<tableborder="1">更改為<tableborder="10"cellspacing="20">。保存html文件，刷新頁面，效果如圖所示。設(shè)置cellspacing="20"后的網(wǎng)頁效果1343.cellpadding屬性cellpadding屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距，默認為1像素?，F(xiàn)將上圖中的table標簽應(yīng)用cellpadding="10"，即將代碼<tableborder="1">更改為<tableborder="10"cellspacing="20"cellpadding="10">。保存html文件，刷新頁面，效果如圖所示。設(shè)置cellpadding="10"后的網(wǎng)頁1354.width與height屬性默認情況下，表格的寬度和高度都是靠其自身的內(nèi)容來撐開的，如果想要更改表格的尺寸，就需要設(shè)置其寬度和高度的屬性。下面對圖中的表格設(shè)置寬度和高度，即將代碼<tableborder="1">更改為：136設(shè)置表格

溫馨提示

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

評論

0/150

提交評論