· Web viewPractice 4 ว ตถ ประสงค เพ อให น กศ กษาทราบและเข าใจเก ยวก บการแทรก CSS เพ

Subject: Principle of Web Design. Semester: First Semester/2015 Lecturer: Nutthapat Kaewrattanapat. Program: Information Science, Management Information System Major.

Practice 4วัตถุประสงค์

1. เพ่ือให้นกัศกึษาทราบและเข้าใจเก่ียวกบัการแทรก CSS2. เพ่ือให้นกัศกึษาฝึกฝนในการใช้ภาษา HTML สำาหรับการแสดงผลตามท่ีได้ออกแบบไว้ (ตาม

Concept)

CSS หรือ Cascading Style Sheet คือ สว่นของการตกแตง่โดยบงัคบั Elements/Tag ของโครงสร้างในภาษา HTML ให้มีลกัษณะ สี ขนาด เส้นขอบ ตวัอกัษร ตามท่ี CSS กำาหนดไว้

ดงันัน้ จงึสรุปได้วา่ ในสว่นของภาษา HTML จะทำาหน้าท่ีจดัวางโครงสร้างของสว่นประกอบตา่งๆ (Elements: แปลวา่สว่นประกอบ และในภาษา HTML นัน้ Elements หรือ Tags หมายถึง < > </ >) และภาษา CSS จะเป็นตวักำาหนดรูปแบบการตกแตง่ (Style) นัน่เอง

จากภาพจะเห็นได้วา่สว่นของภาษา HTML นัน้ เป็นการจดัวางโครงสร้าง (Structural Layer) แต่ในสว่นของ CSS จะเสริมการทำางานในสว่นของการตกแตง่รูปแบบเพ่ือการนำาเสนอ (Presentation Layer) นัน่เอง

ในการใช้ CSS นัน้ มีวิธีการท่ีนิยมใช้ 3 ลกัษณะ คือ1. การแทรกเข้ากบัโครงสร้าง Element ของ HTML เป็นแบบผกูมดัเพ่ือควบคมุเฉพาะ Element หรือ

Tag นัน้ๆ ดงัตวัอยา่ง


<h1>This is a Blue Heading</h1>

จากตวัอยา่งสงัเกตได้วา่ Element <h1> ใช้ในการแสดงหวัข้อความขนาดใหญ่เพราะมีความสำาคญัอนัดบั 1 ซึง่เป็นท่ีมาของ ช่ือ h1 โดยแสดงข้อความ “This is a Blue Heading” สีดำาซึง่เป็นสีโดยปริยาย (Default) ออกทางหน้าเว็บเพจ (Web Page)

<h1 style="color:blue">This is a Blue Heading</h1>

จากตวัอยา่งภาพด้านบนสงัเกตได้วา่ Element <h1> มีการเพิ่มสไตล์เพ่ือการกำาหนดรูปแบบโดยสงัเกต ุAttribute ท่ีช่ือวา่ style โดยมีการกำาหนด value คือ color:blue ทำาให้การแสดงผลเปลี่ยนไป โดยทำาให้ข้อความ “This is a Blue Heading” ท่ีออกทางหน้าเว็บเพจมีสีฟ้า

ลกัษณะการแทรก Style (CSS) แบบนีเ้ป็นลกัษณะการผกูมดัเฉพาะ Element ซึง่การเลือกใช้ลกัษณะนีจ้ะไมส่ง่ผลตอ่ Element อ่ืนๆ

2. การแทรกเข้ากบัสว่นของ HEAD (<head> </head>) ของหน้าเว็บเพจ เพ่ือควบคมุ Element/Tag ทัง้หน้าเว็บเพจ ดงัตวัอยา่ง

<!DOCTYPE html><html><head></head><body>

<h1>Lecturer Profile</h1><p>Name: Nutthapat Kaewrattanapat <br>Education: Ph.D. Candidate in IT, M.S. MIS, B.S. 1st Class Honors Computer Science


</p><h1>Nice to meet you</h1>

</body></html>

<!DOCTYPE html><html><head><style>body {background-color:lightgrey}h1 {color:blue}p {color:green}</style></head><body><h1>Lecturer Profile</h1><p>Name: Nutthapat Kaewrattanapat <br>Education: Ph.D. Candidate in IT, M.S. MIS, B.S. 1st Class Honors Computer Science</p><h1>Nice to meet you</h1></body></html>

วิธีการท่ี 2 การแทรก CSS <style> ในสว่นของ <head> จะสามารถกำากบัได้เฉพาะหน้าเว็บเพจนัน้ๆ เทา่นัน้ (หน้าเว็บเพจเดียว) แตก่ำากบั Style ได้ทัง้หน้าเว็บ ซึง่ทำาให้เกิดความสะดวกในการบริหารหน้าเว็บเพจทัง้หน้าจากสว่น <style> ในคราวเดียว และง่ายตอ่การแก้ไข เช่น เม่ือต้องการแก้ไขสีใน h1

ถูกกำ�กับด้วย Style





จาก blue เป็น Red ก็สามารถแก้ไขจากจดุเดียว ทำาให้ลดความซำา้ซ้อนของ Code และลดความผิดพลาดจากการแก้ Code ไมห่มดทกุท่ี กรณีหากมี Element h1 จำานวนมาก ทำาให้รักษาเวลาได้ดี

