CSS and XHTML by Menn Talawat

CSS and XHTML สรางไฟล CSS+XHTML จากไฟลกราฟฟค หนึ่งวันตัด CSS • รองรับทุก Browser • พรอมใชกับทุก CMS

สารบัญ

หนา

ขอมูลทั่วไปของหลักสูตร3

พื้นฐานการแบงการนำเสนอออกจากเนื้อหา3

พื้นฐาน HTML3

พื้นฐาน CSS3

Firefox และ Firebug3

ปฏิบัติการ3

หนา 1

CSS and XHTML by SmallBooks.org

ขอมูลทั่วไปของหลักสูตร ชื่อหลักสูตร ภาษาอังกฤษ: CSS and XHTML ภาษาไทย: สรางไฟล CSS+XHTML จากไฟลกราฟฟค URL: http://www.smallbooks.org/css-and-xhtml/

คำอธิบาย ทำความเขาใจแนวคิดการแยกเนื้อหาออกจากการนำเสนอ คือ การแยกเปนไฟล XHTML กับ CSS ซึ่งจำเปนสำหรับการปรับ เปลี่ยนเนื้อหาเว็บในอนาคต สำหรับนำไปใชกับโปรแกรมที่เขียนเอง หรือใชกับ CMS ตางๆ หลักสูตรนี้จะเนนที่การแปลงไฟลกราฟฟคใหเปน CSS+XHTML ตามมาตรฐาน เพื่อสามารถแสดงผลใน Browser สมัยใหม ไดอยางถูกตอง รวมถึงการแนวทางแกปญหากับ Browser ในรุนเกา ผูอบรมตองมีพื้นฐานการทำเว็บ สามารถอาน HTML ได, ใช Text Editor ได หากมีความรูพื้นฐานดานการใชโปรแกรมแตง ภาพ (เชน Photoshop, Gimp) และทดลองออกแบบเว็บไซตที่ตองการมากอน จะทำใหสรางงานไดรวดเร็วและตรงใจมากขึ้น หลักสูตรที่แนะนำใหเรียนกอน: ใช Photoshop ออกแบบเว็บสมัยใหม

หัวขอสัมมนา ชวงเชา 9:00 - 12:00 น. • ทบทวน XHTML, CSS พื้นฐาน, โครงสรางการทำงานของเว็บสมัยใหม (Content/Presentation) • Firefox และ FireBug • CSS Reset และ ชุด CSS เริ่มตน • Box Module • ทดลองตัด CSS โดยไมใชรูป

ชวงบาย 13:00 - 16:00 น. • Box Module + Image • CSS3 พื้นฐาน • ปฎิบัติการตัด XHTML+CSS

หนา 2

CSS and XHTML by SmallBooks.org

หลักสูตรนี้เหมาะสำหรับ • ผูสนใจทั่วไปที่ตองการเขียนโคด XHTML+CSS ไดอยางถูกตอง • นักออกแบบเว็บไซต ที่ตองการสรางไฟล XHTML+CSS จากไฟลกราฟฟคได

พื้นฐานความรูของผูเขาอบรม • มีพื้นฐานในการใชคอมพิวเตอรและการหาความรูในอินเตอรเน็ท • มีพื้นฐานดานการทำเว็บ สามารถอาน HTML ได, ใช Text Editor ได

ซอฟทแวรที่ใชในการอบรม • Text Editor ที่ผูเรียนถนัด • หากใช Mac แนะนำ CSSEdit และ BBEdit (ซอฟแวรลิขสิทธิ์) TextWrangler หรือ Smultron (ฟรีแวร) • หากใช Windows แนะนำ Ultraedit-32 หรือ Edit Plus (ซอฟแวรลิขสิทธิ์) Notepad++ (ฟรีแวร) • โปรแกรมกราฟฟคที่ใชในการ Export รูปภาพ แนะนำ Photoshop, Gimp • Firefox และ FireBug

สิ่งที่จะไดรับจากการอบรม • สามารถสรางไฟล XHTML+CSS จากไฟลกราฟฟคไดอยางมีระบบ ถูกตองตามมาตรฐาน

วิทยากร ครูเมน (จักรกฤษณ ตาฬวัฒน) iMenn.com Art Director บริษัทไทเกอร ไอเดีย จำกัด (www.tigeridea.com)

ลิขสิทธิ์ ลิขสิทธิ์ของเอกสารและหลักสูตรนี้เปนของนายจักรกฤษณ ตาฬวัฒน แตอนุญาตใหดัดแปลง เผยแพร และนำไปใชเชิง พาณิชย ได โดยตองอางที่มา http://www.smallbooks.org/css-and-xhtml/ ตามสัญญาอนุญาต http://creativecommons.org/licenses/by/3.0/th/

