檢視網站製作的原始碼

[[分類:電腦]]
===簡述===
<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;

===調整 banner===
siteConstant.php中，修改網站常數的定義
*YEAR：不變
*WHO：用#註解掉WHO的定義
*SITE：調到現在的目錄，如「~丁志仁/ROC」
*SLOGAN：把WHO.去掉，引號中改成主題的名稱，如'介紹台灣社會'
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線上修圖工具
*參考連結
*#[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/]