者:明明如月
審校:藍色漂流瓶
本文為你提供一篇HTML5基本布局模板示例。你可以直接拷貝,粘貼到你的HTML文件中并對其進行修改。
好,說實話,這個本是為我自己準備的html5布局模板,但是你可以拿來用。
雖然本文比較簡單(噴子止步),但是還是一個不錯的模板,可以存起來,或者參考一下人家的結(jié)構(gòu)。
代碼如下:
圖片格式
圖片格式
英文源:http://www.codeshare.co.uk/blog/basic-html5-template-layout-example/
端在使用DIV+CSS布局時,通常需要通過為div命名的方式,來區(qū)分網(wǎng)頁中不同的模塊。在HTML5中布局方式有了新的變化,HTML5中增加了新的結(jié)構(gòu)標簽,如header標簽、nav標簽、article標簽等,具體介紹如下。
1. header標簽
HTML5中的header標簽是一種具有引導和導航作用的結(jié)構(gòu)標簽,該標簽可以包含所有通常放在頁面頭部的內(nèi)容。header標簽通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題,也可以包含網(wǎng)站Logo圖片、搜索表單或者其他相關(guān)內(nèi)容。其基本語法格式如下:
<header>
<h1>網(wǎng)頁主題</h1>
...</header>
在上面的語法格式中,<header></header>的使用方法和<div class="header"></div>類似。
注意:
在HTML網(wǎng)頁中,并不限制header標簽的個數(shù),一個網(wǎng)頁中可以使用多個header標簽,也可以為每一個內(nèi)容塊添加header標簽。
2. nav標簽
nav標簽用于定義導航鏈接,是HTML5新增的標簽,該標簽可以將具有導航性質(zhì)的鏈接歸納在一個區(qū)域中,使頁面元素的語義更加明確。nav標簽的使用方法和普通標簽類似,例如下面這段示例代碼:
<nav>
<ul>
<li><a href="#">首頁</li>
<li><a href="#">公司概況</li>
<li><a href="#">產(chǎn)品展示</li>
<li><a href="#">聯(lián)系我們</li>
</ul></nav>
在上面這段代碼中,通過在nav標簽內(nèi)部嵌套無序列表ul來搭建導航結(jié)構(gòu)。通常一個HTML頁面中可以包含多個nav標簽,作為頁面整體或不同部分的導航。具體來說,nav標簽可以用于以下幾種場合。
● 傳統(tǒng)導航條:目前主流網(wǎng)站上都有不同層級的導航條,其作用是跳轉(zhuǎn)到網(wǎng)站的其他主頁面。
● 側(cè)邊欄導航:目前主流博客網(wǎng)站及電商網(wǎng)站都有側(cè)邊欄導航,目的是將當前文章或當前商品頁面跳轉(zhuǎn)到其他文章或其他商品頁面。
● 頁內(nèi)導航:它的作用是在本頁面幾個主要的組成部分之間進行跳轉(zhuǎn)。
● 翻頁操作:翻頁操作切換的是網(wǎng)頁的內(nèi)容部分,可以通過點擊“上一頁”或“下一頁”切換,也可以通過點擊實際的頁數(shù)跳轉(zhuǎn)到某一頁。
除了以上幾點以外,nav標簽也可以用于其他導航鏈接組中。需要注意的是,并不是所有的鏈接組都要被放進nav標簽,只需要將主要的和基本的鏈接放進nav標簽即可。
3. footer標簽
footer標簽用于定義一個頁面或者區(qū)域的底部,它可以包含所有放在頁面底部的內(nèi)容。在HTML5出現(xiàn)之前,一般使用<div class="footer"></div>標簽來定義頁面底部,而現(xiàn)在通過HTML5的footer標簽可以輕松實現(xiàn)。與header標簽相同,一個頁面中可以包含多個footer標簽。
4. article標簽
article標簽代表文檔、頁面或者應用程序中與上下文不相關(guān)的獨立部分,該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶評論等。一個article標簽通常有它自己的標題(可以放在header標簽中)和腳注(可以放在footer標簽中),例如下面的示例代碼。
<article>
<header>
<h1>秋天的味道</h1>
<p>你想不想知道秋天的味道?它是甜、是苦、是澀...</p>
</header>
<footer>
<p>著作權(quán)歸XXXXXX公司所有...</p>
</footer></article>
需要注意的,在上面的示例代碼中還缺少主體內(nèi)容。主體內(nèi)容通常會寫在header和footer之間,通過多個section標簽進行劃分。一個頁面中可以出現(xiàn)多個article標簽,并且article標簽可以嵌套使用。
5. section標簽
section標簽表示一段專題性的內(nèi)容,一般會帶有標題,主要應用在文章的章節(jié)中。例如,新聞的詳情頁有一篇文章,該文章有自己的標題和內(nèi)容,因此可以使用article標簽標注,如果該新聞內(nèi)容太長,分好多段落,每段都有自己的小標題,這時候就可以使用section標簽把段落標注起來。在使用section標簽時,需要注意以下幾點:
● section不僅僅是一個普通的容器標簽。當一個標簽只是為了樣式化或者方便腳本使用時,應該使用div標簽。
如果article標簽、aside標簽或nav標簽更符合使用條件,那么不要使用section標簽。
● 沒有標題的內(nèi)容模塊不要使用section標簽定義。
值得一提的是,在HTML5中,article標簽可以看作是一種特殊的section標簽,它比section標簽更具有獨立性,即section標簽強調(diào)分段或分塊,而article標簽強調(diào)獨立性。如果一塊內(nèi)容相對來說比較獨立、完整時,應該使用article標簽;但是如果想要將一塊內(nèi)容分成多段時,應該使用section標簽。
6. aside標簽
aside標簽用來定義當前頁面或者文章的附屬信息部分,它可以包含與當前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導航條等有別于主要內(nèi)容的部分。aside標簽的用法主要分為兩種:
● 被包含在article標簽內(nèi)作為主要內(nèi)容的附屬信息。
● 在article標簽之外使用,作為頁面或網(wǎng)站的附屬信息部分。最常用的的使用形式是側(cè)邊欄。
TML5多媒體作品以其對各種平臺的兼容而見長,目前已獲得了廣泛的應用。如果我們需要制作自己的HTML5多媒體作品,一個方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。
首先訪問“百度H5”網(wǎng)頁(https://h5.baidu.com/),可以看到非常簡單的頁面,僅有“我的H5”和“我的模板”兩個選項。其中“我的模板”是通過套用模板的方式來制作HTML5作品,而“我的H5”則可以完全靠自定義各種參數(shù)來自由創(chuàng)作,制作好的作品也會顯示在這里(圖1)。
1. 通過創(chuàng)意模板輕松制作
在首頁中選擇“我的模板”,隨后會進入一個模板展示頁面,這些都是設(shè)計者們分享的模板。根據(jù)你所要設(shè)計的作品的類別,可以按類選擇一個類似的作品作為制作的模板,然后在此基礎(chǔ)上進行修改,即可快速形成自己的多媒體作品(圖2)。
比如要制作一個招生方面的媒體作品,選擇如圖所示的秋季班招生模板,然后點擊右下角的“使用模板”按鈕(圖3)。
接下來先要為作品命名,例如“我們的幼兒園招生了”。輸入完畢點擊“確定”按鈕(圖4)。
隨后進入實質(zhì)性的模板修改編輯階段。對于不合適的內(nèi)容,可先刪除頁面元素再添加。點擊“文本”菜單插入所需文本內(nèi)容。同理,可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片,則直接用PSD菜單載入。若版面中需要插入一些圖標或形狀,則點擊“圖形”菜單選擇添加(圖5)。
此外,對于作品中所要用到的展示數(shù)據(jù),可以通過插入圖表、表單等方式,非常輕松地完成數(shù)據(jù)展示制作(圖6)。如果要實現(xiàn)更多的效果,可通過“插件”菜單,選擇添加頁面加載套件和加載進度、添加計數(shù)器、添加幀動畫、添加相冊或地圖等。
對于需要修改的屬性,可通過窗口右側(cè)的分類屬性窗口選擇設(shè)置。通過窗口下方的編輯區(qū)域,可控制動畫、加載頁、全局全景和背景、當前頁等參數(shù)設(shè)置。例如,要定制個性化的加載頁面效果,點擊“加載頁”選項卡,然后通過下方的滑塊,對加載頁中的圖片和進度進行自定義編輯(圖7)。
對頁面上的各種元素進行修改和編輯完成之后,點擊工具欄左上角的磁盤按鈕將作品保存在網(wǎng)上。注意,編輯過程中產(chǎn)生的內(nèi)容軟件會自動保存,但為了防止丟失,還是要養(yǎng)成勤于手動保存的習慣。
最后,就可以發(fā)布作品了。點擊工具欄上的“發(fā)布”按鈕執(zhí)行發(fā)布操作(圖8)。
由于作品是保存在網(wǎng)絡(luò)服務(wù)器中的,因此作品的共享是以網(wǎng)址的形式體現(xiàn)的。發(fā)布時要填寫作品分享的標題,設(shè)置個人域名。我們只需在“個性化域名”中填寫自己命名的作品個性域名地址,發(fā)布后其他人就可以用這個域名來訪問HTML5作品了(圖9)。
小提示:使用上述服務(wù)需要使用自己的百度賬號登錄。為維護網(wǎng)絡(luò)安全,目前發(fā)布信息需先經(jīng)過用戶實名制認證方可進行。
2. DIY 完全自己設(shè)計制作
套用模板適合于初學者或設(shè)計能力不強的用戶。其實,不用套用模板,完全可以從頭全部由自己來設(shè)計作品。
制作時,在主頁中選擇“我的H5”,然后點擊空白頁上印有圓圈套加號圖標的按鈕,向?qū)儐杽?chuàng)建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局,則依靠頁面間的前后滑動實現(xiàn)簡單跳轉(zhuǎn);如果是整頁布局,則將整個頁面分為不同區(qū)域,各部分還可創(chuàng)建鏈接,實現(xiàn)不同的功能(圖10)。
隨后其他步驟與第1部分的添加和設(shè)置操作方法相當,只是全要親自設(shè)計,不能套用現(xiàn)成的組件而已。在創(chuàng)作過程中,只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容,用媒體和圖形工具添加圖片、圖形、音視頻,數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具,借助于“插件”擴展來補充完善,發(fā)揮自由想象的創(chuàng)作空間,一定能創(chuàng)作出更具個性化的作品。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。