1 階段1：任務(wù)初探

1-1 【任務(wù)分析】

任務(wù)分析是網(wǎng)頁(yè)開(kāi)發(fā)的前提與基礎(chǔ)，任務(wù)分析重點(diǎn)要解決“做什么”，分成哪些模塊，需要哪些技能點(diǎn)。圖1-1為主題頁(yè)面效果。

1.準(zhǔn)備工作與頁(yè)面布局

(1)準(zhǔn)備工作

在HBuilderX中建立項(xiàng)目，命名為project-1，將圖片素材拷貝到項(xiàng)目的img文件夾中。

具體步驟：

打開(kāi)HBuilderX軟件，新建項(xiàng)目。常用的方法有兩種：一是利用“文件”菜單的“新建”選項(xiàng)中的“項(xiàng)目”菜單；二是在主界面中心的快捷菜單中選“新建項(xiàng)目”，如圖1-2所示。

在彈出的對(duì)話(huà)框中，選擇“普通項(xiàng)目”，輸入項(xiàng)目名稱(chēng)“project-1”，自定義存放的路徑，在“選擇模板”中選擇“基本HTML項(xiàng)目”，點(diǎn)擊“創(chuàng)建”按鈕即可，如圖1-3所示。

在左側(cè)的任務(wù)窗格中就能看到創(chuàng)建好的項(xiàng)目文件了，如圖1-4所示。

然后將網(wǎng)頁(yè)圖片素材拷貝到“img”文件夾中，雙擊“index.html”，在打開(kāi)的編碼區(qū)域準(zhǔn)備書(shū)寫(xiě)網(wǎng)頁(yè)代碼，如圖1-5所示。

(2)頁(yè)面布局分析

根據(jù)網(wǎng)頁(yè)效果圖，可以將“慶祝中國(guó)共產(chǎn)黨成立一百周年”主題頁(yè)從上到下分為5個(gè)模塊——頭部模塊、時(shí)政新聞模塊、現(xiàn)場(chǎng)照片模塊、網(wǎng)友交流模塊和頁(yè)腳模塊，如圖1-6所示。

2.知識(shí)準(zhǔn)備

根據(jù)網(wǎng)頁(yè)設(shè)計(jì)樣圖分析，本次主題網(wǎng)頁(yè)的訓(xùn)練重點(diǎn)是HTML文本格式化、圖片格式化和圖文混排。

(1)HTML中常用的幾種文本標(biāo)記

?<h1>至<h6>標(biāo)記：雙標(biāo)記，用于定義標(biāo)題，表示不同級(jí)別的標(biāo)題，其中<h1>為最高級(jí)標(biāo)題，<h6>為最低級(jí)標(biāo)題；能讓網(wǎng)頁(yè)中的文字加粗、字號(hào)變大或變小、強(qiáng)制換行。常用屬性：align，用于設(shè)置標(biāo)題文字的對(duì)齊方式，可取值為left（左對(duì)齊）、right（右對(duì)齊）、center（居中對(duì)齊）。

例1：

?<p>：雙標(biāo)記，定義段落，用于將一段文字組織為一個(gè)完整的段落。常用屬性：align，用于設(shè)置段落文字的對(duì)齊方式，可取值為left（左對(duì)齊）、right（右對(duì)齊）、center（居中對(duì)齊）。

例2：

?<strong>：雙標(biāo)記，用于加粗文本，表示強(qiáng)調(diào)重點(diǎn)內(nèi)容。

?<em>：雙標(biāo)記，用于斜體文本，表示強(qiáng)調(diào)內(nèi)容的重要性。

?<ins>：雙標(biāo)記，用于給文本添加下劃線(xiàn)。

?<del>：雙標(biāo)記，用于表示被刪除的文字。

?<br/>：?jiǎn)螛?biāo)記，用于文字強(qiáng)制換行，等同于回車(chē)鍵效果。

例3：

