1 階段1：任務初探

1-1 【任務分析】

任務分析是網頁開發的前提與基礎，任務分析重點要解決“做什么”，分成哪些模塊，需要哪些技能點。圖1-1為主題頁面效果。

1.準備工作與頁面布局

(1)準備工作

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

具體步驟：

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

在彈出的對話框中，選擇“普通項目”，輸入項目名稱“project-1”，自定義存放的路徑，在“選擇模板”中選擇“基本HTML項目”，點擊“創建”按鈕即可，如圖1-3所示。

在左側的任務窗格中就能看到創建好的項目文件了，如圖1-4所示。

然后將網頁圖片素材拷貝到“img”文件夾中，雙擊“index.html”，在打開的編碼區域準備書寫網頁代碼，如圖1-5所示。

(2)頁面布局分析

根據網頁效果圖，可以將“慶祝中國共產黨成立一百周年”主題頁從上到下分為5個模塊——頭部模塊、時政新聞模塊、現場照片模塊、網友交流模塊和頁腳模塊，如圖1-6所示。

2.知識準備

根據網頁設計樣圖分析，本次主題網頁的訓練重點是HTML文本格式化、圖片格式化和圖文混排。

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

?<h1>至<h6>標記：雙標記，用于定義標題，表示不同級別的標題，其中<h1>為最高級標題，<h6>為最低級標題；能讓網頁中的文字加粗、字號變大或變小、強制換行。常用屬性：align，用于設置標題文字的對齊方式，可取值為left（左對齊）、right（右對齊）、center（居中對齊）。

例1：

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

例2：

?<strong>：雙標記，用于加粗文本，表示強調重點內容。

?<em>：雙標記，用于斜體文本，表示強調內容的重要性。

?<ins>：雙標記，用于給文本添加下劃線。

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

?<br/>：單標記，用于文字強制換行，等同于回車鍵效果。

例3：

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

例4：

(2)圖片標記

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

<img/>標記的常用屬性包括：

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

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

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

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

?title：指定圖片的標題，鼠標懸停在圖片上時會顯示該文本。

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

?border：指定圖片的邊框寬度，以像素為單位。

例5：

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

(3)水平分割線標記

<hr/>標記通常會在段落、標題等內容之間進行分割，用于展示一種視覺上的間隔效果。

常用的屬性：

?size：指定水平分割線粗細，以像素為單位。

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

?width：指定水平分割線的粗細，以像素或百分比為單位。

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

例6：

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

(4)常用特殊字符

在HTML中，有些特殊字符由于具有特殊含義，不能直接在文本中使用，需要使用特殊字符來表示。下面是一些常用的特殊字符及其對應的實體表示：

?<（小于號）：&lt;

?>（大于號）：&gt;

?版權符號：&copy;

?.（注冊商標符號）：&reg;

?TM（商標符號）：&trade;

?空格符號：&nbsp;

(5)div標記

<div>標簽定義HTML文檔中的一個分隔區塊或者一個區域部分。

(6)注釋語句

<！-- -->，可以在HTML文檔中添加注釋，增加代碼的可讀性，便于以后維護和修改。訪問者在瀏覽器中是看不見這些注釋的，只有在用文本編輯器打開文檔源代碼時才可見。

例7：