slide1
Download
Skip this Video
Download Presentation
個人網頁設計

Loading in 2 Seconds...

play fullscreen
1 / 49

個人網頁設計 - PowerPoint PPT Presentation


  • 132 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 個人網頁設計' - demont


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2
網際網路的特性
  • 便利性:時間、空間
  • 時效性:
  • 互動性
  • 多元性:多媒體的應用
slide3
網頁編輯軟體
  • Adobe Golive
  • Macromedia Dreamweaver
  • SoftPress Freeway
  • Microsoft sharepoint
slide4
平面設計軟體
  • Adobe photoshop
  • Macromedia fireworks
  • Coreldraw
  • Adobe illstrator
  • Macromedia FreeHand
  • Photoimpact
slide5
動態互動性軟體
  • Macromedia Flash
  • Macromedia Director Shockware Studio
  • Adobe Livemotio
slide6
網頁設計原則
  • 操作簡便
  • 提高互動性
  • 降低錯誤率
  • 使用者導向
slide7
圖案格式
  • Gif:使用256色來壓縮記憶體;適用於標題、搜尋選單、繪圖、漫畫
  • JPEG:平衡色調方式壓縮法、支援24-bit全彩;適用在漸層改變顏色和沒有明顯邊緣的攝影作品
  • PNG:支援24-bit或32-bit壓縮彩色影像;支援alpha及gamma校正
slide8
網頁的概念
  • 提昇公益形象
  • 提昇專業形象
  • 溝通理念訴求
  • 建立行銷機制
  • 提高消費者認同
  • 打造時尚話題
slide9
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/
slide10

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
slide11
網頁設計元素
  • 開場頁
  • 首頁
  • 網頁分割
  • 網頁背景
    • 較小的檔案
    • 限制色彩的範圍
    • 強化視覺對比
  • 功能選鈕
  • 動畫
  • 音效與影片
  • 文字
  • 色彩
sharepoint
網頁編輯工具- sharepoint
  • 微軟Office 家族的產品: sharepoint
  • 可以如同文書編輯軟體一般編輯網頁內容。
  • sharepoint以上的版本特性:
    • 完全整合Office使用環境。
    • 不需要Web伺服器的支援,直接在硬碟的資料夾建立Web網站,並且執行網頁預覽。
    • 提供網站架構的編輯功能建立網站的導覽架構。
    • sharepoint提供多樣化的佈景主題和好用的共用邊框,可以快速建立一致化及個人化的網站內容。
dreamweaver
網頁編輯工具-Dreamweaver
  • Macromedia公司的產品:Dreamweaver。
  • 提供視覺化的編輯環境、圖層編排的功能、完全支援Flash和CSS,並且提供JavaScript程式碼功能。
photoimpact
影像編輯工具-PhotoImpact
  • 友立公司的影像處理產品:Ulead PhotoImpact。一套功能強大的影像處理工具,提供「百寶箱」影像特效圖庫和濾鏡。
  • 針對網頁製作提供元件、背景和按鈕設計師,可以輕鬆建立網頁所需的橫幅廣告圖片、背景、項目符號、按鈕、JavaScript按鈕和水平線等圖片。
photoshop
影像編輯工具-PhotoShop
  • Adobe公司開發的影像處理工具:PhotoShop。
  • 是一套相當著名的點陣圖繒製和影像編輯工具,PhotoShop也一樣擁有Web圖片元件,可以快速建立網頁所需的圖片。
  • 提供的強大濾鏡特效,不論是黑白或平平無奇的圖片,都可以套用濾鏡特效或轉換成粉臘筆畫、水彩風格等特效。
ulead gif animator
動畫編輯工具-Ulead GIF Animator
  • 友立資訊的PhotoImpact內附的GIF動畫工具:Ulead GIF Animator。
  • 提供眾多現成的圖層動畫、視訊特效等,可以輕鬆建立捲動文字、橫幅廣告、色彩和轉場效果等動畫。
macromedia flash
動畫編輯工具-Macromedia Flash
  • Macromedia公司產品:Flash
  • 是一套向量圖的電影動畫工具,使用時間軸控制動畫播放,只需安排場景和角色元件,就可以自己當導演,製作電影效果的動畫。
  • Flash製作的動畫檔案十分小,非常適合網頁

使用。

  • 瀏覽程式有支援Shockwave Plug-in,就可以直接在播放Flash製作的動畫檔。
slide18
網站建立的步驟
  • 確認網站的目的
  • 資料的收集和整理
  • 網站架構的規劃
  • 網頁內容的設計
  • 發送到Web伺服器
  • 網站的更新與維護
slide19
簡介HTML語言
  • HTML的英文全名為HyperText Makeup Language,譯為超文件標記語言,用於描述超文件中資料的呈現方式,從控制文字的顏色、大小,到標示資料的種類為圖檔或者聲音...等。其描述的方式是利用一個個的HTML標籤,將欲進行格式控制的資料包夾起來。

<B>位元文化</B>

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

1.選取

2.選取

3.原始碼

認識HTML -簡介HTML
  • 當運用IE瀏覽網頁時,若想要察看目前瀏覽網頁的原始碼,只要執行『檢視功能表/原始碼選項』,即可將目前瀏覽的網頁,開啟在NotePad中,檢視其原始碼。
html html2
認識HTML - HTML的標籤與元件觀念
  • HTML控制資料顯示格式的方式,是透過兩個兩個一組的HTML標籤(亦可稱之為標記),將欲控制的文字包夾於中間。每個一組HTML標籤的開頭標籤之語法為『<標籤名稱>』,結尾標籤之語法則為『</標籤名稱>』,其完整語法如下所示:

