About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

การกำหนดการใช้งานของ CSS กับ Web Browser [Article ID : 181]


เรื่อง : การกำหนดการใช้งานของ CSS กับ Web Browser

สำหรับ Webmaster แล้ว ความรู้ด้านการพัฒนาเว็บไซต์หรือการออกแบบเว็บเพจให้ดูสวยงามเพียงอย่างเดียว อาจจะไม่เพียงพอ เนื่องจาก Webmaster ต้องเป็นผู้ทีมีความรู้หลากหลายในเรื่องของ Website การเรียนรู้การใช้งานของ Web Browser ก็เป็นอีกความรู้หนึ่งที่ผู้เป็น Webmaster สมควรจะเรียนรู้ เนื่องจาก Web Page ของเว็บไซต์ ต้องทำการแสดงผล (Display) กับโปรแกรมที่เรียกกันว่า Web Browser ดังนั้น ถ้าหาก Webmaster ไม่มีความรู้เรื่องการใช้งาน Web Browser ที่ดีแล้ว บางครั้งปัญหาต่าง ๆ อาจจะเกิดขึ้นได้ เช่น การแสดงผลผิดเพี้ยนไปจากที่ออกแบบ หรือการไม่ทำงานของ Script บางคำสั่ง เป็นต้น ในบทความนี้ผมจึงขอเขียนแนะนำเกี่ยวกับ Web Browser สัก 1 เรื่อง ซึ่งเป็นเรื่องเกี่ยวกับ CSS (Cascading Style Sheets) ลองอ่านและทำความเข้าใจกันดูครับ

CSS หรือ Cascading Style Sheets ปัจจุบันนักพัฒนาเว็บไซต์ได้ให้ความสนใจ และนำมาใช้เป็นส่วนหนึ่งของการออกแบบการแสดผลของหน้าเว็บเพจ ซึ่งความสามารถของ CSS สามารถทำอะไรได้หลากหลาย มากกว่าที่ HTML ที่ใช้ในการแสดงผลเช่นเดียวกันจะทำได้ เช่น การกำหนดสีสันของพื้นหลัง, การจัดวางตำแหน่งของข้อมูลบนหน้าเว็บ เป็นต้น แต่..ถึงแม้ว่าผู้พัฒนาเว็บจะสามารถควบคุมการแสดงผลได้จาก CSS ดังกล่าวก็ตาม ผู้เยี่ยมชมเว็บก็ยังสามารถที่จะปฏิเสธการแสดงผลด้วย CSS ได้จาก Web Browser ของเครื่องผู้เยี่ยมชมเอง โดยสามารถควบคุมได้จาก Option ของ Web Browser ที่ชื่อว่า Internet Options... (กรณี IE) และ Page Style (กรณี FireFox) โดยมีวิธีการ ดังนี้

การปิดใช้งาน CSS ของเว็บบราวเซอร์

1. ทำการเปิด Internet Option ของ IE ขึ้นมา ดังภาพ
2. ที่หน้าต่าง Internet Options เลือกที่ TAB General จากนั้นกดที่ปุ่ม Accessibility... จะได้หน้าต่างใหม่ขึ้นมา ดังภาพ
3. ที่หน้าต่าง Accessibility ของ IE นี้จะเป็นการกำหนดการใช้งานระหว่าง CSS ที่ผู้พัฒนาเว็บสร้างขึ้น กับโปรแกรม Internet Explorer โดยมีรายละเอียด ดังนี้

ตัวอย่างการกำหนดการใช้งาน CSS กับ Web Browser


1. Formating


ตัวอย่าง : เว็บเพจนี้มีการใช้งาน CSS ในการออกแบบ


กำหนดการยกเลิกการใช้สีของ CSS กับ Web Browser


เมื่อมีการกำหนดยกเลิกการใช้สีจาก CSS เราจะสังเกตุได้ว่า webpage ในส่วนที่มีการกำหนดใช้สีจาก CSS จะถูกยกเลิกไป ในภาพข้างต้น ให้สังเกตที่สี Background ของข้อมูลทางขวามือ แล้วเปรียบเทียบกับภาพแรกของตัวอย่าง

ในส่วนของการกำหนด Formating อีก 2 ตัวเลือกก็มีลักษณะเช่นเดียวกัน ลองกำหนดค่ากันดูนะครับ

2. User Style Sheet เป็นการกำหนดให้ใช้ CSS จากผู้ที่ใช้งาน Web Browser เอง หรือโดยผู้เข้าเยี่ยามชมเว็บเอง หากเว็บเพจนั้นผู้พัฒนาเว็บไซต์ไม่มีการกำหนด CSS ไว้

