《網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程（HTML+CSS+Bootstrap） 》題庫(kù)練習(xí)題復(fù)習(xí)題習(xí)題測(cè)試題帶答案

1、項(xiàng)目一思考練習(xí)答案練習(xí)1一、填空題1URL（Uniform Resource Locator）即 統(tǒng)一資源定位系統(tǒng) ，也就是網(wǎng)絡(luò)地址，是在Internet上用來描述信息資源，并將Internet提供的服務(wù)統(tǒng)一編址的系統(tǒng)。2因特網(wǎng)（Internet）又稱為 互聯(lián)網(wǎng) ，是一個(gè)把分布于世界各地的計(jì)算機(jī)用傳輸介質(zhì)互相連接起來的網(wǎng)絡(luò)。3. Dreamweaver CC是有 Adobe 公司出品的。4HTML（Hyper Text Markup Language 超文本標(biāo)識(shí)語(yǔ)言）是一種用來制作 超文本文檔簡(jiǎn)單語(yǔ)言 。二、單選題1萬(wàn)維網(wǎng)是( A )。A. 無數(shù)個(gè)網(wǎng)絡(luò)站點(diǎn)和網(wǎng)頁(yè)的集合B. 互聯(lián)網(wǎng)C. 一個(gè)網(wǎng)站

2、D. 一個(gè)網(wǎng)頁(yè)2目前在Internet上應(yīng)用最為廣泛的服務(wù)是(B)A.FTP服務(wù)B.WWW服務(wù)C.Telnet服務(wù)D.Gopher服務(wù)3網(wǎng)頁(yè)的特征是（ D ）AHTML文檔的基本特征超文本 B標(biāo)識(shí)語(yǔ)言，網(wǎng)頁(yè)中不能沒有標(biāo)記（Tag） C網(wǎng)頁(yè)提供了一些措施以防在網(wǎng)上沖浪的過程中迷失方向 D網(wǎng)頁(yè)實(shí)現(xiàn)了對(duì)原文檔信息的無限補(bǔ)充或擴(kuò)展三、簡(jiǎn)單題（略）練習(xí)2 一、選擇題（單選或多項(xiàng)）1Dreamweaver CC的新建文檔頁(yè)面，一般情況下，創(chuàng)建完全空白的靜態(tài)頁(yè)面應(yīng)選擇( D ）。A.XML B.PHPC.CSSD.HTML2Dreavermeaver CC中關(guān)閉所有面板和面板組，按（ B ）。A.【F1】B

3、.【F4】C.【CTRL】D.【TAB】3利用Dreamweaver建立站點(diǎn)，要?jiǎng)?chuàng)建站點(diǎn)根文件夾，以下說法正確的是（ BCD ）。A.存放網(wǎng)站鏈接B.是網(wǎng)站中的一部分C.用來保存網(wǎng)站內(nèi)容（包括網(wǎng)頁(yè)文件和圖像、動(dòng)畫等）的文件夾D.創(chuàng)建若干個(gè)子文件夾，以存放不同類型的文件二、判斷題1靜態(tài)的首頁(yè)命名只能為“index.html”。（ ）2最好不要使用中文命名文件和文件夾（包括根文件夾），因?yàn)樵谑褂肬nix或Linux作為操作系統(tǒng)的主機(jī)上，使用中文名容易出錯(cuò)。（ ）3文件名不要用大寫英文字母，因?yàn)閁nix操作系統(tǒng)區(qū)分英文字母大小寫，而Windows操作系統(tǒng)不區(qū)分英文字母大小寫（ ）4.瀏覽器是一種硬件

4、設(shè)備，最常用的有IE、騰訊瀏覽器等。( )5.IP地址由四個(gè)數(shù)字組成，以圓點(diǎn)分隔，如11。（ ）6.域名就像網(wǎng)站的名字，并且該名字是全世界唯一的。（ ）7.我們可以在不設(shè)置 Dreamweaver 站點(diǎn)的情況下編輯網(wǎng)頁(yè)文件。（ ）8.圖像可以用于充當(dāng)網(wǎng)頁(yè)內(nèi)容，但不能作為網(wǎng)頁(yè)背景。 ( )項(xiàng)目二思考練習(xí)答案一、單選題1下列說法錯(cuò)誤的是（B）A. 表示上標(biāo)B. 表示下劃線C. 表示刪除線D. 表示刪除線2表示（D）A. 斜體B. 粗體C. 下劃線D. 強(qiáng)調(diào)3換行符的HTML代碼是（B）A. B. C. D. 4 html中標(biāo)注標(biāo)題的是（A）A. B. C. D. 二、簡(jiǎn)單題（

