網站製作

簡述

一、學程的區網環境

VDSL2		82	jendo_a	192.168.3.1	516辦公室	41.86M/38.49M(516)
DS409+		84…		192.168.3.3	516辦公室
DWL-6600AP	81	jendo_b	192.168.3.2	513教室		32.24M/39.91(513)
DAP-2660	83	jendo_c	192.168.3.6	514教室		40.85M/14.11M(514)
RT1900ac	8000	jendo_d	192.168.3.4	516辦公室	34.59M/37.39M(516)
				192.168.4.1
	DS216+	80…		192.168.4.2	516辦公室

二、工具

filezilla
區網
取得 WinSCP 免安裝版
1. 打開 filezilla ，並新增一個站台叫「DS216+(共用)」
2. 上述站台的設為：
  - 主機:6years.jendo.org；
  - 協定:SFTP
  - 使用者:共用
  - 密碼:
  - 字碼集:UTF-8
3. 連線，然後到「/home/www」
4. 在本地端(筆電)的桌面建一個叫「WinSCP」的資料夾
5. 在 filezilla 左側窗框(本地筆電)找到桌面上的 WinSCP 資料夾。
6. 將右側窗框中的 WinSCP.exe 和 WinSCP.ch 兩個檔案下載到本地筆電桌面上的 WinSCP 資料夾中。
7. 關閉 filezilla 。

(一)偶爾使用 WinSCP 複製遠端的資料

找到桌面上的 WinSCP 資料夾，並進入其中。
執行 WinSCP.exe 。
建一個 new site
- 協定:SCP
- 主機:6years.jendo.org
- 埠號:22
- 使用者:您的姓名
- 密碼:您的密碼
- 「進階/環境/UTF-8」選「開啟」
選「儲存」
再選「登入」
到右側伺服器視窗，選擇您要複製的檔案或資料夾，按右鍵選「完全複製」
target remote path 設定為新的目錄名或檔名，按「確定」
關閉 WinSCP

三、由theme.php 畫分網站的三大部分

theme 是布景的意思。放的是一個網站外觀的設計。

在 body 內有三個 div

<div id='xo-banner'>…</div>
<div id='xo-globalnav'>…</div>
<div id='content'>…</div>

調整 banner

一、調整siteConstant.php、style.css、theme.php中的相關內容

siteConstant.php中，修改網站常數的定義

YEAR：不變
WHO：用#註解掉WHO的定義
SITE：調到現在的目錄，如「~丁志仁/ROC」
SLOGAN：把WHO.去掉，引號中改成主題的名稱，如'介紹台灣社會'

style.css中

body：
1. width:寬度
2. color:字的顏色
3. background-color:底色
xo-banner：
1. height:高度
2. background:
  - 顏色使用色碼
  - 其他屬性請參考CSS 參考手冊

theme.php中id 為 xo-banner 的 div

圖照：src 為 png,jpg,gif,svg ，調整 style
1. width:寬
2. height:高
3. margin-left:距左側邊緣多遠
4. margin-top:距上方邊緣多遠
畫字區：src 為 drawword.php ，banner中可以有多個畫字區
1. 調整?之後代表畫字區內部
  - word=寫什麼字
  - fontsize=字多大，預設50
  - color=顏色用色碼，不加#，預設黑色
  - angle=拉斜的角度，正負都可用，圓周為360°，預設0°
  - W=寬度，不設會自己算
  - H=高度，不設會自己算
  - x=字在畫字區的右移量
  - y=字在畫字區的上移量
  - fonttype=字體，預設為ukai.ttf，可以改選用uming.ttf、FZJLJT.FON(字不夠)，也可以推荐公版字體給丁老師。
2. style之後代表畫字區在div中的位置
  - left:距左側邊緣多遠
  - top:距上方邊緣多遠
  - border:畫字區的留邊

二、圖照去背

軟體和方法很多，這裡只介紹一種：pixlr線上修圖工具

作法與步驟：
1. 在「客戶端」準備好要去背的圖照。
2. 進入http://pixlr.com/editor/。
3. 選擇「從電腦上打開圖片」，並選擇要去背的圖照。
4. 對右方「圖層」中的「鎖」連按兩下，使鎖變成打勾。
5. 使用左方「工具」選單中的「選框工具」或「魔棒工具」選擇圖照上的區域範圍：
  - 「魔棒工具」會拉出一塊「同色」的範圍。
  - 「選框工具」可以拉出一塊方形範圍。
6. 按「Del」，選定範圍會變成透明，以灰白小格相間來表示。
7. 選上方選單的「文件/保存」，檔案格式選 png ，即可存下去背後的圖照。
參考連結

檢查與調整

由 filezilla 檢查：您的網站上，所有檔案、資料夾的「擁有人」必須是您自己。
siteConstant.php，改為：

<?php
ini_set('session.save_path','/volume1/homes/某某人/www'); 
@session_start();
define('YEAR','2016');
define('SITE','~某某人/網站資料夾');
define('SLOGAN','網站的標語、口號');
$about=array();
?>

style.css，在最後面加以下內容，使圖照能靠右：

div.tright {
	float: right;
	clear: right;
	margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
	float: left;
	clear: left;
	margin: 0.5em 1.4em 0.8em 0;
}
div.thumbinner {
	border:1px solid #cccccc;
	padding: 3px !important;
	background-color: White;
	font-size: 94%;
	text-align: center;
	overflow: hidden;
}
html .thumbcaption {
	border: none;
	text-align: left;
	line-height: 1.4em;
	padding: 3px !important;
	font-size: 94%;
}

index.php，改成以下內容，不需要帳密就能使用

