《網(wǎng)頁設計與制作教程HTML+CSS+Bootstrap》課件 項目九創(chuàng)建網(wǎng)站菲菲服飾

項目九創(chuàng)建網(wǎng)站“菲菲服飾”

（Bootstrap應用）項目簡介Bootstrap是一個用于快速開發(fā)Web應用程序和網(wǎng)站的前端框架，Bootstrap的響應式CSS能夠自適應臺式機、平板電腦和手機，Bootstrap包含了十幾個可重用的組件，用于創(chuàng)建下拉菜單、按鈕、按鈕下拉菜單、導航、路徑導航、分頁、排版、縮略圖、警告對話框、進度條圖像等，利用Bootstrap的框架，可以快速設計出具有豐富動態(tài)效果的前端網(wǎng)頁。項目目標本項目以“菲菲服飾”網(wǎng)站開發(fā)為例，利用Bootstrap框架來實現(xiàn)具有豐富動感效果、視覺突出的時尚型網(wǎng)站建設。幫助初學者理解Bootstrap的概念和作用，認識Bootstrap框架結構，了解Bootstrap組件構成。學會引用Bootstrap組件的方法，利用Bootstrap技術設計制作動態(tài)十足的“菲菲服飾”網(wǎng)站，體驗Bootstrap框架的強大功能。工作任務根據(jù)“菲菲服飾”網(wǎng)站設計與制作的要求，基于工作過程，以任務驅(qū)動的方式，利用Bootstrap技術完成整個網(wǎng)站的設計和制作，實現(xiàn)下拉菜單、路徑導航、分頁、排版、縮略圖等現(xiàn)代網(wǎng)站元素，保持整個網(wǎng)站的風格協(xié)調(diào)一致。（1）了解Bootstrap的概念和作用；（2）認識Bootstrap框架結構和組件構成；（3）在網(wǎng)頁制作中引用Bootstrap組件的方法；（4）利用Bootstrap技術設計制作具有豐富動態(tài)效果的網(wǎng)頁；（5）整理基于Bootstrap制作網(wǎng)站的一般流程。任務一制作網(wǎng)站首頁通過以下兩個步驟的操作實踐來認識Bootstrap框架的概念和作用，了解Bootstrap框架中頁面布局、導航條、圖片輪播等組件和插件的用法，初步完成“菲菲服飾”網(wǎng)站首頁的制作：1．設計“菲菲服飾”網(wǎng)站結構；2．制作“菲菲服飾”網(wǎng)站首頁。

任務二

制作網(wǎng)站首頁《菲菲服飾》網(wǎng)站“首頁效果圖任務目標按照網(wǎng)站需求分析，建立站點文件夾，并在Dreamweaver2021中建立站點，通過“菲菲服飾”網(wǎng)站首頁設計和制作，幫助初學者理解Bootstrap的概念和作用，學會Bootstrap組件中下拉菜單、導航條等組件引用方法和修改方法，完成網(wǎng)站首頁的制作。知識準備知識準備一

了解Bootstrap的概念和作用2011年開始，Twitter的設計師MarkOtto和JacobThornton合作開發(fā)了一個基于HTML、CSS、JAVASCRIPT的框架，包含了豐富的Web組件，包括：下拉菜單、按鈕組、按鈕下拉菜單、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。使用這些組件，可以快速的搭建一個漂亮、功能完備的網(wǎng)站。Bootstrap目前使用較廣的是版本v3和v4，其中v3的版本是3.4.1，v4的版本是4.4.1，Dreamweaver2021中同時集成了Bootstrap的這兩個版本供用戶選擇使用（默認使用4.4.1，對于初學者，建議使用成熟穩(wěn)定的3.4.1版本）。知識準備二Bootstrap柵格系統(tǒng)和文字排版1、柵格系統(tǒng)（GridSystem）默認的Bootstrap柵格系統(tǒng)提供一個寬940像素的12列格網(wǎng)。這意味著頁面默認寬度是940px，最小的單元寬度是940/12px。Bootstrap能夠使得網(wǎng)頁可以更好地適應多種終端設備（如平板電腦、智能手機等）。知識準備二Bootstrap柵格系統(tǒng)和文字排版1、柵格系統(tǒng)（GridSystem）流式柵格系統(tǒng)（Fluidgridsystem）。它使用百分比，而不是固定的像素來確定頁面的寬度。布局（Layout），是創(chuàng)建頁面基礎模板的布局。Bootstrap提供兩種布局方式，包括固定（Fixed）和流式（Fluid）布局。工作原理柵格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。知識準備二Bootstrap柵格系統(tǒng)和文字排版2．文字排版排版（Typography），它囊括標題（Headings），段落（Paragraphs），列表（lists）以及其他內(nèi)聯(lián)要素。Bootstrap提供了三種標簽來表現(xiàn)不同類型列表：<ul>表示無序列表，<ulclass="unstyled">表示無樣式的無序列表；<ol>表示有序列表；<dl>表示描述列表，<dlclass="dl-horizontal">表示豎排描述列表。知識準備三