5、略）練習(xí)2一、單選題1鏈接基本語(yǔ)法是（D）A. . B. . C. . D. . 2 . ,表示（B）A. 跳轉(zhuǎn)到bn頁(yè)面B. 跳轉(zhuǎn)到頁(yè)面的bn錨點(diǎn)C. 超鏈接的屬性是bnD. 超鏈接的對(duì)象是bn3表示新開一個(gè)窗口的超鏈接代碼是（C）A. .B. .C. .D. .4 . ,表示（B）A. 跳轉(zhuǎn)到hello.html頁(yè)面的頂部B. 跳轉(zhuǎn)到hello.html頁(yè)面的top錨點(diǎn)C. 跳轉(zhuǎn)到hello.html頁(yè)面的底部D. 跳轉(zhuǎn)到hello.html頁(yè)面的文字top所在鏈接5表示（A）A. 表示水平線沒有陰影B. 表示水平線沒有邊框C. 表示頁(yè)面邊界沒有陰影D. 表示水平線不顯視6下列說法正確的是

6、（B）A. 和的區(qū)別是插入了一個(gè)空行B. 和的區(qū)別是不是換行符，而是C. 和的區(qū)別就是后面不能加入文字D. 和的區(qū)別就是后面不能加入文字7，表示（C）A. 圖像的地址B. 圖像的排列方式C. 在瀏覽器尚未完全讀入圖象時(shí)，在圖象位置顯示的文字D. 在瀏覽器尚未完全讀入圖象時(shí)，在圖象的上方顯示的文字8. 創(chuàng)建最小的標(biāo)題的文本標(biāo)簽是（C） A. B. C. D. 二、簡(jiǎn)答題(略)任務(wù)一1、#innercolor:red屬于內(nèi)部樣式表類型的樣式表。2、CSS的全稱是層疊樣式表。3、標(biāo)記包含在標(biāo)簽中。4、當(dāng)瀏覽器不支持圖像時(shí)，圖像標(biāo)記的（ C ）屬性的文本內(nèi)容可以替代說明圖像。A、align B、hei

7、ght C、alt D、border5、若要以標(biāo)題2、居中、紅色顯示“我的網(wǎng)站”，以下用法中，正確的是（ C ） 。A、我的網(wǎng)站B、我的網(wǎng)站C、我的網(wǎng)站D、我的網(wǎng)站6、用于設(shè)置表格背景顏色的屬性是（ B ） A、 B、 C、 D、 7、以下關(guān)于FONT標(biāo)記符的說法中，錯(cuò)誤的是：（ D ） A、可以使用 color 屬性指定文字顏色。 B、可以使用 size 屬性指定文字大?。ㄒ簿褪亲痔?hào)）。 C、指定字號(hào)時(shí)可以使用 17 的數(shù)字。 D、語(yǔ)句 這里是2號(hào)字 將使文字以2號(hào)字顯示。8、以下說法中，正確的是：（ C ） A、P標(biāo)記符與BR標(biāo)記符的作用一樣。 B、多個(gè)P標(biāo)記符可以產(chǎn)生多個(gè)空行。 C、多個(gè)

8、BR標(biāo)記符可以產(chǎn)生多個(gè)空行。 D、P標(biāo)記符的結(jié)束標(biāo)記符通常不可以省略。9、要控制水平線的粗細(xì)，應(yīng)使用以下屬性：（ C ） A、color B、width C、size D、height10、在CSS的文本屬性中，文本修飾的取值text-decoration：overline表示（ C ）A、不用修飾 B、下劃線 C、上劃線 D、橫線從字中間穿過11、下面不屬于CSS插入形式的是( A ) A、索引式 B、內(nèi)聯(lián)式 C、嵌入式 D、外部式12、簡(jiǎn)述CSS樣式表在網(wǎng)站設(shè)計(jì)中的作用。CSS樣式能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，

9、主要的功能如下：（1）只需修正一個(gè)CSS文件，便可同時(shí)更新眾多的網(wǎng)頁(yè)版面外觀及格式；（2）可以使html的文件內(nèi)碼更精簡(jiǎn)，縮小檔案下載的速度；（3）可以更精確的控制網(wǎng)頁(yè)版面的文字、背景、字型等；（4）適用于所有瀏覽器，兼容性好。任務(wù)二1、在默認(rèn)情況下，瀏覽器內(nèi)已選擇的超鏈接文本顏色顯示為 下劃線藍(lán)色，已訪問的超鏈接顏色顯示為 下劃線紫色 。2、在Dreamweaver中，超鏈接中定義目標(biāo)的屬性為_blank，表示用戶單擊超鏈接時(shí)會(huì)彈出一個(gè)新的網(wǎng)頁(yè)窗口。3、若要在頁(yè)面中創(chuàng)建一個(gè)圖形超鏈接，要顯示的圖形為cic.jpg，所鏈接的地址為 以下用法中，正確的是（ B ） A、 cic.jpg B、 C

