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

出自六年制學程
跳轉到: 導覽搜尋
調整
第 1 行: 第 1 行:
 
[[分類:電腦]]
 
[[分類:電腦]]
===簡述===
+
==簡述==
 +
===一、學程的區網環境===
 
<pre>
 
<pre>
 
VDSL2 82 jendo_a 192.168.3.1 516辦公室 41.86M/38.49M(516)
 
VDSL2 82 jendo_a 192.168.3.1 516辦公室 41.86M/38.49M(516)
第 11 行: 第 12 行:
 
</pre>
 
</pre>
  
===工具===
+
===二、工具===
 
*filezilla
 
*filezilla
 
*區網
 
*區網
第 28 行: 第 29 行:
 
*#關閉 filezilla 。
 
*#關閉 filezilla 。
  
===使用 WinSCP 複製遠端的資料===
+
====(一)偶爾使用 WinSCP 複製遠端的資料====
 
#找到桌面上的 WinSCP 資料夾,並進入其中。
 
#找到桌面上的 WinSCP 資料夾,並進入其中。
 
#執行 WinSCP.exe 。
 
#執行 WinSCP.exe 。
第 44 行: 第 45 行:
 
#關閉 WinSCP
 
#關閉 WinSCP
  
===theme.php===
+
===三、由theme.php 畫分網站的三大部分===
 
theme 是布景的意思。放的是一個網站外觀的設計。
 
theme 是布景的意思。放的是一個網站外觀的設計。
  
第 52 行: 第 53 行:
 
#&lt;div id='content'&gt;…&lt;/div&gt;
 
#&lt;div id='content'&gt;…&lt;/div&gt;
  
===調整 banner===
+
==調整 banner==
 +
===一、調整siteConstant.php、style.css、theme.php中的相關內容===
 
siteConstant.php中,修改網站常數的定義
 
siteConstant.php中,修改網站常數的定義
 
*YEAR:不變
 
*YEAR:不變
第 90 行: 第 92 行:
 
*#*border:畫字區的留邊
 
*#*border:畫字區的留邊
  
===圖照去背===
+
===二、圖照去背===
 
軟體和方法很多,這裡只介紹一種:pixlr線上修圖工具
 
軟體和方法很多,這裡只介紹一種:pixlr線上修圖工具
 
*作法與步驟:
 
*作法與步驟:
第 108 行: 第 110 行:
 
*#[http://help.i2yes.com/?q=node/131 使用教學2]
 
*#[http://help.i2yes.com/?q=node/131 使用教學2]
 
*#[http://pixlr.com/editor/ http://pixlr.com/editor/]
 
*#[http://pixlr.com/editor/ http://pixlr.com/editor/]
===三種方法===
+
==三種產生內容頁的方法==
====投射wiki頁====
+
===一、投射wiki頁===
 
*在本站的 wiki 上開新頁,頁名為「☆☆☆☆」。
 
*在本站的 wiki 上開新頁,頁名為「☆☆☆☆」。
 
*在本站用「絕對路徑」如:<br/>「&lt;a href='/~○○○/xxx/index.php/wiki1231/index.php/☆☆☆☆'&gt;☆☆☆☆&lt;/a&gt;」
 
*在本站用「絕對路徑」如:<br/>「&lt;a href='/~○○○/xxx/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;」
 
*在其他站用「絕對路徑」如:<br/>「&lt;a href='http://6years.jendo.org/~○○○/xxx/index.php/wiki1231/index.php/☆☆☆☆'&gt;☆☆☆☆&lt;/a&gt;」
 
*如:http://6years.jendo.org/~丁志仁/ROC/index.php/wiki1231/index.php/包水餃?notitle=1&cutTag=1
 
*如:http://6years.jendo.org/~丁志仁/ROC/index.php/wiki1231/index.php/包水餃?notitle=1&cutTag=1
====php檔====
+
====投射wiki頁練習====
*☆☆☆☆.php檔內容:
+
#在本班 wiki 建一個要用的新頁
<pre>&lt;?php
+
#找一張「CC授權」或「公共版權」的圖照。
include_once '../../../../web/constant.php';
+
#如果圖照在
include_once './theme.php';
+
===二、投射資料表內容===
echo $html1;
+
?&gt;
+
HTML內容
+
&lt;?php
+
echo $html2;
+
?&gt;</pre>
+
*將php檔放入「/home/www/xxx」裡面
+
*連結連向「/~○○○/×××/☆☆☆☆.php」
+
====投射資料表內容====
+
 
