บทท 8 จดเลยเอาทหนาเวบดวย CSS

ในปจจบนการจดเลยเอาทหนาเวบดวย CSS ไดเขามาแทนทการจดเลยเอาทหนาเวบดวย Table หรอตาราง เนองจากการใชตารางจดเลยเอาทเรมจะไมรองรบการออกแบบเวบในบางจด ไมวาจะเปนระยะเวลาในการดาวนโหลดหนาเวบเพจความเขากนไดของเวบบราวเซอรในการแสดงผล เปนตน เนองจากการใชงาน CSS คอนขางเปน coding อยเปนสวนใหญท าใหผเรมตนออกแบบเวบอาจจะดเปนเรองยากไปสกนดในการใชงาน กอาจจะใชแบบส าเรจทโปรแกรมจดเตรยมไวใหไปกอนกไดในเบองตน ใชมมมอง CSS Layout แบบตางๆ มมมองเหลานจะใชรวมกบการจดโครงสรางเวบเพจดวยออบเจคประเภท CSS Layout block ซงเคยกลาววธสรางไปแลวในบทท 02 “สรางเวบเพจจากรปแบบโครงสราง CSS” นอกจากนยงรวมถงการใช AP Element และการใชแทกDIV โดยตรงดวย CSS Layout block มประโยชนคอใชเตรยมพนทเพอการวางเนอหาบนสวนตางๆของเวบเพจโดยคณสามารถก าหนดสไตลส าหรบจดรปแบบใหมผลเฉพาะสวนนน เชน เสนกรอบ, สพน, รปแบบตวอกษร ฯลฯ สวนมมมอง CSS Layout จะใชส าหรบซอน/แสดงสวนประกอบทชวยใหคณมองเหนและจดการกบ CSS Layout block ดงกลาวไดงายขน โดยประกอบดวย

CSS Layout Backgrounds แสดงขอบเขตของ CSS Layout block แตละชนดวยสพนทแตกตางกน สวนสของเนอหาอนบนเวบเพจจะไมแสดงออกมา (เชน สขอความ และสพนตาราง)

CSS Layout Box Model แสดงใหเหนพนทวาง padding และ margin ทเวนไวบรเวณขอบรวมทงจะแสดงกรอบเลกๆเพอบอกคณสมบตของแทกและสไตลของออบเจคดวย ประเภทของการท าเลยเอาทดวย CSS

Fixed ความกวางของคอลมนจะคงทเสมอ จะก าหนดขนาดสวนตางๆในเวบ โดยใชหนวยเปน pixel สรางเลยเอาทดวย CSS แบบส าเรจ

Liquid ความกวางของคอลมนจะปรบตามความกวางของบราวเซอร เกดจากไมไดระบคาใดๆเลย หรออาจจะก าหนดคาเปนเปอรเซนตโดยเทยบจากขนาดของบราวเซอร ใน Dreamweaver CS5 มโครงสรางเวบเพจรปแบบตางๆทนยมใชกนทวไปมาดวย ซงจะน ามาใชสรางเวบเพจใหมไดทนท โครงสรางเหลานถกก าหนดขนดวยแทก<div>และ CSS โดยไมไดใชตาราง

1.เลอกค าสง File > New 2.เลอกกลม Blank Page 3.เลอกประเภท HTML 4.เลอกรปแบบโครงสราง แสดงรปแบบ 5.คลก สรางเลยเอาทดวย CSS แบบก าหนดเอง จากหวขอทแลวจะเปนการสรางเลยเอาทโดยเลอกใชรปแบบส าเรจของ CSS ทโปรแกรมไดเตรยมไวใหแลวแตหากตองการทจะสรางเลยเอาทดวย CSS ขนมาเองกสามารถท าได ออกแบบโครงสรางของหนาเวบ ขนตอนแรกจะตองออกแบบหนาเวบทตองการกอนวาจะประกอบไปดวยสวนใดบางซงจะก าหนดใหวางอย (container)ภายในขอบเขตเดยวกน โดยจะประกอบดวย 4 สวนหลกๆดงน

Header สวนของหวเรอง Sidebar สวนของเมนดานขาง MainContent สวนของเนอหาหลก Footer สวนของทายเวบ

รปท 2.93 ขนตอนการสรางประเภทของการท าเลยเอาทดวย CSS

Container

Header

Sidebar

MainContent

รปท 2.94 ขนตอนการออกแบบโครงสรางของหนาเวบ

สรางไฟล CSS ใหสรางไฟลใหม โดยเลอกสรางแบบ CSS ส าหรบก าหนดรปแบบใหสวนตางๆพรอมบนทกไฟลไว 1.เลอกค าสง File > New

2.เลอกสราง Blank Page 3.คลก 4.เลอกค าสง File > Save 5.ก าหนดชอไฟล 6.คลก

รปท 2.95 ขนตอนการสรางไฟล CSS