10、、 D、 4、選中某文本或圖片，在DreamWeaver的屬性面板中的“鏈接”文本框中輸入（ A ）可以制作其空鏈接。A、 # B、 C、$ D、&5、如果鏈接的對(duì)象是同一網(wǎng)頁(yè)中的內(nèi)容可以使用（ A ） A、錨點(diǎn)鏈接 B、文本鏈接 C、外部鏈接 D、內(nèi)部鏈接6、以下路徑中屬于絕對(duì)路徑的是( A )。 A、 B、address.htm C、/xuesheng/chengji/mingci.htm D、staff/telephone.htm7、在創(chuàng)建圖像熱點(diǎn)鏈接時(shí)，不包括（ A ）形狀的圖像熱點(diǎn)。 A、不規(guī)則曲線 B、多邊形 C、矩形 D、橢圓形8、在圖片中設(shè)置超連接的說法中正確的是（ D ）。

11、A、圖片上不能設(shè)置超連接 B、一個(gè)圖片上只能設(shè)置一個(gè)超連接 C、鼠標(biāo)移動(dòng)到帶超連接的圖片上仍然顯示箭頭形狀 D、一個(gè)圖片上能設(shè)置多個(gè)超連接9、絕對(duì)路徑、相對(duì)路徑和基準(zhǔn)地址的區(qū)別與聯(lián)系是什么？在HTML文件中，主要提供了三種路徑：絕對(duì)路徑、相對(duì)路徑和根路徑，不同的路徑使用在不同的鏈接中。在添加內(nèi)部鏈接的時(shí)候，常用到相對(duì)路徑和根路徑；在添加外部鏈接的時(shí)候，常用到絕對(duì)路徑。絕對(duì)路徑指對(duì)站點(diǎn)的根目錄而言某文件的位置，當(dāng)所有網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑都是相同的；相對(duì)路徑指以當(dāng)前文件所處目錄而言某文件的位置，當(dāng)保存于不同目錄的網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑將不同。10、鏈接網(wǎng)頁(yè)的“目標(biāo)”位置有

12、幾種？target：用于指定打開鏈接的目標(biāo)窗口，其默認(rèn)方式是原窗口。_parent在上一級(jí)窗口中打開。_blank在新窗口打開。_self在同一個(gè)楨或窗口中打開。_top在瀏覽器的整個(gè)窗口中打開，忽略任何框架。練習(xí)11根據(jù)Web標(biāo)準(zhǔn)化，網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）、行為（Behavior）。2根據(jù)CSS盒模型理論，所有HTML元素都可以看作一個(gè)盒子，盒子是由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）4個(gè)部分組成。3使用CSS+DIV布局的第一步是構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)，從操作來說，也就是創(chuàng)建各個(gè)Di

13、v。4Border屬性包含三個(gè)方面：border-style（樣式）、border-color（顏色）和border-width（寬度）。5margin是指border外邊沿與相鄰元素之間的距離。6下列屬于HTML5新的結(jié)構(gòu)元素標(biāo)簽的是（ B ）。A、Head B、HeaderC、content D、border7Padding是指border內(nèi)邊沿與（ C ）之間的距離。A、border外邊沿 B、相鄰元素C、content D、另一條border8HTML5結(jié)構(gòu)化元素標(biāo)簽中，標(biāo)記導(dǎo)航類輔助內(nèi)容的是（ D ）。A、section B、HeaderC、article D、nav9畫出盒模型示意

14、圖，并且標(biāo)明盒模型的各個(gè)部分。10為什么說用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局時(shí)，網(wǎng)頁(yè)改版會(huì)變得很容易？DIV+CSS布局是一種內(nèi)容與形式分離的布局方式，所以網(wǎng)頁(yè)改版時(shí)只需要修改對(duì)應(yīng)的CSS文件和圖片，就能在不更改程序和結(jié)構(gòu)代碼的情況下完成所有的改版。練習(xí)21CSS的繼承性指的是 子 標(biāo)記會(huì)繼承 父 標(biāo)記的所有樣式風(fēng)格，并可以在 父 標(biāo)記樣式風(fēng)格的基礎(chǔ)上修改，產(chǎn)生新的樣式，而 子 標(biāo)記的樣式風(fēng)格完全不影響 父 標(biāo)記。（子、父）2網(wǎng)頁(yè)布局主要包括以下三種形式：自然布局、浮動(dòng)布局、定位布局。3實(shí)現(xiàn)兩個(gè)盒子的并列布局，主要通過設(shè)置 float 屬性。4、CSS定義了 clear 屬性來清除浮動(dòng)。5CSS盒模

15、型是方形為基礎(chǔ)的，所以設(shè)置邊框，除了可以用border屬性，還可以按照方向通過以下四個(gè)屬性單獨(dú)設(shè)置：border-top（頂）、border-bottom（底）、border-left（左）、border-right（右）。6根據(jù)CSS盒模型，Width 屬性用來設(shè)置_的寬度/高度。（ A ）。A、content B、content+paddingC、content+padding+border D、content+padding+border+margin7對(duì)于屬性margin的定義：margin:25px 50px 75px;以下解讀正確的是：（ B ）A、上下邊距為25px B、左右邊距