3. การแทรกจากภายนอก ผา่นการเรียกจากภายนอก โดยเรียกวา่การแทรกลิงค์สไตล์จากภายนอก (External Style Sheet) เพ่ือควบคมุหน้าเว็บเพจหลายๆ หน้าในคราวเดียวกนัได้ ดงัตวัอยา่ง

home.html mystyle.css<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="mystyle.css"></head><body><h1>This is a heading</h1><p>The style of this document is a combination of an external stylesheet, and internal style</p></body></html>

body { background-color: lightblue;}h1 { color: navy;}

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"></head>

จากตวัอยา่ง จะมีการแยกไฟล์ CSS ออกจากหน้าเว็บเพจ แตจ่ะใช้วิธีการเช่ือมโยง (Link) ไฟล์ CSS เข้ามายงัหน้าเว็บเพจ ซึง่หน้าเว็บเพจใดท่ีมีการแทรก Link ไว้ จะถกูกำากบัรูปแบบ Style เหมือนกนัทัง้หมด วิธีการนีจ้ะเหมาะสำาหรับกรณีท่ีมีหน้าเว็บเพจจำานวนมาก สามารถแก้ไข Style Sheet ได้จากไฟล์ CSS ไฟล์เดียว และ หน้าเว็บเพจทกุหน้าจะถกูเปลี่ยนแปลงเหมือนกนัหมดทกุหน้า ตวัอยา่งเช่น Facebook ท่ีมีลกัษณะคือ สีฟ้า สีนำา้เงิน หรือ เส้นขอบเป็นสีเทา เป็นต้น เม่ือ Facebook ต้องการเปลี่ยนเป็นสีเขียวและเส้นขอบเป็นสีแดง ก็สามารถทำาได้จากไฟล์เดียว ทำาให้สะดวกตอ่การปรับปรุงแก้ไขหน้าเว็บเพจ

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


ภายนอกท่ีทำาสำาเร็จรูปไว้แล้ว หรือ หากมีเว็บเพจจำานวนมาก ควรเลือกใช้วิธีการท่ี 3 ในการควบคมุกำากบัรูปแบบจะทำาให้แก้ไขได้สะดวดขึน้และประหยดัเวลาในการทำางานลงได้มาก

นอกจากนีย้งัสามารถใช้ทัง้ 3 วิธีพร้อมกนัได้ด้วย และสามารถแทรก Link CSS ได้มากกวา่ 1 ไฟล์ด้วย ทัง้นีอ้ยูท่ี่เนือ้งานและการออกแบบ คิดวิเคราะห์ไว้ลว่งหน้า โดยใช้หลกัการคิดคือ ลดจำานวนความซำา้ซ้อนของการกำากบัรูปแบบลง (ทำาให้ Code สัน้ลง) และ ตระหนกัในเร่ืองของการลดปัญหาเม่ือต้องการแก้ไขรูปแบบในคราวเดียวกนัและใช้เวลาน้อยท่ีสดุ

หากนกัศกึษาตระหนกัและเข้าใจทัง้ 3 วิธี จะทำาให้นกัศกึษาสามารถออกแบบเว็บได้อยา่งมืออาชีพ และมีประสิทธิภาพ แก้ไขง่าย และมีความสวยงามสอดคล้องกบัผู้ ใช้อยา่งดีเย่ียมนัน่เอง

แบบฝึกหดั

จ�กแบบฝึกหดั Practice 3 ข้อที่ 7

1. จาก Practice 3 ข้อท่ี 7 ให้นกัศกึษาแยกสว่นของ Style ออกไปอยูอี่กไฟล์ โดยตัง้ช่ือวา่ mystyle.css และไฟล์ html ให้ช่ือวา่ practice4.html


2. ให้แก้ไข Style จากท่ีเดียวเทา่นัน้ คือ แก้ไขในไฟล์ mystyle.css ทัง้นี ้กำาหนดวา่ห้ามมีการกำากบั Style ภายใน practice4.html โดยให้ practice4.html ถกูกำากบัโดย Style ภายใน mystyle.css เทา่นัน้

3. จงแก้ไข mystyle.css โดยกำาหนดให้ บลอ็กตาราง มีลกัษณะดงันี ้

Group ท่ี 1 ถึง 6 จากสี่เหลี่ยมของแตล่ะธาตใุห้กลายเป็นขอบโค้งมน

Group ท่ี 7 ถึง 12 จากสี่เหลี่ยมของแตล่ะธาตใุห้กลายเป็นมมุโค้งเข้าใน

Group ท่ี 13 ถึง 18 จากสี่เหลี่ยมของแตล่ะธาตใุห้กลายเป็นมมุตดัป้าน

4. ให้เพิ่มลิงค์ ใน html แตล่ะธาต ุไปยงัหน้าเว็บเพจท่ีอธิบายธาตนุัน้ๆ โดยกำาหนดให้เม่ือคลิกแล้ว แสดงเว็บเพจในหน้าตา่งใหม ่(_blank)

ศกึษาเพิ่มเติม: http://www.w3schools.com/css/default.asp

Documents

· Web viewPractice 4 ว ตถ ประสงค เพ อให น กศ กษาทราบและเข าใจเก ยวก บการแทรก CSS เพ