<?php
$noSession=1;
include_once '../../../../web/constant.php';
include_once "theme.php";
include_once CLASS_FILE_PATH."/database/DB.php";
DB::connect(DSN);
if(!isset($_REQUEST['ajax'])){echo $html1;}
echo webContent($_SERVER['REQUEST_URI']);
if(!isset($_REQUEST['ajax'])){echo $html2;}
?>

preparation/editWebContent.php，需要帳密才能使用

<?php
$noSession=1;
include_once '../../../../../web/constant.php';
include_once '../theme.php';
$nowMsg="<p style='color:red'>僅允許本班同學編輯諸網頁。</p>";
if(!isset($_REQUEST['exec_type'])){echo $html1;}
if(!class_exists('etable')){include_once CLASS_FILE_PATH."/database/etable.php";}
$ET=new etable;
$ET->loginTable=array('tableName'=>'6yearStudents','name'=>'name','psd'=>'psd','grp'=>'grp','canWorkGrp'=>'1');
$ET->sql[0]="select path,webContent from WebContent where path like '%".SITE."%' order by path";
$ET->editable=7;
$ET->perpage=50;
$ET->colAlias=array('path'=>'路徑','webContent'=>'內容');
$ET->formType=array('webContent'=>array('auto',array('wiki')));
$ET->search=array('path','webContent');
$ET->main();
if(isset($ET->checkin) && $ET->checkin==0){echo $nowMsg;}
if(!isset($_REQUEST['exec_type'])){echo $html2;}
?>

三種產生內容頁的方法

一、投射wiki頁

在本站的 wiki 上開新頁，頁名為「☆☆☆☆」。
在本站用「絕對路徑」如：
「<a href='/~○○○/xxx/index.php/wiki1231/index.php/☆☆☆☆'>☆☆☆☆</a>」
在其他站用「絕對路徑」如：
「<a href='http://6years.jendo.org/~○○○/xxx/index.php/wiki1231/index.php/☆☆☆☆'>☆☆☆☆</a>」
如：http://6years.jendo.org/~丁志仁/ROC/index.php/wiki1231/index.php/包水餃?notitle=1&cutTag=1

投射wiki頁練習

在本班 wiki 建一個要用的新頁
找一張「CC授權」或「公共版權」的圖照。
如果圖照在「維基共享資源」，會有多種尺寸供選用。選一個需要的尺寸，複製其連結。
在 wiki 頁中寫 <img src='圖照連結' width='寬度' height='高度' />

二、投射資料表內容

進入：
1. 從「工具/編輯網頁」進入。
2. 用同學的帳密進入。
插入一筆：
1. 按「插入一筆」
2. 第一次先寫「路徑」，如：「/~○○○/×××/index.php/☆☆☆☆」，然後按「更新」鈕。
3. 第二次按該路徑的「編」連結，然後在「內容」欄開始寫內容。可以使用 wiki 語法。寫完按「更新」鈕。
4. 可以重覆多次編輯同一筆。
使用連結：
1. 在本站用「絕對路徑」如：
  「<a href='/~○○○/×××/index.php/☆☆☆☆'>☆☆☆☆</a>」
2. 在其他站用「絕對路徑」如：
  「<a href='http://6years.jendo.org/~○○○/×××/index.php/☆☆☆☆'>☆☆☆☆</a>」
3. 如：http://6years.jendo.org/~丁志仁/ROC/index.php/測試

三、撰寫php檔

☆☆☆☆.php檔內容：

<?php
include_once '../../../../web/constant.php';
include_once './theme.php';
echo $html1;
?>
HTML內容
<?php
echo $html2;
?>

將php檔放入「/home/www/xxx」裡面
連結連向「/~○○○/×××/☆☆☆☆.php」

須帳號密碼認證的頁面

只能使用 php 檔，不能使用其他兩種方法。但 php 檔中也可以投射wiki頁與資料表內容。

<?php
$noSession=1;
include_once '../../../../web/constant.php';
include_once "theme.php";
if(!isset($_REQUEST['exec_type'])){echo $html1;}
$nowMsg="<p style='color:red'>不合權限時的提示訊息。</p>";
include_once CLASS_FILE_PATH."/database/login.php";
$login=new login;
$login->loginTable=array('tableName'=>'認證資料表','name'=>'帳號欄','psd'=>'密碼欄','grp'=>'群組欄','canWorkGrp'=>'合法的群組');
$login->logon();
if(isset($login->checkin) && $login->checkin==0){echo $nowMsg;}
else{
	$str="要秀出來的用容，可以跨行";
	echo $str;
}
if(!isset($_REQUEST['exec_type'])){echo $html2;}
?>

規畫網站架構並製作導航列

一、製作首頁

「工具/編輯網頁」
輸入帳號密碼
路徑為「/~姓名/網站資料夾/」
使用 wiki 語法撰寫內容

二、導航列須包含以下內容

行程
1. 整體行程計畫(含預算)
2. 四個以上的地點
3. 手機方案
4. 頻寬方案
5. 相關連結
第一個重點
第二個重點
相簿
工具
1. 編輯網頁
2. 三種方法
3. 認證範例
4. 自我介紹

網站製作

目錄

簡述

一、學程的區網環境

二、工具

(一)偶爾使用 WinSCP 複製遠端的資料

三、由theme.php 畫分網站的三大部分

調整 banner

一、調整siteConstant.php、style.css、theme.php中的相關內容

二、圖照去背

檢查與調整

三種產生內容頁的方法

一、投射wiki頁

投射wiki頁練習

二、投射資料表內容

三、撰寫php檔

須帳號密碼認證的頁面

規畫網站架構並製作導航列

一、製作首頁

二、導航列須包含以下內容

導航

個人工具

名字空間

變換

檢視

動作

搜尋

導覽

工具箱