FrontPage 製作

FrontPage FrontPage 製作製作

張基昇張基昇

本校網頁 本校網頁 網頁大展 網頁大展 ....與世界建立通路！ 開跑囉！與世界建立通路！ 開跑囉！

教職員或學生個人網頁 教職員或學生個人網頁 ....總有一天等到你！總有一天等到你！

註冊登錄表單畫面 註冊登錄表單畫面 ....須先完成網頁的部份設計須先完成網頁的部份設計。。

建立個人 建立個人 FrontPage FrontPage 的方法的方法凡本校師生有 凡本校師生有 UNIX UNIX 工作站帳號者，均可自行建工作站帳號者，均可自行建立自己的 立自己的 Home PageHome Page

以帳號 以帳號 581en021 581en021 為例 為例 : : 1.1.在 在 sun2.cc.ntut.edu.tw sun2.cc.ntut.edu.tw 或 或 sun.cc.ntut.edu.tw sun.cc.ntut.edu.tw 之 之 hoho

me directory me directory 下建立一個子目錄並命名為 下建立一個子目錄並命名為 public_htmpublic_htmll（即 （即 ~581en021/public_html~581en021/public_html ），），

2.2.即可在 即可在 public_html public_html 子目錄下建自己的 子目錄下建自己的 Home Page Home Page 。。3.3.指令說明：指令說明：在 在 UNIX UNIX 系統中建一個子目錄可用 系統中建一個子目錄可用 mkdirmkdir

， 即 ， 即 mkdir public_htmlmkdir public_html4.4.此 此 Home Page Home Page 之 之 URL Location URL Location 為 為 http://www.cc.http://www.cc.

ntut.edu.tw/~581en021 ntut.edu.tw/~581en021 。。5.5.建立建立 FrontPageFrontPage 的方法，可參閱的方法，可參閱 HTMLHTML 烘培雞烘培雞 (( 這裡這裡 ))

YAHOO YAHOO 網頁設計資訊網頁設計資訊就是跑到這裡啦！就是跑到這裡啦！ http://tw.search.yahoo.com/search?ei=UTF-8&p=htmlhttp://tw.search.yahoo.com/search?ei=UTF-8&p=html

網頁樣版使用說明第一步先規劃自己網頁要呈現的項目及內第一步先規劃自己網頁要呈現的項目及內容，再挑選您需要的樣版。容，再挑選您需要的樣版。

第二步你可以選擇 第二步你可以選擇 link1.html ~ link6.html link1.html ~ link6.html 的樣版完成網頁。建議您先上去瀏覽樣版的樣版完成網頁。建議您先上去瀏覽樣版網頁看那種樣版符合您的需要網頁看那種樣版符合您的需要

link2.htmllink2.html 目前只有開放教師使用目前只有開放教師使用

網頁樣版使用介紹圖文式開啟圖文式開啟 link1.htmllink1.html ：找到下列文字將：找到下列文字將 iimg1.jpgmg1.jpg 置換成要放置的圖檔名稱，當然囉，置換成要放置的圖檔名稱，當然囉，要先把圖檔放到要先把圖檔放到 imageimage 資料夾底下。 資料夾底下。 <im<img src="image/img1.jpg"………g src="image/img1.jpg"………

純文字開啟純文字開啟 link3.htmllink3.html 找到以下文字，將您找到以下文字，將您要放置的文字輸入或要放置的文字輸入或 copycopy 覆蓋過去即可，覆蓋過去即可，或者刪除不要部份，以下類推。 或者刪除不要部份，以下類推。 <p><p> 第一第一段文字內容，第一段文字內容………段文字內容，第一段文字內容……… </p> </p>

網頁樣版使用介紹填表單開啟填表單開啟 link4.htmllink4.html 找到以下文字將找到以下文字將 ######## 改成自己的帳號即可。改成自己的帳號即可。 <input type="hidd<input type="hidden" name="sendto" value="####@ntut.eden" name="sendto" value="####@ntut.edu.tw">u.tw">

表框式開啟表框式開啟 link5.htmllink5.html 找到以下文字將表框找到以下文字將表框式改成您要的標題，內容部份同純文字。式改成您要的標題，內容部份同純文字。 <<p>&gt;&gt;p>&gt;&gt; 表框式 表框式 &lt;&lt;</p>&lt;&lt;</p> 說明說明

網頁樣版使用介紹

表格開啟表格開啟 link6.htmllink6.html 找到以下文字，總找到以下文字，總之就是將之就是將 <td><td> 與與 </td></td> 之間的文字改之間的文字改成您要的文字即可。成您要的文字即可。 <td height="40"><td height="40">第一項第一項 </td><td></td><td> 第二項第二項 </td><td></td><td> 第第三項三項 </td>……</td>…… 或或 <td>&nbsp;</td><td>&nbsp;</td> 。。

網頁樣版使用介紹Left FrameLeft Frame 請開啟請開啟 left.htmlleft.html 找到下列文字找到下列文字將圖文式改成您要的文字，將將圖文式改成您要的文字，將 link1.htmllink1.html 改改成您修改後另存新檔的檔名，以下類推…成您修改後另存新檔的檔名，以下類推……… .. <a href="link1.html" target="mainFra.. <a href="link1.html" target="mainFrame">me"> 圖文式圖文式 E-mailE-mail 的部份找到下列文字將的部份找到下列文字將######## 改成您的改成您的 e-maile-mail 帳號帳號 <a href="mailto:<a href="mailto:####@ntut.edu.tw"><img src="image/ema####@ntut.edu.tw"><img src="image/email-21.gif"… il-21.gif"…

