月光林地的網頁技術部

網頁課程教材

0%

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

發表於 更新於 歸屬於 ， ，
  1. 開立./css, ./js, ./img, ./icon, ./api, ./front, ./back,等常用目錄以利檔案分類及管理
  2. 將素材檔中的.css, .js, 及icon圖檔複製到相應的目錄下
  3. 更改版型素材的相關檔名，以符合解題的需要
    • 01P01.html => login.php
    • 01P02.html => index.php
    • 01P03.html => back.php
    • 01P04.html => news.php
  4. 更改版型素材的相關連結及匯入檔內容
    • 修改 index.php,back.php 中 <link> 及 <script> 中的連結路徑，指向正確的位置
    • 修改 ./css/css.css 中的圖片 url ，指向根目錄下的 ../icon 目錄
1
2
3
4
5
6
7
8
9
版型檔案 index.php、login.php、backend.php、news.php

    <link href="./Administrator Login_files/css.css" rel="stylesheet" type="text/css">
    <script src="./Administrator Login_files/jquery-1.9.1.min.js"></script>
    <script src="./Administrator Login_files/js.js"></script>
改成
    <link href="./css/css.css" rel="stylesheet" type="text/css">
    <script src="./js/jquery-1.9.1.min.js"></script>
    <script src="./js/js.js"></script>
1
2
3
4
5
檔案css.css

	background:url(icon/menu.fw.png) center no-repeat;
改成
    background:url(../icon/menu.fw.png) center no-repeat;

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

  2. 建立modal 目錄，這是後台用來放置彈出視窗的檔案.

  3. 從index.php及back.php中分離出中間需要變動的區塊，採用include的方式來動態載入主要的內容區，可以利用f12的開發者工具來檢視要分離的區塊的位置

  4. 前台的 login.php 及 news.php 去除和 index.php 相同的部份，只留下中間區塊即可，並將兩個檔案移到 ./front 目錄下

  5. 前台的 index.php 控出的中間區塊成為獨立的 main.php 檔案，並搬移到 ./front/ 目錄下

  6. 後台的 back.php 則挖出中間的區塊成為獨立的元件，並搬移到./backend/目錄下，先建立一個檔案名為title.php，之後會成為九個後台功能的基礎版型檔案。

  7. 使用 include 指令來重新組合 index.php 及 back.php 頁面，並加上判斷式來確保要組合的檔案是存在的。

  8. 以 get 的方式來傳遞各頁面要組合的元件內容，比如 do=login 表示要看到的是登入頁面，因此在前台的 include 中可以併入 login.php 來呈現。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//index.php 
//取得網址列的參數
$do=$_GET['do']??'main';

//建立一個變數來存放要include的檔案名稱
$file="./front/{$do}.php";

//判斷檔案是否存在
if(file_exists($file)){

    //存在的話就include
    include $file;
}else{

    //不存在的話就include main.php這個檔案
    include "./front/main.php";	
}

//admin.php 
//取得網址列的參數
$do = $_GET['do'] ?? 'title';

//建立一個變數來存放要include的檔案名稱
$file="./back/{$do}.php";

//判斷檔案是否存在
if(file_exists($file)){

    //存在的話就include
    include $file;
}else{

    //不存在的話就include title.php這個檔案
    include "./back/title.php";	
}