檢視網站製作的原始碼

[[分類:電腦]]
網站也叫做 SITE 。
==工具與環境==
===一、學程的區網環境===
<pre>
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辦公室
</pre>

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

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

==網站畫面三大區塊==
===一、由theme.php 畫分網站的三大部分===
theme 是布景的意思。放的是一個網站外觀的設計。

在 body 內有三個 div
#&lt;div id='xo-banner'&gt;…&lt;/div&gt;
#&lt;div id='xo-globalnav'&gt;…&lt;/div&gt;
#&lt;div id='content'&gt;…&lt;/div&gt;

===二、檔案列表===
#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，內容為：
<pre>&lt;?php
ini_set('session.save_path','/volume1/homes/某某人/www'); 
@session_start();
define('YEAR','2016');
define('SITE','~某某人/網站資料夾');
define('SLOGAN','網站的標語、口號');
$about=array();
?&gt;</pre>
*style.css，在最後面有加以下內容，使圖照能靠右：
<pre>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%;
}</pre>
*index.php，為以下內容，不需要帳密就能使用
<pre>&lt;?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;}
?&gt;</pre>
*preparation/editWebContent.php，需要帳密才能使用
<pre>&lt;?php
$noSession=1;
include_once '../../../../../web/constant.php';
include_once '../theme.php';
$nowMsg="&lt;p style='color:red'&gt;僅允許本班同學編輯諸網頁。&lt;/p&gt;";
if(!isset($_REQUEST['exec_type'])){echo $html1;}
if(!class_exists('etable')){include_once CLASS_FILE_PATH."/database/etable.php";}
$ET=new etable;
$ET-&gt;loginTable=array('tableName'=&gt;'6yearStudents','name'=&gt;'name','psd'=&gt;'psd','grp'=&gt;'grp','canWorkGrp'=&gt;'1');
$ET-&gt;sql[0]="select path,webContent from WebContent where path like '%".SITE."%' order by path";
$ET-&gt;editable=7;
$ET-&gt;perpage=50;
$ET-&gt;colAlias=array('path'=&gt;'路徑','webContent'=&gt;'內容');
$ET-&gt;formType=array('webContent'=&gt;array('auto',array('wiki')));
$ET-&gt;search=array('path','webContent');
$ET-&gt;main();
if(isset($ET-&gt;checkin) && $ET-&gt;checkin==0){echo $nowMsg;}
if(!isset($_REQUEST['exec_type'])){echo $html2;}
?&gt;</pre>

==調整 banner==
===一、調整style.css、theme.php中的相關內容===
style.css中
*body：
*#width:寬度
*#color:字的顏色
*#background-color:底色
*xo-banner：
*#height:高度
*#background:
*#*顏色使用色碼
*#*其他屬性請參考[http://www.w3school.com.cn/cssref/pr_background.asp CSS 參考手冊]
theme.php中id 為 xo-banner 的 div
*圖照：src 為 png,jpg,gif,svg ，調整 style
*#width:寬
*#height:高
*#margin-left:距左側邊緣多遠
*#margin-top:距上方邊緣多遠
*畫字區：src 為 drawword.php ，banner中可以有多個畫字區
*#調整?之後代表畫字區內部
*#*word=寫什麼字
*#*fontsize=字多大，預設50
*#*color=顏色用色碼，不加#，預設黑色
*#*angle=拉斜的角度，正負都可用，圓周為360°，預設0°
*#*W=寬度，不設會自己算
*#*H=高度，不設會自己算
*#*x=字在畫字區的右移量
*#*y=字在畫字區的上移量
*#*fonttype=字體，預設為ukai.ttf，可以改選用uming.ttf、FZJLJT.FON(字不夠)，也可以推荐公版字體給丁老師。
*#style之後代表畫字區在div中的位置
*#*left:距左側邊緣多遠
*#*top:距上方邊緣多遠
*#*border:畫字區的留邊

===二、圖照去背===
軟體和方法很多，這裡只介紹一種：pixlr線上修圖工具
*作法與步驟：
*#在「客戶端」準備好要去背的圖照。
*#進入[http://pixlr.com/editor/ http://pixlr.com/editor/]。
*#選擇「從電腦上打開圖片」，並選擇要去背的圖照。
*#對右方「圖層」中的「鎖」連按兩下，使鎖變成打勾。
*#使用左方「工具」選單中的「選框工具」或「魔棒工具」選擇圖照上的區域範圍：
*#*「魔棒工具」會拉出一塊「同色」的範圍。
*#*「選框工具」可以拉出一塊方形範圍。
*#按「Del」，選定範圍會變成透明，以灰白小格相間來表示。
*#選上方選單的「文件/保存」，檔案格式選 png ，即可存下去背後的圖照。
*參考連結
*#[https://zh.wikipedia.org/zh-tw/Category:位圖編輯軟體 維基上對點陣圖修圖軟體的列表]
*#[https://zh.wikipedia.org/zh-tw/Pixlr 中文維基百科對pixlr的簡介]
*#[https://www.pcsetting.com/freeware/37 使用教學1]
*#[http://help.i2yes.com/?q=node/131 使用教學2]
*#[http://pixlr.com/editor/ http://pixlr.com/editor/]

