WEB Training
Lesson 1 (9-9-2006) Dreamweaver
Lesson 2 (16-9-2006) Dreamweaver
Lesson 3 (23-9-2006) Dreamweaver
Lesson 4 (30-9-2006) Dreamweaver
Lesson 5 (14-10-2006) Dreamweaver
1. 在檔案總管先開一個資料夾, 來儲存網站資料, 例如開一個資料夾裝網站命名為 (stephen)
2. 在 Dreamweaver 中開一個新網站, Site --> Manage Sites --> New Site --> Advanced --> Site Name (Stephen)
3. 在 Local root folder 中, 指去(Stephen)
4. Dreamweaver Folder 或 File name 有限制, 不能用中文Folder, file name in Dreamweaver
5. File Name Rules - only use letter, number, - and _ , start with letter
6. cannot use 中文, Space and other character
7. 在 Dreamweaver 中, HTML Code <--> Design, 用 Code 來看 HTML code, 用 Design 來打字
8. 字體大小建議用 Pixels, 改字大小用 Size, 不要用 Heading
9. 加相方法 :
a. images
b. Files - 拖過去 (右手邊)
c. Assets - 拖過去 (右手邊)
10. 如果相片太大, 用改相的軟件改相之大小後才取來, 否則 size 不變, 佔容量空間
11. Enter - 新段落, Shift + Enter - 新行
12. 相片可調較 V space, H space, Low src
13. 相片可用 Alt - 指著張相名稱, 如果冇圖片時都出現這名稱
14. Fireworks source - .png, photoshop source - .psd
15. 用 Rollover Image, 指著第一張相片時, 可出第二張相片
16. 頁面屬性 (Page Properties) - 可加 背景影像 (background image), 背景顏色 (background color)
17. 可申請 www.oocities.org/hk 作網站儲存, 例如 http://www.oocities.org/hk/stephenyick
18. 上載用 : ftp://ftp.www.oocities.org/hk, 然後輸入 login ID, Password
19. 觀賞用 : http://www.oocities.org/hk/stephenyick
1. Set screen 1024 x 768, 可以令在 Dreamweaver 工作時, 較看得多
2. Site --> Manage Sites -->New --> Site --> Advanced --> Site Name --> Local root
3. 可放上網之相片格式
. gif -- 256 colors, transparent, animation
. jpg -- unlimited colors (做相片好), 會失真
. png -- unlimited colors, tranparent, animation, but IE 6 not fully support,
透明的地方變灰色, good for office 2003, IE 7, Flash
4. 介紹取相片的網站
www.webshots.com
www.imagemore.com.tw
6color.net
imagedj.com
gettyimages.com
5. 在 Power Point 中, Power Point file, 可以用 File > save as web page, 就可以放上網, 在Power Point 中可以加相, 較方便用
6. Notes 第五講可放上網之相片格式, 第六課講 Link
7. Link
a. Internal link
b. External link
c. Anchor Link / Jump Link
d. Email link
8. Internal link -
a. link a page
b. link a picture
c. link a song
d. link a video
e. link a notes
9. External link -
http://hk.yahoo.com
http://rthk.org.hk
link web radi, video etc.
用 複製捷徑 - 可將 link address 抄下來
10. Anchor Link / Jump Link
Named Anchor -- 給一個 Anchor name 的名稱, 例如: a1
在要指著的地方, 在 Link 內鍵入#a1, 所以Link - #a1 , 當指著的時候, 就會跳到要去的地方
11. Email Link
mailto:gordon@abc.com, 會加到寄件人
mailto:gordon@abc.com?subject=Question from Student&cc=peter@abc.com, 會加到寄件人, Subject, cc 部份
12. link an image - src, link
13. Image Map, 在相內選出部份, link 到要去的地方
14. Open Link in Windows - Link http://hk.yahoo.com, 當要指一條 Link 開一個新window時,用 Target _blank
15. Flash Buttons - 可用 Flash Button, 然後 Link 去其他地方
16. Flash Text - 可用 Flash text ,然後 Link 去其他地方
17. 用 Flash Buttons 之後, 圖案後部會呈現白色, 可用 Parameters : 令它透明
Parameters value
wmode transparent
18. 背景音樂
.wav - 5 minutes 40M
. mp3 - bit rate高, 音質靚, 128 bit, 同CD質, 32-->16 bit. 無間道網頁
. ra - Real Player
.wma - windows media player (streaming download / 串流式下載), 可在 tempoary internet file
取回 song
. mid - midi
19. 在 Dreamweaver 中要加音樂, video 等, 要用 plugin
20. 加了音樂之後, 有一個圖形出了來, 要將這個圖形 hidden, 可用 Parameters : 令它 hidden
parameter value
hidden true
autostart true
loop -1
21. 在 Dreamweaver 中要加 movie 要注意有冇用到 Divx, Xvid 等, 因為對方可能要安裝這個才能看到
22. 要 cut song, 可到 download.com --> Goldwave, 找尋這軟件 cut song
1. Table (Common 表格) in the top Menu
2. Rows (數目字) , Column (數目字), Width (pixel or %)
3. Border (數目字), 數目字 = 0 不 show line
4. Table ID (Press the line show table ID)
5. <body> <table> <tr> <td> 最右邊, 代表最入面的 Table, 大 <-- 小
6. 指著 Table, 按右鍵 --> Table --> Insert Rows or Columns
7. CellPad (0) 冇空位, 格與字之空位
8. CellSpace (0) 冇空位, 格與格之空位
9. Table 內加 Table , 用100% 較好
10. Page properties, 可調較 margin
11. 網站闊度用 100%, 使用文字 較好 , 否則指定範圍用 pixel 較好
12. 每個 Table 闊度 , 用 pixel 計
13. Screen 800 x 600 時, ?度 pixel 佔 778
14. Screen 1024 x 768 時, ?度 pixel 佔 996
15. 不要拉 Table 線, 要計數
16. CTRL Z - undo last action
17. Yahoo 網頁的闊度是 730 pixel
18. Layer (Common --> Layer) in the top left Menu
19. 用 "繪製圖層" 開 Layer
20. 可在版面任何地方做 Layer, Layer 內可加 Table, Layer 內可加任何 image, text 等
21. 畫中畫效果, 可指著 Layer 外圍, 用 overflow Scroll --> Auto
22. 要加入Horizonal Ruler , 用 Insert --> HTML --> Horizonal Ruler, 如下
23. Library
24. 要 create Library , 先 highlight 物件
25.在右邊的Assets panel, 從 Files --> 跳去Assets --> 按下在左手邊的 Library icon (最後的一個, 好像一本書) Library -->再選底部的第二個 (New Library item) , 就會加入一個新 Library, 給一個名稱給它
26. 要 edit , double click Library , 然後選底部的第三個 edit Library item , 更改之後, 所有關於這 Library 會全部更改
27. Template
28. 要 create Template, 在右邊的Assets panel, 從 Files --> 跳去Assets --> 按下在左手邊的 Template icon (位置於Library 上, 好像一張紙) Template -->再選底部的第二個 (New Template) , 就會加入一個新 Template, 給一個名稱給它, 它會 save as template .dwt
29. double click 已命名的新 Template
30. 在 Template 中設計所需的資料
31. 要加一個 Editable Region, 在需要更改的地方 , 否則全篇不能改
32. Editable Region, 加大一點, 可寫多字
33. To create a new document based on a template
34. File --> New , click the Template tab on the New Document dialog box
35. Select the template you want to use from the list
36. Click Create.
37. 要改 Template, 去回 Template
38. Save Template 後, 會自動改有關之 Document
1. CSS Style - Notes Chapter 4
2. Must use Paste Text after Copy, Dreamweaver 8.0 use Paste Special, 要考試, ,要留意 Dreamweaver 8.0 what's new
3. In MS-Word, 做好字的 Setting 後, heightlight 字, 去內文 pull down menu, 然後加名, 就有新 Style
4. 字的 Setting, 例如大小, 顏色, 字體, background, 段落 etc.
5. 在 Dreamweaver 中, 做 CSS, Copy 字之後, 一定要用 Paste Text
6. 然後才改大小, 顏色, 字體, background, 段落 etc.
7. Class - 自己設計 Style, 按 Style --> Manage Style --> New --> Name : [ class - 給一個 Style 名稱, e.g. ( .content ), Define in : New Style Sheet File] , 給一個檔案名稱, e.g. setting1css , 跟著做 字的 Setting, 例如大小, 顏色, 字體, background, 段落 etc.
8. To create a class style, assign a name e.g. ( .content ), select Class asthe Selector Type, and slect New Style Sheet File, 給一個檔案名稱, e.g. setting1css , 跟著做 字的 Setting, 例如大小, 顏色, 字體, background, 段落 etc.
9. 要改現有的 Style, 按 Style --> Manage Style -->double click 已有的Style, 例如 setting1.css , --> .content, 然後更改入面的內容
10. e.g. Block --> Letter Spacing : 2 pixel --> Text align : Justify
11. 行高 = 行距 + 字, 即是行高是字的高度和上一行與此字的距離的總和
12. Margin 是 Table 與 Table 之間的距離
13. Padding 是 Table 內 字與格之距離
14. 設立背景圖案, 要用 Class, Blackground --> Blackground image --> Repeat : no repeat --> Attachment : fixed --> Horizontal : Center --> Vertical : Center
15. Firework 中將實圖變成透明的方法 :- 選取向量圖的第二個方框 [矩形] , 將圖片蓋著, 選取白色塗填, 較透明度 50% 以上, 圖片就會變淡至半透明, 適合用來作背景圖片
16. Tag - 按 Style --> Manage Style --> New --> Choose Tag as the Selector Type. Choose a tag from the Tag pop-up menu. Select New Style Sheet File or the existing style sheet.
17. The difference between a class style and a tag style is that you do not manually apply the tag styles to text. Once you create the tag rule, all the tagged text is formatted the same.
18. Common use for Tag : a = link, p = 段落, body = 全頁, table = 表格, span = 指定範圍內
19. 要在文件中使 link 無底線, 特別適合用文字來做 menu 而要 Link 時, 不出 Link 的底線, 可選 Tag --> a --> Type --> Decoration --> None
a {
color: #FF00FF;
background-color: #FFFF00;
text-decoration: none;
}
20. 在 CSS 內打Code, 每行 Shift 2 個字, 可在css 中, 鍵入
p{
text-indent:2em;
}
21. 可在 Table 中, 使到在表格中每一條線都不同, 例如
table {
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: double;
}
都可以用 CSS 做到
22. 例如全篇英文字改大寫, 可用 body,
body {
text-transform: uppercase;
}
23. Advanced - 按 Style --> Manage Style --> New --> Choose Advanced as the Selector Type. Choose a tool from the pop-up menu. Select New Style Sheet File or the existing style sheet.
24. There are 4 options to choose : -
a:link - Link to site
a:visited - the site visited
a:hover - 當 mouse 指上連結時
a:active - 當mouse 按下去時
25. 我發覺要做出要在文件中使 link 無底線, 一定要用 Tag 之 a, 用 Advanced 之 a:link 不能做到這效果, 但用 Advanced 之 a:link 的字體顏色或背景顏色, 側會蓋過 Tag 之 a, 所以不出 Link 的底線, 可選 Tag --> a --> Type --> Decoration --> None 而不是用 a:link
a {
color: #FF00FF;
background-color: #FFFF00;
text-decoration: none;
}
26. 可以在 advanced 內加上外面和內面不同的效果, 例如
.content a
.specialtable a:hover
使到外面的 link 和內面的 link 效果不同 , 一定要注意用 advanced --> .xxx 開頭
27. 要將之前做過的 Style 帶過來, 可以 File --> New --> HTML --> Style --> Manage Style --> Attach --> Browse --> xxx.ccs --> Link --> OK
就會將之前的 Style 帶過來, 改過的 Style 會 update 此板
28. Summary for CCS
Class : -
.content
.abc
.footer
Tag : -
a - 連結
p - 段落
table - 表格
body - 全頁
Advanced : -
a
a:visited
a:hover
a:active
.content a
.specaltable a:hover
29. 可在 hk.yahoo.com 找 CSS 教學
30. Frame, create frame sets, select Fixed top, Nested left, File --> save all , 有 index, right, left, top
31. 一定要在 Basic page 內設定 mainframe, 這次的 Basic page 是 index, 只有 Basic page 才有 mainframe, topframe, leftframe
32. e.g.
Asia link : Asia.htm target : mainframe
Europe link : Europe.htm target : mainframe
Home link : right.htm target : mainframe , Home 一定要 link right.htm (即 right frame)
所有 Target 都要指去 mainframe
33. 要移走多餘的橫 scroll bar (在 frame right 內), 要 delete code 內 Dreamweaver 預設的頭 2 句, 但要每一頁都要改 (即每一個 Frame)
34. 要將左邊的 Frame , 設定有 Scroll bar, Windows --> frame ( 視窗 --> 頁框) , Scroll --> Auto ( 捲動 --> 自動 ), 預設只有 mainframe (即 right frame) 是 Default, 其他都是 No, 所以要自己加 Scroll --> Auto
35. 加 bottom frame, 可在Frame 底下拉線, 就有bottom frame 出現
36. Set width --> value, releative
37. Top 與 right frame 之間, click 線, 可有 frame properties
38. 加音樂, 可放在底 (bottom frame)
39. View - Visual Aids --> Frame borders 可幫助有視覺輔助
1. 取相片可以到以下網址 http://www.webshots.com
2. 今堂教 Javascript, (有互動效果), Java Applet, Behavior, Form, middle ware, database
3. Javascript - 通常可以在 Yahoo 或其他 Search Engine 中, search " Javascript", 然後將內容貼上 HTML 內,
抄在 <body> 之下
或 <head> 之下
或 <body xxx> 中, 通常都會有提示,
如沒有特別指示, 習慣放在<body> 之下, 容易找
4. <body>
貼上 Javascript
<\body>
5. 以下網址有 Javascript 可取, http://myhome4u.hongkong.com/tools/tooltips
6. e.g. 尾三有 雪景效果 可取, 要 delete 頭二行 code 才不會在頂頭亂跳
7. e.g. 尾二有 文字追蹤
8. 以下網址有很多 Javascript 可取, 如要中文, 例如以上的, 就要到網上 search
javascript.com
javascripts.com
9. Java Applet - 以下網址有 Javascript Applet 可取, http://myhome4u.hongkong.com/tools/tooltips
10. e.g. 尾五有 水中倒影 , 要download class file 才可以
11. 以下網址有 Javascript Applet 可取, javaboutique.com
12. Behavior - 入面是 javascript
13. Windows --> Behavior , 在 Behavior 按 + 號, 就會有很多選項可取
14. e.g. swap image (調換影像)
先放第一張相--> 然後放第二張相命名為 "target" , 可選擇全白色的相, 目的是將要轉變時, 放相在target 的位置上, --> 第一張相 map 位置 --> + Behavior --> swap image --> image " target" --> browse (select picture), 當mouse ?過 map 時, 被 map 的位置就會變相
15. e.g. open browse windows (開啟瀏覽器視窗)
放一張相在網頁內, set page properties, 要四邊 = 0, letf margin, right margin, top margin, bottom margin 都是 0
放另一張相在另一個網頁內 --> + Behavior --> Open Browser Windows --> Select File --> set Window width, height
加 window name --> 可防止同一次網頁出多個一張相
Open Browser Window 是一入第一張相就會開第二張相的 Window
16. e.g. Behavir - Show pop up Menu (顯示彈出式選單)
放一張相片--> + Behavior --> Show pop up Menu --> 在 Text 中 : 打上 Menu 名稱, 再加 + 來增加項目, 然後到 Appearance, Advanced, Position 中調校選項
17. 用文字做 Show pop up Menu, 要在 Link 中, 輸入 Javascript:; 否則不會出現到 pop up Menu
18. e.g. Jump Menu
在 Common 轉 Forms --> 選取 Jump Menu (跳頁選單) --> 在文字中輸入 Menu 名稱, 然後按 + 號增加選項
19. 要注意在 Text 中, 第一行輸入 ----- Please Select -----, 然後在 URL 中, 輸入 # , 否則當跳回到一行時會跳了出去
20. e.g. 拖曳圖層
先做一個 layer --> 然後放相在 layer 內 --> Behavior --> 拖曳圖層 , 就可使相移動, 適合做砌 pizzle
21. 在寫網頁中, 有幾類項目要注意
Design / Layout/ Interface ( html, images, tables, text, javascript, flash, animation...)
Database (Access, Foxpro, SQL, MgSQL...)
Middle ware (asp, php, cgi, cfm, jsp ...)
22. 以下項目都會同 Middle ware 有關
Hit Counter
Guestbook
Forum / Discussion Board
Blog
Mail Form
Login System
Web Mail
Membership System
Roll System
CMS ( Content Management System)
Online Sales
23. 可 link 去留言板, 可申請留言板
24. 以下網址可申請到 Hit Counter
http://www.lynms.edu.hk/counter/Register.php3
25. 申請時填上 帳號, 密碼, 起跳數 等資料, 就會送出一段 script, 抄在 body 中, 就可以用
e.g. <script src=http://www.lynms.edu.hk/counter/counter.php3?id=12525></script>
26. 小技巧, 開一個 table, 在其中一個cell中, 輸入AAAAA, 在Code內將段 code replace 到 AAAAA 中, 就可以固定到一個位置放 Counter
27. 做一個 Form, 指著外框, Action : mailto:xxx@xxx, enctype:text/plain