สรางไฟล HTML ส าหรบท าเลยเอาท สรางไฟล HTML ใหมส าหรบท าเลยเอาทตามทออกแบบ 1.เลอกค าสง File > New 2.เลอกสราง Blank Page 3.คลก 4.เลอก File > New 5.ก าหนดชอไฟล 6.คลก

รปท 2.96 ขนตอนการสรางไฟล HTML ส าหรบท าเลยเอาท

ท า Attach Style Sheet ใหเวบเพจ หลงจากทไดไฟล .cssและ .html แลว ขนตอนตอไปจะ Attach Style Sheet ไฟล .cssทบนทกไวเขามายงไฟล .html ดงน 1.เปดไฟล 2. เลอก Window > CSS Styles 3.คลก 4.คลกปม Browse5.เลอกไฟล .css 5.เลอกไฟล .css เพอลงคกบหนาทจะวางเลยเอาท 7.คลก

6. คลก

รปท 2.97 ขนตอนการท า Attach Style Sheet ใหเวบเพจ

สราง CSS ก าหนดโครงสรางของเลยเอาท สราง CSS ใหม ส าหรบสวนประกอบตางๆในเวบ จะสรางเปน CSS แบบทก าหนดชอ ID ไวส าหรบใชอางองการวางเลยเอาทในต าแหนงตางๆตามทออกแบบไว ดงน 1.คลกปม New CSS Rule 2.จะเปดหนาตางใหเลอกก าหนด CSS แบบตางๆ สวนของ Container เปนพนทหลกของหนาเวบทก าหนดขอบเขตส าหรบวางสวนประกอบอนๆภายในขอบเขตของ Comtainerในตวอยางนจะก าหนดใหเวบเพจแสดงอยต าแหนงกงกลางของจอภาพ โดยใหยดหยนตามขนาดความกวางของบราวเซอร ดงน 1.คลกปม New CSS Rule 2.เลอก Selector Type แบบ ID 4.คลก 3.ก าหนดชอ Container

รปท 2.98 ขนตอนการสราง CSS ก าหนดโครงสรางของเลยเอาท

5.ก าหนดรายละเอยดเพอ ก าหนดพนทแสดงเนอหา 6.คลก สวนของ Header 1.คลกปม New >CSS Rule 2.เลอก Selector Type 4. คลก 3.ก าหนดชอ header 5.ก าหนดรายละเอยด 6.คลก

รปท 2.99 แสดงสวนของ Container

รปท 2.100 แสดงสวนของHeader

สวนของ Sidebar 1.คลกปม New >CSS Rule 2.เลอก Selector Type 4.คลก 3.ก าหนดชอ sidebar 5.ก าหนดรายละเอยด 6.คลก

6. คลก OK

รปท 2.101แสดงสวนของSidebar

สวนของ MainContent 1.คลกปม New >CSS Rule 2. เลอก Selector Typeแบบ ID 4.คลก 3.ก าหนดชอ 5.ก าหนดรายละเอยด 6.คลก

รปท 2.102 แสดงสวนของMainContent

สวนของ Footer 1.คลกปม New >CSS Rule 2. เลอก Seletor Typeแบบ ID

4.คลก 3.ก าหนดชอ 5.ก าหนดรายละเอยด

6.คลก

รปท 2.103แสดงสวนของFooter

วางเลยเอาทหนาเวบดวยแทกDiv เปนการน าสวนตางๆมาวางประกอบกนเปนเลยเอาท โดยแตละสวนจะใชแทกDivส าหรบก าหนดกลมของเนอหา ซงอางอง ID ตามทก าหนดไวมาวางในแทก ขนตอนการวางเลยเอาทดวย CSS ตามโครงสรางทไดก าหนดไวตงแตตนกถอวาเสรจเรยบรอยแลว สวนรปแบบของเนอหาและรปแบบอนๆทตองการ เชน สพน รปแบบขอความตางๆนน สามารถก าหนดคณสมบตในภายหลงได ดงน ก าหนดคณสมบตของ CSS 1.คลกขวาทชอ CSS เลอกค าสง 2.เพมหรอแกไขรปแบบ Edit หรอดบเบลคลกทชอ ตามตองการ 3.คลก ใสเนอหาลงในหนาเวบ สดทายกเปนขนตอนการวางเนอหาลงในสวนตางๆในหนาเวบ จะเหนไดวาหากวางเนอหาลงไปในพนทกรอบทก าหนดไว พนทจะยดหยนไปตามรปแบบและขนาดของเนอหา แตจะอยภายในขอบเขตทก าหนด และหากตองการแกไขรปแบบสวนใดกไปก าหนดคณสมบตทสไตล CSS ซงจะมผลเฉพาะรปแบบในสวนทก าหนด จะเหนไดวาการท างานโดยใชสไตล CSS น นจะแยกรปแบบ (Style)และเนอหา (content)ออกเปนคนละสวนกน เพอชวยใหการแกไขและออกแบบไดสะดวกยงขน

รปท 2.104การก าหนดคณสมบตของ CSS