วันจันทร์ที่ 6 สิงหาคม พ.ศ. 2555

I started something I couldnt finish...: THings I think I think Vol 6

I started something I couldnt finish...: THings I think I think Vol 6: Whats up bizznitches. Its me, Jokey Jokemaker. This week I had these thoughts: 1) Ismael Julio Lopez's attempt to take the blog and put...

วันอาทิตย์ที่ 5 สิงหาคม พ.ศ. 2555

Pseudo-element

เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น เฉพาะอักษรตัวแรกใน <p> เท่านั้นที่เป็นตัวอักษรสีแดงตัวใหญ่ เป็นต้น

selector:pseudo-element {property: value}

selector.class:pseudo-element {property: value}

Pseudo-element	Purpose
:first-letter	กำหนด style ให้ตัวอักษรตัวแรกของข้อความ
:first-line	กำหนด style ให้กับข้อความบรรทัดแรก
:before	Inserts some content before the content of an element
:after	Inserts some content after the content of an element

The :first-letter Pseudo-element

การกำหนดรูปแบบให้กับตัวอักษรตัวแรกของ element

ตัวอย่าง

<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
</style>
</head>
<body>
<p>Enjoyday.net</p>
</body>
</html>

ผลลัพธ์

Enjoyday.net

หรือ จะเขียน Pseudo-element กับ CSS Classes ก็ได้
ถ้าต้องการระบุให้เฉพาะบาง paragraph เท่านั้นที่แสดงผล เขียนได้ดังนี้

