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

2934149
網際網路的特性

  • 便利性:時間、空間

  • 時效性:

  • 互動性

  • 多元性:多媒體的應用


2934149
網頁編輯軟體

  • Adobe Golive

  • Macromedia Dreamweaver

  • SoftPress Freeway

  • Microsoft sharepoint


2934149
平面設計軟體

  • Adobe photoshop

  • Macromedia fireworks

  • Coreldraw

  • Adobe illstrator

  • Macromedia FreeHand

  • Photoimpact


2934149
動態互動性軟體

  • Macromedia Flash

  • Macromedia Director Shockware Studio

  • Adobe Livemotio


2934149
網頁設計原則

  • 操作簡便

  • 提高互動性

  • 降低錯誤率

  • 使用者導向


2934149
圖案格式

  • Gif:使用256色來壓縮記憶體;適用於標題、搜尋選單、繪圖、漫畫

  • JPEG:平衡色調方式壓縮法、支援24-bit全彩;適用在漸層改變顏色和沒有明顯邊緣的攝影作品

  • PNG:支援24-bit或32-bit壓縮彩色影像;支援alpha及gamma校正


2934149
網頁的概念

  • 提昇公益形象

  • 提昇專業形象

  • 溝通理念訴求

  • 建立行銷機制

  • 提高消費者認同

  • 打造時尚話題


2934149


2934149

  • 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


2934149
網頁設計元素

  • 開場頁

  • 首頁

  • 網頁分割

  • 網頁背景

    • 較小的檔案

    • 限制色彩的範圍

    • 強化視覺對比

  • 功能選鈕

  • 動畫

  • 音效與影片

  • 文字

  • 色彩


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製作的動畫檔。


2934149
網站建立的步驟

  • 確認網站的目的

  • 資料的收集和整理

  • 網站架構的規劃

  • 網頁內容的設計

  • 發送到Web伺服器

  • 網站的更新與維護


2934149
簡介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>

錯誤!兩個標籤交錯


2934149
如何製作HTML文件

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

    STEP1:開啟記事本

選取


2934149
如何製作HTML文件

  • 下圖為完成開啟的空白記事本畫面。


2934149
如何製作HTML文件

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

001 <HTML>

002 <HEAD>

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

004 </HEAD>

005 <BODY>

006 HTML

007 </BODY>

008 </HTML>


2934149
如何製作HTML文件

完成的畫面如下:


2934149

2.設定存檔位置

1.點選

3.輸入檔名ch2_5.htm

4.選取存檔類型

5.按下

如何製作HTML文件

STEP3:開啟另存新檔對話盒


2934149

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

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

粗斜體等等。

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

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

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

傳輸時間估計與網頁設計大小:由網頁包含的文字與圖片多寡來估算下載所需的時間 (以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>


2934149
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>


2934149

選擇工作區配置模式一般工具列:提供與編寫無直接關係的工具按鈕,如開啟、關閉、或列印網頁等等。

主功能表

工具列

文件視窗

浮動式版面組合

屬性檢測器


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

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

網頁的標題文字

切換編輯模式

文件顯示∕編輯區域

標籤選取器


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

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

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


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

  • sharepoint網頁工具

  • 啟動與關閉sharepoint

  • 建立Web網站

  • 開啟存在的Web網站

  • 建立全新的網頁

  • 匯入網頁檔案

  • 預覽網頁內容


2934149

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


2934149

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


2934149
台灣微軟教學參考影片一般工具列:提供與編寫無直接關係的工具按鈕,如開啟、關閉、或列印網頁等等。

  • http://technet.microsoft.com/zh-tw/gg252521.aspx


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

  • 架站的工具軟體

  • Joomla!

  • XOOPS

  • Drupal

  • Wordpress

  • 網站商業化

  • http://hosting.url.com.tw/buildup/

  • http://www.hihosting.hinet.net/

  • http://rs.seed.net.tw/


2934149

  • 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