切換
舊版
前往
大廳
主題

【網頁設計】記事本撰寫html

Trusty | 2012-10-25 23:58:25 | 巴幣 12 | 人氣 4787

  考試內容:home.htm、left.htm、top.htm、member.htm、index.htm,以記事本撰寫,網頁內容依照個人喜好制定,本人以《The Last Story》為題。〈有刪除線的非考試範圍〉

Home.htm

  home.htm為下面的index.htm網頁中的右下區塊,home.htm的考試內容在網頁中建立一段以跑馬燈形式呈現的標題文字,首先輸入<h1>設置標題大小,而後在<h1>內輸入align=center表示置中,在<h1>後輸入<marquee>讓標題文字能以跑馬燈形式呈現,然後再輸入<font color=色彩>設定文字顏色。

  另外,也能在<body>中輸入background="圖片名稱"設定背景圖片,以上home.htm解說。

寫法:
<html>
 <head>
 </head>
 <body background="home_background_1.jpg">
  <h1 align=center><marquee><font color=cyan>《The Last Story》是款中古奇幻風格角色扮演遊戲,由曾製作《Final Fantasy》、《藍龍》與《失落的奧德賽》等知名角色扮演遊戲的坂口博信領軍製作。</font></marquee></h1>
 </body>
</html>

預覽結果:


Left.htm

  left.htm為下面的index.htm網頁中的左下區塊,Left.htm的考試內容在網頁中建立一個表格在表格內輸入文字並設定連結,需先輸入<center>才能再輸入<table border=1>建立表格,這樣表格才會置中,而可以在<table>內輸入width="寬度"和height="高度"來設定表格大小,再輸入<td></td>設定欄位,此時多一組<td></td>可多設定一個欄位,在欄位內輸入文字後鍵入<a href=home.htm target=mainframe>讓文字連結home.htm並顯示在主畫面中,即index.htm網頁中的最大區塊home.htm。

  另外,在欄位內也可輸入<img src="圖片名稱">插入圖片來取代文字,也可在表格下方輸入<embed src="音樂名稱">插入音樂,以上Left.htm解說。

寫法:
<html>
 <body background="left_background_1.jpg">
  <center>
   <table width="180" border=1 height="120">
    <tr>
    <td><a href=home.htm target=mainframe><img src="left_button_back index.png"></a></td>
    </tr>
    <tr>
    <td><a href=http://www.nintendo.co.jp/wii/slsj/index.html target=mainframe><img src="left_button_Official Website.png"></a></td>
    </tr>
    <tr>
    <td><a href=member.htm target=mainframe><img src="left_button_Login.png"></a></td>
    </tr>
   </table>
   <embed width="180" src="07 翔べるもの.m4a" height="10">
  </center>
 </body>
</html>

預覽結果:


Top.htm

  top.htm為下面的index.htm網頁中的最上方區塊,top.htm的考試內容在網頁中輸入標題文字並設定字體,作法基本上與home.htm差不多。

  另外,如果覺得<h1>設定的字體大小不理想,可以鍵入<font size=大小>來調整字體大小,以上top.htm解說。

寫法:
<html>
 <body background="top_background_1.jpg">
  <h1 align=center>
   <font color=silver size=10>
   The Last Story
   </font>
  </h1>
 </body>
</html>

預覽結果:


Member.htm

  member.htm為下面的left.htm網頁中的其中一個連結項目,member.htm的考試內容在網頁中做出一個會員登入表單,同left.htm方式建立表格,不過這邊不會顯示表格邊框,第1個欄位"帳號"輸入<input type=text>來建立文字輸入列;第2個欄位"密碼"輸入<input type=password>來建立密碼表單;第3個欄位"性別"輸入<input type=radio>來建立單選表單;第4個欄位"喜好"輸入<input type=checkbox>來建立複選表單;第5個欄位"年齡"輸入<select><option>內容</option></select>來建立下拉式選單,最後一個欄位要設定送出按鈕輸入<input type=submit />和<input type=reset />建立提交和重設,以上member.htm解說。