p.article:first-letter {color:#ff0000}

<p class="article">Enjoyday.net</p>
<p>Enjoyday.net</p> 

ผลลัพธ์

Enjoyday.net
Enjoyday.net

The :first-line Pseudo-element

การกำหนดรูปแบบให้กับตัวอักษรบรรทัดแรกของ element

ผลลัพธ์

<html>
<head>
<style type="text/css">
p:first-line {color:#0000ff}</style>
</head>

<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>

ผลลัพธ์

Health
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ

Multiple Pseudo-elements

เราสามารถนำทั้ง 2 แบบมาเขียนผสมกันได้

ตัวอย่าง

<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}</style>
</head>

<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>

ผลลัพธ์

Health
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ

CSS2 - The :before Pseudo-element

สามารถกำหนดเพิ่ม content บางอย่าง ก่อนแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IE

ตัวอย่าง

<html>
<head>
<style type="text/css">
h1:before
{
content: url(../images/star_icons.gif)
}
</style>

</head>
<body>
<h1>This is a header</h1>
</body>
</html>

ผลลัพธ์

This is a header

CSS2 - The :after Pseudo-element

สามารถกำหนดเพิ่ม content บางอย่าง หลังจากแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IE

ตัวอย่าง

<html>
<head>
<style type="text/css">
h1:after
{
content: url(../images/star_icons.gif)
}
</style>
</head>

<body>
<h1>This is a header</h1>
</body>
</html>

ผลลัพธ์

This is a header

Pseudo-classes

เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น link เมื่อถูกคลิกจะเปลี่ยนสี เป็นต้น

selector:pseudo-class {property: value}

selector.css-class:pseudo-class {property: value}

Pseudo-class Purpose

:link กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click

:visited กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว

:hover กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link

:active กำหนด style ให้กับ link ขณะถูกคลิก

:focus กำหนด style ให้กับ element ขณะถูก focus

:first-child กำหนด style ให้กับ element ที่เป็น first child ของ element อื่นๆ

:lang Allows the author to specify a language to use in a specified element

Anchor Pseudo-classes
link ที่มีสถานะ active, visited, unvisited, หรือเมื่อนำเมาส์วางบน link เราสามารถกำหนดรูปแบบให้แตกต่างกันได้
ตัวอย่าง
a:link {color: #FF0000} /* unvisited link สีแดง/
a:visited {color: #00FF00} / visited link สีเขียว/
a:hover {color: #FF00FF} / mouse over link สีชมพู /
a:active {color: #0000FF} / selected link สีน้ำเงิน/

<a href="css_chapter24.html">Chapter24</a>
<a href="css_chapter25.html">Chapter25</a>
ผลลัพธ์
Chapter24 Chapter25
หรือ จะเขียน Pseudo-classes กับ CSS Classes ก็ได้
ถ้าต้องการระบุให้เฉพาะบาง link เท่านั้นที่แสดงผลต่างจะ link อื่น เขียนได้ดังนี้
ตัวอย่าง
a.special:hover {color: #FF0000; background-color:#CCFF99}
/ mouse over link สีแดง พื้นเขียว /

<a class="special" href="css_chapter22.html">Chapter22</a>
<a class="special" href="css_chapter23.html">Chapter23</a>
<a href="css_chapter24.html">Chapter24</a>
<a href="css_chapter25.html">Chapter25</a>
ผลลัพธ์
Chapter22 Chapter23 Chapter24 Chapter25

CSS2 - The :first-child Pseudo-class
จะจัดรูปแบบการแสดงผลให้กับ element ที่พบอันแรกเท่านั้น สำหรับ web browser IE จะ้ต้องประกาศ <!DOCTYPE> ด้วย
ตัวอย่าง
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body>
<p> วันนี้อากาศแจ่มใส </p>
<p> วันนี้อากาศแจ่มใส </p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
ผลลีัพธ์ เฉพาะข้อความใน <p> อันแรกเท่านั้นที่เป็นสีน้ำเงิน

วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส

< br /> Match the first <i> element in all <p> elements
ตัวอย่างนี้ซับซ้อนขึ้น โดยจัดรูปแบบการแสดงผลให้ selector <i> ที่พบอันแรก ใน <p> elements ทุกๆ อัน
ตัวอย่าง
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue
}
</style>
</head>
<body>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
ผลลัพธ์ <i>แจ่มใส</i> ที่พบตัวแรกใน <p> ทุกอัน จะี่เป็นสีน้ำเงิน
วันนี้อากาศแจ่มใส* วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส

Match all <i> elements in all first child <p> elements
ตัวอย่างนี้สลับกับข้างบน โดยจัดรูปแบบการแสดงผลให้ selector <i> ทุกอัน ที่พบใน <p> elements อันแรก
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue
}
</style>
</head>
<body>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
Output <i>แจ่มใส</i> ทุกอัน ที่พบใน <p> อันแรก จะเป็นสีน้ำเงิน
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส

CSS2 - The :lang Pseudo-class
เราสามารถกำหนด special rules สำหรับภาษาต่างๆ ได้ แต่ Pseudo-class *ใช้ไม่ได้กับ web browser IE
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q>Some text.</p>
</body>
</html>
Output
Some text ~A quote in a paragraph~ Some text.

Pseudo-class	Purpose
:link	กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click
:visited	กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว
:hover	กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link
:active	กำหนด style ให้กับ link ขณะถูกคลิก
:focus	กำหนด style ให้กับ element ขณะถูก focus
:first-child	กำหนด style ให้กับ element ที่เป็น first child ของ element อื่นๆ
:lang	Allows the author to specify a language to use in a specified element

การจัด Layout ด้วย CSS (Div)

แบ่งเป็น 4 แบบ คือ

1. Fixed Layout
จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม ถ้าเราย่อขนาดเบราเซอร์ลงจะเกิดเป็น scrollbar เพื่อเลื่อนดูเนื้อหาที่มองไม่เห็น แต่มีข้อเสียคือไม่สามารถใช้พื้นที่หน้าจอได้อย่างเต็มที่

เนื่องจากผู้ใช้แต่ละคนมีการกำหนดความละเอียดของหน้าจอแตกต่างกันไป เช่น 800x600, 1024x780 (มีผู้ใช้มากที่สุด), 1280x800, 1280x960, 1280x1024 pixel

เว็บส่วนใหญ่จะออกแบบเพื่อรองรับความละเอียดหน้าจอที่ 800x600 เป็นหลัก โดยกำหนดความกว้างของเนื้อหาอยู่ที่ 780 pixel และจะจัดวางเนื้อหาอยู่กึ่งกลางหน้าจอ ทำให้ ผู้ใช้งานที่ความละเอียดหน้าจอ 800x600 จะเห็นหน้าเว็บเพจเต็มพอดี ส่วนผู้ที่ใช้ความละเอียดหน้าจอ 1024x780 จะเห็นเนื้อหาอยู่กึ่งกลางหน้าจอ พื้นที่ด้านข้างที่เหลือจะเป็นพื้นหลังที่เป็นสีหรือรูปภาพ

แต่ถ้าเราออกแบบให้ผู้ที่ใช้ความละเอียดหน้าจอ 1024x780 มองเห็นหน้าเว็บเต็มพอดี เมื่อผู้ที่ใช้ความละเอียดหน้าจอ 800x600 ดูหน้าเว็บ หน้าเว็บจะเกินหน้าจอ เกิดเป็น scrollbar แนวนอน ต้องเลื่อนไปทางขวาจึงจะมองเนื้อหาทั้งหมดได้ แต่ปัจจุบัน (2009) ส่วนใหญ่มากกว่า 60% แล้วผู้ใช้จะใช้ความละเอียดหน้าจอที่ 1024x780

2. Liquid Layout
จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม

ข้อดี คือ ทำให้ได้ใช้พื้นที่ในหน้าจอได้อย่างมีประสิทธิภาพ และทำให้แสดงผลบนอุปกรณ์อื่นๆ เช่น มือถือ ได้ดี

ข้อเสีย คือ การจัดวางองค์ประกอบต่างๆ นั้นทำได้ค่อนข้างยาก เพราะขนาดไม่แน่นอน

3. Elastic Layout
จะกำหนดขนาดของส่วนต่าง ๆ เป็น em ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์

ข้อดี คือ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี

ข้อเสีย คือ การจัดทำยุ่งยาก

4. Hybrid Layout
เป็นการใช้แบบต่างๆ มาผสมกัน เช่น Sidebar ด้านข้าง ทั้ง 2 ด้านเป็น Elastic Layout ส่วนเนื้อหาเป็น Liquid Layout เป็นต้น

เมื่อเข้าใจเรื่องการจัดวาง Layout แบบต่างๆ แล้ว ทีนี้มาดูการเขียน code กัน วิธีการไม่ยากแค่เพียงใช้โปรแกรม Dreamweaver เท่านั้น เวลาที่เรา New เอกสารใหม่ขึ้นมา จะมีให้เราเลือกว่าอยากจะได้ Layout แบบไหน จะแบ่งกี่คอลัมน์ ต้องการส่วน Header และ Footer หรือไม่ และเลือกได้ว่าจะให้ส่วน style sheet ฝังอยู่ในหน้าเอกสารนั้นเลย (Add to Head) หรือว่าแยกเป็นอีกไฟล์ต่างหาก (Create New File) หรือจะให้ใส่ style sheet รวมไปในไฟล์ style sheet ที่เรามีอยู่แล้ว (Link to Existing File) ก็ได้

ตัวอย่างFixed Layout

thrColFixHdr.css

body  {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      background: #666666;
      margin: 0; 
      padding: 0;
      text-align: center;
      color: #000000;
} 

/* ส่วน Page Header */
.thrColFixHdr #header { 
      background: #DDDDDD; 
      padding: 0 10px 0 20px;  
} 

/* ส่วน Page Body  ที่บรรจุเนื้อหา */
.thrColFixHdr #container { 
      width: 780px;  
      background: #FFFFFF;
      margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
      border: 1px solid #000000;
      text-align: left; /* this overrides the text-align: center on the body element. */
} 
 
/* ส่วน คอลัมน์ด้านซ้าย */
.thrColFixHdr #sidebar1 {
      float: left; 
      width: 150px;
      background: #EBEBEB; 
      padding: 15px 10px 15px 20px; 
}

/* ส่วน คอลัมน์ด้านขวา */
.thrColFixHdr #sidebar2 {
      float: right; 
      width: 160px; 
      background: #EBEBEB; 
      padding: 15px 10px 15px 20px;
}

