Introduction to On-line Documemt

1. LAB 4
Create Navigator & CSS File

3. Create tab Navigator
 ให้สร้าง Tab ด้วย Photoshop รูปนี้
Size : 130 x 40 PX
าการ save image ในรูปแบบใช้งานใน web site
File > Save as web…

4. Save For Web
นาด file รูปภาพ

5. tab.gif
tab_over.gif

7. สร้าง tab ดังรูป
กด F12 เพื่อทำาการ prev
Mouse Over

8. ร้าง web โดยใช้การทำางานของ table ช่วยในการจัดหน้าตา

9. file ใหม่โดยกำาหนดให้เป็น CSS
นตังชื่อเป็น mystye.css และเก็บไว้ที่เดียวกันก
้

10. าการ Save file CSS เราจะมากำาหนด properties ให้กับ C
แสดง Class ของ C

11. ชือ Class Name : frameDot จากนัน
่ ้
ด OK
เพิ่ม Class ใหม่ใน file CSS

12. เมื่อกด OK แล้วเราจะพบกับ
Popup
CSS Rule เพื่อให้เรากำาหนด
ค่าต่างใน Class
ให้กำาหนดค่าตามรูปภาพนี้
เสร็จแล้วให้กด OK

13. เราจะได้ CSS ของ
Class .frameDot
ให้ทำาการ Save file นี้อีกครั่ง

14. การนำาเอา CSS มา
ใช้งาน
TML file แล้ว click ขวา แล้วเลือก CSS Style > Attach St

15. ให้เราเลือก file
mystyle.css ที่สร้างไว้
แล้วกด OK
ล้วทำาการ Save file HTML อีกครั่ง

16. ให้เรา click เลือกไปที่รูปภาพ แล้วมาที่
properties ให้เลือก Class เป็น frameDot

17. แสดงผลผ่านทาง
Brower
.frameDot

18. ให้สร้าง class ของ CSS ใหม่เพื่อ
กำาหนดรูปแบบของ Font
Add new Class
Class Name : topic
าหนด Properties ของ Font จากนั้น
ด OK

19. เราจะได้ Class ของ
.topic
ให้ทำาการ Save file นี้อีกค

20. รเลือกข้อความทีเป็น Topic แล้วเลือก
่
เป็น topic จากนันทำาการ Save File
้

21. .toppic
.frameDot

22. สร้าง Class ของ
Content
Class Name : contentText

23. กำาหนด properties
ของ .contentText
ด ok แล้วทำาการ Save File mystyle.css

24. แสดง File
mystyle.css

25. อก content แล้วกำาหนด style ที่ properties ให้ใช้
น .contentText แล้วทำาการ Save File นีอีกครั่ง
้

26. Mouse over
.toppic
.frameDot .contentText

27. Create CSS Class for Link page

29. CSS File
ทำาการ Save File mystyle.css อีกค

30. ก ข้อความที่ต้องการจะ ทำา link page
ave File Html แล้วทำาการ Preview ด้วย F12

31. .toppic
Link
.frameDot .contentText

32. END