Transcript 講義教材
個人網頁設計 2012.10.2 網際網路的特性 • • • • 便利性:時間、空間 時效性: 互動性 多元性:多媒體的應用 網頁編輯軟體 • • • • Adobe Golive Macromedia Dreamweaver SoftPress Freeway Microsoft sharepoint 平面設計軟體 • • • • • • Adobe photoshop Macromedia fireworks Coreldraw Adobe illstrator Macromedia FreeHand Photoimpact 動態互動性軟體 • Macromedia Flash • Macromedia Director Shockware Studio • Adobe Livemotio 網頁設計原則 • • • • 操作簡便 提高互動性 降低錯誤率 使用者導向 圖案格式 • Gif:使用256色來壓縮記憶體；適用於標 題、搜尋選單、繪圖、漫畫 • JPEG:平衡色調方式壓縮法、支援24bit全彩；適用在漸層改變顏色和沒有明 顯邊緣的攝影作品 • PNG:支援24-bit或32-bit壓縮彩色影像； 支援alpha及gamma校正 網頁的概念 • • • • • • 提昇公益形象 提昇專業形象 溝通理念訴求 建立行銷機制 提高消費者認同 打造時尚話題 • 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/ • • • • • • • 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 網頁設計元素 • • • • 開場頁 首頁 網頁分割 網頁背景 • • • • • 功能選鈕 動畫 音效與影片 文字 色彩 – 較小的檔案 – 限制色彩的範圍 – 強化視覺對比 網頁編輯工具- sharepoint • 微軟Office 家族的產品: sharepoint • 可以如同文書編輯軟體一般編輯網頁內容。 • sharepoint以上的版本特性: – 完全整合Office使用環境。 – 不需要Web伺服器的支援，直接在硬碟的資料夾建立 Web網站，並且執行網頁預覽。 – 提供網站架構的編輯功能建立網站的導覽架構。 – sharepoint提供多樣化的佈景主題和好用的共用邊框， 可以快速建立一致化及個人化的網站內容。 網頁編輯工具Dreamweaver • Macromedia公司的產品:Dreamweaver。 • 提供視覺化的編輯環境、圖層編排的功 能、完全支援Flash和CSS，並且提供 JavaScript程式碼功能。 影像編輯工具PhotoImpact • 友立公司的影像處理產品:Ulead PhotoImpact。一套功能強大的影像處理 工具，提供「百寶箱」影像特效圖庫和濾 鏡。 • 針對網頁製作提供元件、背景和按鈕設計 師，可以輕鬆建立網頁所需的橫幅廣告圖 片、背景、項目符號、按鈕、JavaScript 按鈕和水平線等圖片。 影像編輯工具-PhotoShop • Adobe公司開發的影像處理工具:PhotoShop。 • 是一套相當著名的點陣圖繒製和影像編輯工具， PhotoShop也一樣擁有Web圖片元件，可以快速 建立網頁所需的圖片。 • 提供的強大濾鏡特效，不論是黑白或平平無奇的 圖片，都可以套用濾鏡特效或轉換成粉臘筆畫、 水彩風格等特效。 動畫編輯工具-Ulead GIF Animator • 友立資訊的PhotoImpact內附的GIF動畫工 具:Ulead GIF Animator。 • 提供眾多現成的圖層動畫、視訊特效等， 可以輕鬆建立捲動文字、橫幅廣告、色彩 和轉場效果等動畫。 動畫編輯工具Macromedia Flash • Macromedia公司產品:Flash • 是一套向量圖的電影動畫工具，使用時間 軸控制動畫播放，只需安排場景和角色元 件，就可以自己當導演，製作電影效果的 動畫。 • Flash製作的動畫檔案十分小，非常適合網頁 使用。 • 瀏覽程式有支援Shockwave Plug-in，就可以直接 在播放Flash製作的動畫檔。 網站建立的步驟 • • • • • • 確認網站的目的 資料的收集和整理 網站架構的規劃 網頁內容的設計 發送到Web伺服器 網站的更新與維護 簡介HTML語言 •HTML的英文全名為HyperText Makeup Language，譯為超文件標記語言，用於 描述超文件中資料的呈現方式，從控制 文字的顏色、大小，到標示資料的種類 為圖檔或者聲音...等。其描述的方式是 利用一個個的HTML標籤，將欲進行格 式控制的資料包夾起來。 <B>位元文化</B> 認識HTML -簡介HTML •以HTML語法所撰寫出的檔案稱做HTML文件。 HTML文件在儲存時，需儲存為純文字檔，並 使用.htm或.html為副檔名。 認識HTML -簡介HTML •當運用IE瀏覽網頁時，若想要察看目前瀏覽網 頁的原始碼，只要執行『檢視功能表/原始碼 選項』，即可將目前瀏覽的網頁，開啟在 NotePad中，檢視其原始碼。 1.選取 2.選取 3.原始碼 認識HTML - HTML的標籤與元件 觀念 •HTML控制資料顯示格式的方式，是透過兩個 兩個一組的HTML標籤（亦可稱之為標記）， 將欲控制的文字包夾於中間。每個一組HTML 標籤的開頭標籤之語法為『<標籤名稱>』，結 尾標籤之語法則為『</標籤名稱>』，其完整語 法如下所示： <標籤名稱>欲控制文字</標籤名稱> 舉例來說，下面的HTML敘述，將控制（或稱 定義）位元文化這幾個字在瀏覽器顯示時，為 一個文字段落。 <P>位元文化</P> 認識HTML - HTML的標籤與元件 觀念 •元件的觀念 當用一組HTML標籤將一段文字包夾在中間時， 這段文字與包夾文字的HTML標籤，將被稱之 為一個元件。 <P>位元文化</P> 認識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> 認識HTML -HTML的架構觀念 •上述的HTML語法，若以樹狀圖表示，其架構 如下圖所示。 HTML HEAD BODY • 當在瀏覽器中瀏覽網頁時，畫面如下圖所示。 認識HTML -HTML的架構觀念 •當利用HTML標籤定義元件時，定義標籤不可 以交錯，否則將造成錯誤。 ch2_2.htm檔的內容 001 002 003 004 005 006 007 008 <HTML> <HEAD> <TITLE>文件標題</TITLE> <BODY> 錯誤！兩個標籤交錯 </HEAD> 文件內容 </BODY> </HTML> 如何製作HTML文件 •示範操作：製作HTML文件，並利用IE瀏覽網 頁。 STEP1：開啟記事本 選取 如何製作HTML文件 • 下圖為完成開啟的空白記事本畫面。 如何製作HTML文件 STEP2：輸入HTML語法與網頁內容 001 <HTML> 002 <HEAD> 003 <TITLE>文件範例</TITLE> 004 </HEAD> 005 <BODY> 006 HTML 007 </BODY> 008 </HTML> 如何製作HTML文件 完成的畫面如下： 如何製作HTML文件 STEP3：開啟另存新檔對話盒 2.設定存檔位置 1.點選 3.輸入檔名ch2_5.htm 4.選取存檔類型 5.按下 工具列 一般工具列：提供與編寫無直接關係的工具按鈕，如開啟、關閉、或列印網 頁等等。 格式工具列：提供設定網頁文字格式的工具按鈕，如設定字體、文字大小、 粗斜體等等。 頁面切換標籤：按這些標籤可以讓你快速地切換到不同的網頁或網站頁。 網頁處理切換標籤：編緝網頁時，可以用這些標籤來切換成以下四種模式： 設計、分割、程式碼、和預覽。 傳輸時間估計與網頁設計大小：由網頁包含的文字與圖片多寡來估算下載所 需的時間 (以56K的數據機為準)。若下載時間過長的話，你應該重新整理或分 割這張網頁的內容，來縮短下載的時間。你可以選擇適當的網頁設計大小（ 如800x600）的來安排網頁中的圖片與文字。 工作窗格：視窗右方的藍色區域稱為工作窗格，其中的內容會隨操作而異， 主要是用來提供便利的操作連結。 HTML標籤運用基本觀念 - HTML標籤的完整語法 •每個HTML標籤中，還可以運用一些屬性，控 制HTML標籤所建立的元件。這些屬性將置於 元件的開始標籤，基本語法如下： <標籤名稱 屬性1="值1" 屬性2="值2" …> 而結束標籤的建立方式則為 </標籤名稱> 在HTML文件中某個元件的完整定義語法如下： <標籤名稱 屬性1="值1" 屬性2="值2" …>元件資料 </標籤名稱> HTML標籤運用基本觀念 - HTML標籤的完整語法 •語法中，設定各屬性值所使用的『“』可省略。 <標籤名稱 屬性1=值1 屬性2=值2 …>元件 資料</標籤名稱> •下面的敘述將利用<P>標籤的Align屬性，控制 位元文化這三個字所組成的段落，採用置中的 方式對齊。 <P Align=Center>位元文化</P> HTML標籤運用基本觀念 -文件註解標籤<!-- --> •在HTML文件中，可以使用<!---->標籤， 撰寫註解文字，其語法如下： <!--註解文字--> 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> HTML標籤運用基本觀念 -文件資訊標籤<HEAD> • 由<HEAD>標籤所定義的元件中，並不放置網頁的 任何內容，而是放置關於這份HTML文件的資訊。 這些資訊大部分是提供索引、辨認或其他應用之使 用，如下所示： ch2_1.htm檔的內容 001 <HTML> 002 <HEAD> 003 <TITLE>文件標題</TITLE> 004 </HEAD> 005 <BODY> 006 文件主體 007 </BODY> 008 </HTML> HTML標籤運用基本觀念 - <TITLE>文件標題標籤 •此標籤使用於<HEAD>標籤中，用於標示此 HTML文件的標題名稱與主題內容，將顯示在 瀏覽器的標題列中。其語法如下： <TITLE>文件標題文字</TITLE> HTML標籤運用基本觀念 - <BODY>文件主體標籤 •由<BODY>標籤所建立的元件，為該HTML文 件的內容主體，也就是HTML文件的重點所在。 <BODY>標籤的使用語法如下： <BODY>文件主體</BODY> 選擇工作區配置模式 主功能表 工具列 文件視窗 浮動式版面 組合 屬性檢測器 文件視窗 • 文件視窗是顯示及編輯網頁內容的地方，您 可以直接在此輸入網頁內文或者插入圖片。 切換編輯模式 網頁的標題文字 文件顯示∕編輯區域 標籤選取器 預估網頁下載的時間 網頁檔案的大小（含影像及其 它所有元素）以及預估下載時 間 擇主功能表的「編輯→偏好設 定」指令，再點選偏好設定面 版裡的狀態列分類，即可調整 連線速率。 sharepoint的基本使用 • • • • • • • sharepoint網頁工具 啟動與關閉sharepoint 建立Web網站 開啟存在的Web網站 建立全新的網頁 匯入網頁檔案 預覽網頁內容 Sharepoint的使用介面 Sharepoint的使用介面 台灣微軟教學參考影片 • http://technet.microsoft.com/zhtw/gg252521.aspx 關於架設網站 • • • • • • • • • 架站的工具軟體 Joomla! XOOPS Drupal Wordpress 網站商業化 http://hosting.url.com.tw/buildup/ http://www.hihosting.hinet.net/ http://rs.seed.net.tw/ • • • • • • • • • 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/