網頁樣版使用介紹

Top FrameTop Frame 請開啟請開啟 top.htmltop.html 找到下列找到下列文字將文字將 logo.jpglogo.jpg 改成您要放置的圖片改成您要放置的圖片名稱，當然圖檔要先存在名稱，當然圖檔要先存在 imageimage 目錄目錄下，原來的圖檔是下，原來的圖檔是 700*94700*94 如果您的圖如果您的圖不是這樣的寬和高，請再修改不是這樣的寬和高，請再修改 widthwidth 和和heightheight 。。

網頁樣版使用介紹

<img src="image/logo.jpg" alt="<img src="image/logo.jpg" alt=" 台北台北科技大學教師網站科技大學教師網站 " width="700" heig" width="700" height="94">ht="94">

CSSCSS 樣式表定義在樣式表定義在 b5.cssb5.css ，如果功力，如果功力夠也可變化一下。夠也可變化一下。

網頁樣版建構原理 網頁樣版建構原理 主要是利用主要是利用 CSSCSS 樣式表做變化，對文字樣式表做變化，對文字的字型及大小以及的字型及大小以及 URLURL 做一些規範，只做一些規範，只要把文字或連結名稱修改即可要把文字或連結名稱修改即可頁框組架構讓網站的呈現一目瞭然。頁框組架構讓網站的呈現一目瞭然。提供教師網站上專屬您最新消息公佈的功提供教師網站上專屬您最新消息公佈的功能，您可以省去架設資料庫及設計程式的能，您可以省去架設資料庫及設計程式的功夫。功夫。

網頁樣版建構原理網頁樣版建構原理利用表格排版，呈現整齊統一的版面。利用表格排版，呈現整齊統一的版面。透過透過 WebWeb 表單將意見傳送到您的信箱。表單將意見傳送到您的信箱。沒有太多複雜的變化，如果您完全沒有網沒有太多複雜的變化，如果您完全沒有網頁編輯及頁編輯及 htmlhtml 的概念，可用記事本開啟，的概念，可用記事本開啟，檔案類型點選所有檔案，修改套用後可另檔案類型點選所有檔案，修改套用後可另存新檔，並參考詳細說明。存新檔，並參考詳細說明。

架設個人網頁架設個人網頁本校首頁本校首頁 -- 網路資源網路資源 -- 校園網路服務校園網路服務 FAQFAQ 陸陸 .. 架設個人網頁架設個人網頁記得在記得在 public_html public_html 下還要新增一個下還要新增一個 imageimage 的的目錄，存放您的圖檔哦！ 目錄，存放您的圖檔哦！

在自己個人電腦編輯網頁內容在自己個人電腦編輯網頁內容(( 個人首頁檔案名稱請命名為個人首頁檔案名稱請命名為 index.html)index.html)

進入進入 MS-DOSMS-DOS 模式模式 , , 在個人電腦 在個人電腦 cd cd 到網到網頁存放位置的目錄下 頁存放位置的目錄下

上傳操作 上傳操作

ftp 140.124.13.12ftp 140.124.13.12進入到學校電腦主機作業區 進入到學校電腦主機作業區

User :jsechang (User :jsechang ( 此為個人在此為個人在 UNIXUNIX 主主機帳號機帳號 ,, 及及 E-MailE-Mail地址地址 '@''@' 前之帳號前之帳號 ))

Password : *******Password : ******* mkdir public_htmlmkdir public_html

此指令是建立此指令是建立 public_htmlpublic_html 目錄目錄 ,, 因為本因為本校校www server defaultwww server default 會抓該目錄網頁會抓該目錄網頁

上傳操作上傳操作

相同作業環境下繼續操作相同作業環境下繼續操作 cd public_htmlcd public_html

此指令是進入此指令是進入 public_htmlpublic_html 目錄下目錄下 promptprompt binbin mput *.* (mput *.* ( 該指令用於將個人電腦所有檔該指令用於將個人電腦所有檔案放到案放到 140.124.13.2140.124.13.2 遠端機器遠端機器 ))

瀏覽網頁瀏覽網頁

使用瀏覽器輸入使用瀏覽器輸入 http://www.ntut.edhttp://www.ntut.edu.tw/~jechangu.tw/~jechang即可看到個人網頁即可看到個人網頁請注意用以上方法請注意用以上方法cd public_html cd public_html 下再 下再 mkdir image mkdir image 目錄，以放置您的圖檔目錄，以放置您的圖檔 ........

ㄧ種方便上傳的方法ㄧ種方便上傳的方法

使用瀏覽器輸入使用瀏覽器輸入 ftp://jsechang@ntftp://jsechang@ntut.edu.tw/ut.edu.tw/即可在視窗下進入學校提供之空間即可在視窗下進入學校提供之空間將檔案放置到 將檔案放置到 public_html public_html 下下有圖檔請放置到 有圖檔請放置到 image image 目錄下目錄下 image image 目錄是 目錄是 public_html public_html 目錄目錄下的子目錄下的子目錄

給您的生活給您的生活，，無限的視野無限的視野！！二十一張投影片，給你無限寬廣的視野！二十一張投影片，給你無限寬廣的視野！