This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Subject: Principle of Web Design. Semester: First Semester/2015 Lecturer: Nutthapat Kaewrattanapat. Program: Information Science, Management Information System Major.
Practice 4วัตถุประสงค์
1. เพ่ือให้นกัศกึษาทราบและเข้าใจเก่ียวกบัการแทรก CSS2. เพ่ือให้นกัศกึษาฝึกฝนในการใช้ภาษา HTML สำาหรับการแสดงผลตามท่ีได้ออกแบบไว้ (ตาม
ในการใช้ CSS นัน้ มีวิธีการท่ีนิยมใช้ 3 ลกัษณะ คือ1. การแทรกเข้ากบัโครงสร้าง Element ของ HTML เป็นแบบผกูมดัเพ่ือควบคมุเฉพาะ Element หรือ
Tag นัน้ๆ ดงัตวัอยา่ง
Subject: Principle of Web Design. Semester: First Semester/2015 Lecturer: Nutthapat Kaewrattanapat. Program: Information Science, Management Information System Major.
<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
Subject: Principle of Web Design. Semester: First Semester/2015 Lecturer: Nutthapat Kaewrattanapat. Program: Information Science, Management Information System Major.
</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>
Subject: Principle of Web Design. Semester: First Semester/2015 Lecturer: Nutthapat Kaewrattanapat. Program: Information Science, Management Information System Major.
จาก blue เป็น Red ก็สามารถแก้ไขจากจดุเดียว ทำาให้ลดความซำา้ซ้อนของ Code และลดความผิดพลาดจากการแก้ Code ไมห่มดทกุท่ี กรณีหากมี Element h1 จำานวนมาก ทำาให้รักษาเวลาได้ดี
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;}
Subject: Principle of Web Design. Semester: First Semester/2015 Lecturer: Nutthapat Kaewrattanapat. Program: Information Science, Management Information System Major.
1. จาก Practice 3 ข้อท่ี 7 ให้นกัศกึษาแยกสว่นของ Style ออกไปอยูอี่กไฟล์ โดยตัง้ช่ือวา่ mystyle.css และไฟล์ html ให้ช่ือวา่ practice4.html
Subject: Principle of Web Design. Semester: First Semester/2015 Lecturer: Nutthapat Kaewrattanapat. Program: Information Science, Management Information System Major.