1 / 33

Home page 設計與 C++ 開發環境

Home page 設計與 C++ 開發環境. Bo- Zong Wu ( 吳柏宗 ) Visual Communications Laboratory Department of Communications Engineering National Central University. Home page 設計與 C++ 開發環境. 什麼是網頁 ?. 網頁就是用 HTML 語法，將影片，圖片，音樂等串連起來，顯示在瀏覽器上的文字檔. Home page 設計. 可使用軟體 : 記事本 Word FrontPage Dreamweaver …..

moswen
Download Presentation

Home page 設計與 C++ 開發環境

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Home page設計與C++開發環境 Bo-Zong Wu (吳柏宗)Visual Communications LaboratoryDepartment of Communications EngineeringNational Central University Home page設計與C++開發環境

  2. 什麼是網頁? • 網頁就是用HTML語法，將影片，圖片，音樂等串連起來，顯示在瀏覽器上的文字檔

  3. Home page設計 • 可使用軟體: • 記事本 • Word • FrontPage • Dreamweaver • ….. • 使用免費軟體NUV來寫網頁 http://www.moztw.org/nvu/

  4. NUV介面

  5. 使用nvu撰寫網頁(1/14) • 開一個新資料夾(名稱為homepage)，專門放網頁資料用 • 記得，一切做網頁所需要的檔案(網頁、圖片和音樂等記得到方到這個資料夾內)

  6. 使用nvu撰寫網頁(2/14) • 開啟NVU後，在左邊的站台管理員找到編輯網站，按下去 • 在網站名稱當中打入自己的網站名稱 • 在發佈網址中找到剛剛建立的homepage資料夾 • 然後按下「新網站」 2. 1. 4. 3. 5.

  7. 使用nvu撰寫網頁(3/14) • 我們已經建立好一個網站，接下來要製作網站的首頁。 • 記住，關於網頁的資料一定要放在同資料夾下 網站的資料都在這裏面 按下十字可以展開觀看網站內容

  8. 使用nvu撰寫網頁(4/14) • 在編輯每一頁前先做此步驟，才不會出現亂碼 2.將紅框框中的程式碼刪掉， 不然中文部分會變成亂碼 1.先切換到檢視原始碼的標籤

  9. 使用nvu撰寫網頁(5/14) • 回到「一般」的檢視模式，開始編寫網頁內容 • 更改字型大小，顏色。

  10. 使用nvu撰寫網頁(6/14) • 在做其他動作(ex.超連結)前先儲存網頁 1.檢查是否存在homepage資料夾中 2.首頁的檔名請設為「index.html」

  11. 使用nvu撰寫網頁(7/14) • 加入圖片 直接將圖片拖曳到頁面中

  12. nvu撰寫網頁(8/14)

  13. nvu撰寫網頁(9/14) 調整表格寬度 調整表格寬高度 • 使用「表格」來排版網頁-可以精確的排版，讓你的網頁在不同瀏覽器中顯示的較一致。 選取合併兩個以上的儲存隔

  14. 使用nvu撰寫網頁(10/14) • 表格的框線很醜～讓他消失 • 在表格上點兩下，或者按右鍵->表格屬性 1.選擇表格標籤 將框線寬度設為零

  15. nvu撰寫網頁(11/14) • 建立超連結 • 先新增好一張要被連結的網頁（drama.html） 在要建立超連結的文字框起來 按右鍵，選擇建立連結

  16. nvu撰寫網頁(12/14) • 在”連結到”這裡方找到要連結的網頁。 選取要連結的網頁

  17. nvu撰寫網頁(13/14) • 字變成藍色還多了底線，表示超連結加入成功

  18. nvu撰寫網頁(14/14) • 稍微美化一下 格式->頁面文字顏色以及背景顏色 右鍵->表格或儲存格背景顏色

  19. 完成 • 完成的網頁

  20. 如果要更進一步… • 學習Dreamweaver或其他更進階的網頁編寫軟體 • XHTML，CSS，XML… • 資料庫方面：SQL… • 美感，Photoshop…

  21. 發佈你的網頁(1/3) • 使用學校的免費空間 • 中央計算機中心服務窗口網路服務 Mail新生啟動帳號

  22. 發佈你的網頁(2/3) • 打開IE • 在網址欄輸入： • ftp://學號:密碼@sparc11.cc.ncu.edu.tw • 建立public_html資料夾 • 將存放網頁資料夾內的所有東西都丟到public_html資料夾內

  23. 發佈你的網頁(3/3) • 蝦米～！！！我的網頁呢？ • 如果出現這畫面時，請回到剛剛上傳的地方，將index.htm改成index.html

  24. C++開發環境介紹 • 免費的c++編譯程式： • Dev c++：小巧，方便 • Visual c++ 2008 express：支援.net開發平台，可以輕鬆的寫視窗圖形化介面

  25. 第一個C++程式 #include "iostream" using namespace std; int main() { cout<<"hello c++\n"; system("pause"); return 0; }

  26. 使用dev c++編譯 • 安裝dev c++很簡單，“下一步”按到底就可以了。 按這個按鈕開啟一個新檔案

  27. 編譯並且執行程式 • 開啟dec v++，然後複製第26頁的程式碼 • 程式寫完後按F9，先將程式存檔 • 存好檔後，devc++會幫你的程式做編譯的動作，然後將結果show出來

  28. 使用visual C++ 2008 express • 下載頁面http://www.microsoft.com/express/download/ 選擇好語言後按download下載

  29. 使用visual C++ 2008 express • 開啟新專案 選win32主控台應用程式 選擇Win32 在一開始 建立->專案 為自己的專案取個名稱，然後按確定

  30. 使用visual C++ 2008 express • 保留第一行程式碼:#include “stdafx.h” • 將其他程式碼用26頁的程式碼取代，如下圖

  31. 使用visual C++ 2008 express • 按下F5

  32. Homework • 製作個人網頁 • 頁面1：姓名，學號，生日，興趣，星座 • 頁面2：自我介紹& 人生目標 • 其他三個同學網頁的連結 • 其它連結 • 繳交時間： • 下禮拜實習課

  33. 其他的殺必死 • 助教的email在http://140.115.156.251/vclab中可以找到，有問題可以盡量寫信來問。 • 社團之夜：9/22號大草坪，多去看看參加些社團玩玩。 • 多去宿舍版(dorm)，或ptt中壢版看看，中壢好玩、好吃的都在上面。 • 學校首頁－portal入口，裡面有很多資源可以利用。

More Related