อบรม การพัฒนาเว็บไซต์ที่ทุกคนเข้าถึงได้ วันที่ 2

อบรม การพัฒนาเว็บไซต์ที่ทุกคนเข้าถึงได้ วันที่ 2

ความเป็นมาเป็นไป ของการเข้ารับอบรมครั้งนี้

มาวันนี้เป็นวันที่สองครับ ว่าด้วยเรื่องของ CSS แล้ว ก็เหมือนเดิมครับ ก็คือด้านล่างจะเป็น note ย่อ อาจจะอ่านเข้าใจบ้าง ไม่เข้าใจบ้างนะครับ

**

 

เรื่องอบรมวันที่สอง โดยคุณ สว่าง ศรีสม


วันนี้ว่าด้วยเรื่องของ XHTML อีกเล็กน้อย

เริ่มจากให้เขียนชุดคำสั่งเพื่อเรียก flash ขึ้นมาแสดงผลที่หน้าเว็บ โดยใช้

<div> <object width="480" height="385" type="application/x-shockwave-flash" data="http://game.hunsa.com/flashgame/file/2001.swf"> <param value="http://game.hunsa.com/flashgame/file/2000.swf"></param> <p>test</p> </object> </div>


ซึ่งคุณสว่างแจ้งว่า ต้องใช้เพียงแค่นี้เท่านั้น จึงจะสามารถ validate ถูก มากกว่านี้ไม่ได้

และการ validate นั้นทำได้ที่ http://validator.w3.org โดยการ validate ก็ถือว่าเป็นตรวจสอบว่าเราเขียนโค้ดได้ถูกต้องตรงตามมาตรฐานหรือไม่ ซึ่งการเขียนอย่างถูกต้องนี้จะมีนัยว่าทุกโปรแกรมช่วยอ่านสามารถใช้งานได้

ทั้งนี้ มีเรื่องของเครื่องหมายที่ใส่ใน data และ param ที่เมื่อมีเครื่องหมาย & เราจะต้องแปลงให้เป็น &amp; ก่อนเสมอ เท่านี้ก็จะสามารถใช้งานได้ครับ และ validate ได้ผ่านแล้ว


ส่วนต่อมาก็ข้ามเรื่องไปที่เรื่องของ CSS หรือ Cascading Style Sheets


มันคือภาษาที่ใช้ในการจัดรูปแบบของภาษามาร์คอัพ(ก็คือ HTML, XHTML)

CSS 1.0 เริ่มใช้เมื่อ 1996 และ 1 ปี ถัดมาก็เริ่มใช้ CSS 2.0 เลย ส่วนของ CSS 3.0 นั้นเริ่มร่างมาตรฐานตั้งแต่ปี 1998 และในปัจจุบัน ก็ยังอยู่ในขั้นตอนการร่างอยู่ ถึงเริ่มมี browser ใช้ได้บ้างแล้ว แต่ก็เป็นส่วนน้อย และใช้ได้แค่บางส่วนของ CSS3 เท่านั้น


ข้อดีของ CSS 

 

  • เราสามารถแยกการตกแต่งกับเนื้อหาเว็บออกจากกันได้
  • แก้หน้าตาทุกหน้าได้ โดยใช้ css ไฟล์เดียว
  • โหลดได้เร็วเพราะว่าเนื้อหาจะถูกโหลดก่อน
  • กำหนดการแสดงผล แบบเฉพาะเจาะจงกับอุปกรณ์ต่างๆได้

 


การเรียกใช้งาน CSS

1. External CSS (เรียกจากไฟล์ภายนอก)

<link rel="stylesheet" href="xx.css" />


2.Internal CSS (ใช้ style ที่ส่วนของ head ของ html)

<style type="text/css" media="all"> .... </style>


3.Inline CSS

<img style="border: 1px solid;" />


CSS syntax

Selector {   Property: Value; }

หรือ

@media MediaName {   Selector {     Property: Value;   } }


จากนั้นก็เริ่มเรื่องการสร้างไฟล์ CSS

ทำได้ด้วยการสร้างไฟล์ขึ้นมาเปล่าๆหนึ่งไฟล์ อาจจะใช้ notepad ก็ได้ เปิด notepad เปล่าๆแล้วบันทึกลงไปว่า file.css


* วันนี้จดได้แค่นี้ครับ เพราะว่าเป็น work shop แล้ว แต่สามารถอ่านเพิ่มเติมเรื่องของการเรียกใช้ css ได้ครับ

Create: Modify : 2010-06-29 20:05:15 Read : 3235 URL :