/* ส่วนเนื้อหา อยู่ระหว่าง sidebar */
.thrColFixHdr #mainContent { 
      margin: 0 200px; 
      padding: 0 10px; 
} 
 
/* ส่วน Page Footer */
.thrColFixHdr #footer { 
      padding: 0 10px 0 20px; 
      background:#DDDDDD;
} 
 
.clearfloat { 
      clear:both;
}

fixedlayout.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="thrColFixHdr.css" rel="stylesheet" type="text/css">
</head>

<body class="thrColFixHdr">

<div id="container">

  <div id="header">
    <h1>Header</h1>
    <!-- end #header --></div>   

  <div id="sidebar1">
  <h3>Sidebar1 Content</h3>
  <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
  <!-- end #sidebar1 --></div> 

  <div id="sidebar2">
    <h3>Sidebar2 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
  <!-- end #sidebar2 --></div> 

  <div id="mainContent">
    <h1> การจัด Layout </h1>
    <p>ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ  (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page  Body), และส่วนท้าย (Page  Footer) จัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้  ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์   </p>
    <p> ในการลงมือเขียนเว็บเพจ ปัจจุบันนิยมใช้ Div ในการจัด Layout มี 3 รูปแบบดังนี้</p>

    <h2>1. Fixed Layout  </h2>
    <p>จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel  ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ  ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ  และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม  </p>   

    <h2>2. Liquid Layout</h2>
    <p>จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์   เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์  ขนาดของส่วนต่างๆ จะย่อขยายตาม</p>      

    <h2>3. Elastic Layout</h2>
    <p>จะกำหนดขนาดของส่วนต่าง ๆ เป็น em  ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว  ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี</p>  

  <!-- end #mainContent --></div>   

  <br class="clearfloat" /> 

  <div id="footer">
    <p>Footer<br/><br /></p>
  <!-- end #footer --></div> 