重要組件：按鈕（Button）Bootstrap提供多種樣式的按鈕，同樣通過CSS的類來控制，包括btn、btn-primary、btn-info、btn-success等不同顏色的按鈕。知識準備四

重要組件：導航條（Navbar）Bootstrap提供了各種樣式的導航條，導航條的基礎類是.navbar，至于導航條在頂部或底部，用.navbar-fixed-top與.navbar-fixed-bottom來設置。在navbar中使用form要素，比如.navbar-form?？梢灾С猪憫讲僮?，通過.nav-collapse或者直接.collapse類實現(xiàn)。知識準備四

重要插件：圖片輪播（Carousel）Bootstrap圖片輪播（Carousel）插件是一種靈活的響應式的向站點添加輪番顯示內(nèi)容的方式。并且內(nèi)容也足夠靈活，可以是圖像、內(nèi)嵌框架、視頻或者其他想要放置的任何類型的內(nèi)容。任務實施步驟一準備網(wǎng)站基本架構1．在D盤建立站點目錄“fffs”及其子目錄images。2．打開Dreamweaver2021，打開“站點”菜單，選擇“新建站點”，使用“站點設置對象”定義站點，站點名“菲菲服飾”，站點文件夾“fffs”。任務實施步驟一準備網(wǎng)站基本架構3．打開“文件”菜單，選擇“新建”，對話框內(nèi)選擇“新建文檔”，文件類型“HTML”，框架選擇“Bootstrap”，去掉“包含預構建布局”勾選，單擊“創(chuàng)建”。任務實施步驟二制作網(wǎng)站首頁1．添加“導航條”。任務實施步驟二制作網(wǎng)站首頁2．添加“網(wǎng)站logo”。任務實施步驟二制作網(wǎng)站首頁3．添加“圖片輪播”。任務實施步驟二制作網(wǎng)站首頁4．添加網(wǎng)站“聯(lián)系方式”。任務實施步驟二制作網(wǎng)站首頁5．添加網(wǎng)站“版權說明”。任務二

制作“設計師”子網(wǎng)頁通過以下兩個步驟的操作實踐來認識Bootstrap框架下拉菜單、導航條、標簽、小圖標等組件的使用，完成“菲菲服飾”網(wǎng)站中“設計師”網(wǎng)頁的制作，效果如圖所示。1．設計“菲菲服飾”網(wǎng)站的“設計師”網(wǎng)頁結構；2．制作“菲菲服飾”網(wǎng)站的“設計師”網(wǎng)頁。任務二制作“設計師”子網(wǎng)頁《菲菲服飾》網(wǎng)站“設計師”效果圖任務目標根據(jù)網(wǎng)站需求分析，通過“菲菲服飾”網(wǎng)站“設計師”網(wǎng)頁的設計和制作，幫助初學者更深入了解Bootstrap的組件中下拉菜單、導航條、標簽、小圖標等組件使用方法和代碼、參數(shù)修改方法，完成“設計師”網(wǎng)頁的制作。知識準備知識準備一重要組件：標簽（Label）標簽是一個很好用的頁面小元素，Bootstrap具有多種顏色標簽。知識準備知識準備二重要組件：小圖標（Glyphicons）Bootstrap提供的200個字體圖標，每個圖標對應一個class，部分圖標如圖所示。在使用時，只需要包含glyphicon和對應的class即可。任務實施步驟一

設計“設計師”網(wǎng)頁結構1．打開“文件”菜單，選擇“新建”，在對話框內(nèi)選擇“新建文檔”，文件類型“HTML”，框架選擇“Bootstrap”。任務實施步驟一

