熱門: 手機教學 | 文書法寶 | 影片剪輯 | 廣告DM設計 | 電腦新手 | 動手做網站  線上學習人數:

Dreamweaver 8教學 初階網頁製作技巧課程 免費線上看

觀賞人次:13055人次評分:0分

講師介紹

講師:王老師

王老師擁有17年的教學經驗,教學經驗豐富,上課生動活潑,目前大約教授16000名以上的學生,有多張ACA國際認證,目前任職於企業資訊顧問一職。

  • 課程介紹(展開/收起)

章節目錄(點取標題)

01.Dreamweaver 8初階~網頁製作技巧46分35秒

01-01啟動Dreamweaver8與調整偏好設定選項 03分31秒

01-02開始建立我們的網站:步驟一建立網站資料夾 02分37秒

01-03開始建立我們的網站:步驟二建置一個新網站 04分06秒

01-04開始建立我們的網站:步驟三指定圖片資料夾以及完成設定後的修改方式 01分53秒

01-05動手新增我們網站內的網頁檔案 07分51秒

01-06將index設成首頁,以及檢視我們建立好的網頁檔案 01分45秒

01-07網頁檔案的開啟與關閉,以及網頁檔案未儲存的符號為何 03分52秒

01-08將『插入』工具列切換顯示成標籤模式 02分44秒

01-09儲存我們目前的版面環境 02分12秒

01-10『F4』與『F12』常用快速鍵的操作說明 02分03秒

01-11三種編輯檢視的切換與介紹 02分29秒

01-12狀態列上的工具介紹 03分47秒

01-13標題的用處與顯示位置 01分24秒

01-14文件工具列的顯示與隱藏方式 01分38秒

01-15『視覺輔助』功能的開啟與隱藏 03分17秒

01-16網站的關閉與開啟操作 01分26秒

02.用Fireworks設計網頁版型53分26秒

02-01啟動Fireowrks設計版型 04分06秒

02-02首先畫上一個與版面大小相同的矩形,並且加上材質填充 02分49秒

02-03將圖層鎖住,接著再畫一個新的矩形 05分21秒

02-04調整矩形的圓弧角 01分15秒

02-05在畫一個內矩形,並用瀏覽器檢視看看 03分51秒

02-06最後在畫上一個白色的內矩形,並加上外框 02分08秒

02-07再改變背景的顏色與紋路 01分47秒

02-08在版型上加上文字 06分20秒

02-09匯入小圖示到版面中的方式,並準備做按鈕 03分50秒

02-10調整匯入後的小圖示,讓位置對齊 01分38秒

02-11運用路徑物件轉成選取的方式,將小圖示套用遮色片 05分44秒

02-12將主要的圓角矩形框加上陰影,並且再製一個影格 02分35秒

02-13在影格2上,加入按鈕文字 01分51秒

02-14將按鈕加上內光暈,並且在分割後,使用『增加簡易變換影像的行為』 03分48秒

02-15開始分割版面,這是為了將來匯入到Dreamweaver中用的 04分18秒

02-16將最佳化格式改成PNG8的格式 02分05秒

03.將版型匯入Dreamweaver42分25秒

03-01將Fireworks做好的版型網頁匯入到我們的網站Dreamweaver中 05分07秒

03-02再將Fireworks HTML插入到我們的空白網頁中 03分09秒

03-03在瀏覽網頁時,關閉一直出現的警告訊息,這樣網頁編輯才會不受影響 02分33秒

03-04將網頁版型圖片變成背景,這樣才能輸入文字或圖片 03分40秒

03-05將Firewoks版型表格置中對齊 02分50秒

03-06將上邊界與背景顏色作調整 01分56秒

03-07回到Fireworks中製作我們的背景 05分20秒

03-08對於不規則的背景,我們要用這種方式處理... 02分10秒

03-09將製作好的背景,設定到網頁中 01分18秒

03-10接著要在我們的版型網頁中,插入一個大表格,這樣才能正確的放入圖文 03分24秒

03-11分割我們的儲存格,並且調整大小 03分18秒

03-12在左右兩邊插入新的儲存表格 03分41秒

03-13最後再插入網頁底下的表格 02分49秒

03-14表格的上下要如何移動? 01分10秒

04.表格按鈕選單及超連結1小時29分55秒

04-01調整網頁按鈕的連結目標頁面 02分08秒

04-02練習輸入直桿文字,與文字超連結的建立 02分49秒

04-03插入影像預留位置前的準備動作,先插入儲存格 03分41秒

04-04插入影像預留位置物件 02分39秒

04-05在網頁中插入內建的FLASH按鈕 06分25秒

04-06當我們插入第二個FLASH按鈕時,我們要插入表格 02分01秒

04-07FLASH文字的插入練習 03分54秒

04-08用Fireworks製作按鈕圖示 06分40秒

04-09將製作好的按鈕,儲存到網站的影像資料夾內 02分59秒

04-10插入『滑鼠變換影像』按鈕 02分24秒

04-11套用Fireworks的樣式庫來製作按鈕 05分08秒

04-12開始製作『彈出式選單』,先製作一個按鈕圖示 04分55秒

04-13接著使用『行為』中的『顯示彈出式選單』,開始依序輸入連結網頁 05分21秒

04-14完成彈出式選單的製作與測試 03分11秒

04-15修改與移除彈出式選單的方式 01分12秒

04-16製作『跳頁選單』這是可節省超連結空間的按鈕 03分39秒

04-17移動與修改跳頁選單的方式 01分06秒

04-18插入有註解的超連結文字 02分58秒

