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

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

任務(wù)二

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

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

重要組件：按鈕（Button）Bootstrap提供多種樣式的按鈕，同樣通過(guò)CSS的類來(lái)控制，包括btn、btn-primary、btn-info、btn-success等不同顏色的按鈕。知識(shí)準(zhǔn)備四

重要組件：導(dǎo)航條（Navbar）Bootstrap提供了各種樣式的導(dǎo)航條，導(dǎo)航條的基礎(chǔ)類是.navbar，至于導(dǎo)航條在頂部或底部，用.navbar-fixed-top與.navbar-fixed-bottom來(lái)設(shè)置。在navbar中使用form要素，比如.navbar-form?？梢灾С猪憫?yīng)式操作，通過(guò).nav-collapse或者直接.collapse類實(shí)現(xiàn)。知識(shí)準(zhǔn)備四

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

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

設(shè)計(jì)“設(shè)計(jì)師”網(wǎng)頁(yè)結(jié)構(gòu)1．打開(kāi)“文件”菜單，選擇“新建”，在對(duì)話框內(nèi)選擇“新建文檔”，文件類型“HTML”，框架選擇“Bootstrap”。任務(wù)實(shí)施步驟一

設(shè)計(jì)“設(shè)計(jì)師”網(wǎng)頁(yè)結(jié)構(gòu)2．打開(kāi)“文件”菜單，選擇保存，將新建文檔保存為“Designer.html”。“設(shè)計(jì)師”網(wǎng)頁(yè)的結(jié)構(gòu)比較簡(jiǎn)單，上部是導(dǎo)航條，中部是設(shè)計(jì)師個(gè)人介紹資料，下部是版權(quán)說(shuō)明欄。任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)1．添加“導(dǎo)航條”。任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)2．添加“網(wǎng)站logo”。任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)3．添加“設(shè)計(jì)師簡(jiǎn)介”。任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)4．添加網(wǎng)站“版權(quán)說(shuō)明”。任務(wù)三

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

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

設(shè)計(jì)“設(shè)計(jì)師”網(wǎng)頁(yè)結(jié)構(gòu)2．打開(kāi)“文件”菜單，將新建的文檔保存為“Product.html”。產(chǎn)品展示網(wǎng)頁(yè)的結(jié)構(gòu)比較簡(jiǎn)單，上部是導(dǎo)航條，中部是要展示的產(chǎn)品，下部是版權(quán)說(shuō)明欄。任務(wù)實(shí)施步驟二制作產(chǎn)品展示網(wǎng)頁(yè)1．添加“導(dǎo)航條”。任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)2．添加“網(wǎng)站logo”。任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)3．添加“產(chǎn)品展示標(biāo)簽頁(yè)”任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)修改完成的效果如圖任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)實(shí)現(xiàn)點(diǎn)擊服裝圖片，用彈窗形式，展示該服裝基本信息任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)兩個(gè)TAB完成后的效果如圖任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)4．添加網(wǎng)站“版權(quán)說(shuō)明”。任務(wù)實(shí)施步驟二制作“設(shè)計(jì)師”網(wǎng)頁(yè)5．添加導(dǎo)航條“產(chǎn)品展示”超鏈接。在“實(shí)時(shí)視圖”中，單擊“產(chǎn)品展示”，再?gòu)棾鱿吕藛沃袉螕簟?020”，在代碼區(qū)對(duì)應(yīng)位置，將“2020”前<ahref="Product.html">修改為<ahref="Product.html#home1"data-toggle="tab">，同樣，將“2021”前<ahref="Product.html">修改為<ahref="Product.html#