ประวัติการแก ไข 14 มิ.ย. 25533 เผยแพรครั้งแรก

หนา 3

CSS and XHTML by SmallBooks.org

พื้นฐานการแบงการนำเสนอออกจากเนื้อหา ในสมัยแรกที่มีการสรางอินเตอรเน็ทและ HTML นั้น ยังเปนชวงของการนำเสนอเนื้อหาที่ไมซับซอน โดยมากจึงเขียนเปนโคด HTML อยางเดียว ผสมทั้ง “รูปแบบการนำเสนอ” และ “เนื้อหา” เขาดวยกัน เชน HTML <font color=“red” size=“5”>TEST CODE</font>

ซึ่งเปนการระบุใหเนื้อหา TEST CODE มีการนำเสนอเปนตัวอักษร สีแดง ขนาดใหญ ตอมามีการสรางเอกสารรูปแบบตางๆ ที่ซับซอนขึ้น โคดมีขนาดใหญและซับซอนเกินไป ทำใหเริ่มมีการคิดเรื่องการใสเนื้อหา ไวเฉพาะใน HTML ระบุชนิดของขอมูลกำกับ แลวแยกสวนการนำเสนอไวในอีกไฟล ที่เรียกวา Cascading Style Sheets (CSS) HTML <p>TEST CODE</p>

CSS p {color: red; font-size: large;}

คือการบอกวา มีเนื้อหา TEST CODE ที่เปน paragraph อยู แลวคอยไประบุใน CSS วา ถาเจอ paragraph ใหใชฟอนทสี แดง ตัวอักษรขนาดใหญ นอกจากนั้น ยังใช CSS เพื่อกำหนดรูปแบบการนำเสนออื่นๆ เชน การจัดวางตำแหนงตางๆ, การแสดงผลตัวอักษร สี พื้น หลัง กรอบ ลิงก รูปแบบตางๆ

แหลงความรูอื่นๆ http://www.csszengarden.com/ – เปนเว็บที่เนนเรื่องการแยกเนื้อหาและการนำเสนอเปนเจาแรกๆ ละเอียดละออ ลึกซึ้ง

หนา 4

CSS and XHTML by SmallBooks.org

พื้นฐาน HTML HTML มีหลายรุนที่ใชงานอยู ปจจุบันที่นิยมคือ XHTML 1.0 Transitional ซึ่ง XHTML คือ HTML (HyperText Markup Language) ที่มีแนวคิดของ XML (Extensible Markup Language) ซึ่งกลาวคราวๆ ก็คือ มีรูปแบบเปนโครงสราง มีการเปด ปดคำสั่งชัดเจน ทำใหคอมพิวเตอรประมวลผลเว็บไดเร็ว และแสดงออกไดอยางถูกตอง (เชน ตองใช <img src=... /> ไมใช <img src=... > ) การประกาศชนิดของ HTML เริ่มที่บรรทัดแรกของไฟล .html คือ HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

สำหรับแบบอื่นๆ ดูที่ http://www.w3schools.com/tags/tag_doctype.asp หลังจากนั้นจะเปนโครงสรางมาตรฐาน คือ HTML <html>

<head>

</head>

<body>

</body>

<title>Title of the document</title>

The content of the document......

</html>

โครงสรางคำสั่ง HTML ไวยากรณหลักคือ เปดดวยเครื่องหมาย < และปดดวยเครื่องหมาย > โดยภายในประกอบดวยคำสั่ง (HTML Tag) และ คุณสมบัติ (Attribute) เชน HTML <img src="photo.jpg" />

โดยคำสั่งนี้ชื่อ img (ยอมาจาก image) และคุณสมบัติ src (ยอมาจาก Source) นั้นมีคา photo.jpg หนา 5

CSS and XHTML by SmallBooks.org คำสั่ง (HTML Tag) จะตองมีการเปดคำสั่งและปดคำสั่ง เชน HTML <strong>ตัวหนา</strong> ถาเปนคำสั่งที่เปนชิ้นเดียว เชนรูปภาพ ก็ใหเครื่องหมายเปดตอนทายดวย เชน HTML <img src="photo.jpg" />

