Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Published by lavanh9979, 2021-08-24 09:06:50

Description: ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Search

Read the Text Version

CHAPTER 5: CSS3 PROPERTIES&VALUE 231 Example /* css file: mystyle.css */ h1 {text-align: center;} p.left {text-align: left;} p.right {text-align: right;} p.justify {text-align: justify;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Text Alignment (center)</h1> <p class=\"left\">Information Science. (left)</p> <p class=\"right\">Information Science. (right)</p> <p class=\"justify\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (justify)</p> </body> </html> Result 3. Text Decoration การตกแต่งข้อความด้วยเส้นและสีเส้น โดยการประกาศคุณสมบัติ \"text-decoration\" ให้กับสไตลช์ ีต รปู แบบจะมีผลกับขอ้ ความในเว็บเพจ กาหนดคา่ เป็นการตกแตง่ ข้อความ ประกอบด้วย ไมก่ าหนดคา่ (none) เส้นใตข้ ้อความ (underline) เส้นเหนือข้อความ (overline) เสน้ ขดี ทับขอ้ ความ (line-through) สีเส้น กาหนดค่าเป็นชื่อสีหรือรหัสสี กาหนดค่าเป็นลักษณะเส้น ได้แก่ เส้นทึบ (solid) เส้นคู่ (double) เส้นจุด (dotted) เส้นขีด (dashed) และเส้นหยัก (wavy) กาหนดเป็นค่า แรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติและกาหนดค่า ดังนี้

232 CHAPTER 5: CSS3 PROPERTIES&VALUE Syntax text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit; Example /* css file: mystyle.css */ h1 {text-decoration: none;} p.ex1 {text-decoration: overline green dotted;} p.ex2 {text-decoration: line-through red solid;} p.ex3 {text-decoration: underline blue wavy;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Text Decoration</h1> <p class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 233 4. Text Transformation การแปลงข้อความตัวอักษรภาษาอังกฤษ โดยการประกาศคุณสมบัติ \"text-transform\" ให้กับสไตล์ชีต เพื่อนารูปแบบไปใช้กับข้อความในเว็บเพจ กาหนดค่าเป็นรูปแบบการแปลงข้อความ ประกอบด้วย แปลงเป็นข้อความตัวพิมพ์ใหญ่ทั้งหมด (uppercase) แปลงเป็นข้อความตัวพิมพ์เล็ก ทั้งหมด (lowercase) และแปลงเป็นข้อความตัวพิมพ์ใหญ่เฉพาะอักขระแรกของคา (capitalize) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติ และกาหนดคา่ ดงั นี้ Syntax text-transform: none|capitalize|uppercase|lowercase|initial|inherit; Example /* css file: mystyle.css */ h1 {text-transform: none;} p.ex1 {text-transform: capitalize;} p.ex2 {text-transform: uppercase;} p.ex3 {text-transform: lowercase;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Text Transform</h1> <p class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html>

234 CHAPTER 5: CSS3 PROPERTIES&VALUE Result 5. Text Indentation การกาหนดระยะย่อหน้าให้กับข้อความ โดยการประกาศคุณสมบัติ \"text-indent\" ให้กับ สไตล์ชีต เพื่อนารูปแบบไปใช้กับข้อความในเว็บเพจ กาหนดค่าเป็นค่าตัวเลขระยะย่อหน้า โดยใช้ หน่วยวัดเป็นพิกเซล (px) เซนติเมตร (cm) หรือร้อยละ (%) กาหนดเป็นค่าแรกเร่ิม (initial) และ กาหนดเป็นค่าสืบทอด (inherit) มีรปู แบบการกาหนดคุณสมบัตแิ ละกาหนดคา่ ดงั นี้ Syntax text-indent: length|initial|inherit; Example /* css file: mystyle.css */ p.ex1 {text-indent: 20px;} p.ex2 {text-indent: 30%;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Text Indentation</h1> <p class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (20px)</p> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (30%)</p> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 235 Result 6. Letter Spacing การกาหนดระยะห่างระหวา่ งตวั อักษร โดยการประกาศคุณสมบัติ \"letter-spacing\" ให้กับ สไตล์ชีต เพ่ือนารูปแบบไปใช้กับข้อความในเว็บเพจ กาหนดค่าเป็นค่าตัวเลขระยะห่างระหว่าง ตัวอักษร โดยใช้หน่วยวัดเป็นพิกเซล (px) หรือเซนติเมตร (cm) สามารถกาหนดตัวเลขเป็นค่าลบได้ กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัติ และกาหนดค่า ดงั นี้ Syntax letter-spacing: normal|length|initial|inherit; Example /* css file: mystyle.css */ h1 {letter-spacing: 15px;} p.ex1 {letter-spacing: normal;} p.ex2 {letter-spacing: 0.3cm;} p.ex3 {letter-spacing: -1.2px;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Letter Spacing (15px)</h1> <p class=\"ex1\">Information Science. (normal)</p> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (0.3cm)</p> <p class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (-1.2px)</p> </body> </html>

236 CHAPTER 5: CSS3 PROPERTIES&VALUE Result 7. Line Height การกาหนดความสูงของบรรทัดข้อความ โดยการประกาศคุณสมบัติ \"line-height\" ให้กับ สไตลช์ ีต เพ่อื นารูปแบบไปใชก้ ับขอ้ ความในเวบ็ เพจ กาหนดค่าเป็นค่าตวั เลขระดบั ความสงู ของบรรทัด โดยไม่ระบุหน่วยวัด ใช้หน่วยวัดเป็นพิกเซล (px) หรือร้อยละ (%) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสบื ทอด (inherit) มรี ปู แบบการกาหนดคณุ สมบัตแิ ละกาหนดคา่ ดังน้ี Syntax line-height: normal|number|length|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { line-height: 0.8; border: 1px solid; } p.ex2 { line-height: 25px; border: 1px solid; } p.ex3 { line-height: 250%; border: 1px solid; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 237 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Line Height</h1> <p class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (0.8)</p> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (25px)</p> <p class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (250%)</p> </body> </html> Result 8. Text Direction การกาหนดทิศทางของข้อความ โดยการประกาศคุณสมบัติ \"direction\" ให้กับสไตล์ชีต เพอื่ นารปู แบบไปใช้กับข้อความในเว็บเพจ กาหนดค่าเปน็ ทิศทางของข้อความ ประกอบดว้ ย จากซ้าย ไปขวา (ltr) และจากขวาไปซ้าย (rtl) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) ทั้งน้ี หากกาหนดทิศทางจากขวาไปซ้าย อาจใช้งานร่วมกับแท็ก \"bdo\" เพื่อกาหนดให้ ขอ้ ความมที ิศทางกลบั ด้าน มรี ูปแบบการกาหนดคุณสมบัติและกาหนดคา่ ดงั นี้ Syntax direction: ltr|rtl|initial|inherit;

238 CHAPTER 5: CSS3 PROPERTIES&VALUE Example /* css file: mystyle.css */ p.ltr {direction: ltr;} p.rtl {direction: rtl;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Text Direction</h1> <p class=\"ltr\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (ltr)</p> <p class=\"rtl\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (rtl)</p> <p class=\"rtl\"> <bdo dir=\"rtl\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (rtl+bdo)</bdo> </p> </body> </html> Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 239 9. Word Spacing การกาหนดระยะห่างระหว่างคา โดยการประกาศคุณสมบัติ \"word-spacing\" ให้กับ สไตล์ชีต เพือ่ นารูปแบบไปใช้กบั ข้อความในเวบ็ เพจ กาหนดค่าเปน็ ค่าตวั เลขระยะห่างระหว่างคา โดย ใช้หน่วยวัดเป็นพิกเซล (px) กาหนดค่าปกติ (normal) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนด เปน็ คา่ สืบทอด (inherit) มรี ูปแบบการกาหนดคุณสมบตั แิ ละกาหนดค่า ดงั น้ี Syntax word-spacing: normal|length|initial|inherit; Example /* css file: mystyle.css */ h1 {word-spacing: normal;} p {word-spacing: 20px;} div {word-spacing: -5px;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Word Spacing (normal)</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (20px)</p> <div>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (-5px)</div> </body> </html> Result

240 CHAPTER 5: CSS3 PROPERTIES&VALUE 10. Text Shadow การกาหนดเงาให้กับขอ้ ความ โดยการประกาศคณุ สมบตั ิ \"text-shadow\" ใหก้ ับสไตลช์ ีต รูปแบบจะมีผลกับข้อความ ซ่ึงจะช่วยเพ่ิมมิติให้ข้อความ กาหนดค่าเป็นค่าตัวเลขมุมตกกระทบของ เงาในแนวต้ัง (h-shadow) และแนวนอน (v-shadow) ตัวเลขรัศมีความเบลอของเงา (blur-radius) โดยใช้หน่วยวัดเป็นพิกเซล (px) และกาหนดสีของเงา (color) เช่น text-shadow: 2px 2px 5px red เป็นต้น กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการ กาหนดคณุ สมบตั ิและกาหนดค่า ดังนี้ Syntax text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; Example /* css file: mystyle.css */ h1 { text-shadow: 2px 2px 5px red; } p{ text-shadow: none; } div { text-shadow: 3px 2px 5px silver; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Text Shadow</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <div>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 241 Result คณุ สมบัติแทรกเน้อื หา คณุ สมบตั ิแทรกเนื้อหา (Content Properties) คือ คณุ สมบตั ิทใี่ ชส้ าหรับแทรกข้อความหรือ สัญลักษณ์ต่าง ๆ โดยอัตโนมัติ นิยมใช้แทรกข้อความหรือสัญลักษณ์ที่มีการใช้งานซ้า ๆ ซึ่งไม่ จาเป็นต้องพิมพ์ข้อความหรือสัญลักษณ์ใหม่ทุกครั้ง โดยการประกาศคุณสมบัติ \"content\" ให้กับ สไตล์ชีต ใช้งานร่วมกับคุณสมบัติ \"::before\" และ \"::after\" ซึ่งเป็นการแทรกเน้ือหาไว้ด้านหน้าหรือ ด้านหลังตาแหน่งท่ีเลือก กาหนดค่าเป็น รูปแบบการแทรกเน้ือหา ประกอบด้วย ค่าเริ่มต้น (normal) ไม่กาหนดค่า (none) แสดงตัวนับ (counter) แทรกเน้ือหาตามแอตทริบิวต์ (attr) แทรกข้อความท่ี ระบุ (string) แทรกเคร่ืองหมายอัญประกาศเปิด (open-quote) แทรกเคร่ืองหมายอัญประกาศปิด (close-quote) ลบเคร่ืองหมายอัญประกาศเปิด (no-open-quote) ลบครื่องหมายอัญประกาศปิด (no-close-quote) แทรกส่ือจากการเชื่อมโยง (url) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเปน็ ค่าสบื ทอด (inherit) มีรปู แบบการกาหนดคุณสมบัติและกาหนดคา่ ดังนี้ Syntax content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote| no-close-quote|url|initial|inherit; Example /* css file: mystyle.css */ p.ex1::before {content: nomal;} p.ex2::before {content: \"Welcome to \"; color: blue; font-weight: bold;} /* string */ p.ex3::before {content: open-quote; font-weight: bold;} p.ex3::after {content: close-quote; font-weight: bold;} p.ex4::before {content: no-open-quote;} p.ex4::after {content: no-close-quote;} p.ex5::before {content: url(images/bullet.png);} p.ex6 {counter-increment: myIndex;} p.ex6::before { content: counter(myIndex);} a::before{content: \"(\" attr(href) \")\";}

242 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Content</h1> <p class=\"ex1\">Information science, Udon-Thani Rajabhat University.</p> <p class=\"ex2\">Information science, Udon-Thani Rajabhat University.</p> <p class=\"ex3\">Information science, Udon-Thani Rajabhat University.</p> <p class=\"ex4\">Information science, Udon-Thani Rajabhat University.</p> <p class=\"ex5\">Information science, Udon-Thani Rajabhat University.</p> <p class=\"ex5\">Information science, Udon-Thani Rajabhat University.</p> <p class=\"ex6\">Information science, Udon-Thani Rajabhat University.</p> <p class=\"ex6\">Information science, Udon-Thani Rajabhat University.</p> <p class=\"ex6\">Information science, Udon-Thani Rajabhat University.</p> <p> <a href=\"http://is.udru.ac.th\">Information science</a> don-Thani Rajabhat University. </p> </body> </html> Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 243 คุณสมบัติรายการ คุณสมบัติรายการ (List Properties) คือ คุณสมบัติที่ใช้สาหรับกาหนดรูปแบบรายการ เพื่อ แสดงหัวข้อรายการแบบเรียงลาดับ เช่น เรียงลาดับตามตัวอักษร เรียงลาดับตามตัวเลข เป็นต้น และ แสดงหัวข้อรายการแบบไม่เรยี งลาดับ เช่น ใชจ้ ดุ เปน็ หัวขอ้ รายการ ใช้ภาพเป็นหวั ข้อรายการ เป็นต้น และยังสามารถกาหนดตาแหนง่ หวั ข้อรายการได้ มีรายละเอยี ดการกาหนดคณุ สมบตั ริ ายการ ดังน้ี 1. List Style Type การกาหนดประเภทหัวข้อรายการ โดยการประกาศคุณสมบัติ \"list-style-type\" ให้กับ สไตล์ชีต รูปแบบจะมีผลกับอิลิเมนต์รายการในเว็บเพจ กาหนดค่าเป็นรายการแบบไม่เรียงลาดับ <ul>...</ul> เช่น จดุ (disc) วงกลม (circle) สเ่ี หล่ียม (square) เป็นตน้ และรายการแบบเรียงลาดบั <ol>…</ol> เช่น ตัวเลขทศนิยม (decimal) ตัวเลขโรมันพิมพ์เล็ก (lower-roman) ตัวเลขโรมัน พมิ พ์ใหญ่ (upper-roman) เป็นตน้ มรี ูปแบบการกาหนดคุณสมบตั แิ ละกาหนดคา่ ดังน้ี Syntax list-style-type: value; Example /* css file: mystyle.css */ ul.aex1 {list-style-type: circle;} ul.bex2 {list-style-type: disc;} ul.cex3 {list-style-type: square;} ol.dex4 {list-style-type: armenian;} ol.ex5 {list-style-type: cjk-ideographic;} ol.ef x6 {list-style-type: decimal;} ol.egx7 {list-style-type: decimal-leading-zero;} ol.ehx8 {list-style-type: georgian;} ol.ei x9 {list-style-type: hebrew;} ol.jex10 {list-style-type: hiragana;} ol.kex11 {list-style-type: hiragana-iroha;} ol.el x12 {list-style-type: katakana;} ol.emx13 {list-style-type: katakana-iroha;} ol.nex14 {list-style-type: lower-alpha;} ol.oex15 {list-style-type: lower-greek;} ol.pex16 {list-style-type: lower-latin;} ol.eqx17 {list-style-type: lower-roman;} ol.rex18 {list-style-type: upper-alpha;} ol.es x19 {list-style-type: upper-greek;} ol.tex20 {list-style-type: upper-latin;} ol.uex21 {list-style-type: upper-roman;} ol.vex22 {list-style-type: none;} ol.ewx23 {list-style-type: inherit;} .column {width: auto; float: left; padding: 4px;}

244 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>List Style Type</h1> <div class=\"column\"> <ul class=\"ex1\"> <li>circle</li> <li>information science</li> <li>computer science</li> </ul> <ul class=\"ex2\"> <li>disc</li> <li>information science</li> <li>computer science</li> </ul> <ul class=\"ex3\"> <li>square</li> <li>information science</li> <li>computer science</li> </ul> <ol class=\"ex4\"> <li>armenian</li> <li>information science</li> <li>computer science</li> </ol> <ol class=\"ex5\"> <li>cjk-ideographic</li> <li>information science</li> <li>computer science</li> </ol> <ol class=\"ex6\"> <li>decimal</li> <li>information science</li> <li>computer science</li> </ol> <ol class=\"ex7\"> <li>decimal-leading-zero</li> <li>information science</li> <li>computer science</li> </ol> </div> <!-- class ex8 to class ex23 --> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 245 Result 2. List Style Image การกาหนดหัวข้อรายการด้วยภาพ โดยการประกาศคุณสมบัติ \"list-style-image\" ให้กับ สไตล์ชีต รูปแบบจะมีผลกับอิลิเมนต์รายการแบบไม่เรียงลาดับในเว็บเพจ กาหนดค่าเป็นฟังก์ชัน \"url()\" เพื่ออ้างอิงไปยังตาแหน่งจัดเก็บภาพ ไม่กาหนดค่า (none) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสบื ทอด (inherit) มีรูปแบบการกาหนดคุณสมบตั แิ ละกาหนดค่า ดังน้ี Syntax list-style-image: url|none|initial|inherit; Example /* css file: mystyle.css */ ul { list-style-image: url(\"images/bullet.png\"); }

246 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>List Style Image</h1> <ul> <li>Information Science</li> <li>Computer Science</li> <li>Enviromental Science</li> <li>Health Science</li> <li>General Science</li> </ul> </body> </html> Result 3. List Style Position การกาหนดตาแหน่งย่อหน้ารายการ เมื่อรายการมีความยาวมากกว่า 1 บรรทัด โดยการ ประกาศคุณสมบัติ \"list-style-position\" ให้กับสไตล์ชีต รูปแบบจะมีผลกับอิลิเมนต์รายการในเว็บ เพจ กาหนดค่าเป็นค่าตาแหน่งย่อหน้า ประกอบด้วย ตาแหน่งย่อหน้าด้านใน (inside) และตาแหน่ง ย่อหน้าด้านนอก (outside) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มี รปู แบบการกาหนดคณุ สมบตั ิและกาหนดค่า ดังนี้ Syntax list-style-position: inside|outside|initial|inherit; Example /* css file: mystyle.css */ ul.inside {list-style-position: inside;} ul.outside {list-style-position: outside;}

CHAPTER 5: CSS3 PROPERTIES&VALUE 247 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>List Style Position: Inside</h1> <ul class=\"inside\"> <li>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</li> <li>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</li> </ul> <h1>List Style Position: Outside</h1> <ul class=\"outside\"> <li>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</li> <li>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</li> </ul> </body> </html> Result

248 CHAPTER 5: CSS3 PROPERTIES&VALUE 4. List Style Shorthand การกาหนดรูปแบบรายการ โดยการประกาศคุณสมบัติ \"list-style\" ให้กับสไตล์ชีต ซ่ึง สามารถกาหนดคุณสมบัติต่าง ๆ ของรูปแบบรายการได้ในคุณสมบัติเดียว กาหนดค่าเป็นประเภท หัวข้อรายการ (list-style-type) ตาแหน่งย่อหน้ารายการ (list-style-position) และภาพหัวข้อ รายการ (list-style-image) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มี รปู แบบการกาหนดคุณสมบตั ิและกาหนดคา่ ดงั น้ี Syntax list-style: list-style-type list-style-position list-style-image|initial|inherit; Example /* css file: mystyle.css */ ul { list-style: circle inside url(\"images/bullet.png\"); } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>List Style</h1> <ul> <li>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</li> <li>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</li> </ul> </body> </html> Result

CHAPTER 5: CSS3 PROPERTIES&VALUE 249 คณุ สมบัติเสน้ เคา้ ร่าง คุณสมบัติเส้นเค้าร่าง (Outline Properties) คือ คุณสมบัติที่ใช้สาหรับกาหนดเส้นรอบวัตถุ หรือรอบอิลิเมนต์ โดยจะแสดงเส้นเค้าร่างในตาแหน่งรอบนอกเส้นขอบ ส่งผลให้วัตถุหรืออิลิเมนต์มี ความโดดเด่นมากย่ิงข้ึน สามารถกาหนดลักษณะเส้น สีเส้น ขนาดเส้น และขนาดช่องว่างระหวา่ งเสน้ เคา้ รา่ งกบั เส้นขอบ มีรายละเอยี ดการกาหนดคุณสมบตั ิ ดงั นี้ 1. Outline Style การกาหนดลักษณะของเส้นเค้าร่าง โดยการประกาศคุณสมบัติ \"outline-style\" ให้กับ สไตล์ชีต รูปแบบจะส่งผลให้อิลิเมนต์แสดงเส้นเค้าร่างตามลักษณะที่กาหนด กาหนดค่าเป็นลักษณะ ของเส้น ประกอบด้วย เส้นทึบ (solid) เส้นจุด (dotted) เส้นประ (dashed) เส้นคู่ (double) เส้น ร่อง (groove) เส้นสันนูน (ridge) เส้นยุบด้านใน (inset) เส้นยุบด้านนอก (outset) ไม่กาหนดค่า (none) เส้นซ่อน (hidden) กาหนดเป็นค่าแรกเริ่ม (initial) และกาหนดให้เปน็ การสืบทอดคุณสมบัติ (inherit) มีรปู แบบการกาหนดคุณสมบัตแิ ละกาหนดคา่ ดังนี้ Syntax outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; Example /* css file: mystyle.css */ p.ex1 {outline-style: dotted;} p.ex2 {outline-style: dashed;} p.ex3 {outline-style: solid;} p.ex4 {outline-style: double;} p.ex5 {outline-style: groove;} p.ex6 {outline-style: ridge;} p.ex7 {outline-style: inset;} p.ex8 {outline-style: outset;} .ex1, .ex2, .ex3, .ex4, .ex5, .ex6, .ex7, .ex8 { border: solid 1px black; }

250 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Outline Style</h1> <p class=\"ex1\">dotted</p> <p class=\"ex2\">dashed</p> <p class=\"ex3\">solid</p> <p class=\"ex4\">double</p> <p class=\"ex5\">groove: The effect depends on the outline-color value.</p> <p class=\"ex6\">ridge: The effect depends on the outline-color value.</p> <p class=\"ex7\">inset: The effect depends on the outline-color value.</p> <p class=\"ex8\">outset: The effect depends on the outline-color value.</p> </body> </html> Result 2. Outline Color การกาหนดสีเส้นเค้าร่าง โดยการประกาศคุณสมบัติ \"outline-color\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้อิลิเมนต์แสดงสีเส้นเค้าร่างตามท่ีกาหนด กาหนดค่าเป็น ค่าสี (color) ประกอบด้วย ช่ือสี รหัสสีเลขฐานสิบหก หรือค่าสีรูปแบบ RGB กาหนดเป็นค่าสีตรงข้ามกับสีพ้ืนหลัง (invert) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนด คุณสมบตั แิ ละกาหนดคา่ ดังน้ี Syntax outline-color: color|invert|initial|inherit;

CHAPTER 5: CSS3 PROPERTIES&VALUE 251 Example /* css file: mystyle.css */ p.ex1 { outline-style: groove; outline-color: coral; } p.ex2 { outline-style: ridge; outline-color: darkturquoise; } p.ex3 { outline-style: dotted; outline-color: hotpink; } p.ex4 { outline-style: dashed; outline-color: invert; } .ex1, .ex2, .ex3, .ex4 { border: solid 1px black; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Outline Color</h1> <p class=\"ex1\">color: coral</p> <p class=\"ex2\">color: darkturquoise</p> <p class=\"ex3\">color: hotpink</p> <p class=\"ex4\">color: invert</p> </body> </html> Result

252 CHAPTER 5: CSS3 PROPERTIES&VALUE 3. Outline Width การกาหนดขนาดความกว้างของเส้นเค้าร่าง โดยการประกาศคุณสมบัติ \"outline-width\" ให้กับสไตล์ชีต กาหนดค่าเป็นขนาดความกว้างของเส้นเค้าร่าง ประกอบด้วย ค่าตัวเลขขนาดความ กวา้ ง โดยใชห้ น่วยวดั เปน็ พกิ เซล (px) กาหนดค่าเป็นชื่อขนาดความกวา้ ง ไดแ้ ก่ บาง (thin) ปานกลาง (medium) และหนา (thick) กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มี รปู แบบการกาหนดคณุ สมบตั ิและกาหนดค่า ดังนี้ Syntax outline-width: length|medium|thin|thick|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { outline-style: solid; outline-width: 5px; } p.ex2 { outline-style: solid; outline-width: thin; } p.ex3 { outline-style: solid; outline-width: medium; } p.ex4 { outline-style: solid; outline-width: thick; } HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Outline Width</h1> <p class=\"ex1\">width: 5px</p> <p class=\"ex2\">width: thin</p> <p class=\"ex3\">width: medium</p> <p class=\"ex4\">width: thick</p> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 253 Result 4. Outline Offset การกาหนดขนาดช่องว่างระหว่างเส้นเค้าร่างกับเส้นขอบ โดยการประกาศคุณสมบัติ \"outline-offset\" ให้กับสไตล์ชีต รูปแบบจะส่งผลให้เกิดระยะห่างระหว่างเส้นเค้าร่างกับเส้นขอบ กาหนดคา่ เปน็ คา่ ตวั เลขขนาดชอ่ งว่าง โดยใชห้ นว่ ยวดั เป็นพิกเซล (px) กาหนดเป็นคา่ แรกเริ่ม (initial) และกาหนดเปน็ คา่ สบื ทอด (inherit) มีรูปแบบการกาหนดคุณสมบัตแิ ละกาหนดคา่ ดังน้ี Syntax outline-offset: length|initial|inherit; Example /* css file: mystyle.css */ div.ex1 { border: solid 1px black; background-color: lemonchiffon; margin: 20px; outline-style: solid; outline-width: 2px; outline-color: hotpink; outline-offset: 20px; } div.ex2 { border: solid 1px black; background-color: lemonchiffon; margin: 10px; outline-style: dotted; outline-width: 2px; outline-color: coral; outline-offset: 10px; }

254 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Outline Offset</h1> <div class=\"ex1\">offset: 20px</div> <div class=\"ex2\">offset: 10px</div> </body> </html> Result 5. Outline Shorthand การกาหนดคุณสมบัติของเส้นเค้าร่าง โดยการประกาศคุณสมบตั ิ \"outline\" ใหก้ บั สไตล์ชีต ซ่ึงสามารถกาหนดคุณสมบัติต่าง ๆ ของเส้นเค้าร่างได้ในคุณสมบัติเดียว กาหนดค่าเป็นลักษณะเส้น ขอบ สีเส้นขอบ และขนาดเส้นขอบ กาหนดเป็นค่าแรกเร่ิม (initial) และกาหนดเป็นค่าสืบทอด (inherit) มีรูปแบบการกาหนดคุณสมบัตแิ ละกาหนดค่า ดังนี้ Syntax outline: outline-width outline-style outline-color|initial|inherit; Example /* css file: mystyle.css */ p.ex1 { border: solid 1px black; outline: 2px dashed #DF0022; } p.ex2 { border: solid 1px black; outline: 5px solid coral; }

CHAPTER 5: CSS3 PROPERTIES&VALUE 255 HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Outline</h1> <p class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result คุณสมบตั ติ วั ชีเ้ มาส์ คุณสมบัตติ ัวชี้เมาส์ (Cursor Properties) คอื คุณสมบตั ทิ ใี่ ช้สาหรบั กาหนดรปู แบบตวั ช้เี มาส์ ให้มีลักษณะต่าง ๆ โดยการประกาศคุณสมบัติ \"cursor\" ให้กับสไตล์ชีต รูปแบบจะแสดงผลเม่ือนา เมาสว์ างเหนอื อลิ ิเมนต์ท่ีกาหนดคณุ สมบัติ \"cursor\" กาหนดค่าเปน็ ชื่อรปู แบบตวั ชเี้ มาส์ มีรปู แบบการ กาหนดคุณสมบัตแิ ละกาหนดค่า ดงั นี้ Syntax cursor: value; Example /* css file: mystyle.css */ .ex1 {cursor: move;} .ex2 {cursor: cell;} .ex3 {cursor: not-allowed;}

256 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Cursor</h1> <p class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (cursor: move)</p> <p class=\"ex2\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (cursor: cell)</p> <p class=\"ex3\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. (cursor: not-allowed)</p> </body> </html> Result แสดงรูปแบบตัวชี้เมาส์ เมอื่ วางเมาสเ์ หนอื อิลเิ มนตท์ ี่กาหนด

CHAPTER 5: CSS3 PROPERTIES&VALUE 257 การประกาศคุณสมบัติ \"cursor\" สามารถกาหนดค่าเป็นรูปแบบของตัวชี้เมาส์ได้หลาย ลักษณะ ข้ึนอย่กู ับความเหมาะสมของการนาไปใชง้ าน มรี ปู แบบดังตารางท่ี 5.1 ตารางที่ 5.1 รปู แบบของตวั ชี้เมาส์ Values Example Values Example nw-resize (no cursor) alias nwse-resize no-drop all-scroll none not-allowed auto pointer progress cell row-resize s-resize context-menu se-resize sw-resize col-resize text URL copy vertical-text w-resize crosshair wait zoom-in default zoom-out initial e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize ns-resize

258 CHAPTER 5: CSS3 PROPERTIES&VALUE คา่ แรกเริ่มและคา่ สืบทอด ค่าแรกเร่ิม (Initial) เป็นการกาหนดค่าให้กับคุณสมบัติให้อยู่ในรูปแบบของค่าแรกเร่ิมของ การแสดงผล และค่าสืบทอด (Inherit) เป็นการกาหนดค่าให้กับคุณสมบัติ โดยจะใช้งานรูปแบบ เดียวกนั กบั อิลิเมนต์หลกั หรอื อลิ เิ มนตแ์ ม่ (Parent) มีรายละเอยี ดดงั น้ี 1. คา่ แรกเริ่ม ค่าแรกเริ่ม เป็นการกาหนดค่า \"initial\" ให้กับคุณสมบัติท่ีสามารถกาหนดรูปแบบเป็นค่า แรกเริ่มได้ โดยรูปแบบท่ีแสดงผลจะข้ึนอยู่กับรูปแบบของค่าแรกเร่ิมของอิลิเมนต์นั้น ๆ ซึ่งรูปแบบท่ี แสดงผลจะแสดงผลเป็นค่าแรกเริม่ แม้จะอยู่ภายใต้คุณสมบตั ิอ่ืน ท่ีมีการกาหนดรูปแบบแล้วก็ตาม มี รูปแบบกาหนดคา่ ดังนี้ Syntax property: initial; Example /* css file: mystyle.css */ div {color: red; border: 1px solid darkgrey;} h1 {color: initial;} p.ex1 {color: initial;} HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <div> <h1>Initial</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p class=\"ex1\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> </body> </html>

CHAPTER 5: CSS3 PROPERTIES&VALUE 259 Result จากผลลพั ธ์ของการประกาศสไตลช์ ตี ใหก้ บั อลิ ิเมนต์ \"h1\" และ \"p.ex1\" โดยกาหนดคุณสมบัติ \"color\" เป็น \"initial\" จะเห็นได้ว่าสีข้อความจะแสดงเป็นสีดา ซ่ึงเป็นค่าแรกเริ่ม ถึงแม้ท้ัง 2 อิลิเมนต์ จะอยู่ภายใต้อิลิเมนต์ \"div\" ที่มีการกาหนดสีข้อความเป็นสีแดง และมีการกาหนดเส้นขอบไว้แล้วก็ ตาม 2. ค่าสืบทอด ค่าสืบทอด เป็นการกาหนดค่า \"inherit\" ให้กับคุณสมบัติที่สามารถสืบทอดคุณสมบัติได้ โดยรูปแบบท่ีแสดงผลจะเป็นรูปแบบเดียวกันกับอิลิเมนต์หลักหรืออิลิเมนต์แม่ (Parent) จึงเรียกว่า การสืบทอดคุณสมบัติ ซึ่งอิลิเมนต์ท่ีอยู่ภายใต้อิลิเมนต์แม่จะเรียกว่าอิลิเมนต์รองหรืออิลิเมนต์ลูก (Child) มรี ูปแบบกาหนดค่า ดังน้ี Syntax property: inherit; Example /* css file: mystyle.css */ div.parent { border: 1px solid green; background-color: cornsilk; margin: 15px; padding: 20px; } p{ padding: inherit; } span { border: inherit; }

260 CHAPTER 5: CSS3 PROPERTIES&VALUE HTML5 <!doctype html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Inherit</h1> <div class=\"parent\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <div class=\"parent\"> <p>Information science is a field primarily concernedwith the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information. </p> <span>Information Science</span> </div> </body> </html> Result จากผลลัพธ์ของการประกาศสไตล์ชีตให้กับอิลิเมนต์ \"p\" โดยกาหนดคุณสมบัติ \"padding\" เป็น \"inherit\" และอิลิเมนต์ \"span\" โดยกาหนดคุณสมบัติ \"border\" เป็น \"inherit\" ซ่ึงอิลิเมนต์ทั้ง 2 ถูกเรียกใช้งานให้อยู่ภายใต้อิลิเมนต์ \"div\" ซ่ึงมีการกาหนดคุณสมบัติ \"padding\" และ \"border\" ไว้ แล้ว จะเห็นได้ว่ามีการสืบทอดคุณสมบัติจากอิลิเมนต์หลัก (Parent) คือ \"div\" จึงส่งผลให้อิลิเมนต์ \"p\" มีระยะห่างจากขอบด้านในท่ีเพ่ิมขึ้น และอิลิเมนต์ \"span\" มีเส้นขอบ เช่นเดียวกับอิลิเมนต์ \"div\" โดยที่ไมจ่ าเปน็ ตอ้ งกาหนดคณุ สมบัติ \"padding\" หรอื \"border\" ให้กบั อิลิเมนต์ \"p\" และ \"span\" เพิม่ จึงเรยี กว่า การสบื ทอดคณุ สมบัติ

CHAPTER 5: CSS3 PROPERTIES&VALUE 261 สรปุ การกาหนดคุณสมบัติ (Properties) และการกาหนดค่า (Value) ให้กับคุณสมบัติ เป็นการ สร้างรูปแบบเพ่ือใช้ควบคุมการแสดงผลส่วนต่าง ๆ ในเว็บเพจ ซ่ึงคุณสมบัติสามารถกาหนดรูปแบบ ให้กับวัตถุหรืออิลิเมนต์ในเว็บเพจ ประกอบด้วย คุณสมบัติพื้นหลัง คุณสมบัติเส้นขอบ คุณสมบัติ ความสูงและความกว้าง คุณสมบัติระยะห่างของขอบด้านนอก คุณสมบัติระยะห่างจากขอบด้านใน คุณสมบัติการจัดวางตาแหน่งวัตถุ คุณสมบัติตัวอักษร คุณสมบัติข้อความ คุณสมบัติแทรกเน้ือหา คุณสมบัติรายการ คุณสมบัติเส้นเค้าร่าง คุณสมบัติตัวชี้เมาส์ ค่าแรกเร่ิมและค่าสืบทอด ดังน้ัน การ กาหนดคุณสมบัติและการกาหนดค่าให้กับคุณสมบัติให้มีความเหมาะสม จะช่วยให้สามารถแสดงผล เว็บเพจไดอ้ ยา่ งมปี ระสทิ ธิภาพ



บทท่ี 6 การออกแบบเวบ็ ไซตใ์ ห้ตอบสนองกับทุกอุปกรณ์ การออกแบบและพัฒนาเว็บไซต์ในปจั จุบัน มีความก้าวหน้าของรูปแบบและเทคนิควิธีที่ใช้ใน การออกแบบและพัฒนาเว็บไซต์เพ่ือให้เหมาะสมกับอุปกรณ์มากย่ิงขึ้น เน่ืองจากความหลากหลาย ของอุปกรณ์ท่ีสามารถเข้าถึงอินเทอร์เน็ตและเปิดใช้งานเว็บไซต์ได้ มีจานวนเพ่ิมมากข้ึน ไม่ว่าจะเป็น คอมพิวเตอร์ตั้งโต๊ะ คอมพิวเตอร์พกพา แท็บเล็ต โทรศัพท์มือถือสมาร์ทโฟน และสมาร์ททีวี ซึ่ง อุปกรณ์เหล่านี้ ล้วนมีขนาดหน้าจอแสดงผลที่แตกต่างกัน การออกแบบเว็บไซต์เพื่อใช้งานบน คอมพิวเตอร์อย่างเดียวจึงไม่เพียงพอ การออกแบบเว็บไซต์ให้สามารถตอบสนองการใช้งานกับทุก อุปกรณ์ (Responsive Web Design) จึงเป็นหัวใจสาคัญของการออกแบบและพัฒนาเว็บไซต์ใน ปัจจุบัน ซึ่งจะต้องออกแบบให้มีความยืดหยุ่นในทุก ๆ ส่วน โดยเฉพาะเค้าโครงเว็บเพจและเนื้อหา ภายในเว็บ เพื่อให้เว็บไซต์สามารถแสดงผลและใช้งานบนอุปกรณ์ท่ีแตกต่างกันได้ โดยไม่เกิดปัญหา ใด ๆ ตามมาภายหลัง เน้ือหาในบทนี้ จะอธิบายถึงการใช้งานสไตล์ชีตสาหรับการจัดเค้าโครงเว็บเพจ การจัดวางเน้ือหาในตาแหน่งท่ีเหมาะสม และการจัดวางองค์ประกอบต่าง ๆ ในเว็บเพจ เพื่อให้ เว็บไซต์สามารถตอบสนองการใช้งานกับทุกอุปกรณ์ได้อยา่ งมปี ระสทิ ธิภาพ ภาพท่ี 6.1 Responsive Web Design ที่มา: (Nice, 2017: 1)

264 CHAPTER 6: RESPONSIVE WEB DESIGN การกาหนดพ้นื ท่ีท่สี ามารถมองเหน็ การกาหนดพ้ืนที่ท่ีสามารถมองเห็น (Viewport) เป็นการกาหนดพ้ืนท่ีของเว็บเพจท่ีผู้ใช้ สามารถมองเห็นได้ โดยพ้ืนท่ีจะมีขนาดแตกต่างกัน ขึ้นอยู่กับขนาดของอุปกรณ์แสดงผล การกาหนด Viewport จึงเป็นองค์ประกอบสาหรับการออกแบบเว็บไซต์ให้สามารถตอบสนองการใช้งานกับทุก อุปกรณ์ ซึ่งจะช่วยแก้ปัญหาการแสดงผลหน้าจอเว็บเพจที่มีขนาดใหญ่เกินกว่าหน้าจอของอุปกรณ์ ประเภทต่าง ๆ ซึง่ จะสง่ ผลให้โปรแกรมแสดงผลเวบ็ แสดงแถบเลื่อนแนวนอน (Horizontal scrolling) รวมถึงการแสดงผลเน้ือหาให้มีอัตราส่วนท่ีมีความพอดีกับหน้าจอ เม่ือใช้งานคาส่ัง Viewport โปรแกรมแสดงผลเว็บ (Web Browser) ท่ีติดตั้งในแต่ละอุปกรณ์ จะลดขนาดเว็บเพจท้ังหมดให้พอดี กับหน้าจอ การประกาศใช้งาน Viewport จะกาหนดด้วยแท็ก \"<meta>\" อยู่ในตาแหน่งภายใต้แทก็ \"<head>\" มีรูปแบบการกาหนดอิลเิ มนต์และกาหนดแอตทริบวิ ต์ ดังนี้ HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <style> img { max-width: 100%; height: auto; } </style> </head> <body> <h1>Viewport</h1> <img src=\"images/wall.jpg\" alt=\"wallpaper\"> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> viewport คือ การประกาศใช้งานคาสงั่ viewport ดว้ ยแทก็ meta width=device-width คือ การกาหนดให้โปรแกรมแสดงผลเว็บกาหนดความกว้างของ เวบ็ ไซต์ ใหม้ ีขนาดเท่ากบั ความกวา้ งของหนา้ จออุปกรณท์ ่ีใช้เปดิ เวบ็ ไซต์ initial-scale=1.0 คือ การกาหนดอัตราส่วนของการขยายเนื้อหาของเว็บไซต์ เมื่อโปรแกรม แสดงผลเวบ็ โหลดเว็บเพจครั้งแรก

CHAPTER 6: RESPONSIVE WEB DESIGN 265 With the viewport meta tag Without the viewport meta tag ภาพท่ี 6.2 การแสดงผลโดยกาหนด Viewport และไม่กาหนด Viewport ท่มี า: (ราชวิทย์ ทพิ ยเ์ สนา, 2560) การตรวจสอบคณุ สมบัติของอปุ กรณ์ การตรวจสอบคุณสมบัติของอุปกรณ์ (Media Queries) เป็นคาสั่งท่ีใช้ตรวจสอบคุณสมบัติ ของอุปกรณ์ (Device) ที่ใช้สาหรับแสดงผลเว็บไซต์ เน่ืองจากปัจจุบันมีอุปกรณ์สาหรับแสดงผล เว็บไซต์หลากหลายประเภทและหลากหลายขนาด คาสั่ง Media Queries จึงเป็นข้อกาหนดสาหรับ การแสดงผลเว็บไซต์ เพ่ือนาไปสู่การออกแบบเว็บเพจให้มีความเหมาะสมกับอุปกรณ์แสดงผล ซ่ึง สามารถกาหนดรูปแบบการแสดงผลที่แตกต่างกัน ตามขนาดหน้าจอแสดงผลของอุปกรณ์แต่ละ ประเภท และยังสามารถกาหนดรูปแบบการแสดงผลผ่านหน้าจอกับรูปแบบการแสดงผลเม่ือมีการ พิมพ์เอกสารเว็บด้วยเคร่ืองพิมพ์ ให้มีความแตกต่างกันได้ โดยการประกาศคาส่ัง \"@media\" ให้กับ สไตล์ชีต มรี ูปแบบการกาหนดคาสง่ั และกาหนดคา่ ดังนี้ (W3Schools, 1999f: 1) Syntax @media not|only mediatype and (expressions) { ... CSS-Code; ... }

266 CHAPTER 6: RESPONSIVE WEB DESIGN การประกาศคาส่ัง \"@media\" ให้กับสไตล์ชีต จะต้องกาหนดประเภทของส่ือ (Mediatype) ให้เหมาะสมกบั การแสดงผลหรอื การนาไปใช้งาน ประกอบดว้ ยประเภทของส่อื ดงั ตารางท่ี 6.1 ตารางที่ 6.1 ประเภทของสือ่ แสดงผล Value Description all ใช้สาหรบั ส่อื หรืออุปกรณแ์ สดงผลทกุ ประเภท print ใช้สาหรับการแสดงผลทางเครื่องพมิ พ์ screen ใช้สาหรับการแสดงผลผ่านจอภาพ เช่น หน้าจอคอมพิวเตอร์ หน้าจอแท็บเล็ต หน้าจอ สมารท์ โฟน หน้าจอ Smart TV เป็นต้น speech ใช้สาหรบั การแสดงผลทางโปรแกรมอา่ นหน้าจอ คุณสมบัติการแสดงผล (Media Features) เป็นการกาหนดรูปแบบการแสดงผลออกทาง หน้าจอ (Expressions) ซ่ึงมีคุณสมบัติในการโต้ตอบ (Responsive) กับผู้ใช้ ประกอบด้วยคุณสมบัติ ดงั ตารางท่ี 6.2 ตารางท่ี 6.2 คณุ สมบัติการแสดงผล Value Description any-hover กาหนดการเปลย่ี นแปลง เมือ่ ผใู้ ชว้ างเมาสเ์ หนอื อลิ เิ มนต์ รปู แบบการกาหนดคณุ สมบตั ิ คือ @media (any-hover: hover) any-pointer กาหนดคณุ ภาพการแสดงตวั ช้เี มาส์ รปู แบบการกาหนดคณุ สมบัติ คือ @media (any-pointer: fine|coarse) aspect-ratio กาหนดอตั ราส่วนระหวา่ งความกวา้ งกบั ความสูงของเว็บเพจทีส่ ามารถมองเห็นได้ รูปแบบการกาหนดคณุ สมบตั ิ คอื @media (aspect-ratio: 1/1|aspect-ratio) color กาหนดจานวนบติ ของสที แี่ สดงผลทางหนา้ จอ รูปแบบการกาหนดคณุ สมบตั ิ คือ @media (color: 16|bit) color-gamut กาหนดระบบสที ่สี นับสนนุ การแสดงผลจากผ้ผู ลิตอปุ กรณ์ รปู แบบการกาหนดคณุ สมบัติ คอื @media (color-gamut: srgb) color-index กาหนดจานวนสีท่ีอุปกรณส์ ามารถแสดงได้ รูปแบบการกาหนดคณุ สมบตั ิ คือ @media (color-index: 10000|number) grid กาหนดการแสดงผลในอุปกรณห์ น้าจอแบบเส้นกริด (grid) หรอื บิตแมพ (bitmap) รปู แบบการกาหนดคุณสมบัติ คอื @media (grid: 0|1) height กาหนดขนาดความสูงของเวบ็ เพจท่สี ามารถมองเห็นได้ รปู แบบการกาหนดคณุ สมบัติ คือ @media (height: 360px|height) hover กาหนดการเปลี่ยนแปลง เม่อื ผู้ใชว้ างเมาสเ์ หนอื อลิ เิ มนตห์ ลัก รปู แบบการกาหนดคณุ สมบัติ คือ @media (hover: hover)

CHAPTER 6: RESPONSIVE WEB DESIGN 267 Value Description inverted-colors light-level กาหนดใหโ้ ปรแกรมแสดงผลเว็บแปลงสีให้เปน็ สตี รงข้ามกบั สีปัจจุบนั ท่ใี ช้อยู่ รูปแบบ max-aspect-ratio การกาหนดคณุ สมบัติ คอื @media (inverted-colors: inverted|none) max-color กาหนดระดบั แสงลอ้ มรอบอลิ ิเมนต์ max-color-index รปู แบบการกาหนดคุณสมบตั ิ คอื @media (light-level: normal|dim|washed) max-height กาหนดอัตราส่วนสงู สดุ ระหว่างความกวา้ งกับความสูงของพ้นื ทีแ่ สดงผล max-monochrome รปู แบบการกาหนดคณุ สมบตั ิ คอื @media (max-aspect-ratio: 2/1|aspect-ratio) max-resolution กาหนดจานวนบติ สงู สดุ ของสีทแี่ สดงผลทางหน้าจอ max-width รูปแบบการกาหนดคณุ สมบัติ คอื @media (max-color: 32|bit) min-aspect-ratio กาหนดจานวนสีสงู สุดท่อี ปุ กรณส์ ามารถแสดงผลได้ min-color รูปแบบการกาหนดคุณสมบัติ คือ @media (max-color-index: 30000|number) min-color-index กาหนดขนาดความสูงสูงสุดของพน้ื ทีท่ แี่ สดงผลผา่ นโปรแกรมแสดงผลเวบ็ min-height รูปแบบการกาหนดคณุ สมบตั ิ คือ @media (max-height: 40rem|max-height) min-monochrome กาหนดจานวนบิตสงู สุดตอ่ สที ่ีแสดงผลทางอุปกรณห์ น้าจอขาวดา min-resolution รปู แบบการกาหนดคุณสมบตั ิ คอื @media (monochrome: 0|bit) min-width กาหนดความละเอยี ดสงู สดุ ของอุปกรณแ์ สดงผล monochrome รูปแบบการกาหนดคุณสมบตั ิ คอื @media (max-resolution: 300dpi|resolution) กาหนดขนาดความกวา้ งสูงสุดของพืน้ ทีท่ ีแ่ สดงผลผ่านโปรแกรมแสดงผลเว็บ รปู แบบการกาหนดคุณสมบัติ คอื @media (max-width: 50rem|max-width) กาหนดอตั ราส่วนต่าสุดระหว่างความกวา้ งกบั ความสูงของพ้ืนที่แสดงผล รปู แบบการกาหนดคณุ สมบตั ิ คือ @media (min-aspect-ratio: 8/5|aspect-ratio) กาหนดจานวนบติ ตา่ สดุ ของสที แี่ สดงผลทางหนา้ จอ รปู แบบการกาหนดคณุ สมบตั ิ คอื @media (min-color: 8|bit) กาหนดจานวนสีตา่ สดุ ท่อี ปุ กรณ์สามารถแสดงได้ รปู แบบการกาหนดคุณสมบัติ คอื @media (min-color-index: 15000|number) กาหนดขนาดความสงู ตา่ สดุ ของพ้นื ที่ท่แี สดงผลผ่านโปรแกรมแสดงผลเวบ็ รูปแบบการกาหนดคณุ สมบตั ิ คือ @media (min-height: 25rem|min-height) กาหนดจานวนบติ ตา่ สุดตอ่ สที ่ีแสดงผลทางอปุ กรณ์หนา้ จอขาวดา รปู แบบการกาหนดคณุ สมบตั ิ คือ @media (monochrome: 0|bit) กาหนดความละเอียดตา่ สดุ ของอปุ กรณ์แสดงผล รูปแบบการกาหนดคุณสมบตั ิ คอื @media (min-resolution: 72dpi|resolution) กาหนดขนาดความกวา้ งต่าสุดของพ้ืนท่ที ่ีแสดงผลผ่านโปรแกรมแสดงผลเว็บ รูปแบบการกาหนดคุณสมบัติ คอื @media (min-width: 35rem|min-width) กาหนดจานวนบิตต่อสที แ่ี สดงผลทางอุปกรณห์ น้าจอขาวดา รปู แบบการกาหนดคุณสมบตั ิ คอื @media (monochrome: 0|bit)

268 CHAPTER 6: RESPONSIVE WEB DESIGN Value Description orientation overflow-block กาหนดการวางแนวของเว็บเพจที่สามารถมองเห็นได้ รูปแบบการกาหนดคุณสมบัติ overflow-inline คือ @media screen and (orientation: landscape|portrait) pointer กาหนดการจัดการเนอื้ หาของอปุ กรณ์แสดงผลเมือ่ มเี นื้อหาลน้ พื้นท่ีท่ีสามารถมองเห็น resolution ได้ รปู แบบการกาหนดคณุ สมบตั ิ คอื @media (overflow-block: scroll) scan กาหนดการจัดการเนื้อหาของอุปกรณ์แสดงผลเมื่อมีเน้ือหาล้นบรรทัดท่ีสามารถ scripting มองเหน็ ได้ รปู แบบการกาหนดคุณสมบัติ คือ @media (overflow-inline: scroll) update กาหนดคณุ ภาพการแสดงตัวชี้เมาส์ width รูปแบบการกาหนดคุณสมบตั ิ คือ @media (pointer: fine|coarse) กาหนดความละเอยี ดของอุปกรณแ์ สดงผล รปู แบบการกาหนดคุณสมบัติ คอื @media (resolution: 150dpi|resolution) การสแกนของอุปกรณแ์ สดงผล รูปแบบการกาหนดคณุ สมบตั ิ คือ @media (scan: interlace|progressive) การตรวจสอบและการเปิดใชง้ านสคริปต์ตา่ ง ๆ เชน่ JavaScript เป็นตน้ รูปแบบการ กาหนดคุณสมบตั ิ คอื @media (scripting: none|initial-only|enabled) กาหนดให้อุปกรณ์แสดงผลสามารถปรับเปลี่ยนลักษณะท่ีปรากฏของเนื้อหาได้อย่าง รวดเรว็ รปู แบบการกาหนดคณุ สมบตั ิ คือ @media (update: fast) กาหนดขนาดความกวา้ งของพ้ืนท่ีท่ีแสดงผลผ่านโปรแกรมแสดงผลเว็บ รปู แบบการกาหนดคณุ สมบตั ิ คือ @media (width: 360px|width) ตัวอย่าง การใช้งานคาส่ัง @media เพื่อแสดงสีพื้นหลังเว็บเพจ เมื่อหน้าจอแสดงผลมีขนาด ความกวา้ งท่แี ตกต่างกัน มรี ูปแบบการกาหนดคาสง่ั และกาหนดค่า ดงั น้ี Example /* css file: mystyle.css */ body { background-color: gainsboro; } @media screen and (min-width: 500px) { body { background-color: bisque; } }

CHAPTER 6: RESPONSIVE WEB DESIGN 269 HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Media: Screen</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> จากตัวอย่างการใช้งานคาสั่ง @media กาหนดประเภทเป็น \"screen\" กาหนดการแสดงผล เป็น \"min-width: 500px\" เม่ือแสดงเว็บเพจในหน้าจอที่มีขนาดความกว้างมากกว่า 500 พิกเซล จะ แสดงพ้ืนหลังเป็นสี \"bisque\" หากแสดงเว็บเพจในหน้าจอที่มีขนาดความกว้างเท่ากับ 500 พิกเซล หรือต่ากว่า 500 พิกเซล จะแสดงพ้นื หลังเปน็ สี \"gainsboro\" ดงั ภาพท่ี 6.3 ภาพที่ 6.3 การแสดงสีพ้นื หลังเว็บเพจโดยใชค้ าส่งั @media ท่ีมา: (ราชวิทย์ ทิพย์เสนา, 2560)

270 CHAPTER 6: RESPONSIVE WEB DESIGN ตัวอย่าง การใช้งานคาสั่ง @media เพื่อซ่อน/แสดง อิลิเมนต์ท่ีต้องการ เม่ือหน้าจอแสดงผล มขี นาดความกวา้ งทแ่ี ตกต่างกนั มีรูปแบบการกาหนดคาส่ังและกาหนดค่า ดงั นี้ Example /* css file: mystyle.css */ div.block { background-color: burlywood; padding: 20px; } @media screen and (max-width: 500px) { div.block { display: none; } } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Media: Screen</h1> <div class=\"block\">Information science.</div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> จากตัวอย่างการใช้งานคาส่ัง @media กาหนดประเภทเป็น \"screen\" กาหนดการแสดงผล เป็น \"max-width: 500px\" เมื่อแสดงเว็บเพจในหน้าจอที่มีขนาดความกวา้ งมากกวา่ 500 พิกเซล จะ แสดงอิลิเมนต์ \"div\" หากแสดงเวบ็ เพจในหน้าจอท่ีมีขนาดความกว้างเทา่ กับ 500 พิกเซล หรอื ต่ากว่า 500 พิกเซล จะซอ่ นอลิ ิเมนต์ \"div\" ดงั ภาพท่ี 6.4

CHAPTER 6: RESPONSIVE WEB DESIGN 271 ภาพท่ี 6.4 การซ่อน/แสดง อิลเิ มนต์โดยใช้คาส่งั @media ท่มี า: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560) ตัวอย่าง การใช้งานคาส่ัง @media เพ่ือย่อ/ขยาย ขนาดของอิลิเมนต์ที่กาหนดเป็นเมนูนา ทางให้กับเวบ็ ไซต์ เมอ่ื หนา้ จอแสดงผลมีขนาดความกว้างที่แตกตา่ งกนั มีรูปแบบการกาหนดคาส่ังและ กาหนดค่า ดังน้ี Example /* css file: mystyle.css */ .topnav { background-color: #333; overflow: hidden; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } @media screen and (max-width: 500px) { .topnav a { float: none; width: 100%; } }

272 CHAPTER 6: RESPONSIVE WEB DESIGN HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Media: Screen</h1> <div class=\"topnav\"> <a href=\"#\">Home</a> <a href=\"#\">About</a> <a href=\"#\">Contact</a> </div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> จากตัวอย่างการใช้งานคาส่ัง @media กาหนดประเภทเป็น \"screen\" กาหนดการแสดงผล เป็น \"max-width: 500px\" เมื่อแสดงเว็บเพจในหน้าจอท่ีมีขนาดความกว้างมากกวา่ 500 พิกเซล จะ แสดงอิลิเมนต์ท่ีใช้เป็นเมนูนาทาง \"class: topnav\" โดยขยายขนาดเรียงกันในแนวนอน หากแสดง เว็บเพจในหน้าจอท่ีมีขนาดความกว้างเท่ากับ 500 พิกเซล หรอื ตา่ กวา่ 500 พิกเซล จะแสดงอลิ ิเมนต์ ท่ีใชเ้ ป็นเมนูนาทาง โดยย่อขนาดแล้วเรยี งกนั ในแนวต้ัง ดังภาพที่ 6.5 ภาพที่ 6.5 การย่อ/ขยาย อิลเิ มนตโ์ ดยใช้คาสั่ง @media ทม่ี า: (ราชวิทย์ ทพิ ยเ์ สนา, 2560)

CHAPTER 6: RESPONSIVE WEB DESIGN 273 ตัวอย่าง การใช้งานคาส่ัง @media เพ่ือแสดงสีพื้นหลังเว็บเพจ เมื่อหน้าจอแสดงผลมีการ ปรับแนว (Orientation) ที่แตกต่างกัน เหมาะสาหรับการแสดงผลบนหน้าจอแท็บเล็ตหรือหน้าจอ โทรศัพท์มือถือสมาร์ทโฟนที่สามารถหมุนหน้าจอเป็นแนวต้ังหรือแนวนอนได้ มีรูปแบบการกาหนด คาส่ังและกาหนดคา่ ดงั นี้ Example /* css file: mystyle.css */ body { background-color: lightgreen; } @media only screen and (orientation: landscape) { body { background-color: lightblue; } } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Media: Screen</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> จากตัวอย่างการใช้งานคาสั่ง @media กาหนดประเภทเป็น \"screen\" กาหนดแนวหน้าจอ เป็น \"orientation: landscape\" เมื่อแสดงเว็บเพจในหน้าจอแนวนอน (Landscape) จะแสดงพื้น หลังเป็นสี \"lightblue\" หากแสดงเว็บเพจในหน้าจอแนวต้ัง (Portrait) จะแสดงพ้ืนหลังเป็นสี \"lightgreen\" ดงั ภาพที่ 6.6

274 CHAPTER 6: RESPONSIVE WEB DESIGN Portrait Landscape ภาพที่ 6.6 การแสดงสีพ้นื หลังเวบ็ เพจตามแนวหนา้ จอโดยใชค้ าสง่ั @media ท่มี า: (ราชวิทย์ ทิพยเ์ สนา, 2560) ตัวอย่าง การใช้งานคาสั่ง @media เพื่อปรับขนาดข้อความท่ีกาหนด เมื่อหน้าจอแสดงผลมี ขนาดความกวา้ งทแี่ ตกต่างกัน มีรปู แบบการกาหนดคาสั่งและกาหนดค่า ดังน้ี Example /* css file: mystyle.css */ @media only screen and (min-width: 600px) { div { font-size: 36px; } } @media only screen and (max-width: 600px) { div { font-size: 18px; } } div { background-color: burlywood; padding: 20px; }

CHAPTER 6: RESPONSIVE WEB DESIGN 275 HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Media: Screen</h1> <div>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> จากตัวอย่างการใช้งานคาสั่ง @media กาหนดประเภทเป็น \"screen\" กาหนดการแสดงผล เป็น \"min-width: 600px\" และ \"max-width: 600px\" เมื่อหน้าจอมีขนาดความกว้างมากกว่า 600 พิกเซล เว็บเพจจะแสดงข้อความในขนาด 36px หากหน้าจอมีขนาดความกว้างน้อยกว่า 600 พิกเซล เวบ็ เพจจะแสดงขอ้ ความในขนาด 18px ดงั ภาพท่ี 6.7 ภาพท่ี 6.7 การปรบั ขนาดข้อความโดยใชค้ าส่งั @media ทม่ี า: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560)

276 CHAPTER 6: RESPONSIVE WEB DESIGN ตัวอย่าง การใช้งานคาสั่ง @media เพื่อกาหนดรปู แบบเอกสารเว็บเม่ือต้องการพิมพ์เอกสาร ผ่านเครอื่ งพิมพ์ ซง่ึ รูปแบบในหนา้ จอแสดงผลกบั รปู แบบการพิมพ์จะแสดงผลท่ีแตกตา่ งกัน มีรูปแบบ การกาหนดคาส่งั และกาหนดคา่ ดังน้ี Example /* css file: mystyle.css */ @media screen { p{ font-family: Gotham, \"Helvetica Neue\", Helvetica, Arial, sans-serif; font-size: 1em; } } @media print { p{ font-family: Gotham, \"Helvetica Neue\", Helvetica, Arial, sans-serif; font-size: 0.8em; color: blue;} h1 {font-size: 1.5em; color: blue;} } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\"> </head> <body> <h1>Media: Print</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> จากตัวอย่างการใช้งานคาส่ัง @media กาหนดประเภทเป็น \"print\" ตัวอักษรในแท็ก \"p\" เมื่อแสดงผ่านโปรแกรมแสดงผลเว็บจะมีขนาดเท่ากับ \"1em\" และมีสีปกติ เมื่อสั่งพิมพ์เอกสาร ตัวอักษรจะมีขนาดเท่ากับ \"0.8em\" และเป็นสีน้าเงิน ตัวอักษรในแท็ก \"h1\" เม่ือแสดงผ่านโปรแกรม แสดงผลเวบ็ จะมขี นาดปกติ เมอื่ สัง่ พมิ พ์เอกสาร ตวั อกั ษรจะมขี นาดเท่ากับ \"1.5em\" และเป็นสีน้าเงนิ ดงั ภาพที่ 6.8

CHAPTER 6: RESPONSIVE WEB DESIGN 277 ภาพที่ 6.8 การกาหนดรูปแบบการพิมพ์โดยใช้คาสั่ง @media ที่มา: (ราชวิทย์ ทพิ ยเ์ สนา, 2560) การกาหนดให้ กา ร พิม พ์ เ อกสา รเว็บ มีรู ป แบบ แล ะสี ท่ี ตรง กั บ การ แส ดงผ ลเว็บ เ พจ ผ่ า น โปรแกรมแสดงผลเว็บเพจทุกส่วน สามารถใช้งานคาส่ัง @media กาหนดประเภทเป็น \"print\" โดย กาหนดคณุ สมบตั ิและกาหนดค่า ดังน้ี Example @media print { body {-webkit-print-color-adjust: exact;} }

278 CHAPTER 6: RESPONSIVE WEB DESIGN การออกแบบเคา้ โครงเว็บเพจ การออกแบบเค้าโครงเวบ็ เพจ (Webpage Layout) เป็นขนั้ ตอนในการกาหนดขนาดของเว็บ เพจท่ีจะใช้งานจริง กาหนดตาแหน่งสาหรับจัดวางเนื้อหาให้อยู่ในสัดส่วนท่ีชัดเจน และกาหนดขนาด พ้ืนท่ีแต่ละส่วนให้มีความเหมาะสมกับเน้ือหา โดยหลักในการออกแบบเค้าโครงเว็บเพจ จะพิจารณา จากเน้ือหา กลุ่มผู้ใช้ ความสะดวกในการใช้งาน และวัตถุประสงค์ของเว็บไซต์เปน็ หลกั การออกแบบ จึงสามารถทาได้อย่างอิสระ ไม่มีรูปแบบท่ีตายตัว ซ่ึงการจัดเค้าโครงเว็บเพจในปัจจุบัน นักพัฒนา เว็บไซต์จะนิยมใช้สไตล์ชีต (Cascading Style Sheets: CSS) ในการกาหนดตาแหน่งและขนาดพื้นที่ รวมถึงรูปแบบของเค้าโครง ซึ่งการแสดงผลเว็บเพจจะมีความยืดหยุ่นมากกว่าการจัดเค้าโครงด้วย ตาราง (Table) โดยเฉพาะเมื่อแสดงผลเวบ็ เพจบนอุปกรณท์ ่มี ีขนาดหนา้ จอแสดงผลแตกต่างกัน Header Nav Nav Header Nav Nav Content Content Sidebar Footer Footer Footer Footer ภาพที่ 6.9 การออกแบบเคา้ โครงเว็บเพจ ทม่ี า: (ราชวิทย์ ทิพย์เสนา, 2560) 1. รูปแบบเค้าโครง การออกแบบเค้าโครงเว็บเพจ สามารถกาหนดรูปแบบได้หลายประเภท โดยปัจจัยสาคัญ ในการกาหนดรูปแบบของเค้าโครงนั้น ขึ้นอยู่กับความต้องการของผู้พัฒนา ที่ต้องการให้เว็บเพจ แสดงผลด้วยขนาดคงที่หรือแสดงผลด้วยขนาดท่ียืดหยุ่น ซึ่งการแสดงผลจะมีท้ังข้อดีและข้อจากัด โดยการกาหนดรปู แบบเค้าโครงเว็บเพจท่ีนิยมใช้งาน แบ่งออกเป็น 3 ลักษณะ ดังนี้ (สมชาย มโนธรา รักษ์ และอัจจิมา เลีย้ งอย่,ู 2553: 238-239)

CHAPTER 6: RESPONSIVE WEB DESIGN 279 1.1 Fixed Layout การกาหนดรูปแบบเค้าโครงคงท่ี เป็นการกาหนดค่าของขนาดความกว้างและความสงู โดยระบุคา่ เปน็ หน่วยพิกเซล (Pixcel) เช่น กาหนดความกวา้ งของเวบ็ เพจเท่ากับ 960px เป็นต้น ข้อดี คือ เมื่อมีการปรับขนาดของจอแสดงผล รูปแบบของเน้ือหาในเว็บเพจจะไม่มีการเปล่ียนแปลง พ้ืนท่ี แสดงเน้ือหาจะมีขนาดเดียวเท่าน้ัน ส่งผลให้เน้ือหาไม่ถูกบีบให้เล็กลงด้วยขนาดของหน้าจอ ข้อจากัด คือ เม่ือมีการปรับขนาดของจอแสดงผลหรือย่อหน้าจอให้มีขนาดเล็กลงจะส่งผลต่อการแสดงเน้ือหา ซ่ึงจะไม่สามารถแสดงเน้ือหาให้เห็นทั้งหมดได้ ผู้ใช้จะต้องเลื่อนดูเนื้อหาจากแถบเลื่อนแนวนอน (Horizontal Scrollbar) และหากแสดงผลในหน้าจอที่มีขนาดใหญ่ จะส่งผลให้เกิดพ้ืนที่ว่างใน ตาแหน่งด้านขา้ งของเคา้ โครงเวบ็ เพจ 1.2 Liquid Layout การกาหนดรูปแบบเค้าโครงท่ีมีความยืดหยุ่น เป็นการกาหนดค่าของขนาดความกว้าง และความสูง โดยระบุค่าเป็นหน่วยเปอร์เซ็นต์ (Percentages) เช่น กาหนดความกว้างของเว็บเพจ เทา่ กับ 100% เปน็ ตน้ ขอ้ ดีคือ มคี วามยืดหยนุ่ สงู การแสดงผลจะปรับเปลย่ี นไปตามขนาดของหน้าจอ ท่ีเปิดเว็บเพจ เหมาะกับการแสดงผลบนอุปกรณ์ท่ีมีขนาดแตกต่างกัน ข้อจากัดคือ เม่ือแสดงผลใน หน้าจอท่ีมีขนาดเล็กลง เน้ือหาจะถูกบีบให้เล็กลงตามไปด้วย และเค้าโครงจะถูกบีบจนอาจส่งผลให้ รูปแบบเนอื้ หาและตาแหนง่ ต่าง ๆ ในเวบ็ เพจ ผดิ เพยี้ นไปจากเดิม 1.3 Elastic Layout การกาหนดรูปแบบเค้าโครงท่ีมีความยืดหยุ่น เช่นเดียวกับ Liquid Layout โดยมีข้อ แตกต่างคือ Liquid Layout จะยึดขนาดของหน้าจอแสดงผลเป็นหลัก ส่วน Elastic Layout จะยึด ขนาดของตัวอักษรเป็นหลัก โดยระบุค่าเป็นหน่วย em ซ่ึงโดยทั่วไปขนาดตัวอักษรปกติ (font-size) สาหรับแสดงผลผ่านโปรแกรมแสดงผลเวบ็ จะเทา่ กับ 16px หรอื 1em หากกาหนดความกว้างของเค้า โครงเท่ากับ 100% เพื่อให้หน้าจอมีความยืดหยุ่น จะต้องกาหนดขนาดตัวอักษรเท่ากับ 1em ขนาด ของเคา้ โครงจะยอ่ -ขยายตามขนาดของตัวอักษรและขนาดของหน้าจอแสดงผลเปน็ หลัก 2. ส่วนประกอบหลักของเคา้ โครง ส่วนประกอบหลักของเค้าโครงเว็บเพจ จะกาหนดตามตาแหน่งของเน้ือหาที่มีความสาคัญ ประกอบด้วย ส่วนหัว ส่วนของแถบนาทาง ส่วนเน้ือหา ส่วนล่าง และอาจกาหนดส่วนข้างเฉพาะใน หน้าแรกของเว็บไซต์ ซ่ึงผู้พัฒนาเว็บไซต์สามารถกาหนดเค้าโครงเพิ่มเติมนอกเหนือจากเค้าโครงหลกั ทั้งนี้ อาจข้ึนอยู่กับความเหมาะสมของเน้ือหาในแต่ละเว็บเพจ โดยจะใช้สไตล์ชีตกาหนดแต่ละ ตาแหนง่ ของเคา้ โครง มีรายละเอียดของแตล่ ะส่วน ดงั นี้

280 CHAPTER 6: RESPONSIVE WEB DESIGN 2.1 สว่ นหัวของเว็บเพจ ส่วนหัวของเว็บเพจ (Header) โดยเค้าโครงจะอยู่ในตาแหน่งด้านบนสุดของเว็บเพจ หรือถัดลงมาจากเมนูนาทางด้านบนสุดของเว็บเพจ เน้ือหาที่จะจัดวางลงในส่วนหัวของเว็บเพจ นิยม ใช้เปน็ ภาพสญั ลักษณแ์ ละช่อื ของเว็บไซต์ มรี ปู แบบการกาหนดคณุ สมบัตแิ ละกาหนดค่า ดังนี้ Example /* css file: layoutstyle.css */ body { margin: 0; } *{ box-sizing: border-box; } .header { background-color: #f2f2f2; text-align: center; padding: 20px; } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/layoutstyle.css\"> </head> <body> <div class=\"header\"> <h1>Information Website</h1> <p>Welcome to my official website.</p> </div> </body> </html> Result


lavanh9979

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS