整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML5基本布局模板示例

          者:明明如月

          審校:藍色漂流瓶


          本文講的是啥?

          本文為你提供一篇HTML5基本布局模板示例。你可以直接拷貝,粘貼到你的HTML文件中并對其進行修改。

          好,說實話,這個本是為我自己準備的html5布局模板,但是你可以拿來用。

          譯者注:由于無法直接粘貼代碼,需要的親直接進入尾部提供的鏈接,拷貝下來即可。

          雖然本文比較簡單(噴子止步),但是還是一個不錯的模板,可以存起來,或者參考一下人家的結(jié)構(gòu)。

          基本的HTML5 模板布局模板:

          代碼如下:

          圖片格式

          帶頭部、尾部和導航的基本的HTML5布局模板

          圖片格式


          英文源: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)作出更具個性化的作品。


          主站蜘蛛池模板: 亚洲性日韩精品一区二区三区 | 国产韩国精品一区二区三区| 波多野结衣中文字幕一区二区三区| 成人免费区一区二区三区 | 岛国精品一区免费视频在线观看| 亚洲av无码成人影院一区| 亚洲一区二区三区偷拍女厕| 亚洲中文字幕丝袜制服一区 | 国产成人久久一区二区三区| 少妇特黄A一区二区三区| 亲子乱AV视频一区二区| 国产精品一区二区av不卡| 精品乱人伦一区二区| 日韩一区二区在线免费观看| 色婷婷香蕉在线一区二区| 午夜性色一区二区三区免费不卡视频| 国精产品一区一区三区| 插我一区二区在线观看| 久久99国产一区二区三区| 国产精品毛片一区二区| 中文字幕在线观看一区| 成人区精品人妻一区二区不卡| 日韩制服国产精品一区| 在线精品亚洲一区二区小说| 国产日韩AV免费无码一区二区| 精品免费久久久久国产一区 | 国产精品久久久久一区二区三区 | 国产伦精品一区二区三区在线观看 | 成人中文字幕一区二区三区| 一区二区三区日韩精品| 国产乱码一区二区三区四| 国产一区二区在线| 精品无码国产AV一区二区三区 | 狠狠色婷婷久久一区二区| 亚洲国产综合无码一区| 免费无码一区二区三区| 无码丰满熟妇浪潮一区二区AV| 国产视频一区二区| 国产一区二区高清在线播放| 久久久精品人妻一区亚美研究所| 中文字幕一区一区三区|