คำสั่ง XHTML ที่ควรรู คำสั่งที่จำเปนและใชบอย ดังนี้, • <a> มาจากคำวา anchor หรือสมอ เปนหมุดหมายของที่ตางๆ ไวใชแสดงลิงก (link) • <div> มาจากคำวา division หรือสวนยอยตางๆ ของขอมูล ใชแสดงกลองตางๆ • <em> มาจากคำวา emphasized หรือเนน ในที่นี้หมายถึงตัวเอียง • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> มาจากคำวา head หรือหัวเรื่อง มี 6 ระดับ h1 สำคัญสุด • <img /> มาจากคำวา image คือใสรูป • <li> มาจากคำวา list เอาไวใสรายการตางๆ (ครอบดวย <ul> หรือ <ol>) • <ol> มาจากคำวา ordered list ไวใสรายการที่เปนตัวเลข 1, 2, 3, …การใสขอมูลรายการจึงเปน <ol><li>รายการที่ 1</li><li>รายการที่ 2</li></ol> • <p> มาจากคำวา paragraph คือขึ้นยอหนาใหม • <strong> คือตัวหนา • <table> ใสตาราง • <td> มาจากคำวา table data ใสขอมูลตาราง • <th> มาจากคำวา table header ใสขอมูลหัวตาราง • <tr> มาจากคำวา table row ไวเริ่มแตละแถว ดังนั้น การใสขอมูลในตารางจึงเปน <table><tr><td>ขอมูล</td></tr>< /table> • <ul> มาจากคำวา unordered list ไวใสรายการที่ไมเปนตัวเลขลำดับ การใสขอมูลรายการจึงเปน <ul><li>รายการ A</li><li>รายการที่ B</li></ol>

แหลงความรูอื่นๆ สำหรับคูมือรายชื่อคำสั่งอยางละเอียด ลองดูที่ http://www.w3schools.com/tags/default.asp สำหรับคูมือแบบสั้นหรือโพย (Cheat Sheet) ลองดูที่ http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

หนา 6

CSS and XHTML by SmallBooks.org

พื้นฐาน CSS เมื่อใช HTML ประกอบกับ CSS พยายามให HTML ระบุแคชนิดขอมูล (เชน <table>) ไมตองระบุคาตัวแปร (เชน <table cellspaceing=“2”>) เพราะเราจะให CSS เปนตัวระบุแทน

โครงสรางคำสั่ง CSS เริ่มดวยการบอกวาจะจัดการหนาตาของวัตถุชิ้นไหน แลวตามดวยคุณสมบัติตางๆ ในเครื่องหมาย {} โดยคั่นแตละคุณสมบัติ ดวยเครื่องหมาย ; ดังนี้ CSS p {color: orange; margin: 10px; }

หนา 7

CSS and XHTML by SmallBooks.org

วัตถุที่จัดการได มี 3 แบบคือ 1. HTML elements – สั่งทับคำสั่ง HTML ไปเลย เชน p, a, h1, h2 CSS a {color: white;}

สั่งให link มีสีขาว 2. The ID Selector – ตั้งชื่อ ID ใหม โดยใหสอดคลองกับการใสคุณสมบัติในหนา HTML เชน <div> HTML <div id="header">

CSS #header {background-color: black;}

<h1>Title Ja</h1> </div>

พอแสดงผล ก็จะพบวาพื้นหลังของ div ที่ชื่อ header นี้มีสีดำ 3. The Class Selector – ตั้งชื่อ Class ใหม โดยใหสอดคลองกับการใสคุณสมบัติในหนา HTML เหมือนกับขอ 2. แต ID ตองมีที่เดียวในหนา (ไมใชซ้ำในหนาเดียวกัน) สวน Class จะมีกี่ที่ก็ได สำหรับคนไมชัวรก็อาจจะใช แต Class ก็ได เชน HTML <div class="header">

CSS .header {background-color: black;}

<h1>Title Ja</h1> </div>

ก็ไดผลเหมือนขอ 2 แตคำแนะนำก็คือ ถาชัวรวามีที่เดียวในหนา ก็ใช ID ดีกวา จะทำใหการเขียนโปรแกรมตอจากนี้ไปทำไดงายขึ้น (เชนการเขียน JavaScript ใหอางถึงวัตถุในหนา ถาใช ID ก็ระบุถึงตัวไดเลย)

หนา 8

CSS and XHTML by SmallBooks.org

วิธีการใช CSS มี 3 แบบคือ 1. Internal Stylesheet ใชภายใน HTML นั้นเลย วิธีนี้เหมาะสำหรับเว็บหนาเดียว ใชโคดซ้ำเฉพาะในหนานั้นๆ ไมใชกับหนาอื่น ดังนั้นไมจำเปนตองแยกไฟลก็ได ใชคำสั่ง <style> HTML <head>