<!-- end #container --></div>

</body>
</html>

แบบ Fixed Layout นี้ สังเกตได้ว่า เวลาย่อขยายหน้าต่างเบราเซอร์จะไม่มีผลต่อการจัดวางส่วนประกอบต่างๆ แต่จะเกิดเป็น scroll bar แทน

ส่วนการจัด Layout แบบอื่นๆ ลองดูจากไฟล์เหล่านี้ หรือลองเล่นดูในโปรแกรม Dreamweaver ได้ค่ะ

Layout

ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body), และส่วนท้าย (Page Footer) การจัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์ ตามที่ได้พูดถึงในเรื่องการออกแบบเว็บไซต์ (ถ้าจำไม่ได้คลิกที่นี่เพื่ออ่าน)

ในการลงมือเขียนเว็บเพจจริง การจัดรูปหน้าเว็บ (Layout) สามารถใช้ Table หรือ ใช้ Div ในการจัดวางส่วนประกอบของหน้าเว็บ

แต่การใช้ <table> ในการวาง Layout หน้าเว็บเพจ ออกจะผิดวัตถุประสงค์ในการใช้งานของ <table> อยู่บ้าง เนื่องจากที่จริง <table> นั้นใช้ในการแสดงข้อมูลในรูปตาราง

ปัจจุบันเว็บไซต์ต่างๆ เปลี่ยนจากการใช้ Table จัดวาง Layout ให้หน้าเ็ว็บเพจ มาเป็นแบบ Tableless โดยใช้ <div> และใช้ CSS ในการจัดตำแหน่ง ขนาด และสี ให้กับ tag <div> แทน เพราะมีข้อดีกว่าการใช้ Table

การใช้ Table จะต้องรอให้โหลดข้อมูลภายใน Table ทั้งหมดก่อน แล้วจึงแสดงผลข้อมูลทั้งหมดออกมาในคราวเดียว ทำให้ต้องรอนาน ไม่เหมือนกับการใช้ Div ที่เมื่อโหลดเสร็จส่วนไหนก่อน ก็แสดงผลส่วนนั้นออกมาเลย

การใช้ Div ยัง ทำให้สามารถเปลี่ยนแปลง CSS ได้ง่ายกว่า และไม่เยิ่นเย้อเหมือน Table

นอกจากนี้ยังเพิ่มความสามารถในการเข้าถึงข้อมูลให้กับคนพิการทางสายตา ซึ่งจะอาศัยโปรแกรม Screen Readers อ่านเนื้อหาในเว็บให้ฟัง การใช้ Table ซ้อน Table อาจทำให้ Screen Readers อ่านข้อความผิดพลาดได้ แต่หากใช้ CSS เป็นตัวกำหนดรูปแบบ และ กำหนดเนื้อหาตัวหนังสือใน HTML เมื่อถอดตัว CSS ออกจาก HTML เอกสารก็จะแสดงผลไม่ต่างกับ Microsoft Word ที่อ่านง่ายขึ้น และถูกต้องยิ่งขึ้น

