24. 內容設計-聯絡蒂莫絲

希望導覽區第 5 個連結按鈕呈現顯著的樣式

<nav>
  <a href="index.html">回網站首頁</a>
  <a href="about.html">關於蒂莫絲</a>
  <a href="service.html">客房的服務</a>
  <a href="location.html">我們的位置</a>
  <a href="contact.html" class="active">聯絡蒂莫絲</a>
</nav>

修改 #banner 區域表現的影像

<link rel="stylesheet" href="layout.css">
<style>
  #banner { 
    background-image: url(images/banner/banner5.png); 
  }
</style>
</head>

修改左側 標題1 的文字

修改右側 標題2 的文字

修改右側 插入的影像

設計表單 Form --- 在左側 標題1 的下方 插入表單 Form

如果跟網站後端開發工程師合作，那麼 前端設計師負責將版面視覺設計好，而表單送出的工作交給後端開發工程師。

<form name="contactForm" method="post" action="">
</form>

設計表格 Table --- 方便表單內容的對齊

「插入->表格」設定 4 列、 2 欄， 頁首選擇靠左對齊，
表格寬度、邊框粗細、儲存格內距、儲存格間距皆可以放空不輸入，按確定。
接著在左側儲存格內輸入相關文字。

<form name="contactForm" method="post" action="">
<table>
  <tbody>
    <tr>
      <th>姓名：</th>
      <td></td>
    </tr>
    <tr>
      <th>聯絡方式：</th>
      <td></td>
    </tr>
    <tr>
      <th>留言內容：</th>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <td></td>
    </tr>
  </tbody>
</table>
</form>

設計表單的欄位元素

<table>
  <tbody>                    <!-- 以下表單欄皆設定了 required 表示為必填欄位 -->
    <tr>
      <th>姓名：</th>  <!-- 「插入->表單->文字」輸入name名稱, 設定placeholder提示字元 -->
      <td><input type="text" name="TSname" required placeholder="請輸入聯絡者姓名..."></td>
    </tr>
    <tr>
      <th>聯絡方式：</th>  <!-- 「插入->表單->文字」輸入name名稱, 設定placeholder提示字元 -->
      <td><input type="text" name="TSmethod" required placeholder="請輸入聯絡電話或是EMail..."></td>
    </tr>
    <tr>
      <th>留言內容：</th>
      <td><textarea name="TScontent" rows="10" required></textarea></td>
    </tr>  <!-- 「插入->表單->文字區域」輸入name名稱, 設定rows表現10列 -->
    <tr>
      <th></th>
      <td><input type="submit" id="submitBtn" value="確定送出"></td>
    </tr>  <!-- 「插入->表單->送出按鈕」輸入id名稱, 輸入value的內容表示按鈕上顯示的文字 -->
  </tbody>
</table>

設計 CSS 樣式

<link rel="stylesheet" href="layout.css">
<style>
  nav a:nth-of-type(5) {
    color: #FFF;
    background-image: url(images/btn_hover.png);
  }
  #banner {
    background-image: url(images/banner/banner5.png);
  }

  th, td {
    padding: 5px;             /*設定所有的儲存格的內邊界*/
  }
  th {
    width: 150px;             /*設定左側th儲存格的寬度*/
    text-align: right;        /*設定左側th儲存格的內容靠右對齊*/
  }
  input, textarea { 
    width: 450px;             /*設定表單欄位元素的寬度*/
    padding: 5px;             /*設定所有的表單欄位元素的內邊界*/
  }
  #submitBtn {
    width: auto;              /*設定送出按鈕的寬度依內容文字而自動決定*/
    padding: 5px;             /*設定送出按鈕的內邊界*/
    float: right;             /*設定送出按鈕相對所在儲存格浮動靠右*/
  }
</style>
</head>

如果沒有後端工程的協助，那麼也可以運用 Google 雲端硬碟中的【表單】資源。