製作網頁需注意的地方 - Dreamweaver
制作個人網頁(功課內容) 六十本好書書目 制作分組網頁 (功課內容)
Dreamweaver CS6網頁規劃設計
https://www.youtube.com/watch?v=sM9BNMn4zvM
製作網頁你必先要注意：
 |
所有檔案名稱不可以是中文。而且最好使用小楷英文字 |
|
所有資料必須放在同一個資料夾內。 |
|
只有 jpeg(jpg), gif 及 png 的圖片可以放進網頁當中。 |
|
只有 wav 及midi 的聲音可以直接在網上播放。(mp3 只可以在下載後才能播放) |
|
首頁必須為 index.html |
|
Dreamweaver CS6 |
插入圖片 插入背影圖片 插入表格 超連結 預視視窗 新增圖層
插入滑鼠變更影像 時間軸 - 動畫(1) 時間軸 - 動畫(2) 插入水平線 插入電子郵件連結 插入導覽列 Frame 頁框
視窗:
|
視窗：物件、屬性 (文字 大小、顏色、位置) |
版面屬性:
|
版面屬性的功能：修改 (背景顏色、標題、文字顏色等) |
關閉檔案後，如要再開?
|
視請按右鍵的Edit with dreamweaver 開始 |
加圖片要注意的地方:
|
只有 jpeg, gif 及 png 的圖片可以放進網頁當中。 |
|
先將雖要的圖片放入網頁內同一個資料夾中 |
|
然後在Dreamweaver 的「物件視窗」中的「加入圖片」按下並選取剛取得的圖片。 |
加背影圖片要注意的地方:
|
只有 jpeg, gif 及 png 的圖片可以放進網頁當中。 | |
|
先將雖要的圖片放入網頁內同一個資料夾中 | |
|
然後在Dreamweaver 的「頁面屬性」內的背影圖片一欄插入剛選取的圖片。 |
加入表格:
|
先在工具列上選取表格的工具。 | |
|
然後在合適的地方按下滑鼠 | |
|
選取：欄、列 及 (百分比 或 像素) | |
|
「百分比」是按視窗的大小計算其表格的百分比，所以表格的大小會隨著視窗的大小而改變。 「像素」是按實際的像素而決定表格的大小，所以表格不會因著視窗的大小而改變。 |
超連結:
|
選取所需做超連結的物件，可以是圖片或文字或其他。 | |
|
在屬性視窗內的「連結」載入連結點。 | |
|
使用「目標」：_blank代表 XXX |
預視視窗:
|
按 f12 |
新增圖層:
|
先在工具列上選取圖層工具。 | |
|
然後在合適的地方按下滑鼠便可。 |
插入滑鼠變更影像:
|
先在工具列上選取「插入滑鼠變更影像」工具。 |
|
然後再加入「原紿影像」- 最初的影像、「滑鼠變換影像」- 當滑鼠經過時所變換的影像 及「URL」- 超連結的地點。 |
時間軸 - 動畫(1)
|
先在網頁的合適位置「加上一圖層」並載入所需的影像。 |
|
選取圖層並在菜單上選取「修改」-「時間軸」-「增加物件到時間軸」 |
|
在時間軸的視窗內更改「圖層時間」至合適的長度，並將圖層在不同的時間拉移至不同的位置。 |
|
最後請選擇「自動播放」及「重複播放」。 |
|
同學也可以更改「FPS」中的數字以改變每秒的播放格數。 |
時間軸 - 動畫(2)
|
加入關鍵格：同學可以在所需的指定時間上加入關鍵格，以控制不同時間動畫的位置。 |
| 先選取圖層 | |
| 打開「修改」-「時間軸」 | |
| 在 「時間軸」視窗內選取你需要加「關鍵格」的「圖層」 | |
| 再按下「修改」-「時間軸」-「加入關鍵格」，這你便會在所選取的圖層內加上一個圈。 | |
| 此時你只需移動圖層到適當的位置便可。 | |
|
記錄圖層移動路徑 |
| 先選取圖層 | |
| 按下「修改」-「時間軸」- 「記錄圖層移動路徑 」 | |
| 跟著同學可以用滑鼠選取圖層並移動其所需的路徑 | |
| 最後如果同學沒有選取「自動播放」及「重複播放」，便雖選取。 |
插入水平線:
|
在適當的位置，在「物件工具列」按下「插入水平線」 |
| 與表格一樣，同學可以選擇「百分比」或「點數」作為水平線的長度及闊度單位 |
插入電子郵件連結:
|
在適當的位置，在「物件工具列」按下「插入電子郵件連結」 |
| 同學只須打上「連結名稱」及「電子郵件地址」便可 |
插入導覽列:在作導覽列前，同學可以使用 PhotoImpact 作一系列的按鈕先。「PhotoImpact」-「菜單上的網路」 -「元件設計師」 -「按鈕」。製作按鈕後，請記得把它儲為 Jpeg。
|
在適當的位置，在「物件工具列」按下「插入導覽列」 |
| 同學需在「導覽列項目」中加上按鈕的名稱、由「項目名稱」中更名。 | |
| 然後在四項圖片項目中加入適當的圖片。 | |
| 最後加上URL | |
|
同學需注意，每一頁網頁只可有一版導覽列的存在。如有需要增加按鈕的數目，可以在「導覽列的視窗」中按「+」。 如果希望修改當中的按鈕數目，可以隨時按 菜單上的「修改」「導覽列」便可。 |
Frame 頁框:
|
制作頁框 |
|
|
先在開啟一新網頁 |
|
|
在物件視窗內轉換為頁框視窗 |
|
|
選擇合適的頁格式 |
|
|
這已完成頁框的製作，但當要儲存時，請記著要用「儲存全部頁框」 |
|
頁框的連結 |
|
|
在頁框中每一頁都會有它獨立的名字，如果要清楚知道每一版頁框的名字，可以按「視窗」中的「頁框視窗」查看 |
|
|
在查看每一頁框的名字後你可以在連結中的目標欄內選定要轉換連結的地方。 |
關鍵字屬性:
許多搜尋引擎的搜索程式（自動地到各個網站擷取資訊並為搜尋引擎建立索引的程式）在建立您網頁的索引時，都會使用到關鍵字meta標籤的資訊。由於有些搜尋引擎只會針對有限個數的關鍵字以及字元來進行索引，在超過限制個數時便忽略所有的關鍵字，因此建議您僅指定少數適用的關鍵字。
請在標示為「關鍵字」的文字框中輸入您的關鍵字，每個關鍵字以逗號來分隔。
重新整理屬性:
請使用「重新整理」元素來指定瀏覽器在經過一段時間之後，如何自動地重新整理您的頁面（重新載入目前的頁面，或是到其他的頁面）。這個元素通常用在顯示一段文字說明敘述網頁的URL已經更新，以將使用者引導到另一個網頁。
「延遲」 是瀏覽器在重新整理頁面前的等待時間，若要瀏覽器在載入頁面之後立即重新整理，請在文字框中輸入0。
「動作」 可以指定瀏覽器在經過指定的延遲之後，應該要到另一個URL還是要重新整理目前的頁面。若要開啟其他的URL（而不是重新整理目前頁面），請按下「瀏覽」按鈕，然後瀏覽並選取要載入的頁面。
加入聲音:
| 首先你需要把你要加入的歌曲放在所需的資料夾內 (只有wav及midi的歌曲可以播放) |
|
如果是midi，便把以下的文字加入html中的 與 之間 |
| 在 "midi/your.mid" 中改為你需要的歌曲名字 |
|
如果是wav，便把以下的文字加入html中的 與 之間 |
|
your.wav" hidden="TRUE" autostart="TRUE"
loop="FALSE" width="300" height="50"> 在 "your.wav" 中改為你需要的歌曲名字 |
作用:
作用可分為（事件）及（動作）兩部份
常用的事件有
|
OnLoad 讀入網頁 |
|
OnUnLoad 離開網頁 |
|
OnMouseOver 滑鼠指著物件 |
|
OnClick 按滑鼠右鍵一次 |
|
OnDblClick 按滑鼠右鍵兩次 |
|
OnMouseOut 滑鼠離開物件 |