2011年4月30日 星期六

dreamweaver教學_頁碼(圓角背景圖)

示範使用css設定,搭配項目清單(ul、li)結構,製作圓角背景的頁碼範例。包含滑鼠移入背景圖更換的效果。

dreamweaver教學_頁碼(背景圖) from joyhsu on Vimeo.

dreamweaver教學_頁碼(加上超連結)

本篇接續上一篇,替頁碼加上超連結,以及滑鼠移入變換效果。

dreamweaver教學_頁碼(加上超連結) from joyhsu on Vimeo.

2011年4月12日 星期二

dreamweaver教學_調整儲存格屬性

示範如何使用屬性面板調整儲存格屬性。

dreamweaver教學_調整儲存格屬性 from joyhsu on Vimeo.

dreamweaver教學_儲存格調整與分割合併

示範如何調整儲存格寬度、高度以及如何將儲存格分割與合併

dreamweaver教學_儲存格調整與分割合併 from joyhsu on Vimeo.

dreamweaver教學_插入表格

說明如何新增表格,以及調整表格屬性。

dreamweaver教學_插入表格 from joyhsu on Vimeo.

dreamweaver教學_圖片css設定(二)

說明如何使用css設定外框線、邊距、內距,並利用內距+背景色+外框線替圖片加上雙色外框

dreamweaver教學_圖片css設定(二) from joyhsu on Vimeo.

dreamweaver教學_圖片css設定(一)

說明如何使用css設定出文繞圖的效果

dreamweaver教學_圖片css設定(一) from joyhsu on Vimeo.

dreamweaver教學_影像地圖(二)

說明如何調整影像地圖區域的形狀、位置,以及如何設定影像地圖的連結

dreamweaver教學_影像地圖(二) from joyhsu on Vimeo.

dreamweaver教學_影像地圖(一)

說明如何再圖片上面設定影像地圖的連結區域

dreamweaver教學_影像地圖(一) from joyhsu on Vimeo.

dreamweaver教學_圖片屬性說明(二)

dreamweaver教學_圖片屬性說明(二) from joyhsu on Vimeo.


說明圖片屬性設定,包含垂直距離、水平距離、邊框、對齊。

dreamweaver教學_圖片屬性說明(一)

說明圖片屬性設定,包含圖片寬、高、圖片替換、圖片連結、圖片替代文字的設定。以及如何在瀏覽器預覽結果。

dreamweaver教學_圖片屬性說明(一) from joyhsu on Vimeo.

dreamweaver教學_插入圖片

dreamweaver教學_插入圖片 from joyhsu on Vimeo.


示範如何使用以下兩種方式插入圖片
方法一:「插入>影像」
方法二:從「檔案」面板拖曳圖片

2011年4月5日 星期二

dreamweaver教學_新增css樣式

本影片以文字段落,說明如何用標籤的方式新增css樣式。

dreamweaver教學_新增css樣式 from joyhsu on Vimeo.

dreamweaver教學_編輯既有css樣式

本網頁示範使用「頁面屬性」設定標題樣式,並利用css面板編輯已經設定的樣式內容。

dreamweaver教學_編輯既有css樣式 from joyhsu on Vimeo.

dreamweaver教學_網站內部頁面超連結設定

本影片示範如何利用「指向檔案」搭配「檔案」面板,設定網站內部頁面連結

dreamweaver教學_網站內部頁面超連結設定 from joyhsu on Vimeo.

dreamweaver教學_文字屬性設定

本影片示範文字屬性中,下列項目設定:
1.粗體、斜體設定
2.項目清單、編號清單設定

dreamweaver教學_文字屬性設定 from joyhsu on Vimeo.

dreamweaver教學_文字超連結設定

本影片示範外部超連結設定

dreamweaver教學_文字超連結設定 from joyhsu on Vimeo.

dreamweaver教學_輸入文字與文字屬性調整

開新檔案之後,就可以開始製作網頁了。本影片從文字設定開始說明,示範以下三個項目:
1.輸入文字
2.文字屬性(段落、標題)調整
3.使用「頁面屬性」設定標題樣式

dreamweaver教學_輸入文字與文字屬性調整 from joyhsu on Vimeo.

dreamweaver教學_開新檔案與存檔

做網頁時,由於插入的圖片、影片等是使用相對路徑做描述,因此網頁本身需要先存檔,路徑描述才不會有問題,因此建議做網頁的時候,一開始開新檔案後就先存檔。

本影片示範如何開新檔案與存檔。

dreamweaver教學_開新檔案與存檔 from joyhsu on Vimeo.

dreamweaver教學_定義網站

在開始製作網站之前,建議先定義網站,這樣之後要使用素材、設定連結、開啟舊檔都會比較方便。本影片示範如何使用dreamweaver定義網站。

dreamweaver教學_定義網站 from joyhsu on Vimeo.

dreamweaver教學_素材整理

網頁製作流程
一、資料整理:將要使用的圖片、影片、音樂整理到同一個資料夾
二、定義網站:從Dreamweaver的「檔案」面板定義網站
三、製作網頁:開新檔案,開始製作網頁,製作時隨時存檔。

這影片示範如何進行網頁設計的資料整理。

dreamweaver教學_素材整理 from joyhsu on Vimeo.