實例Dreamweaver-制作表單頁_第1頁
實例Dreamweaver-制作表單頁_第2頁
實例Dreamweaver-制作表單頁_第3頁
實例Dreamweaver-制作表單頁_第4頁
實例Dreamweaver-制作表單頁_第5頁
已閱讀5頁,還剩4頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

制作表單頁步驟1.啟動DreamweaverMX2004程序,選擇菜單“文件”—>“新建”命令,打開“新建文檔”對話框.在對話框“常規”標簽下選擇“類型”列表中的“基本頁”選項,創建HTML網頁.2.創建頁面后,按Ctrl+s鍵,保存網頁到本地站點內,文件命名為form.htm.如圖12-1所示.說明將頁面保存到站點是為了在更新網站內容時,同時更新form網頁,也便于站點的管理和維護.3.保存頁面后,選擇插入面板上的"表單"選項,在表單面板中單擊"表單"按鈕000,在頁面中插入表單域.如圖12-2所示.圖12-1保存文件名為from保存圖12-2在頁面中插入表單域說明表單域就是表單的范圍,在網頁中以紅色虛線表示,也是插入表單元素的前提條件.代碼中以<form></form>格式表示.其作用就是把頁面中輸入的數據以電子郵件形式發送到郵箱中或直接傳送到數據庫中.4.將光標停放到表單域中,選擇常用面板上的"表格"按鈕,在表單域中插入8行2列的表格.5.用鼠標選中表格,打開屬性面板.6.在表格屬性中,設置其寬度為500像素,"填充"值為1,"間距值為0,在"對齊"下拉列表中選擇"絕對居中"選項,"邊框"值為1,最后在"邊框顏色"文本框中輸入色標值#FFFFFF(白色).說明在表單域中插入表格,是為了方便表單元素的排列布局.表格屬性中的設置是為了表格有比較好顯示效果,其中:"填充"值表示表格內的數字與表格的距離,"間距"表示表格與表格之間的距離,"邊框"值表示表格外框的寬度."對齊"方式是顯示表格在頁面的位置,"邊框顏色"則是一個十六進制值,表示顏色的色標值.7.拖動鼠標,選中表格第一行的兩個單元格,在屬性面板的"背景顏色"文本框中輸入色標值#6699CC,或單擊旁邊的"背景顏色"按鈕,選取藍色.8.拖動鼠標,選中其他單元格,設置背景顏色為"灰色"(色標值為#CCCCCC).9.完成表格的屬性設置后,按下鍵盤Ctrl+s鍵或選擇"文件"—>"保存"命令,保存頁面.提示DreamweaverMX2004沒有像MicrosoftOffice那樣的"自動保存"功能,所以用戶應該養成經常保存文件的習慣.10.在第1行單元格內輸入文字"用戶信息",然后選中文字打開屬性面板,單擊面板的"絕對居中"按鈕,使文字移動到表格的中間位置.設置文本顏色為"白色"(色標值#FFFFFF).如圖12-3所示.圖12-3在頁面中插入表格和文本11.在第2行第1個單元格中輸入文字"用戶名:",然后單擊表單面板中"文本字段"按鈕,插入文本框.12.選中插入的文本框,打開屬性面板,在"文本域"下面的文本框中輸入"name",這是文本框的名稱;在"字符寬度"文本框中輸入"25";"類型"選擇"單行"單選按鈕;"最多字符數"和"初始值"為默認.參數設置如圖12-4所示.著單擊表單面板上的“復選框”按鈕,分別在各選取項前面插入復選取框。23.打開屬性面板,分別選取中頁面中的復選取框,在“復選取框名稱”文本框中分別輸入Study.web.Travel.Game。在“選取定值”文本框中也依次輸入“讀書”“上網”“旅游”“游戲”。“初始狀態”都選擇“未選中”。說明在復選取框中可以提供多種選項,并且用戶可以同時選取多項的按鈕。24.拖動鼠標選中第2行到第5行的單元格,然后打開屬性面板,單擊“左對齊”按鈕,使表格中的內容都靠左對齊。如圖12-11所示。25.合并第7行兩個單元格,輸入“個人介紹”文字,按住鍵盤Shift鍵回車,另起一行,然后單擊表單面板上的“文本區域”按鈕,插入文本域。圖12-11選中表格單擊“左對齊”按鈕26.選中文本域,打開屬性面板,在“文本域”下輸入名稱content,在“字符寬度”文本框中輸入40,在“行數”中輸入5,在“類型”選項中選擇“多行”單選取按鈕。參數設置如圖12-12所示。圖12-12“文本域”屬性設置說明文本域實際上是可以輸入大量文字內容的文本框。如果輸入的文本超出文本框的范圍,在瀏覽時文本框就仁自動出現下拉滾動條,以便用戶瀏覽。“文本域”.“文本字段”和“密碼字段”的區別就是在選擇的“類型”不同,其中“密碼”文本域在用戶輸入時以“*”號顯示。27.在最后一行中,連續兩次單擊插入面板上的“表單”—>“按鈕”按鈕。在表格中插入兩個按鈕,其中一個是“發送”按鈕,一個是“重填”按鈕。28.選中第一個按鈕,打開屬性面板,在“標簽”文本框中輸入“發送”,在“動作”選項中選擇“提交表單”單選按鈕,參數設置如圖12-13所示。接著選擇第二個按鈕,在屬性面板中的“標簽”文本框中輸入“重填寫”,“動作”選擇“重設表單”選項。29.插入表單中各個需要的元素之后,整個表單頁面的結構就制作完成了,按下F12鍵即可瀏覽網頁。如圖12-14所示。說明在本實例中主要是先介紹表單頁面的布局制作和在表單中如何插入表單元素。讀者在制作時要注意文字和表單元素的一一對應。圖12-13發送按鈕屬性設置圖12-14完成后的表單頁面實驗■模仿在DreamweaverMX2004編輯窗口下,創建HTML網頁。保存頁面,命名為form.htm。在頁面中插入表單域,然后插入表格。在表格中插入各項表單元素及文字。表單制作頁面完成后,保存頁面。■創作1.根據本書配套光盤exp12-13\Site12文件夾中提供的表單網頁(如圖12-15~圖12-18所示),構思自己的調查表。圖12-15表單頁圖12-16表單

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論