Page 1
การสรางเวบเพจโดยใช HTML5 และ CSS ขนตน
Part IV สอประสม ตาราง และอน ๆ
ผศ.วนชย ขนต [email protected]
คณะพาณชยศาสตรและการบญช มธ. http://www.bus.tu.ac.th/usr/wanchai/IS281
หวขอ
IS216 การพฒนาโปรแกรมประยกตโดยผใช IS281 เครAองมอสงเสรมความสาเรจของผใช
Page 2
‹#›
การใสสอประสม(multimedia) ในหนาเวบ
Page 3
100
Multimedia Web pages
นอกจากใสขอความในหนาเวบแลว เราอาจใสเน OอหาทAเปนสAอประสม (multimedia content) เชนภาพนAง ภาพเคลAอนไหว และเสยงลงไปไดดวย
Page 4
101
Multimedia Contentsเน OอหาทAเปนสAอประสม (multimedia content) เชน
• ภาพนAง ( format ทAเบราวเซอรรจกและแสดงผลได เชน png, jpeg, svg)
• เสยง ( midi, wave file, mp3 , wma, ogg)
• ภาพเคลAอนไหว (Video - วดทศน มหลาย format เชน mpg, wmv, mp4, ogg)
• กอน HTML5 การสรางภาพเคลAอนไหวบนหนาเวบตองใช plugin เชน Adobe Flash, Real Player และตองเตรยมไฟลตามรปแบบของ plugin น Oน ๆ
• HTML5 รองรบการแสดงภาพกราฟฟกแบบ SVG โดยไมตองใช plugin
• HTML5 ม canvas สาหรบเขยนภาพดวยคาสAงภาษา JavaScript
Page 5
102
การใสรปภาพในเอกสาร HTML<html> <head> <title>My dog and cat</title> </head> <body>นคอสนขของฉน <img src="dog.jpeg"> และนคอแมวทนารกของฉน <img src="cat.jpeg">. </body> </html>
URL URL
http://www.bus.tu.ac.th/usr/wanchai/HTML/image/dog_cat.html
Page 6
103
ชนดของรปภาพท:สามารถแสดงในหนาเวบ
• JPEG Joint Photographic Expert Group
• GIF Graphic Interchange Format
• PNG Portable Network Graphic
ภาพท Oง � ชนดน OเหมาะกบการสงผานทางอนเทอรเนตเพราะสามารถบบอดขอมลใหเลกลงไดเพAอประหยดเวลาในการสง
JPEG GIF PNG
Page 7
104
คณสมบตของ JPEG• คณภาพระดบภาพถาย(Photograph-quality)
• AB บตตอจดภาพ ได IJ.L ลานส
• บบอดไดดถาใชกบภาพถายหรอภาพวาดทXมการไลเฉดสเหมอนธรรมชาตขนาดของแฟมมกจะเลกกวา GIF
• ไมเหมาะกบภาพลายเสนเชนการตน ขนาดของแฟมจะโต
• ไมเหมาะกบการซอนภาพอกษร บบอดไดไมด
• Progressive JPEG files โหลดไดเรวกวา JPEG ธรรมดา
สกลของแฟมเปน .jpeg หรอ .jpg
Page 8
105
คณสมบตของ GIF• 8 bit ตอจดภาพ (pixel) แสดงได 256 ส
• GIF24 ใช 24 bit ตอจดภาพแสดงได 16 ลานส
• เหมาะสำหรบภาพทเปนสพน ไมไลเฉดส เชนโลโก ภาพลายเสน หรอรปทรงเรขา
คณต
• รองรบการทำใหโปรงใส (Transparency)
• รองรบการทำ Interlacing
• รองรบการทำภาพเคลอนไหวAnimation
สกลของแฟมเปน .gif
Page 9
106
คณสมบตของ PNG• สรางขนมาทดแทน GIF ซงสงวนลขสทธในการใช
• สามารถแสดงสได 16.7 ลานส
• เหมาะสำหรบภาพทเปนสพน เชนโลโก ภาพลายเสน ภาพวาด หรอรปทรง
เรขาคณต สามารถไลเฉดสไดดกวา GIF
• รองรบการทำใหโปรงใส (Transparency)
• รองรบการทำภาพเคลอนไหว (Animation) แตบางเบราวเซอรไมรองรบ
สกลของแฟมเปน .png
Page 10
107
• Inline Image<img src="cat.jpeg">
• hypertext linkYou can view <a href="mypic.jpg"> my picture</a>. my picture จะเปน link เมAอคลกจะนารป mypic.jpg มาแสดง
• hyperlink anchor <a href="target.html"><img src="stat.gif"></a> รปภาพ stat.gif จะเปนลงค เมAอคลกจะนา target.html มาแสดง
• background image<body background="marble.gif"> จะนาภาพ marble.gif มาแสดงผลตอเรยงกนจนเตมหนาเอกสาร (แนะนาใหใช CSS แทน)
รปแบบของ HTML สาหรบวางรปภาพ
Page 11
108
<img> tag Attributes• src แหลงทAอย (URL) ของแฟมรปภาพ • srcset แหลงทAอย (URL) ของแฟมรปภาพหลายรปเพAอใหเบราวเซอรเลอกตามเงAอนไข (HTML5.1) • alt ขอความทAตองการใหแสดงแทนรปภาพกรณทAแสดงรปภาพไมได • height กาหนดความสงของภาพหนวยเปน pixel • width กาหนดความกวางของภาพหนวยเปน pixel หรอ % • sizes กาหนดขนาดรปภาพใหญสดทAเบราวเซอรควรแสดงตามเงAอนไข (HTML5.1) • ismap ทา image map ประมวลผลทA server • usemap ทา image map ประมวลผลทA browser • align ตาแหนงทAตองการจดวางรปภาพ (deprecated) • border จานวน pixel ของเสนกรอบสAเหลAยมรอบรป (deprecated) • hspace เวนทAวางดานซายและขวาของภาพ (pixel) (deprecated) • vspace เวนทAวางดานบนและลางของภาพ (pixel) (deprecated)
HTML5.1 อยในข Oนทดลอง เบราวเซอรทAวไปยงไมรองรบ attribute ทAยกเลก (deprecated) ใหไปใช CSS แทน
Page 12
109
ตวอยางการใช img <img
src="mypic.jpg"
alt="house picture"
height="100"
width="250" title="Photo of my house in Bangkok"
>
ดตวอยางเพAมเตมและลองแกไขทA https://www.w3schools.com/tags/tag_img.asp
Page 13
110
แทก <figure> และ <figcaption>
ใสชAอหรอคาอธบายส Oน ๆ ไวใตภาพดวยแทก <figcaption> ซAงบรรจไวใน <picture>
ดตวอยางเพAมและลองแกไขทA https://www.w3schools.com/tags/tag_figcaption.asp
<figure> <img src="myhouse.jpg" alt="house picture" > <figcaption>บานทรงสต</figcaption> </figure>
Page 14
111
การเซฟภาพจากเวบ(สาหรบผท:ยงไมทราบ)
• ใชเมาสชทรปภาพแลวคลกดวยปมขวาของเมาสจะปรากฎ pop up menu
• เลอกรายการ Save Picture As …
• เลอก drive / folder ทตองการsave แลวคลกปม save
Page 15
112
ฝกปฏบตใสรปภาพ
เขยนเวบใหมการแสดงรปภาพลกษณะตาง ๆ เชน
• inline image
•hypertext anchor
•background
Page 16
113
การนาเสนอไฟลวดโอ
<img dynsrc= ชLอไฟลวดโอ loop = จานวนรอบ | infinite />
การนาเสนอไฟลเสยง
<bgsound src= ช#อไฟลเสยง loop = จานวนรอบ | infinite />
หมายเหต
1. tag เหลาน Oเปน tag สวนเพAมของ IE ไมใช tag ทAกาหนดในมาตรฐาน HTML 4.0 หรอ XHTML 1.0
2. การใสเสยงควรใชดวยความระมดระวง เพราะอาจรบกวนหรอสรางความราคาญใหผชม
กอน HTML5
Page 17
114
The <audio> tagFunction:
Define sound, such as music or other audio streams. Attributes:
src url ของเสยงทAตองการเลน type ชนดของไฟลเสยง autoplay="autoplay" ถาระบจะเลนทนทถาพรอม controls="controls" ถาระบจะมป มควบคมข Oนมาใหผใชบงคบ loop="loop" ถาระบ จะวนซ Oา preload= auto|metadata|none ตองการใหโหลดไฟลเสยงทนททAเปดหนาเวบเพAอเตรยมพรอมสาหรบการเลน
หรอไม จะไมมผลถาระบ autoplay
End tag:
</audio>
Contains:
text ควรเปนขอความทLบอกผใชในกรณทLเบราวเซอรไมรองรบ tag นa
Page 18
115
ตวอยางการใสเสยง
<audio src="mysong.ogg" type="audio/ogg" src="mysong.mp3" type="audio/mp3" autoplay="autoplay" loop="loop" > Your browser does not support the audio tag. </audio>
หมายเหต เบราวเซอรแตละตวรองรบรปแบบของไฟลเสยงแตกตางกน สวนใหญรองรบ mp3เพAอแกปญหารปแบบไฟลเสยงทAแตละเบราวเซอรรองรบไมเทากน เราอาจเตรยมแฟมเสยง มากกวา � แบบและใสตวบอกลกษณะประจา (attribute) src หลายตว
Page 19
116The <video> tag
Function:
Define video, such as a movie clip or other video streams. Attributes:
src url ของวดทศนทAตองการเลน
type ชนดของไฟลวดทศน autoplay="autoplay" ถาระบจะเลนทนทถาพรอม controls="controls" ถาระบจะมป มควบคมข Oนมาใหผใชบงคบ height ความสง player หนวยเปน pixel
width ความกวางของ player หนวยเปน pixel
preload="preload" ถาระบ จะโหลดวดทศนทนททAเปดหนาเวบเพAอเตรยมพรอมสาหรบการเลน
End tag:
</video>
Contains:
text ควรเปนขอความทLบอกผใชในกรณทLเบราวเซอรไมรองรบ tag นa
Page 20
117
ตวอยางการใสวดทศน<video
src="movie.ogg" type="video/ogg" src="movie.mp4" type="video/mp4" autoplay="autoplay" controls="controls" height="300" width="450" > Your browser does not support the video tag. </video>
หมายเหต เบราวเซอรแตละตวรองรบรปแบบของไฟลวดทศนแตกตางกน สวนใหญรองรบ ไฟลตามมาตรฐาน h.264 เพAอแกปญหาทAเบราวเซอรตาง ๆ รองรบมาตรฐานขอมลวดทศนทA แตกตางกน อาจตองเตรยมไฟลวดทศนหลายรปแบบ แลวระบ attribute src หลายตว
Page 21
118
Scalable Vector Graphic (SVG)
• เปนมาตรฐานภาพกราฟกทสามารถยอขยายได
• กำหนดภาพกราฟฟก 2 มตดวยภาษา XML
• สามารถทำภาพเคลอนไหวได
• เปนมาตรฐานแนะนำของ W3C
– SVG version 1.0 4 September 2001
– SVG Version 1.1 ปรบปรงใหม 16 August 2011
Page 22
119
การแสดงภาพกราฟก SVG
• เบราวเซอรรนเกาตองตดตง plugin เชน Adobe SVG Viewer
• เบราวเซอรรนใหม (ทรองรบ HTML5) สวนใหญสามารถแสดงภาพกราฟก SVG ได
โดยไมตองตดตง plugin
• ถามไฟลสกล .svg สามารถใชแทก <img> ไดเชนเดยวกบรปภาพทวไป • ใช แทก <svg> ถาตองการบอกขอมลภาพเองดวยภาษา xml
• รายละเอยดการเขยน XML สำหรบ svg อยนอกขอบเขตวชาน แตตองการใหภาพ
คราว ๆ วาทำไดอยางไรในสไลดถดไป
Page 23
120
ตวอยางการใช SVG เขยนวงกลมซอนกน<!DOCTYPE html> <head> <title>SVG Demo</title> </head> <body> <h2>HTML5 SVG Circles</h2> <svg height="120" > <circle cx="50" cy="50" r="50" fill="red" /> <circle cx="50" cy="50" r="30" fill="green" /> <circle cx="50" cy="50" r="10" fill="blue" /> Your browser does not support SVG. </svg> </body> </html>
Page 24
121
The <canvas> tagFunction:
ใชสรางพ OนทAสาหรบวาดภาพกราฟฟก ตองใชรวมกบสครปสาหรบเขยนโปรแกรมเชนจาวาสครปท
(JavaScript) Attributes:
height ความสงของพ OนทAสาหรบวาดภาพ หนวยเปน pixel
width ความกวางของพ OนทAสาหรบวาดภาพ หนวยเปน pixel
End tag:
</canvas>
Contains:
text ควรเปนขอความทLบอกผใชในกรณทLเบราวเซอรไมรองรบ tag นaหรอบรรจ tag อLนสาหรบทางานทดแทน
การเขยนจาวาสครปท อยนอกขอบเขตวชาน8
Page 25
122
ตวอยางการใช <canvas><canvas id="animated_logo"
height="300" width="400"
>
<img src="static_logo.gif" height="300" width="400" />
</canvas>
id เปน attribute ท;วไป ใชต8งช;อสาหรบการอางถง tag ตวใดตวหน;ง เน;องจาก แทก <canvas> ตองใชรวมกบจาวาสครปจงจาเปนตองต8งช;อเพ;อใหจาวาสครปสามารถอางถงได
Page 27
124
การสรางตาราง
ม tag ทAเกAยวของตาง ๆ ดงน O • <table> กาหนดตาราง • <th> กาหนดหวตาราง
• <tr> กาหนดแถวของตาราง
• <td> กาหนดขอมลของตาราง (เรยกวา cell)
• <caption> ใชต OงชAอตาราง
• <colgroup>กาหนดกลมของคอลมนเพAอจดรปแบบ
• <col /> กาหนดคา attribute ใหกบคอลมนของตาราง
ดรายละเอยดเพAมเตมในเวบไซต http://www.bus.tu.ac.th/usr/wanchai/html/table.htm
Page 28
125
A Simple Table<table border="1">
<tr>
<td>data1</td>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
<td>data4</td>
</tr>
</table>
EX
Page 29
126
สวนประกอบของ Table
Tag ท;เก;ยวของ
<table>
<caption>
<th> table head
<tr> table row
<td> table data
Page 30
127
The <table > TagFunction: สรางตารางสาหรบนาเสนอขอมลหรอจด layout Attributes: (ทกตวทLกลาวถงตอไปนaเลกใชใน HTML5) align=left|center|right width ความกวางของตาราง หนวยเปน pixel
border ความหนาของเสนรอบตารางหนวยเปน pixel bgcolor สพ Oนของตาราง End tag: </table>
Contains: <caption>, <tr>
ดคาอธบาย attribute เพAมเตมและ ตวอยางในเวบ http://www.bus.tu.ac.th/usr/wanchai/html/ สามารถเขาดวยชAอยอ j.mp/html_ex
Page 31
128
The <tr> TagFunction: จดขอมลในแตละแถวของตาราง
Attributes:
align=left|center|right
bgcolor สพ Oนของเซลในบรรทด
End tag: </tr>
Contains: <th>, <td>
attribute ทกตว (มมากกวานa)เลกใชใน HTML5 ใหใช CSS แทน
Page 32
129
The <td > TagFunction:
บอกขอบเขตของขอมลทAจะใสในเซลของตาราง
Attributes: align=left|center|right
valign=top|middle|bottom
bgcolor สพ Oนของเซล colspan = จานวนคอลมนทAตองการใหเซลน Oครอบคลม rowspan = จานวนบรรทดทAตองการใหเซลน Oครอบคลม
End tag: </td>
Contains: ขอความหรอ tag อ3น เชน <a> <img>
(deprecated)(deprecated)(deprecated)
Page 33
130
The <th > TagFunction:
ใชกาหนดเซลหวตาราง ใชเชนเดยวกบ <td> แตแสดงขอมลในเซลดวยตวหนา
Attributes: align=left|center|right
valign=top|middle|bottom
bgcolor สพ Oนของเซล colspan = จานวนคอลมนทAตองการใหเซลน Oครอบคลม rowspan = จานวนบรรทดทAตองการใหเซลน Oครอบคลม
End tag: </th>
Contains: ขอความหรอ tag อ3น เชน <a> <img>
(deprecated)(deprecated)(deprecated)
Page 34
131<table>
<tr> ROW1 </tr>
<tr> ROW2 </tr>
</table>
<table>
<tr><th>Header1</th><th>Header2</th></tr>
<tr><td>row2col1</td><td>row2col2</td></tr>
<tr><td>row3col1</td><td>row3col2</td></tr>
</table>
แถว หรอ บรรทด (row)
แถว
คอลมนหวคอลมน
Page 35
132
ฝกสรางตาราง
ใหนกศกษาเขยนตารางใหมลกษณะดงตวอยางตอไปน O
แถวแรกกนพ8นท; 2 คอลมนตวเลขอยกลางเซล
Page 36
133
การบงบอกลกษณะหรอสมบตหนาเวบโดยรวม
Page 37
134
The <body> tag
Function: define global characteristics of the page Attributes: bgcolor กาหนดสของฉากหลง (background color) text กาหนดสของขอความทAอยใน body link กาหนดสของล OงคทAยงไมไดเขาไปชม (unvisited hypertext links) alink กาหนดสของล OงคทAเพAงคลกอยระหวางรอหนาใหม (active hypertext links) vlink กาหนดสของล OงคทAยอนกลบมาหลงเขาชมแลว (visited hypertext links) background URL ของรปภาพทAจะนามาเปนฉากหลง
หมายเหต attribute เหลาน8 ถกยกเลก แนะนาใหใช CSS แทน
Page 38
135
ตวอยางการใชแทก <body> ในการระบสขอความและภาพฉากหลง
<body bgcolor="blue">
<body bgcolor="black" text="white">
<body bgcolor="khaki" text="blue" background="woodtile.gif">
<body link="blue" alink="red" vlink="aqua">
Page 39
CSS Pseudo-class Selectorsคลาสเทยม (pseudo-class) เปนคำสำคญทเพมใหกบตวเลอกเพอเพมเงอนไขหรอบงบอก
ภาวะพเศษของ element ทถกเลอก มรปแบบการใชดงน
ตวอยางคลาสเทยมเชน
• first-child - จะเลอกเฉพาะ element ลกตวแรกทเจอ เชน p:first-child ดตวอยาง https://www.w3schools.com/css/tryit.asp?filename=trycss_first-child1
• hover - จะถกเลอกเมอศรชขนไปอยเหนอ element ทกำหนดใหเปนตวเลอก เชน div:hover ดตวอยาง https://www.w3schools.com/css/tryit.asp?filename=trycss_pseudo-class_hover_div
136
selector:pseudo-class { property:value; }
Page 40
CSS Pseudo-classes ทใชกบลงคใชคลาสเทยมในการระบสของ hyperlinks ในภาวะตาง ๆ
• CSS:
a:link {color: black} a:active {color: red} a:visited{color: yellow}
• HTML
<a href="nextpage.html">Next page</a>
137
Page 41
Style Sheet Equivalent for <body>body { color: black; background-color: green; background-image: url(image.gif); } a:link {color: blue} a:active {color: red} a:visited {color: yellow}
เทยบเทากบ
<body text="black" link="blue" alink="red" vlink="yellow" bgcolor="green" background="image.gif" >
ดตวอยางทhttp://www.bus.tu.ac.th/usr/wanchai/html/css/bodystyle.html
138
Page 42
139
ใช CSS ยกเลกเสนใตขอความทเปนลงค ใส element <style> ตอไปนไวกอน </head> เพอเปลยนสไตลของลงคใหไมมเสน
ใต ยกเวนขณะเลอนลกศรไปอยเหนอลงค
<style> a:link {text-decoration: none} a:visited {text-decoration: none} a:active {text-decoration: none} a:hover {text-decoration: underline} </style>
http://www.bus.tu.ac.th/usr/wanchai/HTML/css/link-pseudo.html
Page 43
140
meta เปนแทกสาหรบใหรายละเอยดบางอยางเพAมเตม จะใสไวในสวนนา (head) ของเอกสาร html • ระบชดอกขระภาษาไทย <meta http-equiv="Content-Type" content="text/html; charset=tis-620">
HTML5 ใหเขยนส Oน ๆ แบบน Oได <meta charset="tis-620"> charset สาหรบชดอกษรไทยทAใชไดม • tis-620 • windows-874 แนะนาใหใช charset= "UTF-8" เพราะทาใหสามารถใสไดหลายภาษาในหนาเดยวกน กรณทAใชหลายภาษา Editor ทAใชเขยนตองรองรบการ save file ทAมการเขารหสตวอกษรแบบน Oได ซAงปจจบนสวนใหญรองรบ (Notepad กรองรบแลว)
คำเตอน อยาลมปดเครองหมายคำพด
แทก meta สาหรบระบคาสาคญ
Page 44
141
แทก meta สาหรบระบคาสาคญ
การระบคาสาคญ (keyword)ในเอกสาร html เปนการอานวยความ
สะดวกให search engine ทราบวาเราตองการใชคาใดเปนคาสาคญ
ของเปาหมายในการคนบาง
<meta name="keywords" content="mango, pine apple, banana">
Page 45
142
The Meta Description Tag
แทก meta สามารถนามาใชอธบายวาหนาเวบทAเขยนเปนเรAองเกAยวกบอะไร ซAง search engine มกนาขอความอธบายน Oไปโชวในหนาเวบของ search engine
<meta name= "description" content= "เราขายมงคด กลวย และสปรด ผลไมช Oนยอด คณภาพด มคณคาทาง
โภชนาการสง">
Page 46
143
ตวอยางการใชแทก meta ตาง ๆ <html> <head> <title>IT knowledge</title> <meta charset="tis-620"> <meta name="keywords" content="IT, ICT, Information Technology">
<meta name="description" content="สาระนารเกAยวกบไอท"> </head> <body> ถาทานกาลงหาเวบไซตเกAยวกบไอท ทานมาถกทAแลว </body> </html>
Page 47
144
การบอกชนดของเอกสาร (doctype) • ควรบอกชนดของเอกสารเพAอใหบราวเซอรรวาเปนเอกสารชนดใด รนใด • กอนหนาน Oการบอกชนดเอกสารคอนขางจายากเชน xHTML ตองบอกดงน O<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• พอเปน HTML5 สามารถบอกส Oน ๆ ไดดงน O
<!DOCTYPE HTML>
ถาจะใช HTM5 ควรบอก doctype เสมอเพ;อหลกเล;ยงปญญาบางเบราวเซอรไมทางานอยางท;คดเพราะ HTML มหลาย version ซ; งมอาจทางานตางกนในบาง version ถาไมบอก doctype เบราวเซอรอาจเดาวาเปน version ท;แตก
ตางจากท;คนเขยนต8งใจกเปนได
Page 49
146
Mobile Friendly Website• เปนการออกแบบเวบไซตใหเปนมตรกบผใชอปกรณพกพา เชนใชขนาดฟอนตใหเหมาะกบหนาจอขนาด
เลก จด layout ไมแนนจนเกนไปจะไดไมตองซม
• แนวทางการออกแบบ
• Adaptive Web Design - แยกเปนหลายไซตสำหรบแตละอปกรณ
• Responsive Web Design (RWD) - เวบไซตเดยวแตใชไดกบหลายอปกรณ
กเกลใหความสำคญกบเวบไซตทเปนมตรกบอปกรณพกพา ถาคนดวยกเกลจะลสตเวบไซตทเปนมตรกบอปกรณพกพาขนกอน ดงนน ถาตองการใหคนเจอเวบไซตของเราเปนอนดบตน ๆ จำเปนตองสรางเวบใหเปนมตรกบอปกรณพกพา
Page 50
147
Mobile Friendly ดวย viewport• กอนทจะนยมเขาชมเวบดวยอปกรณพกพา เวบมกถกออกแบบใหดดวยจอคอมพวเตอรซงกวางกวาจอ
ของอปกรณพกพามาก เมอเปดดดวยอปกรณพกพา content ในแตละหนามกอดแนนจนดดวยจอเลก
คอนขางยาก
• ถาจะใหดตองออกแบบเวบหลายแบบใหเหมาะกบการชมดวยอปกรณแตละชนด (Responsive Web
Design - RWD) ซงยงยากพอสมควร
• ขณะทยงไมไดออกแบบใหเปน RWD เตมตว ทางแกไขทงายทสดคอใชแทก viewport ของ HTML5
บรรจไวใน <head> เพอใหเบราวเซอรปรบ layout ของเนอหาใหเหมาะกบแตละอปกรณ ดงนนจงควร
บรรจะแทกตอไปนไวทกหนา
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Page 51
148
รปไฟลเดยวใชกบจอทกขนาด!
Page 52
149
Responsive VS Adaptive
ใชไซตเดยวแตเขยนเวบใหปรบตวให
เหมาะสมกบอปกรณแตละชนด
ออกแบบแยกกนไปเปนคนละไซตให
เหมาะสมกบอปกรณ (URL ตางกน)
Page 53
150
Responsive Web Design (RWD)
• เปนการออกแบบเวบใหเหมาะกบอปกรณหลากหลายชนด นยมปรบเปลยน layout
ใหเหมาะกบขนาดหนาจอโดยอตโนมต
• ใช ความสามารถของ CSS ในการตรวจสอบขนาดหนาจอแลวเลอกใช CSS style ท
เตรยมไวแลวใหเหมาะสมกบขนาดหนาจอ
• อาจเตรยมรปไวหลายขนาดเพอใหเหมาะกบจอขนาดทตางกน
Page 55
152
เลอกใช External Stylesheet ใหเหมาะกบขนาดจอ• เตรยม stylesheet ไวหลายแบบ จด layout ใหเหมาะกบชนดและ/หรอขนาดของอป
กรณทAจะแสดงผล • ใหเบราวเซอรเลอก stylesheet ตามเงAอนไขของชนดหรอขนาดของอปกรณทAกาหนด • ใช attribute media สอบถามชนดและขนาดอปกรณเปนเงAอนไขในการเลอก
external stylesheet
• เบราวเซอรจะเลอกรปตามลาดบทAเขาเงAอนไขจากบนลงลาง
<link href="print.css" rel="stylesheet" media="print"> <link href="desktop.css" rel="stylesheet" media="screen and (max-width: 1000px)"> <link href="tablet.css" rel="stylesheet" media="screen and (max-width: 800px)"> <link href="mobile.css" rel="stylesheet" media="screen">
ลองท https://www.w3schools.com/tags/tag_picture.asp
Page 56
153
ใชแทก <picture> เลอกรปใหเหมาะกบขนาดจอ• เตรยมรปไวหลายขนาดใหเบราวเซอรเลอกขนาดรปใหเหมาะสมกบขนาดจอ • ใชแทก <picture> รวมกบ <source> เพAอบอกตวเลอกของรปทAจะนามาใช
• เบราวเซอรจะเลอกรปตามลาดบทAเขาเงAอนไขจากบนลงลาง • ใส <img> ไวเปนตวสดทาย เผAอวาเบราวเซอรไมรองรบ <picture> และ <source>
<picture> <source srcset="logo-large.png" media="(min-width: 800px)"> <source srcset="logo-medium.png" media="(min-width: 600px)"> <img src="logo-small.png" alt="company logo"> </picture>
ลองท https://www.w3schools.com/tags/tag_picture.asp
Page 57
154
Responsive Retrofitting
พยายามปรบเนอหาเดมของเวบเดมทใชกบคอมพวเตอรตงโตะให
เขาพอดกบอปกรณพกพา
Page 58
155
Mobile-First Web Design
คดถงโมบายกอนอยางอน ออกแบบเลยเอาทจากจอเลกสจอใหญ
ออกแบบเลยเอาทจากจอใหญสเลกสจอ
Page 59
156
การสอบทานเวซไซต• ตรวจวาเราเขยนถกตองตามหลกทดในการใช HTML หรอไม
https://validator.w3.org/
• ตรวจวาเขยนถกตองตามหลก CSS หรอไมhttps://jigsaw.w3.org/css-validator/
• ตรวจวาเขยนลงคไมเหมาะสมหรอไมhttps://validator.w3.org/checklink
• ตรวจวาเปนมตรกบอปกรณพกพามากนอยเพยงใดhttps://search.google.com/test/mobile-friendly
Page 60
157
การ upload เวบเพจของนกศกษา• FTP ไฟลทตองการ upload ไปท server ชอ std.bus.tu.ac.th
โดยใช รหสนกศกษาเปน UserId และใช password ทแจกใหทางอเมล (คนละตวกบการใชบรการอนเทอรเนต) ดวยโปรแกรมประเภท FTP client เชน FileZilla FTP หรอใชความสามารถของวนโดวสในการ upload อานไดในเวบวชาน http://www.bus.tu.ac.th/usr/wanchai/is216
• เขาเวบเพอดเอกสารท upload ไปแลวไดทhttp://std.bus.tu.ac.th/<userid>/<filename>
อานโจทย assignment HTML และ CSS ไดท http://www.bus.tu.ac.th/usr/wanchai/is216/หรอเขาทางชอยอ http://bit.ly/tbsis216
Page 61
158
เครองมอในการเขยนเวบ (Web Authoring Tools)
• Pure code-based editor
• Pure WYSIWYG (What You See Is What You Get) editor
• Compound editor (ผสมทง 2 แบบ เขาดวยกน)
• web generator (ใชซอฟตแวรชวยสรางเวบ ไมตองเขยนเอง เชน
Microsoft Word สามารถแปลงไฟล word ใหเปน html ได)
• Web Content Management System (CMS)
Page 62
159
Web Authoring Toolsโปรแกรมสำหรบชวยเขยนเวบ เพมผลตภาพในการเขยนเวบไดมาก แตมกตองซอซอฟตแวรราคาแพง บางโปรแกรมซบซอนมาก ตองใชเวลาในการเรยนรนาน เหมาะสำหรบผทเขยนเวบเปนอาชพ ตวอยางโปรแกรมชวยเขยนเวบเชน
• Adobe Dreamweaver (มออาชพนยมใชมากทสด - แพง) https://www.adobe.com/products/dreamweaver.html
• Microsoft Expression Web มรนฟรใหใช https://www.microsoft.com/en-us/download/details.aspx?id=36179
• Brackets เปนซอฟตแวรแบบ Open Source สามารถดาวนโหลดมาใชไดฟรท http://brackets.io/
Page 63
160
โปรแกรมสำหรบผลตเวบเฉพาะดานมโปรแกรมในทองตลาดทชวยผลต(generate หรอ build)เวบโดยไมตองเขยนเอง ผใชเพยงแค
ใหขอมลแลวโปรแกรมจะผลตหนาเวบให โดยทผใชโปรแกรมไมจำเปนตองรภาษา HTML กได
แตถาผใชตองการดดแปลงแกไขหนาเวบทโปรแกรมผลตใหมกจำเปนตองมความรภาษา HTML
จงจะแกไขหนาเวบทโปรแกรมผลตใหได ผใชโปรแกรมมกสามารถเลอกแมแบบ (template)
แบบ (style) ตาง ๆ ทมเปนตวอยางใหเลอกได ตวอยางโปรแกรมประเภทน เชน
• โปรแกรมสำหรบสรางเวบไซตขายของ (E-commerce)
• โปรแกรมสำหรบอลบมรปภาพ
• โปรแกรมสำหรบสรางบทเรยนอเลกทรอนกส
Page 64
161
เวบสำหรบสรางหนาเวบ• เวบยคแรกเปนเวบแบบนง ๆ (static web) ผชมเวบอานอยางเดยวไมสามารถโตตอบกบเวบได ผเขยนเวบ
ตองมความรภาษา HTML
• ตอมามการพฒนาเวบใหสามารถโตตอบกบผชมได ผชมสามารถใสขอมลของตนเองเขาไปไดทางเบราวเซอร
โดยไมจำเปนตองรภาษา HTML โปรแกรมททำงานอยทางฝงเครองแมขายจะรบขอมลทเราใสไปเกบไวใน
เครองแมขายและนำขอมลนนมาแปลงใหเปน HTML แลวสงไปใหเบราวเซอรแสดงผลเปนหนาเวบ ความ
สามารถของเวบททำแบบนไดนยมเรยกวา Web 2.0 ตวอยางของเวบแบบนเชน Facebook และ
Wikipedia
• ปจจบนม web plateform ซงบรณาการหลายเรองเขาดวยกนเชน ระบบจดการเนอหา (Content
Mangement System - CMS) ระบบชำระเงน และอน ๆ ทำใหงายในการออกแบบ สรางเวบไซต เพราะม
theme หรอ template ใหเลอกใช รวมถง hosting เพอใชงานทางธรกจ เชน wordpress.com wix.com