16、為50pxC、上下邊距為75px D、左右邊距為75px8. 下列說法正確的是（ D ）。A、因?yàn)轫?yè)面只有一個(gè)網(wǎng)頁(yè)標(biāo)題，所以header標(biāo)簽在一張頁(yè)面中只會(huì)出現(xiàn)一次。B、因?yàn)轫?yè)面只有一個(gè)網(wǎng)頁(yè)腳注，所以footer標(biāo)簽在一張頁(yè)面中只會(huì)出現(xiàn)一次。C、因?yàn)轫?yè)面只有一個(gè)網(wǎng)頁(yè)導(dǎo)航，所以nav標(biāo)簽在一張頁(yè)面中只會(huì)出現(xiàn)一次。D、section標(biāo)簽可以包含article標(biāo)簽，article標(biāo)簽也可以包含section標(biāo)簽。、9網(wǎng)頁(yè)布局的基本流程是什么？使用CSS+DIV布局的第一步是構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)，第二步是寫入網(wǎng)頁(yè)內(nèi)容，第三步是設(shè)置網(wǎng)頁(yè)布局樣式。10CSS提供了Float屬性用來實(shí)現(xiàn)多列布局的樣式。可是為什么還

17、要設(shè)置clear屬性，用來清除浮動(dòng)呢？Float屬性雖然實(shí)現(xiàn)了自然布局沒有辦法呈現(xiàn)的多列布局的樣式，但是，受float屬性的影響，原本不打算浮動(dòng)的對(duì)象可能也會(huì)受其影響出現(xiàn)各種布局問題。為此，CSS又定義了clear屬性，用來清除浮動(dòng)。任務(wù)一 思考練習(xí)1. CSS按其位置可以分成三種：外部樣式表、內(nèi)部樣式表、 內(nèi)聯(lián)樣式。2. 對(duì)一個(gè)寬度固定的塊級(jí)元素應(yīng)用 margin:0 auto 樣式，可使其水平居中。3. 在HTML文檔中，引用外部樣式表的正確位置是？（D）A.文檔的末尾 B.文檔的頂部C. 部分D. 部分4. CSS中id選擇器在定義的前面要有指示符 （D）A.*B. .C.!D.#5.

18、如何利用UL實(shí)現(xiàn)導(dǎo)航菜單？答：將UL、LI標(biāo)簽與CSS樣式配合使用，可以實(shí)現(xiàn)導(dǎo)航菜單，并設(shè)置為需要的樣式。示例如下：HTML代碼：網(wǎng)站首頁(yè)關(guān)于我們企業(yè)新聞公司案例業(yè)務(wù)咨詢CSS樣式：#menuwidth:600px;margin: 0;padding: 0;list-style: none;#menu lifloat:left;width:120px;text-align: center;line-height: 25px;#menu li atext-decoration: none;color: blue;display: block;#menu li a:hoverbackground:

19、 blue;color:#fff;6. 層的設(shè)置的先后影響他布局的左右順序嗎？答：原則上，在HTML中書寫DIV時(shí)，先寫的DIV出現(xiàn)上方，后寫的DIV出現(xiàn)在下方。但若配合CSS樣式的float屬性使用時(shí)，DIV的左右順序會(huì)脫離文檔流而存在。例如：順序出現(xiàn)的兩欄div1和div2，若div1設(shè)置屬性float:right，div2設(shè)置屬性float:left時(shí)，在外層容器寬度足夠的情況下，div2會(huì)出現(xiàn)在div1左側(cè)位置。7. 邊界（外邊距margin）與填充（內(nèi)邊距padding）有什么區(qū)別？答：margin和padding樣式最簡(jiǎn)單的區(qū)別方法是使用border邊框來驗(yàn)證：1 margin是外

20、邊距的意思，是指從border界限以外邊框距離附近元素的距離。2 padding是內(nèi)邊距的意思，是指border界限以內(nèi)邊框到盒子里內(nèi)容元素的距離。盒子模型圖解如下：8. id和class的使用有什么區(qū)別？答：1 在css中，ID的前綴用#，Class的前綴用.2 同一個(gè)標(biāo)簽，只能有一個(gè)ID，但可以有多個(gè)Class（如：div id=div1 class=div1 div2 div3，表示該div的ID為div1，Class分別為div1、div2、div3三個(gè)）3 優(yōu)先級(jí)：同時(shí)定義一個(gè)標(biāo)簽的ID和Class的css，ID所定義的css優(yōu)先于Class（如：#divfont-size:14px

21、; .divfont-size:12px;；則它的字體大小是14px）4 在同一個(gè)頁(yè)面，ID只能出現(xiàn)一個(gè)，Class則可以出現(xiàn)多個(gè)。任務(wù)二 思考練習(xí)1. 將一個(gè)盒子的上邊框定義為 1 像素、藍(lán)色、單實(shí)線，下列代碼正確的是（A）。A. border-top：1px solid #00f;B. border：1px solid #00f;C. border-top：1px dashed #00f;D. border：1px dashed #00f;2. 在下面的程序中，第一個(gè)div和第二個(gè)div之間的垂直間距是40 px。divwidth:200px;height:60px;background:

22、red;.one margin-bottom:20px;.two margin-top:40px;第一個(gè) div第二個(gè) div3. 已知每個(gè)小盒子總寬度 80px，總高度 30px，仔細(xì)觀察下圖，運(yùn)用所學(xué)知識(shí)做一個(gè)與之類似的導(dǎo)航欄，并用火狐瀏覽器測(cè)試：代碼實(shí)現(xiàn)如下：導(dǎo)航欄1#menulist-style: none;margin: 0 auto;padding: 0 30px;border-top: 2px solid #fdcc36;width: 516px;#menu lifloat:left;width: 80px;height: 30px;margin: 0 3px;backgroun

23、d: #fdcc36;color:#fff;font-size: 12px;font-weight: bold;text-align: center;line-height: 30px;導(dǎo)航欄導(dǎo)航欄導(dǎo)航欄導(dǎo)航欄導(dǎo)航欄導(dǎo)航欄4. 已知每個(gè)小盒子總寬度 80px，總高度 30px，邊框 2 像素，仔細(xì)觀察下圖，運(yùn)用所學(xué)知識(shí)做一個(gè)與之類似的導(dǎo)航欄，并用火狐瀏覽器測(cè)試：代碼實(shí)現(xiàn)如下：導(dǎo)航欄2#menulist-style: none;margin: 0 auto;width: 344px;#menu lifloat:left;width: 76px;height: 26px;margin: 0 3px

24、;background: #fdcc36;color:#fff;font-size: 14px;font-weight: bold;text-align: center;line-height: 26px;border:2px dotted #dece77;首頁(yè)產(chǎn)品介紹企業(yè)新聞聯(lián)系方式任務(wù)一1、用于設(shè)置文本框顯示寬度的屬性是Size。2、用戶設(shè)置文本框可最大輸入文字長(zhǎng)度的屬性是maxlength。3、當(dāng)標(biāo)記的TYPE屬性值為checkbox_時(shí)，代表一個(gè)可選多項(xiàng)的復(fù)選框。4、在指定單選框時(shí)，只有將education屬性的值指定為相同，才能使它們成為一組。5、若要產(chǎn)生一個(gè)4行30列的多行文本域，

25、以下方法中，正確的是（ C ）。 A、 B、 C、 D、 6、在Dreamweaver中，最常用的表單處理腳本語(yǔ)言是（ D ）。 A、C B、Java C、ASP D、JavaScript7、以下有關(guān)表單的說明中，錯(cuò)誤的是：（ C ） A、表單通常用于搜集用戶信息。 B、在 FORM 標(biāo)記符中使用 action 屬性指定表單處理程序的位置。 C、表單中只能包含表單控件，而不能包含其他諸如圖片之類的內(nèi)容。D、在 FORM 標(biāo)記符中使用 method 屬性指定提交表單數(shù)據(jù)的方法。8、創(chuàng)建選項(xiàng)（ A ）菜單應(yīng)使用以下標(biāo)記符： A、SELECT 和 OPTION B、INPUT 和 LABEL C、I

26、NPUT D、INPUT 和 OPTION9、以下表單控件中，不是由 INPUT 標(biāo)記符創(chuàng)建的為：（ C ）A、單選框 B、口令框 C、選項(xiàng)菜單 D、提交按鈕10、在表單中，需要把用戶輸入的數(shù)據(jù)以密碼的形式來接收，應(yīng)該使用的表單元素是（ A ）。 A、 B、 C、 D、11、根據(jù)下圖所示的頁(yè)面效果，寫出對(duì)應(yīng)的表單代碼。請(qǐng)輸入姓名：請(qǐng)輸入密碼：請(qǐng)選擇性別：男女請(qǐng)選擇興趣： 運(yùn)動(dòng) 美術(shù)音樂 任務(wù)二1、在HTML文件中嵌入一段JavaScript語(yǔ)言程序，其起始和結(jié)束標(biāo)記是（ A）。 A、 B、 C、 D、 2、html事件中，onDblClick表示（ D ）。A、設(shè)定取得資料時(shí)觸發(fā)事件執(zhí)行B、設(shè)

27、定改變資料時(shí)觸發(fā)事件執(zhí)行 C、設(shè)定放置資料完成時(shí)觸發(fā)事件執(zhí)行 D、設(shè)定鼠標(biāo)左鍵雙擊標(biāo)記時(shí)觸發(fā)事件執(zhí)行 3、當(dāng)鼠標(biāo)移動(dòng)到文字鏈接上時(shí)顯示一個(gè)隱藏層，這個(gè)動(dòng)作的觸發(fā)事件應(yīng)該是（ C ）。 A、onClick B、onDblClick C、onMouseOver D、onMouseOut4、下列動(dòng)作中，用于在新瀏覽器窗口中打開指定網(wǎng)頁(yè)的是：（ A ）。 A、Go To URL B、Check Browser C、Popup Message D、Open Browser Window5、JavaScript包括在HTML中，它成為HTML文檔的一部分，可將.標(biāo)識(shí)放入（ C ）。 A、只能在. 之間 B

