網站製作：修訂版本之間的差異

2016年11月2日 (三) 09:54的修訂版本

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中，修改網站常數的定義

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 ，即可存下去背後的圖照。
參考連結

三種方法

投射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

php檔

☆☆☆☆.php檔內容：

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

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

投射資料表內容

進入：
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/測試

投射wiki頁練習

須帳號密碼認證的頁面

只能使用 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;}
?>

調整

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

ini_set('session.save_path','/volume1/homes/某某人/www');

@session_start();
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 語法撰寫內容

製作導航列

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

網站製作：修訂版本之間的差異

2016年11月2日 (三) 09:54的修訂版本

目錄

簡述

工具

使用 WinSCP 複製遠端的資料

theme.php

調整 banner

圖照去背

三種方法

投射wiki頁

php檔

投射資料表內容

投射wiki頁練習

須帳號密碼認證的頁面

調整

規畫網站架構

製作首頁

製作導航列

導航

個人工具

名字空間

變換

檢視

動作

搜尋

導覽

工具箱