1 / 49

個人網頁設計

個人網頁設計. 2012.10.2. 網際網路的特性. 便利性 : 時間、空間 時效性 : 互動性 多元性 : 多媒體的應用. 網頁編輯軟體. Adobe Golive Macromedia Dreamweaver SoftPress Freeway Microsoft sharepoint. 平面設計軟體. Adobe photoshop Macromedia fireworks Coreldraw Adobe illstrator Macromedia FreeHand Photoimpact. 動態互動性軟體.

demont
Download Presentation

個人網頁設計

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. 個人網頁設計 2012.10.2

  2. 網際網路的特性 • 便利性:時間、空間 • 時效性: • 互動性 • 多元性:多媒體的應用

  3. 網頁編輯軟體 • Adobe Golive • Macromedia Dreamweaver • SoftPress Freeway • Microsoft sharepoint

  4. 平面設計軟體 • Adobe photoshop • Macromedia fireworks • Coreldraw • Adobe illstrator • Macromedia FreeHand • Photoimpact

  5. 動態互動性軟體 • Macromedia Flash • Macromedia Director Shockware Studio • Adobe Livemotio

  6. 網頁設計原則 • 操作簡便 • 提高互動性 • 降低錯誤率 • 使用者導向

  7. 圖案格式 • Gif:使用256色來壓縮記憶體；適用於標題、搜尋選單、繪圖、漫畫 • JPEG:平衡色調方式壓縮法、支援24-bit全彩；適用在漸層改變顏色和沒有明顯邊緣的攝影作品 • PNG:支援24-bit或32-bit壓縮彩色影像；支援alpha及gamma校正

  8. 網頁的概念 • 提昇公益形象 • 提昇專業形象 • 溝通理念訴求 • 建立行銷機制 • 提高消費者認同 • 打造時尚話題

  9. http://www.sayling.com/index.php?fn=index2 • www.seedlighting.com • www.sunmoonlake.gov.tw • www.bonjourclub.com.tw • www.sumoonlightspring.com.tw • www.landis.com.tw • fun.taipei.gov.tw/

  10. http://www.nict.gov.tw/tc/ • http://www.kisswater.com.tw/index.php • www.tzuchi.org.tw/ • http://www.fgs.org.tw/ • http://www.ddm.org.tw/ • http://www.lativ.com.tw/ • http://www.sony.com.tw/ • http://www.taipei-101.com.tw/MALL/index.aspx

  11. 網頁設計元素 • 開場頁 • 首頁 • 網頁分割 • 網頁背景 • 較小的檔案 • 限制色彩的範圍 • 強化視覺對比 • 功能選鈕 • 動畫 • 音效與影片 • 文字 • 色彩

  12. 網頁編輯工具- sharepoint • 微軟Office 家族的產品: sharepoint • 可以如同文書編輯軟體一般編輯網頁內容。 • sharepoint以上的版本特性: • 完全整合Office使用環境。 • 不需要Web伺服器的支援，直接在硬碟的資料夾建立Web網站，並且執行網頁預覽。 • 提供網站架構的編輯功能建立網站的導覽架構。 • sharepoint提供多樣化的佈景主題和好用的共用邊框，可以快速建立一致化及個人化的網站內容。

  13. 網頁編輯工具-Dreamweaver • Macromedia公司的產品:Dreamweaver。 • 提供視覺化的編輯環境、圖層編排的功能、完全支援Flash和CSS，並且提供JavaScript程式碼功能。

  14. 影像編輯工具-PhotoImpact • 友立公司的影像處理產品:Ulead PhotoImpact。一套功能強大的影像處理工具，提供「百寶箱」影像特效圖庫和濾鏡。 • 針對網頁製作提供元件、背景和按鈕設計師，可以輕鬆建立網頁所需的橫幅廣告圖片、背景、項目符號、按鈕、JavaScript按鈕和水平線等圖片。

  15. 影像編輯工具-PhotoShop • Adobe公司開發的影像處理工具:PhotoShop。 • 是一套相當著名的點陣圖繒製和影像編輯工具，PhotoShop也一樣擁有Web圖片元件，可以快速建立網頁所需的圖片。 • 提供的強大濾鏡特效，不論是黑白或平平無奇的圖片，都可以套用濾鏡特效或轉換成粉臘筆畫、水彩風格等特效。

  16. 動畫編輯工具-Ulead GIF Animator • 友立資訊的PhotoImpact內附的GIF動畫工具:Ulead GIF Animator。 • 提供眾多現成的圖層動畫、視訊特效等，可以輕鬆建立捲動文字、橫幅廣告、色彩和轉場效果等動畫。

  17. 動畫編輯工具-Macromedia Flash • Macromedia公司產品:Flash • 是一套向量圖的電影動畫工具，使用時間軸控制動畫播放，只需安排場景和角色元件，就可以自己當導演，製作電影效果的動畫。 • Flash製作的動畫檔案十分小，非常適合網頁 使用。 • 瀏覽程式有支援Shockwave Plug-in，就可以直接在播放Flash製作的動畫檔。

  18. 網站建立的步驟 • 確認網站的目的 • 資料的收集和整理 • 網站架構的規劃 • 網頁內容的設計 • 發送到Web伺服器 • 網站的更新與維護

  19. 簡介HTML語言 • HTML的英文全名為HyperText Makeup Language，譯為超文件標記語言，用於描述超文件中資料的呈現方式，從控制文字的顏色、大小，到標示資料的種類為圖檔或者聲音...等。其描述的方式是利用一個個的HTML標籤，將欲進行格式控制的資料包夾起來。 <B>位元文化</B>

  20. 認識HTML -簡介HTML • 以HTML語法所撰寫出的檔案稱做HTML文件。HTML文件在儲存時，需儲存為純文字檔，並使用.htm或.html為副檔名。

  21. 1.選取 2.選取 3.原始碼 認識HTML -簡介HTML • 當運用IE瀏覽網頁時，若想要察看目前瀏覽網頁的原始碼，只要執行『檢視功能表/原始碼選項』，即可將目前瀏覽的網頁，開啟在NotePad中，檢視其原始碼。

  22. 認識HTML - HTML的標籤與元件觀念 • HTML控制資料顯示格式的方式，是透過兩個兩個一組的HTML標籤（亦可稱之為標記），將欲控制的文字包夾於中間。每個一組HTML標籤的開頭標籤之語法為『<標籤名稱>』，結尾標籤之語法則為『</標籤名稱>』，其完整語法如下所示： <標籤名稱>欲控制文字</標籤名稱> 舉例來說，下面的HTML敘述，將控制（或稱定義）位元文化這幾個字在瀏覽器顯示時，為一個文字段落。 <P>位元文化</P>

  23. 認識HTML - HTML的標籤與元件觀念 • 元件的觀念 當用一組HTML標籤將一段文字包夾在中間時，這段文字與包夾文字的HTML標籤，將被稱之為一個元件。 <P>位元文化</P>

  24. 認識HTML -HTML的架構觀念 • 在<HTML>標籤所建構的元件中，包含了兩個主要的子元件，這兩個子元件是由<HEAD>標籤與<BODY>標籤所建立，<HEAD>標籤所建立的元件的內容為文件標題，而<BODY>標籤所建立的元件內容為文件主體。 ch2_1.htm檔的內容 001 <HTML> 002 <HEAD> 003 <TITLE>文件標題</TITLE> 004 </HEAD> 005 <BODY> 006 文件主體 007 </BODY> 008 </HTML>

  25. 認識HTML -HTML的架構觀念 • 上述的HTML語法，若以樹狀圖表示，其架構如下圖所示。 • 當在瀏覽器中瀏覽網頁時，畫面如下圖所示。

  26. 認識HTML -HTML的架構觀念 • 當利用HTML標籤定義元件時，定義標籤不可以交錯，否則將造成錯誤。 ch2_2.htm檔的內容 001 <HTML> 002 <HEAD> 003 <TITLE>文件標題</TITLE> 004 <BODY> 005 </HEAD> 006 文件內容 007 </BODY> 008 </HTML> 錯誤！兩個標籤交錯

  27. 如何製作HTML文件 • 示範操作：製作HTML文件，並利用IE瀏覽網頁。 STEP1：開啟記事本 選取

  28. 如何製作HTML文件 • 下圖為完成開啟的空白記事本畫面。

  29. 如何製作HTML文件 STEP2：輸入HTML語法與網頁內容 001 <HTML> 002 <HEAD> 003 <TITLE>文件範例</TITLE> 004 </HEAD> 005 <BODY> 006 HTML 007 </BODY> 008 </HTML>

  30. 如何製作HTML文件 完成的畫面如下：

  31. 2.設定存檔位置 1.點選 3.輸入檔名ch2_5.htm 4.選取存檔類型 5.按下 如何製作HTML文件 STEP3：開啟另存新檔對話盒

  32. 一般工具列：提供與編寫無直接關係的工具按鈕，如開啟、關閉、或列印網頁等等。一般工具列：提供與編寫無直接關係的工具按鈕，如開啟、關閉、或列印網頁等等。 格式工具列：提供設定網頁文字格式的工具按鈕，如設定字體、文字大小、 粗斜體等等。 頁面切換標籤：按這些標籤可以讓你快速地切換到不同的網頁或網站頁。 網頁處理切換標籤：編緝網頁時，可以用這些標籤來切換成以下四種模式： 設計、分割、程式碼、和預覽。 傳輸時間估計與網頁設計大小：由網頁包含的文字與圖片多寡來估算下載所需的時間 (以56K的數據機為準)。若下載時間過長的話，你應該重新整理或分割這張網頁的內容，來縮短下載的時間。你可以選擇適當的網頁設計大小（如800x600）的來安排網頁中的圖片與文字。 工作窗格：視窗右方的藍色區域稱為工作窗格，其中的內容會隨操作而異，主要是用來提供便利的操作連結。 工具列

  33. HTML標籤運用基本觀念- HTML標籤的完整語法 • 每個HTML標籤中，還可以運用一些屬性，控制HTML標籤所建立的元件。這些屬性將置於元件的開始標籤，基本語法如下： <標籤名稱 屬性1="值1" 屬性2="值2" …> 而結束標籤的建立方式則為 </標籤名稱> 在HTML文件中某個元件的完整定義語法如下： <標籤名稱 屬性1="值1" 屬性2="值2" …>元件資料 </標籤名稱>

  34. HTML標籤運用基本觀念- HTML標籤的完整語法 • 語法中，設定各屬性值所使用的『“』可省略。 <標籤名稱 屬性1=值1 屬性2=值2 …>元件 資料</標籤名稱> • 下面的敘述將利用<P>標籤的Align屬性，控制位元文化這三個字所組成的段落，採用置中的方式對齊。 <P Align=Center>位元文化</P>

  35. HTML標籤運用基本觀念-文件註解標籤<!-- --> • 在HTML文件中，可以使用<!---->標籤，撰寫註解文字，其語法如下： <!--註解文字-->

  36. HTML標籤運用基本觀念-文件起始標籤<HTML> • 整個HTML文件可視為由<HTML>標籤所建立的大元件。在這個元件中，還包含了兩個大元件，一是由<HEAD>標籤所建立的文件標題，另一個則是由<BODY>標籤所建立的文件主體，如下所示： ch2_1.htm檔的內容 001 <HTML> 002 <HEAD> 003 <TITLE>文件標題</TITLE> 004 </HEAD> 005 <BODY> 006 文件主體 007 </BODY> 008 </HTML>

  37. HTML標籤運用基本觀念-文件資訊標籤<HEAD> • 由<HEAD>標籤所定義的元件中，並不放置網頁的任何內容，而是放置關於這份HTML文件的資訊。這些資訊大部分是提供索引、辨認或其他應用之使用，如下所示： ch2_1.htm檔的內容 001 <HTML> 002 <HEAD> 003 <TITLE>文件標題</TITLE> 004 </HEAD> 005 <BODY> 006 文件主體 007 </BODY> 008 </HTML>

  38. HTML標籤運用基本觀念- <TITLE>文件標題標籤 • 此標籤使用於<HEAD>標籤中，用於標示此HTML文件的標題名稱與主題內容，將顯示在瀏覽器的標題列中。其語法如下： <TITLE>文件標題文字</TITLE>

  39. HTML標籤運用基本觀念- <BODY>文件主體標籤 • 由<BODY>標籤所建立的元件，為該HTML文件的內容主體，也就是HTML文件的重點所在。 <BODY>標籤的使用語法如下： <BODY>文件主體</BODY>

  40. 選擇工作區配置模式 主功能表 工具列 文件視窗 浮動式版面組合 屬性檢測器

  41. 文件視窗 • 文件視窗是顯示及編輯網頁內容的地方，您可以直接在此輸入網頁內文或者插入圖片。 網頁的標題文字 切換編輯模式 文件顯示∕編輯區域 標籤選取器

  42. 預估網頁下載的時間 網頁檔案的大小（含影像及其它所有元素）以及預估下載時間 擇主功能表的「編輯→偏好設定」指令，再點選偏好設定面版裡的狀態列分類，即可調整連線速率。

  43. sharepoint的基本使用 • sharepoint網頁工具 • 啟動與關閉sharepoint • 建立Web網站 • 開啟存在的Web網站 • 建立全新的網頁 • 匯入網頁檔案 • 預覽網頁內容

  44. Sharepoint的使用介面

  45. Sharepoint的使用介面

  46. 台灣微軟教學參考影片 • http://technet.microsoft.com/zh-tw/gg252521.aspx

  47. 關於架設網站 • 架站的工具軟體 • Joomla! • XOOPS • Drupal • Wordpress • 網站商業化 • http://hosting.url.com.tw/buildup/ • http://www.hihosting.hinet.net/ • http://rs.seed.net.tw/

  48. Joomla • http://www.culturaonline.net/ • http://www.broadwaybaby.com/ • http://www.jazzinjapan.com/ • http://www.unric.org/en/ • Xoops • http://www.crescent.com.tw/ • http://www.empower.org.tw/ • http://163.30.124.160/xoops/

More Related