28、、只能在.之間 C、既可放入. 之間，也可放入.之間 D、只能在.之間6、JavaScript的函數(shù)用return返回函數(shù)的計(jì)算結(jié)果。7、如果需要在提交表單時(shí)檢查表單內(nèi)容的有效性，則需要定義onsubmit事件句柄。項(xiàng)目七 建設(shè)快樂花店網(wǎng)站（模板應(yīng)用）習(xí)題參考答案任務(wù)一 制作模板網(wǎng)頁(yè)1Dreamweaver CC中創(chuàng)建的模板文件，一般保存在站點(diǎn)的 Templates 文件夾里。2Dreamweaver CC中創(chuàng)建模板的方法一般有兩種，分別是 新建空白模板 和 將現(xiàn)有文檔另存為模板 。3設(shè)置“可編輯標(biāo)簽”的含義是 指定哪些內(nèi)容是可以編輯的 。4定義可選區(qū)域可以實(shí)現(xiàn)網(wǎng)頁(yè)中一些內(nèi)容可以 顯示 和 隱

29、藏 。5創(chuàng)建基于模板的站點(diǎn)，模板文件一般在存放在那個(gè)文件夾？（ B ）A、站點(diǎn)文件夾根目錄下。B、站點(diǎn)文件夾Templates子文件夾下。C、由站點(diǎn)制作者任意指定存放位置。 D、站點(diǎn)文件夾Images子文件夾下。6定義可編輯區(qū)名稱時(shí)，以下那個(gè)不可以使用？（ D ）A、商品1 B、COM1C、A123 D、“商品”（有雙引號(hào)）7定義可編輯區(qū)以下那種方法是錯(cuò)誤的？（ B ）A、在“插入”面板“模板”選項(xiàng)卡中，單擊“可編輯區(qū)域”按鈕。 B、按CtrlAltW組合鍵。 C、選擇“插入 模板 可編輯區(qū)域”命令。D、在文檔窗口中單擊鼠標(biāo)右鍵，在彈出菜單中選擇“模板 新建可編輯區(qū)域”。8模板文件的擴(kuò)展名一般

30、是？（ A ）A、dwt B、jpgC、html D、css9模板在網(wǎng)頁(yè)制作中起到了什么作用，有哪些特點(diǎn)？答：利用Dreamweaver CC的模板功能，將網(wǎng)站中所有風(fēng)格類似的網(wǎng)頁(yè)，不變化的部分設(shè)計(jì)成模板網(wǎng)頁(yè)，利用制作的模板來生成網(wǎng)頁(yè)，我們只需制作網(wǎng)頁(yè)中變化的部分，這樣就極大的提高網(wǎng)站制作效率。特點(diǎn)：（1）利用制作的模板來生成網(wǎng)頁(yè)，我們只需制作網(wǎng)頁(yè)中變化的部分。（2）要修改網(wǎng)站中所有網(wǎng)頁(yè)的某項(xiàng)固定信息時(shí)，只需修改模板。10定義可編編輯區(qū)和定義可編輯的重復(fù)區(qū)域，它們的區(qū)別是什么？答：可編輯區(qū)域：基于模板的網(wǎng)頁(yè)中未鎖定區(qū)域，是模板用戶可以編輯修改的部分。模板創(chuàng)作者可以將模板的任何區(qū)域指定為可編輯區(qū)

31、。重復(fù)區(qū)域：是網(wǎng)頁(yè)中設(shè)置為重復(fù)的布局部分。如可以設(shè)置一個(gè)重復(fù)的表格行。通常重復(fù)區(qū)域是可以編輯的，這樣模板用戶可以編輯重復(fù)元素中的內(nèi)容，同時(shí)使設(shè)計(jì)本身處于模板創(chuàng)作者的掌控下。任務(wù)二 基于模板制作網(wǎng)站首頁(yè)和子頁(yè)1 模板網(wǎng)頁(yè)修改和刪除后，對(duì)基于模板制作的網(wǎng)頁(yè)有那些影響？答：網(wǎng)頁(yè)模板可以根據(jù)需要反復(fù)進(jìn)行修改，模板修改后，Dreamweaver CC會(huì)提醒更新整個(gè)站點(diǎn)或應(yīng)用特定模板的所有網(wǎng)頁(yè)?？梢赃x擇更新所有基于此模板的網(wǎng)頁(yè)，也可以只更新其中一部分或不更新。2基于模板網(wǎng)頁(yè)制作網(wǎng)站的一般流程是什么？答：（1）設(shè)計(jì)和制作模板網(wǎng)頁(yè)；（2）基于設(shè)計(jì)的模板生成所有網(wǎng)頁(yè)；（3）修改網(wǎng)頁(yè)中可編輯部分為需要顯示的內(nèi)容。