ตัวอย่างการจัด Layout Page ด้วย Table แบบแบ่งเป็น 2 คอลัมน์

<table style="width:100%">

<tr>
<td colspan="2" style="background-color:#09f; color:#fff">
<h1>Web builder Tutorials</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#93C9FF; width:20%;text-align:top; ">
<b>Main Menu</b><br />
HTML<br />
CSS<br />
XHTML<br />
JavaScript
</td>
<td style="height:200px; text-align:top;">
แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript
</td>
</tr>

<tr>
<td colspan="2" style="background-color:#09f; text-align:center; color:#fff">
Copyright © 2009 enjoyday.net
</td>
</tr>

</table>

ผลลัพธ์

Web builder Tutorials
Main Menu HTML CSS XHTML JavaScript	แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript
Copyright © 2009 enjoyday.net

ตังอย่างการจัด Layout Page ด้วย Table แบบแบ่งเป็น 3 คอลัมน์

<table style="width:100%">

<tr>
<td colspan="3" style="background-color:#09f; color:#fff">
<h1>Web builder Tutorials</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#93C9FF; width:20%;text-align:top; ">
<b>Main Menu</b><br />
HTML<br />
CSS<br />
XHTML<br />
JavaScript
</td>
<td style="height:200px; text-align:top;">แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript
</td>
<td style="background-color:#ffc; width:20%;text-align:top; ">
<b>Advertisment</b>
</td>
</tr>

<tr>
<td colspan="3" style="background-color:#09f; text-align:center; color:#fff">
Copyright © 2009 enjoyday.net
</td>
</tr>

</table>

ผลลัพธ์

Web builder Tutorials
Main Menu HTML CSS XHTML JavaScript	แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript	Advertisment
Copyright © 2009 enjoyday.net

Media Types

ในการกำหนดการแสดงผลหน้าตาเว็บเพจ บนสื่อประเภทต่างๆ เราสามารถกำหนด style ให้แตกต่างกันได้ เช่น ตอนที่เราเห็นบนหน้าจอ (screen) กับตอนที่สั่งพิมพ์ออกกระดาษ (print) ให้แสดงผลไม่เหมือนกัน

แล้วประเภทของสื่อมีอะไรบ้าง ...

Media Type

all - ใช้ในอุปกรณ์ทุกชนิด
aural - แสดงผลออกทางระบบช่วยอ่านออกเสียง
braille - แสดงผลออกทางเครื่องช่วยอ่านสำหรับคนตาบอด
embossed - แสดงผลออกทางเครื่องพิมพ์สำหรับคนตาบอด
handheld - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์ชนิดพกพา (handheld) ซึ่งมีขนาดเล็ก ไม่สามารถแสดงสีได้ (monochrome) และมีประสิทธิภาพในการรับส่งข้อมูลต่ำ
print - แสดงผลออกทางเครื่องพิมพ์
projection - แสดงผลออกทางจอภาพที่มีความต่างสี(contrast) และความสว่าง(brightness) ต่ำ เช่น จอภาพ LCD, การแสดงผลผ่านเครื่อง projector
screen - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์
tty - แสดงผลออกทางเทอร์มินัลชนิดตัวอักษรเท่านั้น เช่น โปรแกรม Lynx, เครื่องโทรพิมพ์
tv - แสดงผลออกทางจอภาพของเครื่องโทรทัศน์

หากมีมากกว่า 1 media ให้ใช้ comma คั่น

มาดูตัวอย่างการใช้งานกันค่ะ ให้ตอนที่เราเห็นเว็บเพจบนหน้าจอ ตัวอักษรมีขนาด 12px แต่ตอนที่เราสั่งพิมพ์ให้มีขนาด 50px และมีเส้นขีดคร่าตรงกลาง โดยทั้งตอนที่เห็นบนหน้าจอและเมื่อสั่งพิมพ์ให้เป็นตัวหนา่ทั้งคู่ เขียน style sheet กำหนดได้ดังนี้

ตัวอย่าง

