網頁設計與制作項目式教程（HTML+CSS）課件04.制作“中國民俗”網站首頁

網頁設計與制作項目式教程（HTML+CSS）項目二

簡單展示類網頁開發(fā)項目——制作“中國民俗”網站首頁任務2.3制作“中國民俗”網站首頁項目實施任務分析小丁已經完成了“中國民俗”網站“傳統(tǒng)節(jié)日”詳情頁html內容部分的制作，現(xiàn)在開始制作網站首頁?！爸袊袼住本W站首頁面效果圖項目實施任務分析分析頁面的框架，以及方便后期對主頁樣式的設置，本頁面分成了頭部區(qū)和主體區(qū)2部分。頭部區(qū)又分成了logo圖片及導航區(qū)和分隔條區(qū)，導航超鏈接到相應的詳情頁面，其框架結構圖及主要設置如下：任務2.3制作“中國民俗”網站首頁知識儲備知識導圖根據任務分析，在之前掌握知識的基礎上，完成本任務還需要學習的主要知識點有圖像、塊元素、行元素，知識導圖如圖所示。任務2.3制作“中國民俗”網站首頁知識儲備新知學習1：圖片1.圖片標簽<img>圖片是網頁中不可或缺的元素，一個圖文并茂的網頁可以增強用戶體驗，傳達信息以及提升頁面的吸引力，吸引更多的瀏覽者的關注。在HTML文件中，插入圖片是通過插入<img>標簽來實現(xiàn)的。它是一個自閉合標簽，只包括屬性，沒有結束標簽?；菊Z法格式如下：<imgsrc=＂url＂alt=＂替代文字＂title=＂提示文字＂>任務2.3制作“中國民俗”網站首頁知識儲備新知學習1：圖片<img>標簽的常用屬性有src、alt、title。任務2.3制作“中國民俗”網站首頁屬性值描述src圖像文件的URL地址，必選屬性alt圖像顯示不出來時的替代文字，必選屬性title鼠標移動圖像上的提示文字知識儲備新知學習1：圖片2.圖片路徑img標簽有一個非常重要的屬性，即src(source),它的值是圖片的url地址。url地址可以是相對路徑或絕對路徑。任務2.3制作“中國民俗”網站首頁相對路徑是指相對于當前文件，目標文件即圖片所在的路徑。相對路徑的輸入方法如下表所示。相對位置輸入方法代碼示例同一目錄輸入要插入的圖片<imgsrc=”img1.jpg”alt=”圖像1”>上一目錄先輸入“../”，再輸入目錄名<imgsrc=”../img/img2.jpg”alt=”圖像2”>下一目錄先輸入目錄名，后加“/”<imgsrc=”img/img3.jpg”alt=”圖像3”>知識儲備新知學習1：圖片任務2.3制作“中國民俗”網站首頁2.圖片路徑絕對路徑是指目標文件即圖片在文件中的完整路徑，包括盤符或者文件傳輸的協(xié)議。只要圖片沒有移動位置，任務網頁引用它，使用的路徑都是相同的。

絕對路徑有兩種，一種是本地的文件路徑，如D:/中國民俗/img/img1.jpg，

另一種是從協(xié)議開始定義的完整的url網址，如/images/logo.jpg。知識儲備新知學習1：圖片舉例：已建有如下圖所示站點：現(xiàn)index頁面想插入舞龍.jpg和劃龍舟.jpg，代碼編寫如下：任務2.3制作“中國民俗”網站首頁2.圖片路徑知識儲備新知學習2：塊級元素與行內元素1.塊級元素塊級元素在瀏覽器顯示時以塊的形式獨占一行，呈現(xiàn)為一個獨立的塊，上下有一定空間。如h1-h6、p、hr元素等。塊級元素內部可以容納其它塊級元素和行內元素。2.行內元素行內元素通常用于包裹文本的一部分，不會在新行上換行，而是在同一行上呈現(xiàn)，且不會在周圍創(chuàng)建額外的空間。如strong、em、a、u元素等。行內元素可以容納其它其它的行內元素，但不能容納塊級元素。任務2.3制作“中國民俗”網站首頁知識儲備新知學習2：塊級元素與行內元素3.div元素div是分區(qū)或者分塊的意思，是塊級元素，它用于創(chuàng)建一個容器，可以對容器內的其它HTML元素進行布局和樣式控制。div元素本身沒有特定的含義，當對它進行樣式設置時，可以對內容塊整體設置樣式屬性。div元素的基本語法格式如下：<divid=””class=””style=””>塊包含的內容</div>任務2.3制作“中國民俗”網站首頁知識儲備<div>標簽的常用屬性有id、class、style。任務2.3制作“中國民俗”網站首頁屬性值描述id元素的唯一idclass元素的類名style元素的行內樣式新知學習2：塊級元素與行內元素知識儲備新知學習2：塊級元素與行內元素3.span元素span是行內元素，通常用于對文本設置樣式或者標記特定的部分。span元素沒有格式上的意義，只有應用樣式時，它才呈現(xiàn)出視覺上的效果。span元素的基本語法格式如下：<spanstyle=””>文本的內容</span>任務2.3制作“中國民俗”網站首頁操作實踐任務實踐2.3.1：搭建頁面框架根據之前對頁面結構的分析，主頁用div元素布局，形成頁面框架，書寫相應的HTML代碼，具體代碼如下：任務2.3制作“中國民俗”網站首頁操作實踐任務實踐2.3.2：制作圖片頁面內容任務2.3制作“中國民俗”網站首頁1.制作頭部區(qū)圖片內容頁面框架搭建好后，首先制作頭部區(qū)頁面內容。根據網頁效果，頁面由一個網站logo圖片和4個圖片超鏈接構成，書寫相應的HTML代碼，具體代碼如下：操作實踐任務實踐2.3.2：制作圖片頁面內容任務2.3制作“中國民俗”網站首頁2.制作主體區(qū)圖片內容主體區(qū)也由圖片構成，根據網頁設計效果，書寫相應的HTML代碼，具體代碼如下：任務拓展制作“飲食文化”主頁利用所學，完成“飲食文化”主頁的制作。效果如圖所示。任務2.3制作“中國民俗”網站首頁小結延伸1.完成任務2.3的課后練習。2