目錄 : 網頁設計學習課程參考
在本節中我們將介紹Aptana的基本操作, 同時為後續的講解作準備.
首先我們在所使用的帳號的我的文件中建立了一個新的檔案夾LearningJavaScript供Aptana建立新的Workspace之用. 我們通常會有不同的專案計劃,不同的專案計劃可用不同的Workspace區隔開.
接下來開啟Aptana並點選右側之瀏覽鍵
選擇先前所建立的新檔案夾並按下確定鍵.
確認Aptana是以新的路徑開啟Workspace並按下確定鍵.
Aptana隨即開啟. 請點選在上方之檔案.
然後點選新增 > Web Project
在出現的視窗中我們可看到有4個Web Project選擇, 我們先行選擇Default Project, 這會為我們建立一個全的專案.
在隨即出現的視窗中把專案命名為LearnJavaScript並按下完成鍵
Aptana左側之專案瀏覽器立即出現我們剛才新增的專案. 但本專案下尚沒有任何內容.
在專案瀏覽器點選專案並按下滑鼠右鍵.
點選 New From Template> HTML 5 Template
Aptana可允許我們新增不同版本的HTML檔, 但在本課程中我們將只使用HTML 5檔.
在出現的視窗中我們把HTML 5檔命new_file.htm改名稱為index.htm並按下完成鍵. 網頁伺服器通常預設網站的啟始頁為index.htm.
預設的HTML 5檔範本隨即出現.
我們可以預覽index.htm. 請依下圖執行, 以IE預覽.
出現的結果為
我們現在把預設的內容修改一下. 請把 <title></title> 內的內容index更改為Learning JavaScript.
同時把<body>下的內容更改如下(<h1></h1>內容index更改為JavaScript 學習課程, 第一個<p>
</p>內之<a></a>的文字改為大綱, 第二組<p></p>刪除, Copyright by後文字改為自己名字.)
預覽所得畫面為 (圈起來之處即為更改的內容).
各位會不會覺得編輯器的字型有點小? 我們來改一下. 在工具列點選視窗 > 喜好設定.
在出現的視窗中點選Themes.
我們選擇編輯器的佈景主題同時改字型大小. 各位自行選擇喜愛的佈景主題.
完成後字比較大而且顏色配置也不一樣吧!
PS :
在本課程中我們不會特別去介紹HTML. 如果你需要先學HTML的話, 請參考:
1. HTML Made Simple (我認為是非常好的入門教材)
2. YouTube Videos by John Martens using Aptana. (7 Videos)
https://www.youtube.com/watch?v=Ls2pZXy-e1g&list=PLe_jJL2S-pTMFd7MV6drJzZ8l6-eVWiNV&spfreload=10
3. HTML教學導覽
在本節中我們將介紹Aptana的基本操作, 同時為後續的講解作準備.
首先我們在所使用的帳號的我的文件中建立了一個新的檔案夾LearningJavaScript供Aptana建立新的Workspace之用. 我們通常會有不同的專案計劃,不同的專案計劃可用不同的Workspace區隔開.
接下來開啟Aptana並點選右側之瀏覽鍵
選擇先前所建立的新檔案夾並按下確定鍵.
確認Aptana是以新的路徑開啟Workspace並按下確定鍵.
Aptana隨即開啟. 請點選在上方之檔案.
然後點選新增 > Web Project
在出現的視窗中我們可看到有4個Web Project選擇, 我們先行選擇Default Project, 這會為我們建立一個全的專案.
在隨即出現的視窗中把專案命名為LearnJavaScript並按下完成鍵
Aptana左側之專案瀏覽器立即出現我們剛才新增的專案. 但本專案下尚沒有任何內容.
在專案瀏覽器點選專案並按下滑鼠右鍵.
點選 New From Template> HTML 5 Template
Aptana可允許我們新增不同版本的HTML檔, 但在本課程中我們將只使用HTML 5檔.
在出現的視窗中我們把HTML 5檔命new_file.htm改名稱為index.htm並按下完成鍵. 網頁伺服器通常預設網站的啟始頁為index.htm.
我們可以預覽index.htm. 請依下圖執行, 以IE預覽.
出現的結果為
我們現在把預設的內容修改一下. 請把 <title></title> 內的內容index更改為Learning JavaScript.
同時把<body>下的內容更改如下(<h1></h1>內容index更改為JavaScript 學習課程, 第一個<p>
</p>內之<a></a>的文字改為大綱, 第二組<p></p>刪除, Copyright by後文字改為自己名字.)
預覽所得畫面為 (圈起來之處即為更改的內容).
各位會不會覺得編輯器的字型有點小? 我們來改一下. 在工具列點選視窗 > 喜好設定.
在出現的視窗中點選Themes.
我們選擇編輯器的佈景主題同時改字型大小. 各位自行選擇喜愛的佈景主題.
完成後字比較大而且顏色配置也不一樣吧!
PS :
在本課程中我們不會特別去介紹HTML. 如果你需要先學HTML的話, 請參考:
1. HTML Made Simple (我認為是非常好的入門教材)
2. YouTube Videos by John Martens using Aptana. (7 Videos)
https://www.youtube.com/watch?v=Ls2pZXy-e1g&list=PLe_jJL2S-pTMFd7MV6drJzZ8l6-eVWiNV&spfreload=10
3. HTML教學導覽
留言
張貼留言