網站製作

網站也叫做 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 複製遠端的資料

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

網站畫面三大區塊

在本頁中：

1. 帳號以「○○○」代表，通常是同學的姓名
2. 網站資料夾叫「×××」，如 ROC 、 USA 、 Japan 、 Korea
3. 工作程式的檔名叫「☆☆☆☆.php」

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

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

在 body 內有三個 div ，分別代表 banner 、導航列、內容區：

1. <div id='xo-banner'>…</div>
2. <div id='xo-globalnav'>…</div>
3. <div id='content'>…</div>

二、資料夾列表

在 home 之下：

• sessPath：放登入的伺服器端會期變數檔
• www：放可以對外公開，瀏覽器可到達的檔案與資料夾。瀏覽器到達網址為「http://6years.jendo.org/~○○○/」。通常「○○○」即同學的姓名或共用帳號「共用」。

  網站資料夾，如 ROC 、 USA 、 Japan 、 Korea 。本頁中以「×××」代表，內含：

  • preparation：放內容頁編輯程式 editWebContent.php
  • upload：放檔案上傳與相簿相關的東西

    images：裡面依分類放圖照，每分類一個資料夾

    1. 由 siteConstant.php 中的 $subPath 定義
    2. 由 siteConstant.php 中的 $subPath 定義
    3. 由 siteConstant.php 中的 $subPath 定義

三、檔案列表

在 www 之下：

userConstant.php：放伺服器端會期變數檔的路徑，並載入全伺服器共用常數。

在「網站資料夾」即「×××」資料夾之下：

1. siteConstant.php：放這個網站的重要參數，如「所在路徑」、「標語」
2. theme.php：網站的布景，含選單。
3. style.css：布景中各元件的表現細節。
4. menu.css：導航列的表現細節。
5. index.php：投射內容頁與wiki頁的工作程式。
6. 一些 banner 用到的圖檔，如：banner.png、logo.png
7. 導航列的背景圖(可有可無)，如：navbar-bg.png
8. preparation/editWebContent.php：增加、編修、刪除「內容頁」的工作程式。
9. upload/fileUpload.php：檔案上傳介面。
10. upload/showImages.php：秀圖照的相簿程式。

四、檢查與調整

• 帳號必須對 web 資料夾有讀取權限，如加入同學群組。
• 由 filezilla 檢查：您的網站上，所有檔案、資料夾的「擁有人」必須是您自己。
• userConstant.php，內容為：

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

• siteConstant.php，內容為：

<?php
define('SITE','~○○○/×××');
define('SLOGAN','網站的標語、口號');
$basePath="./images/";
$subPath=array('1'=>'分類1','2'=>'分類2','3'=>'分類3');
$bodyWidth=寬度如 900 ;
?>

• 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
include_once '../userConstant.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
include_once '../../userConstant.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(字不夠)，也可以推荐公版字體給丁老師。
     • strokeWide=描邊的點數
     • strokeColor=描邊的顏色
     • PHP 畫字的原始函式 ImageTTFText() 並無調整字距的功能
  2. style之後代表畫字區在div中的位置
     • left:距左側邊緣多遠
     • top:距上方邊緣多遠
     • border:畫字區的留邊

二、圖照去背

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

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

三種產生內容頁的方法

重申在本頁中：

1. 帳號以「○○○」代表，通常是同學的姓名
2. 網站資料夾叫「×××」，如 ROC 、 USA 、 Japan 、 Korea
3. wiki 頁的頁名叫「☆☆☆☆」。
4. 內容頁的頁名也叫「☆☆☆☆」。
5. 工作程式的檔名叫「☆☆☆☆.php」

一、投射wiki頁

• 在本站的 wiki 上開新頁，頁名為「☆☆☆☆」。
• 在本站用「絕對路徑」如：
  「<a href='/~○○○/×××/index.php/wiki1231/index.php/☆☆☆☆'>☆☆☆☆</a>」
• 在其他站用「絕對路徑」如：
  「<a href='http://6years.jendo.org/~○○○/×××/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頁練習

1. 在本班 wiki 建一個要用的新頁
2. 找一張「CC授權」或「公共版權」的圖照。
3. 如果圖照在「維基共享資源」，會有多種尺寸供選用。選一個需要的尺寸，複製其連結。
4. 在 wiki 頁中寫 <img src='圖照連結' width='寬度' height='高度' />
5. 補充這一個 wiki 頁的文字內容。
6. 在 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/測試