*進入:
 
*進入:
 
*#從「工具/編輯網頁」進入。
 
*#從「工具/編輯網頁」進入。
第 140 行: 第 133 行:
 
*#在其他站用「絕對路徑」如:<br/>「&lt;a href='http://6years.jendo.org/~○○○/×××/index.php/☆☆☆☆'>☆☆☆☆&lt;/a&gt;」
 
*#在其他站用「絕對路徑」如:<br/>「&lt;a href='http://6years.jendo.org/~○○○/×××/index.php/☆☆☆☆'>☆☆☆☆&lt;/a&gt;」
 
*#如:http://6years.jendo.org/~丁志仁/ROC/index.php/測試
 
*#如:http://6years.jendo.org/~丁志仁/ROC/index.php/測試
===投射wiki頁練習===
+
===三、撰寫php檔===
===須帳號密碼認證的頁面===
+
*☆☆☆☆.php檔內容:
 +
<pre>&lt;?php
 +
include_once '../../../../web/constant.php';
 +
include_once './theme.php';
 +
echo $html1;
 +
?&gt;
 +
HTML內容
 +
&lt;?php
 +
echo $html2;
 +
?&gt;</pre>
 +
*將php檔放入「/home/www/xxx」裡面
 +
*連結連向「/~○○○/×××/☆☆☆☆.php」
 +
====須帳號密碼認證的頁面====
 
只能使用 php 檔,不能使用其他兩種方法。但 php 檔中也可以投射wiki頁與資料表內容。
 
只能使用 php 檔,不能使用其他兩種方法。但 php 檔中也可以投射wiki頁與資料表內容。
 
<pre>&lt;?php
 
<pre>&lt;?php
第 160 行: 第 165 行:
 
if(!isset($_REQUEST['exec_type'])){echo $html2;}
 
if(!isset($_REQUEST['exec_type'])){echo $html2;}
 
?&gt;</pre>
 
?&gt;</pre>
====調整====
+
==檢查與調整==
 
*您的網站上,所有檔案、資料夾的「擁有人」必須是您自己。
 
*您的網站上,所有檔案、資料夾的「擁有人」必須是您自己。
 
*siteConstant.php,加:
 
*siteConstant.php,加:
第 223 行: 第 228 行:
 
?&gt;</pre>
 
?&gt;</pre>
  
===規畫網站架構===
+
==規畫網站架構並製作導航列==
====製作首頁====
+
===一、製作首頁===
 
#「工具/編輯網頁」
 
#「工具/編輯網頁」
 
#輸入帳號密碼
 
#輸入帳號密碼
 
#路徑為「/~姓名/網站資料夾/」
 
#路徑為「/~姓名/網站資料夾/」
 
#使用 wiki 語法撰寫內容
 
#使用 wiki 語法撰寫內容
====製作導航列====
+
===二、導航列須包含以下內容===
 
*行程
 
*行程
 
*#整體行程計畫(含預算)
 
*#整體行程計畫(含預算)

2016年11月2日 (三) 10:12的修訂版本

簡述

一、學程的區網環境

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

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

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

在 body 內有三個 div

  1. <div id='xo-banner'>…</div>
  2. <div id='xo-globalnav'>…</div>
  3. <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:

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 ,即可存下去背後的圖照。
  • 參考連結
    1. 維基上對點陣圖修圖軟體的列表
    2. 中文維基百科對pixlr的簡介
    3. 使用教學1
    4. 使用教學2
    5. http://pixlr.com/editor/

三種產生內容頁的方法

一、投射wiki頁

投射wiki頁練習

  1. 在本班 wiki 建一個要用的新頁
  2. 找一張「CC授權」或「公共版權」的圖照。
  3. 如果圖照在

二、投射資料表內容

  • 進入:
    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;}
?>

檢查與調整

  • 您的網站上,所有檔案、資料夾的「擁有人」必須是您自己。
  • 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;}
?>

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

一、製作首頁

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

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

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