<html>
<head>
  <style>
  @media screen
  {
     p.special {font-family:Verdana,sans-serif; font-size:12px}
  }
  @media print
  {
     p.special {font-family:Arial, Helvetica; font-size:50px;
         text-decoration:line-through}
  }
  @media screen,print
  {
     p.special {font-weight:bold}
  }
  </style>
</head>

<body>
  <p class="special">Enjoyday.net</p>
</body>
</html>

ตัวอย่างลองเลือกเมนู File > Print Preview ... ดูว่า Enjoyday.net ด้านล่างนี้จะเปลี่ยนไปอย่างไร

Enjoyday.net

อีกตัวอย่างหนึ่งใช้สำหรับตอนสั่งพิมพ์ค่ะ อาจจะมีบางส่วนของเว็บเพจ เช่น banner และโฆษณาต่างๆ ที่เราไม่ต้องการให้พิมพ์ออกมา เพื่อประหยัดหมึกพิมพ์ เราก็สามารถกำหนดได้

ตัวอย่าง

<html>
<head>
<style type="text/css">
@media print
{
.noprint {visibility:hidden;}
}
</style>
</head>
<body>
<p>ข้อความตรงนี้พิมพ์ออกมาตามปกติ</p>
<p class="noprint">ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา</p>
</body>
</html>

เราสามารถ copy คำสั่ง style sheet แล้วบันทึกเป็นไฟล์ .css จากนั้นจึงเรียกใช้จากภายนอกก็ำได้ (External Style Sheet)

file print.css
.noprint {visibility:hidden;}

file testnoprint.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
</head>
<body>
<p>ข้อความตรงนี้พิมพ์ออกมาตามปกติ</p>
<p class="noprint">ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา</p>
</body>
</html>

ผลลัพธ์ลองเลือกเมนู File > Print Preview ... ดูว่า ข้อความข่างล่างนี้หายไปหรือไม่

ข้อความตรงนี้พิมพ์ออกมาตามปกติ

ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา

Mouse cursor

การกำหนด style ใ้ห้กับ Mouse cursor หากคุณใช้ browser Firefox ลักษณะของ Cursor ที่เห็นจะไม่เหมือนกับของ IE

การกำหนด style ใ้ห้กับ Mouse cursor หากคุณใช้ browser Firefox ลักษณะของ Cursor ที่เห็นจะไม่เหมือนกับของ IE (ลองเอาเมาส์เลื่อนที่ค่า value ต่างๆ ดูค่ะ)

Property	Value	Cursor	IE	FF
cursor	default		4+	2+
	crosshair		4+	2+
	hand		4+
	pointer		4+	2+
	move		4+	2+
	text		4+	2+
	wait		4+	2+
	help		4+	2+
	n-resize		4+	2+
	ne-resize		4+	2+
	e-resize		4+	2+
	se-resize		4+	2+
	s-resize		4+	2+
	sw-resize		4+	2+
	w-resize		4+	2+
	nw-resize		4+	2+
	progress		6+	2+
	not-allowed		6+	2+
	no-drop		6+	2+
	vertical-text		6+	2+
	all-scroll		6+	2+
	col-resize		6+	2+
	row-resize		6+	2+
	url(yourcursor.cur)		6+	2+

ตัวอย่าง

<a href="" style="cursor:help">Help</a><br />
<a href="" style="cursor:url(images/cur002.cur)">My kitty cursor (สำหรับ IE) </a><br />
<a href="" style="cursor:url('images/cur002.cur'),auto">My kitty cursor (สำหรับ Firefox, IE ก็ยังใช้ได้)</a>

ผลลัพธ์ลองเอาเมาส์เลื่อนที่ข้อความด้านล่างดูค่ะ

Help
My kitty cursor (สำหรับ IE)
My kitty cursor (สำหรับ Firefox, IE ก็ยังใช้ได้)

การเขียน Webpage ด้วย CSS

ads by google

วันจันทร์ที่ 6 สิงหาคม พ.ศ. 2555

I started something I couldnt finish...: THings I think I think Vol 6

วันอาทิตย์ที่ 5 สิงหาคม พ.ศ. 2555

Pseudo-element

This is a header

This is a header

Pseudo-classes

การจัด Layout ด้วย CSS (Div)

Layout

Web builder Tutorials

Web builder Tutorials

Media Types

Mouse cursor