LAB 4LAB 4Create Navigator & CSS Create Navigator & CSS

FileFile

Create tab NavigatorCreate tab Navigator

ให้�สร้�าง ให้�สร้�าง Tab Tab ด้�วย ด้�วย Photoshop Photoshop ร้�ปนี้��ร้�ปนี้�� Size : Size : 130130 x 40 PX x 40 PX

File > Save as web…File > Save as web…

ทำ�าการ้ ทำ�าการ้ save image save image ในี้ร้�ปแบบใช้�งานี้ในี้ ในี้ร้�ปแบบใช้�งานี้ในี้ web siteweb site

Save For Web

ขนาด ขนาด file file รู�ปภาพรู�ปภาพ

tab.gif

tab_over.gif

สรู�าง สรู�าง tab tab ด�งรู�ปด�งรู�ป

กด กด F12 F12 เพ��อทำ�าการู เพ��อทำ�าการู previewpreview

Mouse Over

ในน�กศึ�กษาสรู�าง web โดยใช้�การูทำ�างานของ table ช้�วยในการูจั�ดหน�าตาและต�าแหน�ง

สรู�าง file ใหม่�โดยก�าหนดให�เป&น CSS

จัากน�'นต�'งช้��อเป&น mystye.css และเก(บไว�ทำ+�เด+ยวก�นก�บ file html

ห้ลั�งจากทำ�าการ้ Save file CSS เร้าจะมาก�าห้นี้ด้ properties ให้�ก�บ CSS ก�นี้

แสดง Class ของ CSS

เพิ่��ม Class ให้ม ในี้ file CSS

ต�งช้��อ Class Name : frameDot จัากน�'นให�กด OK

เม่��อกด เม่��อกด OK OK แล�วเรูาจัะพบก�บ แล�วเรูาจัะพบก�บ PopupPopup

CSS Rule CSS Rule เพ��อให�เรูาก�าหนดเพ��อให�เรูาก�าหนดค่�าต�างใน ค่�าต�างใน ClassClass

ให�ก�าหนดค่�าตาม่รู�ปภาพน+'เสรู(จัแล�วให�กด OK

เรูาจัะได� เรูาจัะได� CSS CSS ของ ของ Class .frameDotClass .frameDot

ให�ทำ�าการู Save file น+'อ+กค่รู��ง

การูน�าเอา การูน�าเอา CSS CSS ม่าม่าใช้�งานใช้�งาน

ในไปทำ+�หน�า ในไปทำ+�หน�า HTML file HTML file แล�ว แล�ว clickclick ขวา แล�วเล�อก ขวา แล�วเล�อก CSS Style > Attach Style SheetCSS Style > Attach Style Sheet

ให�เรูาเล�อก ให�เรูาเล�อก file file mystyle.css mystyle.css ทำ+�สรู�างไว�ทำ+�สรู�างไว�

แล�วกด แล�วกด OKOK

แล�วทำ�าการู Save file HTML อ+กค่รู��ง

ให�เรูา click เล�อกไปทำ+�รู�ปภาพ แล�วม่าทำ+� properties ให�เล�อก Class เป&น frameDotแล�วทำ�าการู Save file HTML อ+กค่รู��ง แล�วกด F12 เพ��อทำ�าการู Preview

แสดงผลผ�านทำาง แสดงผลผ�านทำาง BrowerBrower

.frameDot

ให�สรู�าง ให�สรู�าง class class ของ ของ CSS CSS ใหม่�เพ��อใหม่�เพ��อก�าหนดรู�ปแบบของ ก�าหนดรู�ปแบบของ FontFont

Add new Class

Class Name : topic

ก�าห้นี้ด้ Properties ของ Font จากนี้��นี้ กด้ OK

เรูาจัะได� เรูาจัะได� ClassClass ของ ของ .topic.topic

ให�ทำ�าการู Save file น+'อ+กค่รู��ง

ทำ�าการูเล�อกข�อค่วาม่ทำ+�เป&น Topic แล�วเล�อกStyle เป&น topic จัากน�'นทำ�าการู Save File

.frameDot

.toppic

สรู�าง สรู�าง Class Class ของ ของ ContentContent

Class Name : contentText

ก�าหนด ก�าหนด properties properties ของ ของ ..contentTextcontentText

กด้ ok แลั�วทำ�าการ้ Save File mystyle.css อ�กคร้��ง

แสดง แสดง File File mystyle.cssmystyle.css

ทำ�าการูเล�อก content แล�วก�าหนด style ทำ+� properties ให�ใช้� class เป&น .contentText แล�วทำ�าการู Save File น+'อ+กค่รู��ง

.frameDot

.toppic

.contentText

Mouse over

Create CSS Class for Link Create CSS Class for Link pagepage

ทำ�าการ้ Save File mystyle.css อ�กคร้��ง

CSS File

เล�อก ข�อค่วาม่ทำ+�ต�องการูจัะ ทำ�า link page

Save File Html แล�วทำ�าการู Preview ด�วย F12

.frameDot

.toppic

.contentText

Link

END