項(xiàng)目7、8 使用表單和行為、制作移動(dòng)端網(wǎng)頁

Dreamweaver網(wǎng)頁設(shè)計(jì)立體化教程（微課版）（DreamweaverCC2020）項(xiàng)目七使用表單和行為目錄Contents任務(wù)一在“佳美馨裝飾——會(huì)員登錄”網(wǎng)頁中使用表單任務(wù)二在“佳美馨裝飾——會(huì)員登錄”網(wǎng)頁中使用行為實(shí)訓(xùn)一在“中國皮影——問卷調(diào)查”網(wǎng)頁中使用表單實(shí)訓(xùn)二在“中國皮影——皮影圖集”網(wǎng)頁中使用行為為了給用戶提供更精準(zhǔn)的服務(wù)，很多網(wǎng)站都會(huì)通過會(huì)員來對(duì)用戶進(jìn)行管理，有些內(nèi)容是只有會(huì)員才能查看的。用戶需先成為會(huì)員，然后在會(huì)員登錄頁面輸入賬號(hào)、密碼等信息，再單擊“登錄”按鈕登錄網(wǎng)站，就可以查看會(huì)員才能查看的內(nèi)容。會(huì)員登錄頁面都是通過表單來實(shí)現(xiàn)的，在其中通常包含“用戶名”輸入框、“密碼”輸入框、“登錄”按鈕、“記住密碼”復(fù)選框、“忘記密碼”超鏈接等網(wǎng)頁元素。一、任務(wù)描述（一）任務(wù)背景（1）了解表單和表單元素。（2）掌握插入表單和表單元素的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識(shí)（一）認(rèn)識(shí)表單和表單元素表單相當(dāng)于一個(gè)容器，表單元素相當(dāng)于放置在這個(gè)容器中的內(nèi)容。表單元素有很多，左圖為某網(wǎng)頁中的表單元素。表單顯示為一個(gè)紅色虛線框，而所有的表單元素都必須放置于該虛線框中。在HTML代碼中使用<form>標(biāo)簽來表示表單，其他的表單元素都必須位于該標(biāo)簽中，右圖為一個(gè)簡單的搜索表單。表單網(wǎng)頁中的部分組成元素HTML中的表單及表單對(duì)象代碼二、相關(guān)知識(shí)（二）插入表單并設(shè)置表單屬性選擇【插入】/【表單】/【表單】菜單命令或在“插入”面板的“表單”列表中單擊“表單”按鈕，插入表單。1．插入表單表單的“屬性”面板2．設(shè)置表單屬性二、相關(guān)知識(shí)（三）插入表單元素文本元素用于輸入單行文本，常用于用戶名、昵稱等內(nèi)容的輸入，如下圖所示，其“屬性”面板如下圖所示。1．文本元素文本元素文本元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素文本區(qū)域元素用于輸入多行文本，當(dāng)需要用戶輸入大量文本時(shí)使用，如圖所示，其“屬性”面板如圖所示。2．文本區(qū)域元素文本區(qū)域元素文本區(qū)域元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素在數(shù)字元素中只能輸入數(shù)字，常用于輸入數(shù)值型信息，如圖所示，其“屬性”面板如圖所示。3．?dāng)?shù)字元素?cái)?shù)字元素?cái)?shù)字元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素密碼元素常用于輸入密碼，其外觀與文本元素基本相同，區(qū)別是在密碼元素中輸入密碼后，密碼會(huì)以“*”或“·”符號(hào)顯示，以提高密碼的安全性，如圖所示。其屬性設(shè)置也與文本元素基本相同，只是密碼元素少了List屬性，如圖所示。4．密碼元素密碼元素密碼元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素電子郵件元素用于輸入電子郵件地址，在提交表單時(shí)，系統(tǒng)會(huì)自動(dòng)驗(yàn)證輸入的內(nèi)容是否符合正確的電子郵件地址格式，如圖所示。電子郵件元素的“屬性”面板與文本元素的“屬性”面板基本相同，只是多了一個(gè)“Multiple”復(fù)選框，如圖所示。單擊選中“Multiple”復(fù)選框，可以在電子郵件元素中輸入多個(gè)電子郵件地址。5．電子郵件元素電子郵件元素電子郵件元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素日期元素用于選擇日期，如圖所示，其“屬性”面板與文本元素的“屬性”面板基本相同，如圖所示。其中的“Value”屬性用于設(shè)置默認(rèn)日期，“Min”屬性用于設(shè)置能夠選擇的最早日期，“Max”屬性用于設(shè)置能夠選擇的最晚日期。6．日期元素電子郵件元素日期元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素通過按鈕元素可以在表單中添加一個(gè)按鈕，如圖所示，該按鈕本身沒有任何功能，需要為其添加行為才能實(shí)現(xiàn)相應(yīng)的功能，其“屬性”面板如圖所示。7．按鈕元素按鈕元素按鈕元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素“提交”按鈕元素在外觀上和按鈕元素相同，單擊“提交”按鈕可以直接提交表單，其“屬性”面板如圖所示。8．“提交”按鈕元素“提交”按鈕元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素“重置”按鈕元素可以將表單的內(nèi)容恢復(fù)到默認(rèn)狀態(tài)，即重置表單?！爸刂谩卑粹o的屬性與按鈕的屬性基本相同，其“屬性”面板如圖所示。9．“重置”按鈕元素“重置”按鈕元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素選擇元素在網(wǎng)頁中顯示為一個(gè)下拉列表框和列表框，用戶可以選擇其中的一個(gè)或多個(gè)選項(xiàng)，如圖所示。其屬性面板如圖所示。10．選擇元素選擇元素選擇元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素單選按鈕元素在網(wǎng)頁中將顯示為一個(gè)單選按鈕，可以將多個(gè)單選按鈕組成一個(gè)單選按鈕組，當(dāng)用戶選中一個(gè)單選按鈕時(shí)，同一個(gè)組中的其他單選按鈕將自動(dòng)取消選中。單選按鈕元素的“屬性”面板如圖所示，其中“Name”文本框用于設(shè)置單選按鈕組，同一個(gè)組的單選按鈕的“Name”屬性應(yīng)設(shè)置為相同的文本；“Checked”復(fù)選框用于設(shè)置單選按鈕是否為選中狀態(tài)。11．單選按鈕元素單選按鈕元素的“屬性”面板二、相關(guān)知識(shí)（三）插入表單元素復(fù)選框元素在網(wǎng)頁中將顯示為一個(gè)復(fù)選框，在一組復(fù)選框元素中可以選中多個(gè)復(fù)選框。復(fù)選框元素的“屬性”面板與單選按鈕元素的相同。選擇【插入】/【表單】/【復(fù)選框組】菜單命令或在“插入”面板單擊“復(fù)選框組”按鈕，會(huì)打開“復(fù)選框組”對(duì)話框，其參數(shù)選項(xiàng)與“單選按鈕組”對(duì)話框相同。12．復(fù)選框元素二、相關(guān)知識(shí)（三）插入表單元素使用文件元素可以讓用戶上傳文件，文件元素包括一個(gè)文本框和一個(gè)按鈕，單擊“瀏覽”按鈕，在打開的“打開”對(duì)話框中可以選擇要上傳的文件，而文本框中則會(huì)顯示文件路徑，如圖所示。文件元素的“屬性”面板如圖所示，單擊選中“Multiple”復(fù)選框時(shí)，可以選擇多個(gè)文件。13．文件元素“打開”對(duì)話框文件元素的“屬性”面板三、任務(wù)實(shí)施下面在提供的素材中插入表單，然后設(shè)置表單的屬性，具體操作如下。（一）創(chuàng)建表單并設(shè)置屬性插入表單設(shè)置表單屬性三、任務(wù)實(shí)施下面在創(chuàng)建的表單中插入各種表單元素，并為其設(shè)置相應(yīng)的屬性，具體操作如下。（二）插入表單元素并設(shè)置屬性插入表格插入文本元素并設(shè)置屬性三、任務(wù)實(shí)施（二）插入表單元素并設(shè)置屬性修改文本插入“提交”按鈕元素并設(shè)置其屬性三、任務(wù)實(shí)施（二）插入表單元素并設(shè)置屬性插入復(fù)選框元素修改文本拆分單元格輸入文本三、任務(wù)實(shí)施（二）插入表單元素并設(shè)置屬性設(shè)置屬性添加表單元素的CSS樣式目錄Contents任務(wù)一在“佳美馨裝飾——會(huì)員登錄”網(wǎng)頁中使用表單任務(wù)二在“佳美馨裝飾——會(huì)員登錄”網(wǎng)頁中使用行為實(shí)訓(xùn)一在“中國皮影——問卷調(diào)查”網(wǎng)頁中使用表單實(shí)訓(xùn)二在“中國皮影——皮影圖集”網(wǎng)頁中使用行為隨著互聯(lián)網(wǎng)的不斷發(fā)展，網(wǎng)頁不僅能展示文本、圖像、視頻等靜態(tài)內(nèi)容，還可以實(shí)現(xiàn)各種各樣的特殊功能，使用Dreamweaver的“行為”面板可以很方便地實(shí)現(xiàn)“交換圖像”“彈出信息”“檢查表單”等功能。本任務(wù)將為“會(huì)員登錄”網(wǎng)頁添加“彈出信息”“檢查表單”行為，以實(shí)現(xiàn)用戶單擊選中“記住密碼”復(fù)選框時(shí)顯示提示確認(rèn)的對(duì)話框，以及用戶單擊“立即登錄”按鈕時(shí)，對(duì)用戶輸入的內(nèi)容進(jìn)行驗(yàn)證的功能。一、任務(wù)描述（一）任務(wù)背景（1）了解行為和“行為”面板。（2）掌握添加、修改、刪除行為的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識(shí)（一）認(rèn)識(shí)行為Dreamweaver中的行為是由事件和動(dòng)作組成的。事件是指觸發(fā)行為的操作或狀態(tài)，動(dòng)作是指用戶觸發(fā)事件后網(wǎng)頁要執(zhí)行的具體操作。不同的瀏覽器包含不同的事件，常用事件的名稱及作用如下。onLoad當(dāng)載入網(wǎng)頁時(shí)觸發(fā)onUnload當(dāng)用戶離開頁面時(shí)觸發(fā)onMousOver當(dāng)鼠標(biāo)指針移入指定元素范圍時(shí)觸發(fā)onMouseDown當(dāng)用戶按下鼠標(biāo)左鍵但沒有釋放時(shí)觸發(fā)onMouseUp當(dāng)用戶釋放鼠標(biāo)左鍵后觸發(fā)onMouseOut當(dāng)鼠標(biāo)指針移出指定元素范圍時(shí)觸發(fā)onMouseMove當(dāng)用戶在頁面上拖曳鼠標(biāo)指針時(shí)觸發(fā)onMouseWheel當(dāng)用戶使用鼠標(biāo)滾輪時(shí)觸發(fā)onClick當(dāng)用戶單擊了指定的頁面元素onDblClick當(dāng)用戶雙擊了指定的頁面元素時(shí)觸發(fā)onKeyDown當(dāng)用戶任意按下一鍵但沒有釋放時(shí)觸發(fā)onKeyUp當(dāng)用戶釋放了被按下的鍵后觸發(fā)onKeyPress當(dāng)用戶任意按下一鍵，然后釋放該鍵時(shí)觸發(fā)onFocus當(dāng)指定的元素變成用戶交互的焦點(diǎn)時(shí)觸發(fā)onBlur當(dāng)指定元素不再作為交互的焦點(diǎn)時(shí)觸發(fā)onAfterUpdate當(dāng)頁面上綁定的數(shù)據(jù)元素完成數(shù)據(jù)源更新之后觸發(fā)onBeforeUpdate數(shù)據(jù)源更新之前觸發(fā)onError當(dāng)瀏覽器載入頁面發(fā)生錯(cuò)誤時(shí)觸發(fā)onFinish在選擇框元素的內(nèi)容中完成一個(gè)循環(huán)時(shí)觸發(fā)onHelp當(dāng)用戶選擇瀏覽器中的“幫助”菜單命令時(shí)觸發(fā)onMove當(dāng)移動(dòng)瀏覽器窗口或框架時(shí)觸發(fā)二、相關(guān)知識(shí)（二）認(rèn)識(shí)“行為”面板選擇【窗口】/【行為】菜單命令或按【Shift+F4】組合鍵，打開圖7-43所示的“行為”面板，在其中可以添加、修改或刪除行為?！靶袨椤泵姘宥?、相關(guān)知識(shí)（三）添加行為添加行為是指將某個(gè)行為附加到指定對(duì)象上，此對(duì)象可以是一個(gè)圖像、一段文本、一個(gè)超鏈接，也可以是整個(gè)網(wǎng)頁。操作方法如下：為網(wǎng)頁對(duì)象添加行為二、相關(guān)知識(shí)（四）修改行為添加行為后，可根據(jù)實(shí)際需要修改行為。方法為：在“行為”面板的列表中選擇要修改的行為，雙擊右側(cè)的行為名稱，在打開的對(duì)話框中重新設(shè)置，單擊“確定”按鈕完成修改。修改行為二、相關(guān)知識(shí)（五）刪除行為對(duì)于無用的行為，可利用“行為”面板及時(shí)將其刪除，以便更好地管理其他行為內(nèi)容。刪除行為的方法主要有以下3種。在“行為”面板列表中選擇需刪除的行為，單擊上方的“刪除事件”按鈕。利用“刪除事件”按鈕刪除利用快捷菜單刪除利用快捷鍵刪除在“行為”面板列表框中選擇需刪除的行為，直接按【Delete】鍵刪除。在“行為”面板列表中選擇需刪除的行為，然后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“刪除行為”命令。三、任務(wù)實(shí)施下面為“用戶登錄”頁面添加“檢查表單”行為，具體操作如下。（一）添加“檢查表單”行為添加“檢查表單”行為設(shè)置檢查表單三、任務(wù)實(shí)施下面為“記住密碼”復(fù)選框添加彈出信息行為，具體操作如下。（二）添加“彈出信息”行為添加“彈出信息”行為“彈出信息”對(duì)話框三、任務(wù)實(shí)施（二）添加“彈出信息”行為“檢查表單”行為彈出的信息“彈出信息”行為彈出的信息目錄Contents任務(wù)一在“佳美馨裝飾——會(huì)員登錄”網(wǎng)頁中使用表單任務(wù)二在“佳美馨裝飾——會(huì)員登錄”網(wǎng)頁中使用行為實(shí)訓(xùn)一在“中國皮影——問卷調(diào)查”網(wǎng)頁中使用表單實(shí)訓(xùn)二在“中國皮影——皮影圖集”網(wǎng)頁中使用行為本實(shí)訓(xùn)的要求是在“中國皮影——問卷調(diào)查”網(wǎng)頁中通過表單收集用戶的相關(guān)信息和反饋意見等，完成后的效果如圖所示。實(shí)訓(xùn)要求實(shí)訓(xùn)一?在“中國皮影——問卷調(diào)查”網(wǎng)頁中使用表單本實(shí)訓(xùn)需要使用表單來制作一個(gè)問卷調(diào)查表，需在網(wǎng)頁中插入一個(gè)表單，并在表單中插入單選按鈕組、復(fù)選框組、文本、電子郵件、Tel、“提交”按鈕、“重置”按鈕表單元素并設(shè)置樣式。實(shí)訓(xùn)思路“中國皮影——問卷調(diào)查”網(wǎng)頁效果實(shí)訓(xùn)一?在“中國皮影——問卷調(diào)查”網(wǎng)頁中使用表單步驟提示要完成本實(shí)訓(xùn)，首先需要在網(wǎng)頁中插入表單，然后在表單中插入各種表單元素，最后設(shè)置表單和文本的格式。其步驟如圖所示。①?插入表單②?插入表單元素③?設(shè)置表單元素樣式目錄Contents任務(wù)一在“佳美馨裝飾——會(huì)員登錄”網(wǎng)頁中使用表單任務(wù)二在“佳美馨裝飾——會(huì)員登錄”網(wǎng)頁中使用行為實(shí)訓(xùn)一在“中國皮影——問卷調(diào)查”網(wǎng)頁中使用表單實(shí)訓(xùn)二在“中國皮影——皮影圖集”網(wǎng)頁中使用行為本實(shí)訓(xùn)的要求是在“中國皮影——皮影圖集”網(wǎng)頁中使用行為來實(shí)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)到某一小圖上時(shí)，上方將自動(dòng)顯示對(duì)應(yīng)的大圖，完成后的效果如圖所示。實(shí)訓(xùn)要求實(shí)訓(xùn)二?在“中國皮影——皮影圖集”網(wǎng)頁中使用行為本網(wǎng)頁的主體部分有2個(gè)區(qū)域，在第1個(gè)區(qū)域中插入1張大圖像，在第2個(gè)區(qū)域中插入6張小圖，然后為6張小圖像添加“交換圖像”行為，使鼠標(biāo)移動(dòng)到某一張小圖上時(shí)，更改大圖像的內(nèi)容為對(duì)應(yīng)的大圖像文件。實(shí)訓(xùn)思路“中國皮影——皮影圖集”首頁實(shí)訓(xùn)二?在“中國皮影——皮影圖集”網(wǎng)頁中使用行為步驟提示完成本實(shí)訓(xùn)主要包括插入大圖像、插入6個(gè)小圖像，以及添加行為3步操作，其步驟如圖所示。①?插入大圖像?②?插入6個(gè)小圖像??③?添加行為Dreamweaver網(wǎng)頁設(shè)計(jì)立體化教程（微課版）（DreamweaverCC2020）項(xiàng)目八制作移動(dòng)端網(wǎng)頁目錄Contents任務(wù)一制作移動(dòng)端“裝修案例”網(wǎng)頁任務(wù)二創(chuàng)建PHP頁面實(shí)訓(xùn)一制作移動(dòng)端“中國皮影”網(wǎng)頁實(shí)訓(xùn)二制作移動(dòng)端“問卷調(diào)查”網(wǎng)頁制作移動(dòng)端網(wǎng)頁需要使用Dreamweaver的jQueryMobile功能，它是用于創(chuàng)建移動(dòng)網(wǎng)站應(yīng)用的前端開發(fā)框架，常應(yīng)用于智能手機(jī)與平板電腦的網(wǎng)站頁面制作。一、任務(wù)描述（一）任務(wù)背景（1）了解jQueryMobile的相關(guān)知識(shí)。（2）掌握創(chuàng)建jQueryMobile頁面的方法。（3）掌握使用jQueryMobile組件的方法。（4）掌握配置服務(wù)器信息的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識(shí)（一）認(rèn)識(shí)jQueryMobilejQueryMobile的基本特性主要有以下5點(diǎn)。1．jQueryMobile的基本特性簡單易用兼容性強(qiáng)可以輔助殘障人士訪問Web網(wǎng)頁框架小提供豐富的應(yīng)用程序樣式二、相關(guān)知識(shí)（一）認(rèn)識(shí)jQueryMobile2．jQueryMobile支持的瀏覽器手機(jī)瀏覽器一般是基于開源瀏覽器內(nèi)核（webkit）開發(fā)的，只要瀏覽器支持jQuery框架，手機(jī)瀏覽器就支持jQuery，當(dāng)然也會(huì)存在一定的差異性，推薦使用jQueryMobile框架，因?yàn)樵摽蚣芗嫒菪愿?。但并非所有的移?dòng)設(shè)備都支持HTML5、CSS3和JavaScript。jQueryMobile的理念是同時(shí)支持高端和低端設(shè)備，對(duì)于沒有JavaScript支持的設(shè)備，也盡量提供最好的體驗(yàn)。二、相關(guān)知識(shí)（二）創(chuàng)建jQueryMobile頁面Dreamweaver中集成了jQueryMobile，用戶可以通過Dreamweaver快速設(shè)計(jì)出適合大多數(shù)移動(dòng)設(shè)備的Web頁面。新建文檔創(chuàng)建jQueryMobile頁面二、相關(guān)知識(shí)（三）使用jQueryMobile組件1．添加列表視圖創(chuàng)建列表視圖二、相關(guān)知識(shí)（三）使用jQueryMobile組件2.添加布局網(wǎng)格創(chuàng)建布局網(wǎng)格二、相關(guān)知識(shí)（三）使用jQueryMobile組件3．添加可折疊區(qū)塊可折疊區(qū)塊效果通過可折疊區(qū)塊可在頁面中添加多個(gè)標(biāo)題及其內(nèi)容，在瀏覽器中顯示時(shí)，默認(rèn)只顯示標(biāo)題，單擊某個(gè)標(biāo)題可展開顯示該標(biāo)題的內(nèi)容，再次單擊則可隱藏其下方的內(nèi)容。二、相關(guān)知識(shí)（三）使用jQueryMobile組件4．添加文本類元素各種文本類元素效果同普通網(wǎng)頁中的表單一樣，移動(dòng)網(wǎng)頁也可以添加一些文本、密碼元素。在“插入”面板中的“jQueryMobile”列表中，相應(yīng)的按鈕，可在頁面中添加相應(yīng)的文本框、密碼框和多行的文本域，用于輸入信息。二、相關(guān)知識(shí)（三）使用jQueryMobile組件5．添加選擇菜單添加選擇菜單jQueryMobile中的選擇菜單不僅能實(shí)現(xiàn)選擇功能，而且jQueryMobile框架可以自定義按鈕和菜單的樣式，使選擇菜單的效果更美觀。二、相關(guān)知識(shí)（三）使用jQueryMobile組件6．添加復(fù)選框和單選按鈕添加復(fù)選框和單選按鈕要添加復(fù)選框和單選按鈕，只需在“插入”面板中的“jQueryMobile”列表中，單擊對(duì)應(yīng)的按鈕，打開對(duì)話框，然后設(shè)置名稱、數(shù)量和布局方式。二、相關(guān)知識(shí)（三）使用jQueryMobile組件7．添加按鈕添加按鈕若要添加按鈕，只需在“插入”面板中的“jQueryMobile”列表中，單擊“按鈕”按鈕，在打開的對(duì)話框中設(shè)置各參數(shù)后，單擊“確定”按鈕。二、相關(guān)知識(shí)（三）使用jQueryMobile組件8．添加滑塊添加滑塊jQueryMobile滑塊可添加HTML5屬性：“type=”range“”。其添加方法為：在“插入”面板中的“jQueryMobile”列表中，單擊“滑塊”按鈕。二、相關(guān)知識(shí)（三）使用jQueryMobile組件9．添加翻轉(zhuǎn)切換開關(guān)添加翻轉(zhuǎn)切換開關(guān)翻轉(zhuǎn)切換開關(guān)功能就像常用的開關(guān)一樣，有“開”和“關(guān)”兩個(gè)選項(xiàng)，表示啟用或不啟用某項(xiàng)設(shè)置。添加方法為：在“插入”面板中的“jQueryMobile”列表中，單擊“翻轉(zhuǎn)切換開關(guān)”按鈕。在jQueryMobile中，除了上述介紹的一些較為常用的jQueryMobile元素外，還包括電子郵件、URL、搜索、數(shù)字、時(shí)間、日期、日期時(shí)間、周和月等與表單元素基本相同的元素。其添加方法與其他jQueryMobile元素基本相同，都是在“插入”面板中的“jQueryMobile”列表中進(jìn)行添加。二、相關(guān)知識(shí)（三）使用jQueryMobile組件10．添加其他jQueryMobile元素三、任務(wù)實(shí)施下面新建一個(gè)網(wǎng)頁文件，并在其中插入一個(gè)jQueryMobile頁面，具體操作如下。（一）添加jQueryMobile頁面新建文檔另存網(wǎng)頁文件“jQueryMobile文件”對(duì)話框“頁面”對(duì)話框三、任務(wù)實(shí)施下面在jQueryMobile頁面中通過jQueryMobile布局網(wǎng)格、jQueryMobile可折疊區(qū)塊布局網(wǎng)頁，然后在各個(gè)部分中插入相應(yīng)的文本和圖像，為頁面添加內(nèi)容。（二）為頁面添加內(nèi)容刪除<h1>標(biāo)簽及內(nèi)容設(shè)置布局網(wǎng)格三、任務(wù)實(shí)施（二）為頁面添加內(nèi)容插入圖像修改代碼插入jQueryMobile可折疊區(qū)塊三、任務(wù)實(shí)施（二）為頁面添加內(nèi)容修改文本并插入圖像修改腳注目錄Contents任務(wù)一制作移動(dòng)端“裝修案例”網(wǎng)頁任務(wù)二創(chuàng)建PHP頁面實(shí)訓(xùn)一制作移動(dòng)端“中國皮影”網(wǎng)頁實(shí)訓(xùn)二制作移動(dòng)端“問卷調(diào)查”網(wǎng)頁現(xiàn)在手機(jī)的功能越來越豐富，為了使手機(jī)版網(wǎng)頁能夠?qū)崿F(xiàn)更多的功能，就需要使用服務(wù)器端腳本來實(shí)現(xiàn)。服務(wù)器端腳本的類型有很多，不同類型的服務(wù)器端腳本必須配合對(duì)應(yīng)的服務(wù)器才能正常運(yùn)行。通過服務(wù)器端腳本并配合數(shù)據(jù)庫可以實(shí)現(xiàn)很多重要的功能。由于PHP是目前最為流行的服務(wù)器端腳本語言之一，并且存在很多簡單易用的PHP開發(fā)服務(wù)器工具，所以本任務(wù)將使用PHP腳本來實(shí)現(xiàn)。一、任務(wù)描述（一）任務(wù)背景（1）掌握安裝PHP服務(wù)器的方法。（2）掌握編輯PHP頁面的方法。（3）掌握瀏覽PHP頁面的方法。（二）任務(wù)目標(biāo)二、相關(guān)知識(shí)（一）安裝PHP服務(wù)器集成的PHP開發(fā)服務(wù)器很多，如XAMPP、WampServer、PHPNow、USBWebserver等，這里介紹USBWebserver的使用方法。USBWebserver是綠色軟件，無須安裝，下載軟件包后解壓即可直接使用啟動(dòng)USBWebserver服務(wù)器二、相關(guān)知識(shí)（二）編輯PHP頁面編輯PHP頁面需要先創(chuàng)建PHP頁面。創(chuàng)建PHP頁面添加PHP代碼二、相關(guān)知識(shí)（三）瀏覽PHP頁面編輯好PHP頁面后，啟動(dòng)Web服務(wù)器。在瀏覽器中輸入需訪問的網(wǎng)址和網(wǎng)頁文件名即可進(jìn)行瀏覽。瀏覽PHP頁面三、任務(wù)實(shí)施下面下載并啟動(dòng)USBWebserver，具體操作如下。（一）設(shè)置背景音樂安裝并啟動(dòng)安裝程序三、任務(wù)實(shí)施下面制作一個(gè)處理搜索表單信息的演示頁面，其中不包括真正的處理過程（真正的處理過程需要調(diào)用數(shù)據(jù)庫，相對(duì)比較復(fù)雜），只顯示表單傳遞過來的參數(shù)及值，具體操作如下。（二）制