製作首頁

1. 「工具/編輯網頁」
2. 輸入帳號密碼
3. 路徑為「/~○○○/×××/」
4. 使用 wiki 語法撰寫內容

三、撰寫php檔

同學姓名是「○○○」，網站資料夾叫「×××」，檔名叫「☆☆☆☆.php」

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

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

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

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

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

<?php
include_once '../userConstant.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. index.php
2. noPass.php
3. passtest.php 或 needPass.php
4. preparation/editWebContent.php
5. upload/fileUpload.php
6. upload/showImages.php

工作程式檢查，

• 所有在「×××」之下的工作程式，如 index.php 的頭都應為：

<?php
include_once '../userConstant.php';
include_once "theme.php";
…
…
?>

• 所有在「×××」的下一層資料夾之下的工作程式，如

preparation/editWebContent.php 的頭應為：

<?php
include_once '../../userConstant.php';
include_once "../theme.php";
…
…
?>

• like.php 刪掉
• 原來 www 之下的 sess_xxxxxxxxxxxxxxxx 都刪掉

加入「上傳檔案與相簿功能」

安裝 fileUpload.php 、 showImages.php

• 新增資料夾
  1. 在個人網站資料夾中增加 upload 資料夾
  2. 在 upload 資料夾之下新增 images 資料夾，屬性為 755 以上(777也可)
  3. 在 images 資料夾之下新增 1 、 2 、 3 … 資料夾，屬性為 755 以上(777也可)
• 將 fileUpload.php 、 showImages.php 放到 upload 資料夾之下
• 改 theme.php 在導航列「工具」大項之下加：

  <dd><a href='/".SITE."/upload/fileUpload.php'>上傳檔案</a></dd>

  <dd><a href='/".SITE."/upload/showImages.php'>秀相簿</a></dd>

同學練習

• 將要上傳的檔案改成適當的名字。
• 各資料夾至少上傳兩個圖照
• 使用 showImages.php
  1. 水平欄數：可選 1~7 欄，預設為兩欄。
  2. 選取圖照的核取方塊，依 siteConstant.php 中的 $subPath 陣列設定值而定。

使用 airbnb

• 全球最大的民宿共享經濟平台。
• 名稱的由來：Air bed and breakfast，2007年的某一天，創辦人得知有一個全球設計大會將在舊金山召開，由於與會人員太多，當地所有的酒店旅館都被預訂一空，所以兩位創辦人就將他們的住所出租給這些參加大會的設計師們居住。
• 共享經濟三要素：
  1. 閒置的產能
  2. 媒合平台
  3. 使用者

  例子：

  1. 網約車 Uber 、 Zipcar
     • 私有汽車閒置時間佔 92%
     • 每一輛共用汽車會減少十五輛私有汽車
     • 無人駕駛將進一步減少私有汽車
  2. 共用單車 youbike
  3. 住家 Airbnb 、 HomeAway 、 沙發衝浪
  4. 免費回收網(TFN)
  5. 服飾 ThredUP
  6. 生活用品共享 Yerdle
  7. 玩具 Baby Plays …
  8. 技能 Skillshare：
     • https://www.skillshare.com/
     • http://www.meiihow.com/archives/28255/隨時隨地都在前往夢想的路上-skillshare-教學共享平台介
     • http://app-island.com/app/5497/全球最大線上影音教學分享平台『Skillshare』
  9. 菜園共享 ShareEarth 、 社群支持農業
  10. 健康照護
      • 病友社群
      • 病患導向研究，大幅降低雙盲臨床實驗的成本並提高速度
  11. 大數據追蹤流感
  12. 大數據 DNA 資料庫
  13. 共享口碑代替廣告，會員聲譽評價
  14. 群眾募資
  15. 點對點借貸
  16. 社群代幣(全球有四千種)取代主權國家法幣
  17. 時間銀行 TaskRabbit
  18. 食物銀行
  19. 共享三餐 Feastly
  20. 共享停車位 JustPark
  21. 3D 列印組織
• airbnb實作
  1. 台灣官網
  2. 註冊
  3. 在手機或平板上下載 app
  4. 練習找房
  5. 看口碑
  6. airbnb 安全嗎？