設計“設計師”網(wǎng)頁結構2．打開“文件”菜單，選擇保存，將新建文檔保存為“Designer.html”?！霸O計師”網(wǎng)頁的結構比較簡單，上部是導航條，中部是設計師個人介紹資料，下部是版權說明欄。任務實施步驟二制作“設計師”網(wǎng)頁1．添加“導航條”。任務實施步驟二制作“設計師”網(wǎng)頁2．添加“網(wǎng)站logo”。任務實施步驟二制作“設計師”網(wǎng)頁3．添加“設計師簡介”。任務實施步驟二制作“設計師”網(wǎng)頁4．添加網(wǎng)站“版權說明”。任務三

制作“產(chǎn)品展示”子網(wǎng)頁通過以下二個步驟的操作實踐來認識Bootstrap框架下拉菜單、導航條、縮略圖等組件的使用，完成“菲菲服飾”網(wǎng)站中“產(chǎn)品展示”網(wǎng)頁的制作，網(wǎng)頁效果如圖9.3.1所示。1．設計“菲菲服飾”網(wǎng)站“產(chǎn)品展示”網(wǎng)頁結構。2．制作“菲菲服飾”網(wǎng)站“產(chǎn)品展示”網(wǎng)頁。任務三制作“產(chǎn)品展示”子網(wǎng)頁《菲菲服飾》網(wǎng)站“產(chǎn)品展示”效果圖任務目標根據(jù)網(wǎng)站需求分析，通過“菲菲服飾”網(wǎng)站2020年、2021年服裝產(chǎn)品展示網(wǎng)頁的設計和制作，幫助初學者更深入了解Bootstrap的組件中下拉菜單、導航條、縮略圖等組件使用方法和代碼、參數(shù)修改方法，完成服裝產(chǎn)品展示網(wǎng)頁的制作。知識準備知識準備一

重要插件：標簽頁（Tab）標簽頁插件可以在網(wǎng)頁中添加快速的、動態(tài)的tab和pill，帶過濾效果、下拉菜單的選項卡功能，可以切換顯示本地內(nèi)容，來實現(xiàn)過渡頁面內(nèi)容的效果。知識準備知識準備二重要組件：縮略圖（Thumbnails）縮略圖，可以作為圖片、視頻、文字的格網(wǎng)結構展示。實現(xiàn)默認形式的Bootstrap縮略圖，只需要簡單的thumbnails標簽。知識準備知識準備二重要插件：模態(tài)框（Modal）模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動。任務實施步驟一設計產(chǎn)品展示網(wǎng)頁結構1．打開“文件”菜單，選擇“新建”，在對話框內(nèi)選擇“新建文檔”，文件類型“HTML”，框架選擇“Bootstrap”。任務實施步驟一

設計“設計師”網(wǎng)頁結構2．打開“文件”菜單，將新建的文檔保存為“Product.html”。產(chǎn)品展示網(wǎng)頁的結構比較簡單，上部是導航條，中部是要展示的產(chǎn)品，下部是版權說明欄。任務實施步驟二制作產(chǎn)品展示網(wǎng)頁1．添加“導航條”。任務實施步驟二制作“設計師”網(wǎng)頁2．添加“網(wǎng)站logo”。任務實施步驟二制作“設計師”網(wǎng)頁3．添加“產(chǎn)品展示標簽頁”任務實施步驟二制作“設計師”網(wǎng)頁修改完成的效果如圖任務實施步驟二制作“設計師”網(wǎng)頁實現(xiàn)點擊服裝圖片，用彈窗形式，展示該服裝基本信息任務實施步驟二制作“設計師”網(wǎng)頁兩個TAB完成后的效果如圖任務實施步驟二制作“設計師”網(wǎng)頁4．添加網(wǎng)站“版權說明”。任務實施步驟二制作“設計師”網(wǎng)頁5．添加導航條“產(chǎn)品展示”超鏈接。在“實時視圖”中，單擊“產(chǎn)品展示”，再彈出下拉菜單中單擊“2020”，在代碼區(qū)對應位置，將“2020”前<ahref="Product.html">修改為<ahref="Product.html#home1"data-toggle="tab">，同樣，將“2021”前<ahref="Product.html">修改為<ahref="Product.html#