?<font>：雙標(biāo)記，用于設(shè)置文字的字體、顏色、大小。常用屬性：face，表示字體；size，取值1至7，表示字號(hào)；color，取值顏色英文單詞或RGB值，表示顏色。

例4：

(2)圖片標(biāo)記

HTML中用于插入圖片的標(biāo)記是<img/>，它是單標(biāo)記。

<img/>標(biāo)記的常用屬性包括：

?src：指定圖片的路徑，可以是相對(duì)路徑或絕對(duì)路徑。

?alt：指定圖片的替代文本，用于在圖片無(wú)法加載時(shí)顯示或輔助閱讀。

?width：指定圖片的寬度，可以使用像素值或百分比。

?height：指定圖片的高度，同樣可以使用像素值或百分比。

?title：指定圖片的標(biāo)題，鼠標(biāo)懸停在圖片上時(shí)會(huì)顯示該文本。

?align：指定圖片的對(duì)齊方式，可取值為left（左對(duì)齊）、right（右對(duì)齊）、center（居中對(duì)齊）等。

?border：指定圖片的邊框?qū)挾龋韵袼貫閱挝弧?/p>

例5：

在上面的示例中，<img/>標(biāo)記用來(lái)插入一張圖片。其中，src屬性指定了圖片的來(lái)源鏈接（這里是絕對(duì)路徑），alt屬性提供了圖片的替代文本，width和height屬性定義了圖片的寬度和高度，title屬性顯示了鼠標(biāo)懸停在圖片上時(shí)顯示的標(biāo)題，align屬性設(shè)置了圖片在文本中的對(duì)齊方式（本例中設(shè)置為右對(duì)齊）。這些屬性可以幫助頁(yè)面更好地展示圖片，并提供一些附加信息，如替代文本和標(biāo)題。

(3)水平分割線(xiàn)標(biāo)記

<hr/>標(biāo)記通常會(huì)在段落、標(biāo)題等內(nèi)容之間進(jìn)行分割，用于展示一種視覺(jué)上的間隔效果。

常用的屬性：

?size：指定水平分割線(xiàn)粗細(xì)，以像素為單位。

?align：指定水平分割線(xiàn)的對(duì)齊方式，可取值為left（左對(duì)齊）、right（右對(duì)齊）、center（居中對(duì)齊）等。

?width：指定水平分割線(xiàn)的粗細(xì)，以像素或百分比為單位。

?color：指定水平分割線(xiàn)的顏色，取值為英文單詞或RGB值。

例6：

在上面的示例中，使用<hr/>標(biāo)記分別演示了3條水平分割線(xiàn)：第一條水平分割線(xiàn)粗度5，與瀏覽器窗口寬度一致；第二條水平分割線(xiàn)較細(xì)，紅色，寬度300，居中，與瀏覽器窗口大小變化無(wú)關(guān)；第三條水平分割線(xiàn)粗度3，左對(duì)齊，占瀏覽器窗口大小的80%，并會(huì)隨著瀏覽器窗口大小變化，灰色。

(4)常用特殊字符

在HTML中，有些特殊字符由于具有特殊含義，不能直接在文本中使用，需要使用特殊字符來(lái)表示。下面是一些常用的特殊字符及其對(duì)應(yīng)的實(shí)體表示：

?<（小于號(hào)）：&lt;

?>（大于號(hào)）：&gt;

?版權(quán)符號(hào)：&copy;

?.（注冊(cè)商標(biāo)符號(hào)）：&reg;

?TM（商標(biāo)符號(hào)）：&trade;

?空格符號(hào)：&nbsp;

(5)div標(biāo)記

<div>標(biāo)簽定義HTML文檔中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分。

(6)注釋語(yǔ)句

<！-- -->，可以在HTML文檔中添加注釋?zhuān)黾哟a的可讀性，便于以后維護(hù)和修改。訪(fǎng)問(wèn)者在瀏覽器中是看不見(jiàn)這些注釋的，只有在用文本編輯器打開(kāi)文檔源代碼時(shí)才可見(jiàn)。

例7：