HTML5+CSS3網頁設計與制作課件：使用Bootstrap和JS插件組件制作網頁內容_第1頁
HTML5+CSS3網頁設計與制作課件：使用Bootstrap和JS插件組件制作網頁內容_第2頁
HTML5+CSS3網頁設計與制作課件：使用Bootstrap和JS插件組件制作網頁內容_第3頁
HTML5+CSS3網頁設計與制作課件：使用Bootstrap和JS插件組件制作網頁內容_第4頁
HTML5+CSS3網頁設計與制作課件：使用Bootstrap和JS插件組件制作網頁內容_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

HTML5+CSS3網頁設計與制作使用Bootstrap開源框架快速搭建響應式網頁能夠使用Bootstrap的縮略圖、巨幕、表單、表格等相關組件，完成D清單頁面元素的制作；測試D清單頁面響應式效果，完善頁面細節(jié)。任務目標

使用Bootstrap和JS插件組件制作網頁內容本次任務要求在完成導航條制作的基礎上，繼續(xù)完成網頁內容的制作。完成后的效果圖如圖2-4所示。任務描述圖2-4完成后的移動端和電腦端頁面測試效果圖

使用Bootstrap和JS插件組件制作網頁內容在上一任務完成效果的基礎上，完成D清單網頁各個欄目內容的制作。需要：學習Bootstrap的縮略圖、巨幕、表單、表格等相關組件；學習Bootstrap的輪播和模態(tài)框（彈出框）等相關JavaScript插件；綜合運用Bootstrap相關組件，完成D清單頁面的制作并測試完成效果。任務分析

使用Bootstrap和JS插件組件制作網頁內容知識與技能準備如果你把我們要完成的網頁與Bootstrap的組件效果進行對比，你會發(fā)現(xiàn)，為完成接下來的任務，我們需要學習如下Bootstrap知識：知識與技能準備1、縮略圖組件Bootstrap的縮略圖是利用Bootstrap的刪格系統(tǒng)的一個圖片應用場景，僅需要最少的標簽就能展示帶鏈接的圖片。1.1圖片Bootstrap縮略圖默認樣式如下圖：要實現(xiàn)上圖效果，可以參考代碼如下：圖2-4-1默認縮略圖12345678<divclass="row"><divclass="col-xs-6col-md-3"><ahref="#"class="thumbnail"><imgsrc="..."alt="..."></a></div><!--此處重復4個col-xs-6col-md-3類的div--></div>知識與技能準備1、縮略圖組件通過分析上述代碼，我們知道縮略圖因為應用了Bootstrap的刪格系統(tǒng)，所以是支持響應式的，能夠在平板端只顯示2欄圖片，在手機端顯示1欄圖片，電腦及寬屏端顯示4欄圖片。Bootstrap對thumbnail類定義了如下樣式：該樣式代碼設置了圖片的邊框和對齊方式等格式，并設置了響應式圖片。123456789101112.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1pxsolid#ddd;border-radius:4px;-webkit-transition:border.2sease-in-out;-o-transition:border.2sease-in-out;transition:border.2sease-in-out;}.thumbnail>img,.thumbnaila>img{display:block;max-width:100%;height:auto;margin-right:auto;margin-left:auto;}知識與技能準備1、縮略圖組件1.2自定義縮略圖通過組合圖片、標題、段落和按鈕，我們就可以實現(xiàn)比較常見的網頁布局形式了，如下圖：圖2-4-2自定義縮略圖知識與技能準備1、縮略圖組件要實現(xiàn)上圖效果，可以參考代碼如下：圖2-4-2自定義縮略圖12345678910111213141516<divclass="row"><divclass="col-sm-6col-md-4"><divclass="thumbnail"><imgsrc="..."alt="..."><divclass="caption"><h3>Thumbnaillabel</h3><p>...</p><p><ahref="#"class="btnbtn-primary"role="button">Button</a><ahref="#"class="btnbtn-default"role="button">Button</a></p></div></div></div><!--此處重復2個col-sm-6col-md-4類的div--></div>效果圖如下：（1）分析：通過效果圖，我們可以做到，可以利用Bootstrap的自定義縮略圖來實現(xiàn)。在任務2的學習中，我們知道，row類是要與布局容器.container或.container-fluid結合使用才可以避免不對稱邊界的產生。另外，為了縮略圖圖片的排版美觀和適應響應式圖片寬度的變化，圖片應該是等高和等寬的。課堂練習2-4-1使用Bootstrap縮略圖，完成某卡車網站縮略圖的效果圖制作圖2-4-3課堂練習2-4-1效果圖知識與技能準備2、巨幕組件Bootstrap的巨幕是一個輕量的靈活組件，可以利用這個組件實現(xiàn)以布滿整個瀏覽器橫向視口的方式來展現(xiàn)重要關鍵內容。參考代碼如下：圖2-4-4巨幕效果圖123456<divclass="jumbotron"><h1>Hello,world!</h1><p>...</p><p><aclass="btnbtn-primarybtn-lg"href="#"role="button">Learnmore</a></p></div>知識與技能準備2、巨幕組件如果不需要圓角，寬度與瀏覽器寬度一致，則可以把此組件放在所有.container元素（.container類用于固定寬度并支持響應式布局的容器，詳見任務2）的外面，并在組件內部添加一個.container元素。12345678<divclass="jumbotron"><divclass="container"><h1>Hello,world!</h1><p>...</p><p><aclass="btnbtn-primarybtn-lg"href="#"role="button">Learnmore</a></p></div></div>使用Bootstrap巨幕組件完成如下效果圖的制作。（1）分析：效果圖與Bootstrap默認巨幕組件的區(qū)別在于添加了背景圖片，文本是居中的，文字的顏色也有變化，所以我們只需要使用不需要圓角的巨幕組件，并對樣式稍作修改即可。課堂練習2-4-2使用Bootstrap巨幕組件，完成某卡車網站巨幕效果圖的制作圖2-4-5課堂練習2-4-2巨幕效果圖知識與技能準備3、表格Bootstrap的表格內容屬于全局CSS樣式，Bootstrap表格基礎式樣只是為表格增加了少量的內補（padding）和水平方向的分割線，效果如下圖：要實現(xiàn)上述效果，是需要在<table>標簽中添加.table類：123<tableclass=”table”><!--此處表格代碼省略--><table>圖2-4-6表格效果圖知識與技能準備4、表單Bootstrap對所用的表單控件都編寫了全局樣式。所有設置了.form-control類的<input>、<textarea>和<select>元素都將被默認設置寬度屬性為width:100%；將label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列。效果如下圖：圖2-4-7表單效果圖知識與技能準備4、表單Bootstrap還設置了水平排列的表單，通過為<form>添加.form-horizontal類，并結合Bootstrap刪格系統(tǒng)，就可以實現(xiàn)label與表單控件水平排列的布局。添加了.form-horizontal后會對.form-group類進行了修改，使其擁有.row類的格式，使用在使用時就可以實現(xiàn)獨立行顯示即.row的效果。效果如下：圖2-4-8水平排列表單效果圖知識與技能準備5、使用FontAwesome字體圖標是否發(fā)現(xiàn)，雖然GlyphiconHalflings免費為Bootstrap提供了250多個Glyphicons字體圖標，但即便如此，有時候也有一些圖標是你非常想用的卻沒有的，如我們版權中的分享圖標，專業(yè)介紹的電腦圖標等等。除了Bootstrap中已有的250多個Glyphicons字體圖標，在網頁設計制作中，還可以通過其他途徑獲取更多的字體圖標應用到網頁中。FontAwesome就是一個較為常用的免費開源的字體圖標庫，其中文版地址為