32、任務(wù)一 思考練習(xí)1. 一個(gè)完整的網(wǎng)站，頁(yè)面一般分為 首頁(yè) 、 列表頁(yè) 、 內(nèi)容頁(yè) 、 交互頁(yè) 、單頁(yè)面 幾種類型。2. 我們可以通過Photoshop的工具 矩形選框工具 來獲取布局的寬度和高度，并設(shè)置標(biāo)尺單位為 像素 ，用 吸管 工具來獲取美工圖的顏色。3. 溢出文本隱藏并顯示為省略號(hào)，需要設(shè)置三個(gè)CSS屬性，即 text-overflow: ellipsis; 、 white-space: nowrap; 、 overflow: hidden; 。4. 簡(jiǎn)述一般靜態(tài)網(wǎng)站的制作流程。答：一般靜態(tài)網(wǎng)站制作的流程有以下幾個(gè)步驟：1 素材整理根據(jù)網(wǎng)站主題需要設(shè)置欄目、搜集素材并整理歸類，在紙上畫草

33、圖；2 美工圖及切片在Photoshop中進(jìn)行美工圖的設(shè)計(jì)，并切圖生成小圖片；3 頁(yè)面布局使用DIV+CSS或者Bootstrap框架進(jìn)行頁(yè)面布局，完成首頁(yè)；4 模板制作新建模板頁(yè)或者另存為模板頁(yè)；5 應(yīng)用模板應(yīng)用模板完成其他分頁(yè)，添加超鏈接；6 網(wǎng)站后臺(tái)應(yīng)用框架、表格、表單等技術(shù)完成后臺(tái)靜態(tài)頁(yè)面的制作；7 網(wǎng)站調(diào)試在瀏覽器中進(jìn)行網(wǎng)站調(diào)試，包括超鏈接、特效等。5. 請(qǐng)簡(jiǎn)述DIV和Table的優(yōu)缺點(diǎn)和使用的場(chǎng)合。答：DIV+CSS布局的優(yōu)缺點(diǎn)：優(yōu)點(diǎn)：符合W3C標(biāo)準(zhǔn)、頁(yè)面加載速度快、布局靈活，內(nèi)容和樣式的分離，改版更加方便；搜索引擎更加友好。缺點(diǎn)：對(duì)于CSS的高度依賴使得網(wǎng)頁(yè)設(shè)計(jì)變得比較復(fù)雜、瀏覽

34、器兼容性問題比較突出；TABLE表格布局的優(yōu)缺點(diǎn):優(yōu)點(diǎn)：布局容易、快捷、結(jié)構(gòu)嚴(yán)謹(jǐn)、兼容性好。缺點(diǎn)：改動(dòng)不便，需重新調(diào)整整個(gè)頁(yè)面，工作量大。所以，DIV主要用來給網(wǎng)站布局，定位，而表格主要是用來承載數(shù)據(jù)。表格經(jīng)常和DIV一起協(xié)同使用，并經(jīng)常用于數(shù)據(jù)列表。表格在網(wǎng)站后臺(tái)出現(xiàn)的概率比較多，樣式也可以多種多樣。6. 要實(shí)現(xiàn)鼠標(biāo)劃過圖片時(shí)，圖片變換的效果，我們需要做哪些工作？答：首先需要設(shè)計(jì)兩幅圖片，分別是正常的圖片的鼠標(biāo)劃過時(shí)的圖片。然后可以在Dreamweaver中單擊插入面板的“鼠標(biāo)經(jīng)過圖像”按鈕，在彈出的對(duì)話框中進(jìn)行設(shè)置，即可自動(dòng)添加JavaScript代碼，并實(shí)現(xiàn)鼠標(biāo)劃過時(shí)變換圖像的效果。當(dāng)然

35、，手寫JavaScript代碼也可以實(shí)現(xiàn)。7. 如何在菜單欄用超鏈接的活動(dòng)狀態(tài)來指示當(dāng)前頁(yè)面？答：超鏈接有四種狀態(tài)，分別為：a:link：未被訪問的鏈接；a:visited：已被訪問的鏈接；a:hover：鼠標(biāo)指針劃過的鏈接；a:active：正在被點(diǎn)擊的鏈接?？梢苑謩e為其不同的狀態(tài)設(shè)置不同的CSS樣式。若當(dāng)前頁(yè)面為index.html，可以將“首頁(yè)”的超鏈接設(shè)置類.current，其樣式可以跟a:hover或者a:active的樣式一樣。用以指示當(dāng)前頁(yè)面為首頁(yè)。任務(wù)二 思考練習(xí)1. 關(guān)于元素的顯示模式，下列說法正確的是（AB）A. 塊元素會(huì)獨(dú)占一行。B. 一行中可以有多個(gè)行內(nèi)元素C. 塊元素

36、不能直接設(shè)置寬和高D. 多個(gè)行內(nèi)顯示元素自上而下顯示2. 下列選項(xiàng)中，關(guān)于顯示模式的轉(zhuǎn)換說法正確的是（ABCD）。A. 行內(nèi)顯示模式轉(zhuǎn)換為塊顯示模式的代碼為 display:block;B. 塊顯示模式轉(zhuǎn)換為行內(nèi)顯示模式的代碼為 display:inline;C. 行內(nèi)顯示模式轉(zhuǎn)換為行內(nèi)塊顯示模式的代碼為 display:inline-block;D. 使用 display 屬性可以轉(zhuǎn)換元素的顯示模式3. 使塊級(jí)元素水平居中，需要遵循以下哪些條件（BC）A. 使元素有高度（height）B. 使元素有寬度（width）C. 使元素左右外邊距的值為 autoD. 使元素浮動(dòng)（float）4. 舉

