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

2016年12月6日 (二) 21:11的修訂版本

網站也叫做 SITE 。

工具與環境

一、學程的區網環境

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>

二、檔案列表

siteConstant.php：放這個網站的重要參數，如「所在路徑」、「標語」
theme.php：網站的布景，含選單。
style.css：布景中各元件的表現細節。
menu.css：導航列的表現細節。
index.php：投射內容頁與wiki頁的工作程式。
一些 banner 用到的圖檔，如：banner.png、logo.png
導航列的背景圖(可有可無)，如：navbar-bg.png
preparation/editWebContent.php：增加、編修、刪除「內容頁」的工作程式。

三、檢查與調整

由 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(urldecode($_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;}
?>

調整 banner

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

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='/~○○○/×××/index.php/wiki1231/index.php/☆☆☆☆'>☆☆☆☆</a>」
在其他站用「絕對路徑」如：
「<a href='http://6years.jendo.org/~○○○/xxx/index.php/wiki1231/index.php/☆☆☆☆'>☆☆☆☆</a>」
href如：http://6years.jendo.org/~丁志仁/ROC/index.php/wiki1231/index.php/包水餃?notitle=1&cutTag=1
有「notitle=1」，不秀 wiki 頁的頁名標題；沒有「notitle=1」要秀 wiki 頁的頁名標題。
「notitle=1」「cutTag=1」都是額外的指示，額外指示之間用「&」相連接；諸額外的指示和頁名之間用「?」相連接。

投射wiki頁練習

在本班 wiki 建一個要用的新頁
找一張「CC授權」或「公共版權」的圖照。
如果圖照在「維基共享資源」，會有多種尺寸供選用。選一個需要的尺寸，複製其連結。
在 wiki 頁中寫 <img src='圖照連結' width='寬度' height='高度' />
補充這一個 wiki 頁的文字內容。
在 theme.php 中導航列裡找適當位置加入新的一行「<dd><a href='/".SITE."/index.php/wiki1231/index.php/☆☆☆☆'>☆☆☆☆</a></dd>」

二、投射資料表內容

進入：
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」

將 ☆☆☆☆.php 檔放入「/home/www/×××」裡面

連結連向「/~○○○/×××/☆☆☆☆.php」

不須帳號密碼就可以看內容的php：

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

須帳號密碼認證後才可以看內容的php(只能使用 php 檔，不能使用其他兩種方法)。

<?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;}
?>

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

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

工作程式列表

調整登入認證檔

調整登入認證檔的位置
1. 在每個人的 home 之下與 www 平行的位置，新增 sessPath
2. 在 home/www 之下，新增一個 php 程式 userConstant.php 內容為：

<?php ini_set('session.save_path','/volume1/homes/○○○/sessPath'); include_once '/volume1/web/constant.php'; ?>

@@ 第 273 行： / 第 273 行： @@
 *#認證範例
 *#自我介紹
+==工作程式列表==
+==調整登入認證檔==
+*調整登入認證檔的位置
+*#在每個人的 home 之下與 www 平行的位置，新增 sessPath
+*#在 home/www 之下，新增一個 php 程式 userConstant.php 內容為：<pre>
+&lt;?php
+ini_set('session.save_path','/volume1/homes/○○○/sessPath');
+include_once '/volume1/web/constant.php';
+?&gt;</pre>