寫法:
<html>
 <body background="home_background_1.jpg">
  <center>
   <form name=form1 method=post>
    <table>
     <tr>
     <td>帳號:
     </td>
     <td>
     <input type=text name=id/>
     </td>
     </tr>
     <tr>
     <td>密碼:
     </td>
     <td>
     <input type=password name=pass/>
     </td>
     </tr>
     <tr>
     <td>性別:
     </td>
     <td>
     男<input type=radio name=fm/>
     女<input type=radio name=fm/>
     </td>
     </tr>
     <tr>
     <td>喜好:
     </td>
     <td>
     RPG<input type=checkbox name=hobby1/>
     AVG<input type=checkbox name=hobby2/>
     FPS<input type=checkbox name=hobby3/>
     其它<input type=checkbox name=hobby4/>
     </td>
     </tr>
     <tr>
     <td>年齡:
     </td>
     <td>
     <select>
     <option>20歲以下</option>
     <option>21歲~30歲</option>
     <option>31歲~40歲</option>
     <option>40歲以上</option>
     </select>
     </td>
     </tr>
     <tr>
     <td>
     <input type=submit />
     </td>
     <td>
     <input type=reset />
     </td>
     </tr>
    </table>
   </form>
  </center>
 </body>
</html>

預覽結果:


Index.htm

  index.htm為上面所有網頁的首頁,index.htm的考試內容是將home.htm、left.htm、top.htm組合起來變成一個網頁,要將index.htm整個網頁的frameset〈框架〉分割成3個區塊,首先輸入<frameset rows=100,*>將最上方欄強制定為100點,再輸入<frame name=topframe src=top.htm>設定區塊名稱為topframe以src做連結,接著輸入<frameset cols=200,*>將最左方欄強制定為200點,作法同上,但需先輸入left.htm再輸入home.htm,因為cols只設定下方的一段語法而已,而剩下的home.htm區塊就是被分割完所剩的部分,以上index.htm解說。

  另外,下方有各語法解說可提供參考。

寫法:
<html>
 <frameset rows=100,*>
  <frame name=topframe src=top.htm>
 <frameset cols=200,*>
  <frame name=leftframe src=left.htm>
  <frame name=mainframe src=home.htm>
 </frameset>
 </frameset>
</html>

預覽結果:


html語法解說〈有刪除線的非考試範圍〉:
01. <body>:輸入於<body></body>間的語法為網頁內容。
02. 背景設定:<body background="圖片名稱、路徑">,以JPG或GIF較佳。
03. 字體大小:<font size=3>文字內容</font>,最小為<font size=1>最大到為<font size=7>。
04. 標題標籤:<h1>標題內容</h1>,最小為<h6>最大到為<h1>。
05. 標題置中:<h1 align=center>
06. 跑馬燈:<marquee>
07. 文字顏色:<font color=顏色>,可輸入blue、red、black和white等常見顏色。
08. 表格設定:<table  border=1><td></td></table>,多一組<td></td>可多設定一個欄位。
09. 欄位大小:<table width="180" border=1 height="120">
10. 網頁連結:<a href=http://www.nintendo.co.jp/wii/slsj/index.html>
11. 連結參數:target=參數,<a href=home.htm target=mainframe>使連結顯示於home區塊
12. 插入圖片:<img src="圖片名稱、路徑">,以JPG或GIF較佳。
13. 插入音樂:<embed src="音樂名稱、路徑">,瀏覽器需有QuickTime之類的外掛才有音樂。
14. 文字輸入列:type=text,ex. <input type=text name=id/>
15. 密碼表單:type=passward
16. 單選表單:type=radio
17. 複選表單:type=checkbox
18. 下拉式選單:<select><option>內容</option></select>
19. 送出按鈕:以type=submit〈提交〉和type=reset〈重設〉產生。
20. 視窗分割:<frameset></frameset>
21. Cols:視窗左右分割
22. Rows:視窗上下分割

參考:Google搜尋





送禮物贊助創作者 !
0
留言

創作回應

小弘
跟我高中學的東西好像阿~那時候也是教分割頁面阿超連結等等一些東西。不過沒學到設帳密那邊就是了[e16] ((那時候我是用魔物+太7為主題的[e12]
2012-10-28 04:00:09
Trusty
基本上網業設計剛開始應該都差不多~ 不過聽老師說把這次考試的內容都學起來後面就差不多ok了[e16]
2012-10-28 10:03:22
追蹤 創作集

作者相關創作

相關創作

更多創作