講義教材

Report
個人網頁設計
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語法,若以樹狀圖表示,其架構
如下圖所示。
HTM L
HE A D
B ODY
• 當在瀏覽器中瀏覽網頁時,畫面如下圖所示。
認識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/

similar documents