，共提供了675個圖標。FontAwesome最初為Bootstrap而設計，現(xiàn)已適用于所有框架，兼容性良好。FontAwesome可以采用CDN加速的方式進行部署而不需要下載，也可以下載后復制font-awesome目錄到自己的項目中，分別將字體文件放在根目錄，css文件放在在css文件夾，然后在<head>處加載font-awesome.min.css，通過<link>引入到網頁后就可以使用了。知識與技能準備5、使用FontAwesome字體圖標例如，本任務中使用了品牌圖片的方式來制作導航條的logo，實際上也可以利用font-awesome來制作：123<aclass="navbar-brand"href="#"><iclass="fafa-camera-retrofa-4x"></i>D清單</a>任務實施在任務2中，我們已經對整個頁面進行了布局，在任務3中，我們已經完成了導航條的制作，接下來我們將完成剩下的內容。通過觀察頁面效果圖，我們可以做如下分析：（1）“關于”廣告部分可以使用巨幕組件完成；（2）“高級會員”區(qū)域是左右布局，用到了表格；（3）“下載應用”欄目如果我們把圖標看做圖片的話，其都應用了Bootstrap的縮略圖組件；（4）在“聯(lián)系我們”模塊用到了表單組件。另外，我們可以可以給導航條加入滾動監(jiān)聽效果，方便用戶瀏覽。通過對比Glyphicons字體圖標、FontAwesome字體圖標和頁面效果圖，為了達到比較好的效果，我們引入FontAwesome字體圖標來完成本次任務。為此，我們可以按照如下順序來完成此任務：1、關于圖2-4-10關于部分的效果圖任務實施2、特征特征模塊的布局我們已經在前面的任務中完成了，這里涉及到3個內容：（1）標題部分，涉及到下劃線，我們可以使用Bootstrap提供的頁頭組件來完成，主要樣式是“header”。頁頭組件能夠為h1標簽增加適當?shù)目臻g，并且與頁面的其他部分形成一定的分隔。它支持h1標簽內內嵌small元素的默認效果，還支持大部分其他組件。（2）圖片部分，雖然Bootstrap已經為圖片進行了響應式設計，但是針對左右結構的圖片情況，還是要寫一下圖片寬度為100%。（3）圖標字體和文本部分，圖標字體可以使用Bootstrap提供的圖標字體組件。另外為了與設計稿一致，可以重新設計標題文本樣式。圖2-4-10關于部分的效果圖任務實施3、下載下載部分包括“頁頭”組件和“縮略圖”組件上下兩部分。縮略圖組件部分使用到了FontAwesome字體圖標。CSS樣式主要是在Bootstrap的基礎上增加背景和修改文字顏色，以及圖標字體的相關屬性。圖2-4-12下載模塊效果圖任務實施4、高級會員下載部分包括“頁頭”組件和“表格”組件。CSS樣式主要是在Bootstrap的基礎上增加背

溫馨提示

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

評論

0/150

提交評論