</style>

CSS Content

</head> <body>

2. External Stylesheet แยกไฟล CSS มาตางหาก วิธีนี้เปนวิธีมาตรฐาน นั่นคือแยกไฟล CSS ออกมาตางหากดวยคำสั่ง link (เชนชื่อ style.css) จะไดสามารถใชคำสั่ง CSS ซ้ำ กัน / รวมกับหนาอื่นๆ ได HTML <head>

</head> <body>

3. In-line Stylesheet – ใสตรงๆ ในที่ที่ตองการระบุรูปแบบเลย วิธีนี้เหมาะสำหรับการแสดงผลในจุดนั้นๆ ไมใชซ้ำอีกเลย เชน การเปลี่ยน class สำหรับ JavaScript กรณีกดปุมตางๆ HTML <head>

</head> <body>

หนา 9

CSS and XHTML by SmallBooks.org

คำสั่ง CSS ที่ควรรู หนวยที่ใชใน CSS มีทั้ง %, in, cm, mm, em, ex, pt, pc, px รายละเอียด ภาษาไทยที่ http://www.enjoyday.net/webtutorial/css/css_chapter03.html ภาษาอังกฤษที่ http://www.w3schools.com/css/css_units.asp สวนใหญแนะนำใหใช px (pixel) เพราะมีหนวยเปนจุด เหมาะกับจอคอมพิวเตอรทั่วไป em มาจาก letter m ซึ่งเปนตัวอักษรที่อวนสุดในฟอนททั้งหมด ในที่นี้คือขนาดของฟอนท เชน line-height: 1.5 em; คือ ระยะระหวางบรรทัดเทากับ 1.5 เทาของตัวอักษร ซึ่งเหมาะกับภาษาไทยที่มีสระ/วรรณยุกต ทำใหอานงาย สีที่ใชใน CSS เนื่องจากจอที่แสดงผล เปนระบบผสมแมสีแสง Red+Green+Blue การสั่งใหแสดงผล จึงเปนการสั่งใหแสดงคาของแมสีตางๆ นั่นเอง ถาแสดงทั้ง 3 สีเต็มที่ จะเปนสีขาว (#ffffff) ถาปดทั้งหมด จะเปนสีดำ (#000000) นอกจากนั้นใน CSS3 ยังมีตัวแปร Opacity หรือความโปรงแสงอีกดวย แนะนำใหใชเครื่องมือดูดสี เชน Photoshop, Gimp หรือโปรแกรมแตงภาพตางๆ รายละเอียดการใชสี ภาษาไทยที่ http://www.enjoyday.net/webtutorial/css/css_chapter04.html ภาษาอังกฤษที่ http://www.w3schools.com/css/css_colors.asp การจัดการรูปแบบ (CSS Styling)

ชนิด

แหลงความรู

พื้นหลัง

http://www.w3schools.com/css/css_background.asp

ขอความ

http://www.w3schools.com/css/css_text.asp

ตัวอักษร

http://www.w3schools.com/css/css_font.asp

ลิงก

http://www.w3schools.com/css/css_link.asp

รายการ (ลิสต)

http://www.w3schools.com/css/css_list.asp

ตาราง

http://www.w3schools.com/css/css_table.asp

แนะนำใหดูโพย หรือ Cheat Sheet ที่ http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ หนา 10

CSS and XHTML by SmallBooks.org

Firefox และ Firebug เปนโปรแกรมหลักในการตรวจสอบโครงสรางของเว็บเพจตางๆ ใหลงโปรแกรม Firefox กอน แลวลง Add on ที่ชื่อ Firebug เมื่อใช Firebug ดูเว็บ ใหกดปุมขวาลาง จะปรากฏโครงสรางดังรูป

HTML

CSS

ปฏิบัติการ ทำความเขาใจโครงสรางเว็บที่ตองการ แลวทดลองเปลี่ยน CSS บางคา

หนา 11

CSS and XHTML by SmallBooks.org

ปฏิบัติการ 1. ทดลองโหลด CSS Reset มาใช 2. ทำความเขาใจ CSS เริ่มตน (CSS Generic) 3. ทดลองใช .clear และ .clearfix โดยสราง div ครอบ div ภายในที่ float:left และ float:right 4. ทำความเขาใจ CSS Box Model 5. ทดลองวาดชื่อ div จากรูปหนาเว็บที่ตองการ 6. สราง html จากชื่อ div ที่ตั้งไว 7. สราง css ตาม html

หนา 12