月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組三 步驟1 切版、建置前後台畫面

發表於 更新於 歸屬於 ， ，
  1. 開立./css, ./js, ./api, ./icon, ./img 等常用目錄以利檔案分類及管理
  2. 將素材檔中的.css, .js, 及icon圖檔複製到相應的目錄下
  3. 更改版型素材的相關檔名，以符合解題的需要：
    • 03P01.htm => index.php
    • 03P02.htm => intro.php
    • 03P03.htm => backend.php
  1. 更改版型素材的相關連結及匯入檔內容
    • 修改 index.php 中 <link> 及 <script> 中的連結路徑，指向正確的位置
    • 修改 ./css/css.css 中的圖片 url ，指向根目錄下的 ../icon 目錄，不過在此題組中，body設定中的 b.png 圖檔不存在，所以直接移除這個設定就可以了。 
      1
      2
      3
      4
      body{
          /* background:url(../icon/b.png); */ 
          font-family:微軟正黑體;
       }
  2. 開立 ./img/ 目錄，把素材目錄中的預告片海報、院線片海報及影片檔都先複製過來
  3. 以上步驟是為了方便之後在製作列表和上傳檔案功能時，可以減少一些功夫，同時我們為了速度考量，並不會對上傳的檔案做更名之類的多餘動作，因此我們在做列表功能時，可以直接指定目錄及檔名來顯示相關的圖片或影片，而不用等到完成上傳檔案的功能後，才一個一個上傳

  1. 開啟 xampp 及 apache 伺服器，使用 localhost 或 127.0.0.1 檢視網頁是否正確顯示，css 的載入是否正確

  1. 建立 /front及 /back 兩個目錄，一個代表前台的相關檔案，一個代表後台的相關檔案，前後台共用的元件則先放在根目錄下。
  2. 在 index.php 中找到中間主要內容區的區塊，切出去成為 main.php 放在 /front/ 目錄中。

  1. 在 intro.php 中找到中間主要內容區的區塊，排除首尾後成為 intro.php 移動到 /front/ 目錄中。

  1. 在 back.php 中找到中間主要內容區的區塊，切出去成為 main.php 放在 /back/ 目錄中。

  1. 修改 index.php及back.php中的主選單連結及後台功能連結。

index.php 及 back.php

1
2
3
4
5
6
<div id="top2"> 
  <a href="index.php">首頁</a>
  <a href="index.php?do=order">線上訂票</a>
  <a href="#">會員系統</a>
  <a href="backend.php">管理系統</a>
</div>

back.php

1
2
3
4
5
6
7
<div class="ct a rb" style="position:relative; width:101.5%; left:-1%; padding:3px; top:-9px;"> 
    <a href="?do=tit">網站標題管理</a>| 
    <a href="?do=go">動態文字管理</a>| 
    <a href="?do=poster">預告片海報管理</a>| 
    <a href="?do=movie">院線片管理</a>| 
    <a href="?do=order">電影訂票管理</a> 
</div>
  1. 使用 include 指令來重新組合 index.php 及 back.php 頁面，並加上判斷式來確保要組合的檔案是存在的。
  2. 以 get 的方式來傳遞各頁面要組合的元件內容，比如 do=login 表示要看到的是登入頁面。
    index.php
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div id="mm">
    <?php
        //取得網址參數
        $do=$_GET['do']??'main';

        //建立頁面檔案所在路徑
        $file="./front/{$do}.php";

        //判斷檔案及變數
        if(file_exists($file)){

          //載入對應的頁面檔案
          include $file;
        }else{

          //如果沒有對應的頁面檔案，則直接載入main.php
          include "./front/main.php";
        }
    ?>
    </div>
    back.php
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div class="rb tab">
      <?php
        //取得網址參數
        $do=$_GET['do']??'main';

        //建立頁面檔案所在路徑
        $file="./back/{$do}.php";

        //判斷檔案及變數
        if(file_exists($file)){

          //載入對應的頁面檔案
          include $file;
        }else{

          //如果沒有對應的頁面檔案，則直接載入main.php
          include "./back/main.php";
        }
    ?>
    </div>

CSS調整參考

本題組內建的預設css對於按鈕的大小和外形有時會超過版型的空間，可以先到 ./css/css.css 進行修改和調整，讓按鈕的外形看起來順眼一點，但這不做也不影響解題的要求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
input[type='button'],
input[type='submit'],
input[type='reset'],
button,
.button
{
	min-width:40px; /*最小高度和寬度可以縮小一些*/
	min-height:20px;
	background:#000;
	color:#fff;
	border:none;
	cursor:pointer;
	font-size:14px; /*字型可以改小*/
	text-decoration:none;
	margin:3px 6px; /*增加上下左右的邊距*/
	border-radius:5px; /*增加點圓角*/
}

輸入欄位也因為預設長度問題，有些畫面會太寬，一樣可以在css檔中先調整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
input[type='text'],
input[type='file'],
input[type='password'],
textarea,
.button
{
	width:150px; /*長度略為縮短*/
	font-size:16px;
	padding:3px;
	background:#4C4C4C;
	color:#E7E7E7;
	border:none;
	font:Open Sans,'微軟正黑體';
	font-weight:600;
}