==三種產生內容頁的方法==
自己的姓名為「○○○」，網站的資料夾名稱為「×××」
===一、投射wiki頁===
*在本站的 wiki 上開新頁，頁名為「☆☆☆☆」。
*在本站用「絕對路徑」如：<br/>「&lt;a href='/~○○○/×××/index.php/wiki1231/index.php/☆☆☆☆'&gt;☆☆☆☆&lt;/a&gt;」
*在其他站用「絕對路徑」如：<br/>「&lt;a href='http://6years.jendo.org/~○○○/xxx/index.php/wiki1231/index.php/☆☆☆☆'&gt;☆☆☆☆&lt;/a&gt;」
*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 頁中寫 &lt;img src='圖照連結' width='寬度' height='高度' /&gt;
#補充這一個 wiki 頁的文字內容。
#在 theme.php 中導航列裡找適當位置加入新的一行「&lt;dd&gt;&lt;a href='/".SITE."/index.php/wiki1231/index.php/☆☆☆☆'&gt;☆☆☆☆&lt;/a&gt;&lt;/dd&gt;」

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

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

===三、撰寫php檔===
同學姓名是「○○○」，網站資料夾叫「×××」，檔名叫「☆☆☆☆.php」
:將 ☆☆☆☆.php 檔放入「/home/www/×××」裡面
:連結連向「/~○○○/×××/☆☆☆☆.php」
*不須帳號密碼就可以看內容的php：
<pre>&lt;?php
$noSession=1;
include_once '../../../../web/constant.php';
include_once './theme.php';
echo $html1;
?&gt;
HTML內容
&lt;?php
echo $html2;
?&gt;</pre>
*須帳號密碼認證後才可以看內容的php(只能使用 php 檔，不能使用其他兩種方法)。<!--但 php 檔中也可以投射wiki頁與資料表內容。-->
<pre>&lt;?php
$noSession=1;
include_once '../../../../web/constant.php';
include_once "theme.php";
if(!isset($_REQUEST['exec_type'])){echo $html1;}
$nowMsg="&lt;p style='color:red'&gt;不合權限時的提示訊息。&lt;/p&gt;";
include_once CLASS_FILE_PATH."/database/login.php";
$login=new login;
$login-&gt;loginTable=array('tableName'=&gt;'認證資料表','name'=&gt;'帳號欄','psd'=&gt;'密碼欄','grp'=&gt;'群組欄','canWorkGrp'=&gt;'合法的群組');
$login-&gt;logon();
if(isset($login-&gt;checkin) && $login-&gt;checkin==0){echo $nowMsg;}
else{
	$str="要秀出來的用容，可以跨行";
	echo $str;
}
if(!isset($_REQUEST['exec_type'])){echo $html2;}
?&gt;</pre>

==規畫網站架構並製作導航列==
*行程
*#整體行程計畫(含預算)
*#四個以上的地點
*#手機方案
*#頻寬方案
*#相關連結
*第一個重點
*第二個重點
*相簿
*工具
*#編輯網頁
*#三種方法
*#認證範例
*#自我介紹
==工作程式列表==
#index.php
#noPass.php
#passtest.php 或 needPass.php
#preparation/editWebContent.php

==調整登入認證檔與工作程式==
*調整登入認證檔的位置
*#在每個人的 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>
*所有工作程式的頭都改， index.php 和 passtest.php 改成：
<pre>
&lt;?php
include_once '../userConstant.php';
include_once "theme.php";
…
…
?&gt;</pre>
preparation/editWebContent.php 改成：
<pre>
&lt;?php
include_once '../../userConstant.php';
include_once "../theme.php";
…
…
?&gt;</pre>
*; like.php 刪掉
*原來 www 之下的 sess_xxxxxxxxxxxxxxxx 都刪掉

==加入「上傳檔案功能」==
*在 siteConstant.php 加入
*:$basePath="./images/";
*:$subPath=array('1'=>'地點1','2'=>'地點2','3'=>'地點3'…);
*;最後的 siteConstant.php 只留四行
*新增資料夾
*#在個人網站資料夾中增加 upload 資料夾
*#在 upload 資料夾之下新增 images 資料夾，屬性為 644 以上(755、777也可)
*#在 images 資料夾之下新增 1 、 2 、 3 … 資料夾，屬性為 644 以上(755、777也可)
*將 fileUpload.php 放到 upload 資料夾之下
*將要上傳的檔案改成適當的名字。
*各資料夾至少上傳兩個圖照