37、例說明塊級(jí)元素和行內(nèi)元素的區(qū)別，這兩者之間如何轉(zhuǎn)換？答：塊級(jí)元素：1 塊級(jí)元素會(huì)獨(dú)占一行，多個(gè)塊級(jí)元素會(huì)各自新起一行。默認(rèn)情況下，塊級(jí)元素寬度自動(dòng)填滿其父元素寬度。2 塊級(jí)元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。3 塊級(jí)元素可以設(shè)置margin和padding屬性。行內(nèi)元素:1 行內(nèi)元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。2 行內(nèi)元素設(shè)置width,height屬性無效。3 行內(nèi)元素的margin和padding屬性，水平方向的padding-left, padding-right

38、, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果。常見的塊級(jí)元素有 div, form, table, p, pre, h1h6, dl, ol, ul 等。常見的行內(nèi)元素有 span, a, strong, em, label, input, select, textarea, img, br 等。塊級(jí)元素與行內(nèi)元素的轉(zhuǎn)換：一般我們會(huì)用display:block，display:inline來調(diào)整元素的布局級(jí)別。5. 如何使父級(jí)DIV的

39、高度隨著子級(jí)DIV的高度自動(dòng)變化？答：父級(jí)DIV的高度隨著子級(jí)div的高度自動(dòng)變化，即DIV高度自適應(yīng)內(nèi)容的高度，這需要分兩種情況進(jìn)行解釋：1. 若子級(jí)div沒有浮動(dòng)（float），此時(shí)父級(jí)div不設(shè)置高度，即高度自適應(yīng)內(nèi)容的高度；2. 若子級(jí)div有浮動(dòng)（float），此時(shí)父級(jí)div就沒有高度，有兩種方法來解決自適應(yīng)的問題：1 子元素最后使用空標(biāo)記清除浮動(dòng)（）2 設(shè)置父元素的樣式(style=overflow:hidden)6. 由一個(gè)網(wǎng)頁(yè)擴(kuò)展到一個(gè)風(fēng)格統(tǒng)一的網(wǎng)站，我們一般使用什么技術(shù)？使用的步驟是什么？答：由一個(gè)網(wǎng)頁(yè)擴(kuò)展到一個(gè)風(fēng)格統(tǒng)一的網(wǎng)站。我們一般使用“模板”技術(shù)。使用的步驟為：1 構(gòu)思

40、整個(gè)網(wǎng)站的列表頁(yè)、內(nèi)容頁(yè)、單頁(yè)面、交互頁(yè)等頁(yè)面。思考網(wǎng)頁(yè)布局中哪些部分是一樣的；2 新建一個(gè)模板，或者將網(wǎng)頁(yè)另存為模板，只留下網(wǎng)站中頁(yè)面布局共同的部分；需要修改的部分設(shè)置為“可編輯區(qū)域”；3 應(yīng)用模板新建各分頁(yè)，在“可編輯區(qū)域”中填充各分頁(yè)獨(dú)有的內(nèi)容；4 在模板中修改超鏈接，并調(diào)試整個(gè)網(wǎng)站。7. 使用Bootstrap的柵格系統(tǒng)進(jìn)行布局，中等屏幕大小一行顯示4個(gè)圖片、小屏幕一行顯示3個(gè)圖片，特小屏幕一行顯示2個(gè)圖片，如何進(jìn)行設(shè)置？答：Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。柵格系統(tǒng)通過一系列的行（

41、row）與列（column）的組合來創(chuàng)建頁(yè)面布局，內(nèi)容可以放入這些創(chuàng)建好的布局中。假設(shè)圖片路徑為“images/pic.jpg”，實(shí)現(xiàn)需求代碼如下：Document任務(wù)三 思考練習(xí)1. 絕對(duì)定位要求父級(jí)元素設(shè)置為 相對(duì)定位 ，否則以 瀏覽器的左上角 為原始點(diǎn)進(jìn)行定位。配合 left, top, right，bottom 屬性 進(jìn)行位置的設(shè)置。可以通過 z-index進(jìn)行對(duì)象的層疊。2. 我們?cè)贒IV+CSS布局中，一般使用 相對(duì)定位 ，特殊的場(chǎng)合使用 絕對(duì)定位 。3. 浮動(dòng)框架是一個(gè)窗口，里面的內(nèi)容是 一個(gè)網(wǎng)頁(yè) 。4. 當(dāng)我們?cè)O(shè)置一個(gè)超鏈接的目標(biāo)指向一個(gè)浮動(dòng)框架時(shí)，需要進(jìn)行哪兩步的設(shè)置？答：第一步：為浮動(dòng)框架添加