<標籤名稱>欲控制文字</標籤名稱>

舉例來說,下面的HTML敘述,將控制(或稱定義)位元文化這幾個字在瀏覽器顯示時,為一個文字段落。

<P>位元文化</P>

html html3
認識HTML - HTML的標籤與元件觀念
  • 元件的觀念

當用一組HTML標籤將一段文字包夾在中間時,這段文字與包夾文字的HTML標籤,將被稱之為一個元件。

<P>位元文化</P>

html html4
認識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 html5
認識HTML -HTML的架構觀念
  • 上述的HTML語法,若以樹狀圖表示,其架構如下圖所示。
  • 當在瀏覽器中瀏覽網頁時,畫面如下圖所示。
html html6
認識HTML -HTML的架構觀念
  • 當利用HTML標籤定義元件時,定義標籤不可以交錯,否則將造成錯誤。

ch2_2.htm檔的內容

001 <HTML>

002 <HEAD>

003 <TITLE>文件標題</TITLE>

004 <BODY>

005 </HEAD>

006 文件內容

007 </BODY>

008 </HTML>

錯誤!兩個標籤交錯

slide27
如何製作HTML文件
  • 示範操作:製作HTML文件,並利用IE瀏覽網頁。

STEP1:開啟記事本

選取

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

STEP2:輸入HTML語法與網頁內容

001 <HTML>

002 <HEAD>

003 <TITLE>文件範例</TITLE>

004 </HEAD>

005 <BODY>

006 HTML

007 </BODY>

008 </HTML>

slide30
如何製作HTML文件

完成的畫面如下:

slide31

2.設定存檔位置

1.點選

3.輸入檔名ch2_5.htm

4.選取存檔類型

5.按下

如何製作HTML文件

STEP3:開啟另存新檔對話盒

slide32

一般工具列:提供與編寫無直接關係的工具按鈕,如開啟、關閉、或列印網頁等等。一般工具列:提供與編寫無直接關係的工具按鈕,如開啟、關閉、或列印網頁等等。

格式工具列:提供設定網頁文字格式的工具按鈕,如設定字體、文字大小、

粗斜體等等。

頁面切換標籤:按這些標籤可以讓你快速地切換到不同的網頁或網站頁。

網頁處理切換標籤:編緝網頁時,可以用這些標籤來切換成以下四種模式:

設計、分割、程式碼、和預覽。

傳輸時間估計與網頁設計大小:由網頁包含的文字與圖片多寡來估算下載所需的時間 (以56K的數據機為準)。若下載時間過長的話,你應該重新整理或分割這張網頁的內容,來縮短下載的時間。你可以選擇適當的網頁設計大小(如800x600)的來安排網頁中的圖片與文字。

工作窗格:視窗右方的藍色區域稱為工作窗格,其中的內容會隨操作而異,主要是用來提供便利的操作連結。

工具列

html html7
HTML標籤運用基本觀念- HTML標籤的完整語法
  • 每個HTML標籤中,還可以運用一些屬性,控制HTML標籤所建立的元件。這些屬性將置於元件的開始標籤,基本語法如下:

<標籤名稱 屬性1="值1" 屬性2="值2" …>

而結束標籤的建立方式則為

</標籤名稱>

在HTML文件中某個元件的完整定義語法如下:

<標籤名稱 屬性1="值1" 屬性2="值2" …>元件資料

</標籤名稱>

html html8
HTML標籤運用基本觀念- HTML標籤的完整語法
  • 語法中,設定各屬性值所使用的『“』可省略。

<標籤名稱 屬性1=值1 屬性2=值2 …>元件 資料</標籤名稱>

  • 下面的敘述將利用<P>標籤的Align屬性,控制位元文化這三個字所組成的段落,採用置中的方式對齊。

<P Align=Center>位元文化</P>

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

<!--註解文字-->

html html9
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
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
HTML標籤運用基本觀念- <TITLE>文件標題標籤
  • 此標籤使用於<HEAD>標籤中,用於標示此HTML文件的標題名稱與主題內容,將顯示在瀏覽器的標題列中。其語法如下:

<TITLE>文件標題文字</TITLE>

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

<BODY>文件主體</BODY>

slide40

選擇工作區配置模式

主功能表

工具列

文件視窗

浮動式版面組合

屬性檢測器

slide41
文件視窗
  • 文件視窗是顯示及編輯網頁內容的地方,您可以直接在此輸入網頁內文或者插入圖片。

網頁的標題文字

切換編輯模式

文件顯示∕編輯區域

標籤選取器

slide42
預估網頁下載的時間

網頁檔案的大小(含影像及其它所有元素)以及預估下載時間

擇主功能表的「編輯→偏好設定」指令,再點選偏好設定面版裡的狀態列分類,即可調整連線速率。

sharepoint1
sharepoint的基本使用
  • sharepoint網頁工具
  • 啟動與關閉sharepoint
  • 建立Web網站
  • 開啟存在的Web網站
  • 建立全新的網頁
  • 匯入網頁檔案
  • 預覽網頁內容
slide46
台灣微軟教學參考影片
  • http://technet.microsoft.com/zh-tw/gg252521.aspx
slide48
關於架設網站
  • 架站的工具軟體
  • Joomla!
  • XOOPS
  • Drupal
  • Wordpress
  • 網站商業化
  • http://hosting.url.com.tw/buildup/
  • http://www.hihosting.hinet.net/
  • http://rs.seed.net.tw/
slide49

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/
ad