《網(wǎng)頁設(shè)計與制作教程HTML+CSS+Bootstrap》課件 項目六 創(chuàng)建網(wǎng)站“美食交流”

項目六

創(chuàng)建美食交流網(wǎng)項目簡介網(wǎng)頁除了能提供給用戶各種類型的信息資源外，還承擔(dān)著一項重要的功能，就是收集用戶的信息，并根據(jù)用戶的信息提供反饋。這種收集信息和反饋信息的過程就是網(wǎng)頁的交互過程。本章將詳細(xì)介紹網(wǎng)頁中的各種表單元素，以及Spry表單驗證的方法等相關(guān)知識，實現(xiàn)簡單的人與網(wǎng)頁之間的交互。項目目標(biāo)本項目以《美食交流》網(wǎng)站開發(fā)為例，介紹表單網(wǎng)頁中的綜合應(yīng)用。要求熟悉各種表單元素，掌握在網(wǎng)頁中插入表單、表單元素的方法，掌握在網(wǎng)頁中驗證表單的方法。工作任務(wù)根據(jù)《美食交流》網(wǎng)站設(shè)計與制作的要求，基于工作過程，以任務(wù)驅(qū)動的方式，應(yīng)用表單組建實現(xiàn)用戶與網(wǎng)頁的交互功能。（1）創(chuàng)建表單（2）驗證表單任務(wù)一構(gòu)建表單通過以下三個步驟的操作實踐來掌握在網(wǎng)頁中創(chuàng)建表單的方法，初步完成《美食交流》網(wǎng)站首頁的制作，網(wǎng)頁效果如圖所示：1、布局網(wǎng)頁；2、插入表單；3、編輯表單；

任務(wù)目標(biāo)按照網(wǎng)站需求分析，建立站點文件夾，并在Dreamweaver2021中建立站點，設(shè)計制作首頁文件，以及掌握在首頁中設(shè)置表單區(qū)域、插入表單元素、設(shè)置表單元素的方法。知識準(zhǔn)備知識準(zhǔn)備一

表單屬性值功能描述actionurl規(guī)定當(dāng)提交表單時向何處發(fā)送表單數(shù)據(jù),它可以是一個URL地址或一個電子郵件地址。methodget或post指明提交表單的HTTP方法。post方法在表單的主干包含名稱/值對并且無需包含于action特性的URL中；get方法把名稱/值對加在action的URL后面并且把新的URL送至服務(wù)器。enctypecdata指明用來把表單提交給服務(wù)器時(當(dāng)method值為"post")的互聯(lián)網(wǎng)媒體形式。這個特性的缺省值是"application/x-www-form-urlencoded"。TARGET_blank_self_parent_topframename指定提交的結(jié)果文檔顯示的位置：

_blank表示在一個新的、無名瀏覽器窗口調(diào)入指定的文檔；_self表示在指向這個目標(biāo)的元素的相同的框架中調(diào)入文檔；_parent表示把文檔調(diào)入當(dāng)前框的直接的父FRAMESET框中；這個值在當(dāng)前框沒有父框時等價于_self；_top表示把文檔調(diào)入原來的最頂部的瀏覽器窗口中(因此取消所有其它框架)；Framename表示在指定框架中調(diào)入文檔。novalidatenovalidate如果使用該屬性，則提交表單時不進行有效性驗證。nameform_name用于設(shè)定表單的名稱。accept-charsetcharset_list規(guī)定服務(wù)器可處理的表單數(shù)據(jù)字符集，這個屬性的值是一個字符編碼列表，使用空白或者逗號分割，目的是提示瀏覽器限制用戶輸入的數(shù)據(jù)，以免不能被服務(wù)器處理的數(shù)據(jù)被輸入。知識準(zhǔn)備二表單控件任務(wù)實施步驟一

布局網(wǎng)頁任務(wù)實施步驟二

插入表單任務(wù)實施步驟三

編輯表單任務(wù)二

驗證表單通過以下兩個步驟的操作實踐掌握J(rèn)avaScript在表單驗證中的應(yīng)用，完善《美食交流》網(wǎng)站“首頁”頁面的制作，完成“提交”頁面的制作。提交頁面效果如圖所示：1、新建“提交”頁面；2、驗證“首頁”表單；任務(wù)目標(biāo)按照美食交流網(wǎng)站的需求分析，設(shè)計制作提交網(wǎng)頁，在首頁中對表單的表單域值進行驗證，以實現(xiàn)表單域值的準(zhǔn)確性。初步掌握對表單域值進行驗證的方法。知識準(zhǔn)備知識準(zhǔn)備一JavaScript常用全局對象1、isFinite()函數(shù)，用于檢查其參數(shù)是否是無窮大。2、isNaN()函數(shù)，用于檢查其參數(shù)是否是非數(shù)字值。知識準(zhǔn)備二

Windows常用對象方法1、alert()方法，用于顯示帶有一條指定消息和一個OK按鈕的警告框。2、close()方法，用于關(guān)閉瀏覽器窗口。3、open()方法，用于打開一個新的瀏覽器窗口或查找一個已命名的窗口知識準(zhǔn)備三Java