网页设计实务(二)

《网页设计实务(二)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、網頁設計實務(二)網頁設計考量提醒不同瀏覽器的觀看效果:註明此網頁適合使用何種瀏覽器,及版本訊息螢幕解析度:1024x768,或更高階…字型的設定:使用預設的字型,或將字型變化作為圖片考量網路的傳輸速度圖片集-自動影像目錄標籤FrontPage的互動表單設計1表單欄位型式2插入表單3發佈網站4編輯表單欄位5下拉式功能表欄位設計6聰明的表單精靈網頁表單設計的實例-1：亞卓市帳號申請表單國興衛視網友討論區http://regist.educities.edu.tw/regist.phphttp://www.goldsuntv.com.tw/forum/post.a

2、sp網頁表單設計的實例-2：PChomeOnline網路家庭會員註冊訂閱力梭網電子報http://www.pchome.com.tw/register/service.htmlhttp://www.sonet.com.tw/epaper/表單欄位型式-1：表單是用來建立使用者與網頁間的互動介面。FrontPage的表單欄位種類包括單行文字方塊、多行式文字方塊、核取方塊、選擇鈕、下拉式功能表、按鈕等，藉由這些表單的功能，使用者可以輸入文字、選擇項目，達到互動的效果。表單欄位型式-2：只要移動指標從插入選單中選擇表單，出現子選單後，就可以選擇想要使用的表單欄位型式：表單欄位型式

3、說明-1：表單欄位型式說明-2：插入表單：表單欄位可以插入到網頁的任何位置，編輯方式和其它網頁元件相似。插入表單的操作方法如下：插入表單後，畫面顯示如下：插入一個新的表單欄位時，會同時產生表單，以決定此表單所包含的範圍，並包含、兩個按鈕。鈕會將表單內的資料內容送到伺服器上，而鈕則會將表單欄位內容回復原來的狀態。編輯表單欄位：插入表單欄位後，您可以調整表單欄位的範圍、大小（有些表單欄位沒辦法調整大小）、位置，或在表單欄位前後輸入一些提示文字，告訴使用者如何填寫表單，最後再設定儲存表單內容的檔案位置。下面分別說明編輯表單的主要技巧。設定表單網底格式：表單網底和一般的網頁網底一

4、樣，可以設定不同顏色或樣式。設定表單網底樣式的操作方法如下：調整表單欄位位置、大小：新插入表單欄位的編排方式，並不一定符合您的需求，您可以根據畫面的需求，調整表單欄位的編排方式及大小。調整表單欄位位置與大小的操作方法如下：記住囉：除了利用鍵來使表單欄位換行外，也可以選擇工具列的對齊鈕來決定表單欄位的位置。：表單欄位靠左對齊。：表單欄位置中對齊。：表單欄位靠右對齊。輸入說明文字：在表單中，除了可以插入表單欄位按鈕外，也可以自由地輸入說明文字，以便提示使用者操作表單的方法。輸入說明文字的操作方法如下：輸入說明文字的補充說明：輸入文字後，一樣可以利用鍵來使文字換行，或利用

5、工具列的對齊鈕改變文字的對齊方式。在表單內插入新的表單欄位：一個表單內，可以包含多個表單欄位，建立表單後，您可以依照需求，在表單區域內，再加入其它新的表單欄位。如果選擇插入表單欄位的位置不在表單框線內，則會產生另外一個表單，並包含和兩個按鈕，表示此表單欄位是包含在另一個獨立的表單內。所以，要插入新的表單欄位前，要確定表單欄位的插入位置。插入新的表單欄位按鈕的操作方法如下：修改按鈕標題文字：插入表單中的按鈕，會自動出現按鈕的標題文字，若文字不適合，可以隨時加以修改。修改按鈕標題文字的操作方法如下：完成後，按鈕就會更改為新設定的標題文字名稱。設定表單內容屬性：按下表單的提交

6、鈕，可以將表單內容傳送儲存到指定預設的檔案位置（預設位置為_private/form_results.txt）。您可以更改為其它的儲存位置，並設定表單儲存結果的格式，以方便對資料的處理。設定表單內容屬性的操作方法如下：記住囉：若想將表單的內容同時E-Mail出去，可以在表單內容視窗的電子郵件地址欄輸入E-Mail地址，並在表單儲存結果的選項視窗中選擇電子郵件結果標籤，設定電子郵件的格式、主旨……等。設定確認畫面的欄位名稱：使用者在表單中按下提交鈕後，會自動出現一個內定的確認畫面，顯示使用者填寫的資料內容。若覺得確認畫面不美觀，可以自行設計確認畫面。編輯確認畫面的操作方法如下：

7、重複以上的操作步驟，一一設定要確認的欄位名稱後，畫面顯示如下：記住囉：移動指標在表單欄位快按兩下滑鼠左鍵，出現該表單欄位的內容視窗後，可以從名稱欄查看表單欄位的名稱。設定確認畫面的檔案來源：編輯確認畫面後，只要在表單中的提交鈕指定確認畫面的檔案來源，就可以完成確認網頁的編輯了！設定確認畫面檔案來源的操作方法如下：測試確認畫面：編輯確認畫面，在畫面中插入確認欄位名稱，並在提交鈕中指定確認畫面的檔案來源位置後，整個確認畫面總算完成了！現在來體驗一下顯示的效果。測試確認畫面的操作