<html>
<head>
<title> CSS Web Browser</title>
</head>
<body>
CSS Web Browser
</body>
</html>

จากตัวอย่าง CODE ของ HTML ข้างต้นเราจะเห็นได้ว่าไม่มีการกำหนด CSS ที่ใช้ในการแสดงผลใด ๆ กับเว็บเพจนี้ เมื่อแสดงผลโดยปรกติกับ Browser จะได้ดังภาพ


แต่ถ้าหากเรามีการกำหนดให้ Browser มีการกำหนด CSS สำหรับใช้ในการแสดงผลโดยผู้เยี่ยมชมเว็บเอง โดยที่ผู้เยี่ยมชมเว็บต้องทำการสร้างไฟล์ CSS ขึ้นมาเก็บไว้เสียก่อนภายในเครื่องคอมพิวเตอร์ของตนเอง เช่น

body{ 
color:#CC0000;
font-size: 20px;
font-weight: bold;
}

เราสร้าง CODE ของ CSS ข้างต้น โดยที่คุณสมบัติของโค้ด CSS นี้ จะเป็นการกำหนดให้สีของตัวอักษรที่อยู่ภายใต้ TAG BODY เป็นสีแดง มีขนาดตัวอักษร 20 pixel และเป็นตัวหนา จากนั้น Save ไว้ที่ C: โดยที่ชื่อไฟล์เราตั้งว่า mycss.css หากผู้เยี่มชมเว็บต้องการกำหนดการแสดงผลด้วย CSS ของตนเอง ให้กระทำดังนี้


เลือกที่ Format documents using my style sheet จากนั้นทำการ Browse... เลือกไฟล์ CSS ที่เซพเก็บไว้ในเครื่อง Computer ของเรา ในที่นี้ผมเก็บไฟล์ CSS ไว้ที่ C:mycss.css จึงได้ดังภาพข้างต้น จากนั้นกดปุ่ม OK แล้วทำการ ปิด Web Browser ลงแล้วทำการเปิดขึ้นมาใหม่ เราก็จะได้ Browser ที่มีการเรียกใช้งาน CSS ของเราเอง ดังภาพ


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

การยกเลิกการใช้งาน CSS กับ FireFox


FireFox เป็นโปรแกรม Web Browser อีกโปรแกรมหนึ่งที่มีผู้นิยมใช้กันแพร่หลายในปัจจุบัน ซึ่งตัวโปรแกรม FireFox เราก็สามารถทำการยกเลิกการใช้งาน CSS ที่สร้างขึ้นมาจากผู้พัฒนาเว็บได้เช่นเดียวกัน โดยไปที่
Main Menu -> View -> Page Style -> No Style
ดังภาพ โปรแกรมก็จะยกเลิกการใช้งาน CSS ให้โดยทันที


ยังมีเรื่องราวของการใช้งาน Web Browser อีกหลากหลายแง่มุม ซึ่งผมจะค่อย ๆ หยิบยกทะยอยทำเป็นบทความให้อ่านต่อ ๆ ไปครับ..คอยติดตาม
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

ทดสอบการทำงานของเว็บไซต์บนอุปกรณ์มือถือ (Mobile Devices) กับ Google

เรื่อง : มาทดสอบเว็บไซต์กับการแสดงผลบนอุปกรณ์มือถือ (Mobile Devices) ด้วยบริการจาก Google ปัจจุบันการออกแบบ และพัฒนาเว็บไซ...  

เปลี่ยน Cursor หรือตัวชี้เมาท์ง่าย ๆ สไตล์เรา

เรื่อง : เปลี่ยน Cursor หรือตัวชี้ของเมาท์บนหน้าเว็บเพจ มีแฟนเว็บไถ่ถามกันเข้ามาว่า...จะเปลี่ยนรูปร่างของเมาท์ให้เป็นรู...  

เขียนโปรแกรม (PHP) อย่างไรให้ Run เร็ว

เรื่อง : เขียนโปรแกรม PHP อย่างไรให้ทำงานได้อย่างรวดเร็ว เคยเข้าไปอ่านบทความของฝรั่ง (Eng) เขามา เรื่องของการพิสูจน์แล้วน...  

มาใช้งาน Font สวย ๆ กับเว็บเพจกันเถอะ (font-face)

เรื่อง : การใช้งาน Font สวย ๆ กับข้อความในเว็บเพจ Fonts หรือแบบตัวอักษรหากเรานำไปใช้กั...  


Copyright ©2003-2016 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*