HTML靜態網頁（圖片熱點、網頁劃區、拼接及表單的使用）

標籤：style   blog   http   io   ar   os   使用   sp   for   

圖片熱點：

　　規划出圖片上的一個地區，可以做出超連結，直接點擊圖片地區就可以完成跳轉的效果。

樣本：

 

網頁劃區：

　　在一個網頁裡，規划出一個地區用來展示另一個網頁的內容。

樣本：

 

 

網頁的拼接：

　　在一個網路頁面內，規划出多個頁面視窗，以表格拼接的形式展示出來。

樣本：

 

 

表單：

<form id="" name="" method="post/get" action="負責處理的服務端">

id不可重複，name可重複，get提交有長度限制，並且編碼後的內容在地址欄可見，

post提交沒有長度限制，且編碼後內容不可見。

</form>

1.文本輸入

　　文字框<input type="txt" name="" id="" value="" />

　　密碼框<input type="password" name="" id="" value="" />

　　文本域<textarea name="" id="" cols=""(字元多少) rows=""(幾行高)></textarea>

　　隱藏欄位<input type="hidden" name="" id="" value="" />

2.按鈕

　　提交按鈕<input type="submit" name="" id="" disabled="disabled" value="" />點擊後轉到form內的提交伺服器的地址

　　重設按鈕<input type="reset" name="" id="" disabled="disabled" value="" />

　　普通按鈕<input type="button" name="" id="" disabled="disabled" value="" />

　　圖片按鈕<input type="image" name="" id="" disabled="disabled" src="圖片地址" />

　　disabled使按鈕失效

　　enable使按鈕可用

3.選擇輸入

　　選項按鈕組<input type="redio" name="" checked="checked" value="" />

　　name的值用來分組，value的值看不見，提交給程式用的，checked設定預設選項。

　　複選框組<input type="checkbox" name="" checked="checked" value="" />

　　檔案上傳<input type="file" name="" id="" />

　　<lable for=""></lable>

　　lable標籤為input元素定義圖說文字。

　　lable元素不會向使用者呈現任何特殊效果，不過，他為滑鼠使用者改進了可用性。如果您在lable元素內點擊文本，就會觸發此控制項。

　　就是說，當使用者選擇該標籤時，瀏覽器會 將焦點轉到和標籤相關的表單控制項上。

　　lable標籤的for屬性應當與相關元素的id屬性相同。

4.下拉式清單方塊

　　<select name="" id="" size="" multiple="multiple">

　　--size為1時，為菜單；>1時，為列表。multiple為多選。

　　　　<option value="值">內容1</option>

　　　　<option value="值" selected="selected">內容2</option>

　　　　--selected,設為預設

　　　　<option value="值">內容3</option>

　　</select>

 

表單當中語句的使用樣本：

以上語句呈現出的效果為：

 

 

表單練習題：根據做出的來寫語句

 

寫語句的過程：

 

 

快速製作網頁的方法：

　　利用Photoshop中的切片工具來規划出要設定連結的位置，設定好後儲存為web可使用的html格式。

用DREAMWEAVER開啟，開啟設計頁面，選擇切片弄好的位置，在屬性中輸入超連結的網址即可。

 

HTML靜態網頁（圖片熱點、網頁劃區、拼接及表單的使用）