04-19插入水平線,水平線具有讓網頁產生層次感的作用 03分07秒

04-20將水平線加上色彩,並且讓同學暸解色碼的意義 07分34秒

04-21電子郵件文字連結的建立 02分09秒

04-22插入E-mail超連結動畫 02分07秒

04-23插入網頁『更新日期』功能 02分23秒

04-24在網頁中,貼上下載的javascript程式語法 04分23秒

04-25如何搬移插入的javascript程式語法 01分17秒

04-26如何快速的移除插入的Javascript程式語法 03分45秒

05.JavaScript與CSS語法36分47秒

05-01在插入CSS樣式前,我們先複製一段文章並貼到表格裡 01分53秒

05-02開始新增一個CSS樣式吧! 02分29秒

05-03製作完成第一個CSS樣式 02分56秒

05-04套用與取消套用我們的第一個CSS樣式表 01分13秒

05-05如何修改我們的CSS樣式表? 01分33秒

05-06將CSS樣式加入到BODY標籤上 03分21秒

05-07修改BODY內的CSS樣式表 02分11秒

05-08讓郵件超連結自動加上郵件主旨的方式 02分25秒

05-09製作「回到上一頁」超連結javascript語法 03分51秒

05-10插入命名錨點以及與超連結的搭配 02分15秒

05-11用手動的方式讓文字超連結加上註解 02分16秒

05-12增加去除超連結底線的CSS樣式 01分44秒

05-13進入程式碼檢視,修改CSS語法加入hand手指樣式 03分57秒

05-14自己增加一個讓文字超連結自動出現的CSS語法 04分43秒

06.樣版、標題圖片及入口首頁51分58秒

06-01將網頁儲存成「樣版網頁」時的錯誤訊息處理方式 02分18秒

06-02將網頁儲存成「樣版網頁」時的錯誤訊息處理方式b 03分03秒

06-03將網頁儲存成樣版,並且插入可編輯區區塊 04分19秒

06-04將樣版套用到空白的網頁中 03分42秒

06-05套用樣版後,再依序更改網頁的標題 02分53秒

06-06樣版變動後的更新方式說明 03分36秒

06-07不與樣版連結的方式→「從樣版中分離」 01分50秒

06-08從開新檔案時立刻套用樣版的方式 01分43秒

06-09使用Fireworks製作網頁標題圖片、步驟一:建立新檔案 03分05秒

06-10使用Fireworks製作網頁標題圖片、步驟二:開始繪製圖片 03分20秒

06-11使用Fireworks製作網頁標題圖片、步驟三:將製作完成的圖片匯出 01分40秒

06-12使用Fireworks製作網頁標題圖片、步驟四:最後將「影像預留位置」與標題圖片替換成功 02分27秒

06-13使用Photoimpact中的範本作為首頁、步驟一:選一個範本 01分49秒

06-14使用Photoimpact中的範本作為首頁、步驟二:修改現有文字 04分10秒

06-15使用Photoimpact中的範本作為首頁、步驟三:修改版面的大小 01分35秒

06-16使用Photoimpact中的範本作為首頁、步驟四:修改網頁的標題與語系內容 03分39秒

06-17使用Photoimpact中的範本作為首頁、步驟五:製作可以連結到其他網頁的超連結 01分37秒

06-18使用Photoimpact中的範本作為首頁、步驟六:將完成的網頁儲存的我們網站資料夾中,並測試超連結 01分34秒

06-19使用Photoimpact中的範本作為首頁、步驟七:讓匯進來的首頁圖形置中對齊的方式 00分52秒

06-20超連結影像連結區的製作方式 02分46秒

07.圖文編排及大圖示檢視40分39秒

07-01讓圖片與文字做圖文並排的方式 02分55秒

07-02使用「fireworks最佳化」將大圖片縮小的方式 05分25秒

07-03我有裝Fireworks但是為何不能使用最佳化? 02分49秒

07-04運用表格,讓圖片底端可以加上註解文字 04分06秒

07-05製作大圖示檢視的連結效果、步驟一:先繪製表格 01分54秒

07-06製作大圖示檢視的連結效果、步驟二:插入圖片並且調整大小 04分29秒

07-07另外介紹如何使用Fireworks「批次功能」,一次將多張照片修改完畢的技巧 04分09秒

07-08製作大圖示檢視的連結效果、步驟三:建立新網頁後,並將大圖片一一插入 05分34秒

07-09製作大圖示檢視的連結效果、步驟四:運用「行為」指令中的「開啟瀏覽器視窗」套用進來 05分34秒

07-10製作大圖示檢視的連結效果、步驟五:新增一個CSS樣式,讓滑鼠指標變成手指樣式 03分44秒

08.繪製圖層、溢位、時間軸21分47秒

08-01「圖層」的介紹與使用 03分43秒

08-02「圖層」溢位的操作方式,可讓圖層在固定區域顯示文字 03分54秒

08-03「圖層」與「時間軸」的搭配使用方式 03分04秒

08-04範例製作:運用時間軸製作「上下移動圖示鈕」、步驟一:先將樣版分離 01分24秒

08-05範例製作:運用時間軸製作「上下移動圖示鈕」、步驟二:繪製圖層與插入動畫 02分52秒

08-06範例製作:運用時間軸製作「上下移動圖示鈕」、步驟三:製作讓動畫上下往復運動動作 02分26秒

08-07範例製作:運用時間軸製作「上下移動圖示鈕」、步驟四:最後再加上「行為」指令來控制圖示的移動 03分01秒

08-08改變時間軸移動速度的方式 01分23秒