การสร้างเว็บเพจโดยใช้ html5 และ css...
Post on 02-Apr-2020
10 Views
Preview:
TRANSCRIPT
การสรางเวบเพจโดยใช HTML5 และ CSS ขนตน
Part IV สอประสม ตาราง และอน ๆ
ผศ.วนชย ขนต wanchai@tbs.tu.ac.th
คณะพาณชยศาสตรและการบญช มธ. http://www.bus.tu.ac.th/usr/wanchai/IS281
หวขอ
IS216 การพฒนาโปรแกรมประยกตโดยผใช IS281 เครAองมอสงเสรมความสาเรจของผใช
‹#›
การใสสอประสม(multimedia) ในหนาเวบ
100
Multimedia Web pages
นอกจากใสขอความในหนาเวบแลว เราอาจใสเน OอหาทAเปนสAอประสม (multimedia content) เชนภาพนAง ภาพเคลAอนไหว และเสยงลงไปไดดวย
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
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
103
ชนดของรปภาพท:สามารถแสดงในหนาเวบ
• JPEG Joint Photographic Expert Group
• GIF Graphic Interchange Format
• PNG Portable Network Graphic
ภาพท Oง � ชนดน OเหมาะกบการสงผานทางอนเทอรเนตเพราะสามารถบบอดขอมลใหเลกลงไดเพAอประหยดเวลาในการสง
JPEG GIF PNG
104
คณสมบตของ JPEG• คณภาพระดบภาพถาย(Photograph-quality)
• AB บตตอจดภาพ ได IJ.L ลานส
• บบอดไดดถาใชกบภาพถายหรอภาพวาดทXมการไลเฉดสเหมอนธรรมชาตขนาดของแฟมมกจะเลกกวา GIF
• ไมเหมาะกบภาพลายเสนเชนการตน ขนาดของแฟมจะโต
• ไมเหมาะกบการซอนภาพอกษร บบอดไดไมด
• Progressive JPEG files โหลดไดเรวกวา JPEG ธรรมดา
สกลของแฟมเปน .jpeg หรอ .jpg
105
คณสมบตของ GIF• 8 bit ตอจดภาพ (pixel) แสดงได 256 ส
• GIF24 ใช 24 bit ตอจดภาพแสดงได 16 ลานส
• เหมาะสำหรบภาพทเปนสพน ไมไลเฉดส เชนโลโก ภาพลายเสน หรอรปทรงเรขา
คณต
• รองรบการทำใหโปรงใส (Transparency)
• รองรบการทำ Interlacing
• รองรบการทำภาพเคลอนไหวAnimation
สกลของแฟมเปน .gif
106
คณสมบตของ PNG• สรางขนมาทดแทน GIF ซงสงวนลขสทธในการใช
• สามารถแสดงสได 16.7 ลานส
• เหมาะสำหรบภาพทเปนสพน เชนโลโก ภาพลายเสน ภาพวาด หรอรปทรง
เรขาคณต สามารถไลเฉดสไดดกวา GIF
• รองรบการทำใหโปรงใส (Transparency)
• รองรบการทำภาพเคลอนไหว (Animation) แตบางเบราวเซอรไมรองรบ
สกลของแฟมเปน .png
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 สาหรบวางรปภาพ
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 แทน
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
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>
111
การเซฟภาพจากเวบ(สาหรบผท:ยงไมทราบ)
• ใชเมาสชทรปภาพแลวคลกดวยปมขวาของเมาสจะปรากฎ pop up menu
• เลอกรายการ Save Picture As …
• เลอก drive / folder ทตองการsave แลวคลกปม save
112
ฝกปฏบตใสรปภาพ
เขยนเวบใหมการแสดงรปภาพลกษณะตาง ๆ เชน
• inline image
•hypertext anchor
•background
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
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
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 หลายตว
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
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 หลายตว
118
Scalable Vector Graphic (SVG)
• เปนมาตรฐานภาพกราฟกทสามารถยอขยายได
• กำหนดภาพกราฟฟก 2 มตดวยภาษา XML
• สามารถทำภาพเคลอนไหวได
• เปนมาตรฐานแนะนำของ W3C
– SVG version 1.0 4 September 2001
– SVG Version 1.1 ปรบปรงใหม 16 August 2011
119
การแสดงภาพกราฟก SVG
• เบราวเซอรรนเกาตองตดตง plugin เชน Adobe SVG Viewer
• เบราวเซอรรนใหม (ทรองรบ HTML5) สวนใหญสามารถแสดงภาพกราฟก SVG ได
โดยไมตองตดตง plugin
• ถามไฟลสกล .svg สามารถใชแทก <img> ไดเชนเดยวกบรปภาพทวไป • ใช แทก <svg> ถาตองการบอกขอมลภาพเองดวยภาษา xml
• รายละเอยดการเขยน XML สำหรบ svg อยนอกขอบเขตวชาน แตตองการใหภาพ
คราว ๆ วาทำไดอยางไรในสไลดถดไป
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>
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
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งช;อเพ;อใหจาวาสครปสามารถอางถงได
‹#›
การสรางตาราง
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
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
126
สวนประกอบของ Table
Tag ท;เก;ยวของ
<table>
<caption>
<th> table head
<tr> table row
<td> table data
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
128
The <tr> TagFunction: จดขอมลในแตละแถวของตาราง
Attributes:
align=left|center|right
bgcolor สพ Oนของเซลในบรรทด
End tag: </tr>
Contains: <th>, <td>
attribute ทกตว (มมากกวานa)เลกใชใน HTML5 ใหใช CSS แทน
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)
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)
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)
แถว
คอลมนหวคอลมน
132
ฝกสรางตาราง
ใหนกศกษาเขยนตารางใหมลกษณะดงตวอยางตอไปน O
แถวแรกกนพ8นท; 2 คอลมนตวเลขอยกลางเซล
133
การบงบอกลกษณะหรอสมบตหนาเวบโดยรวม
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 แทน
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">
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; }
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
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
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
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 สาหรบระบคาสาคญ
141
แทก meta สาหรบระบคาสาคญ
การระบคาสาคญ (keyword)ในเอกสาร html เปนการอานวยความ
สะดวกให search engine ทราบวาเราตองการใชคาใดเปนคาสาคญ
ของเปาหมายในการคนบาง
<meta name="keywords" content="mango, pine apple, banana">
142
The Meta Description Tag
แทก meta สามารถนามาใชอธบายวาหนาเวบทAเขยนเปนเรAองเกAยวกบอะไร ซAง search engine มกนาขอความอธบายน Oไปโชวในหนาเวบของ search engine
<meta name= "description" content= "เราขายมงคด กลวย และสปรด ผลไมช Oนยอด คณภาพด มคณคาทาง
โภชนาการสง">
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>
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งใจกเปนได
146
Mobile Friendly Website• เปนการออกแบบเวบไซตใหเปนมตรกบผใชอปกรณพกพา เชนใชขนาดฟอนตใหเหมาะกบหนาจอขนาด
เลก จด layout ไมแนนจนเกนไปจะไดไมตองซม
• แนวทางการออกแบบ
• Adaptive Web Design - แยกเปนหลายไซตสำหรบแตละอปกรณ
• Responsive Web Design (RWD) - เวบไซตเดยวแตใชไดกบหลายอปกรณ
กเกลใหความสำคญกบเวบไซตทเปนมตรกบอปกรณพกพา ถาคนดวยกเกลจะลสตเวบไซตทเปนมตรกบอปกรณพกพาขนกอน ดงนน ถาตองการใหคนเจอเวบไซตของเราเปนอนดบตน ๆ จำเปนตองสรางเวบใหเปนมตรกบอปกรณพกพา
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">
148
รปไฟลเดยวใชกบจอทกขนาด!
149
Responsive VS Adaptive
ใชไซตเดยวแตเขยนเวบใหปรบตวให
เหมาะสมกบอปกรณแตละชนด
ออกแบบแยกกนไปเปนคนละไซตให
เหมาะสมกบอปกรณ (URL ตางกน)
150
Responsive Web Design (RWD)
• เปนการออกแบบเวบใหเหมาะกบอปกรณหลากหลายชนด นยมปรบเปลยน layout
ใหเหมาะกบขนาดหนาจอโดยอตโนมต
• ใช ความสามารถของ CSS ในการตรวจสอบขนาดหนาจอแลวเลอกใช CSS style ท
เตรยมไวแลวใหเหมาะสมกบขนาดหนาจอ
• อาจเตรยมรปไวหลายขนาดเพอใหเหมาะกบจอขนาดทตางกน
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
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
154
Responsive Retrofitting
พยายามปรบเนอหาเดมของเวบเดมทใชกบคอมพวเตอรตงโตะให
เขาพอดกบอปกรณพกพา
155
Mobile-First Web Design
คดถงโมบายกอนอยางอน ออกแบบเลยเอาทจากจอเลกสจอใหญ
ออกแบบเลยเอาทจากจอใหญสเลกสจอ
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
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
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)
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/
160
โปรแกรมสำหรบผลตเวบเฉพาะดานมโปรแกรมในทองตลาดทชวยผลต(generate หรอ build)เวบโดยไมตองเขยนเอง ผใชเพยงแค
ใหขอมลแลวโปรแกรมจะผลตหนาเวบให โดยทผใชโปรแกรมไมจำเปนตองรภาษา HTML กได
แตถาผใชตองการดดแปลงแกไขหนาเวบทโปรแกรมผลตใหมกจำเปนตองมความรภาษา HTML
จงจะแกไขหนาเวบทโปรแกรมผลตใหได ผใชโปรแกรมมกสามารถเลอกแมแบบ (template)
แบบ (style) ตาง ๆ ทมเปนตวอยางใหเลอกได ตวอยางโปรแกรมประเภทน เชน
• โปรแกรมสำหรบสรางเวบไซตขายของ (E-commerce)
• โปรแกรมสำหรบอลบมรปภาพ
• โปรแกรมสำหรบสรางบทเรยนอเลกทรอนกส
161
เวบสำหรบสรางหนาเวบ• เวบยคแรกเปนเวบแบบนง ๆ (static web) ผชมเวบอานอยางเดยวไมสามารถโตตอบกบเวบได ผเขยนเวบ
ตองมความรภาษา HTML
• ตอมามการพฒนาเวบใหสามารถโตตอบกบผชมได ผชมสามารถใสขอมลของตนเองเขาไปไดทางเบราวเซอร
โดยไมจำเปนตองรภาษา HTML โปรแกรมททำงานอยทางฝงเครองแมขายจะรบขอมลทเราใสไปเกบไวใน
เครองแมขายและนำขอมลนนมาแปลงใหเปน HTML แลวสงไปใหเบราวเซอรแสดงผลเปนหนาเวบ ความ
สามารถของเวบททำแบบนไดนยมเรยกวา Web 2.0 ตวอยางของเวบแบบนเชน Facebook และ
Wikipedia
• ปจจบนม web plateform ซงบรณาการหลายเรองเขาดวยกนเชน ระบบจดการเนอหา (Content
Mangement System - CMS) ระบบชำระเงน และอน ๆ ทำใหงายในการออกแบบ สรางเวบไซต เพราะม
theme หรอ template ใหเลอกใช รวมถง hosting เพอใชงานทางธรกจ เชน wordpress.com wix.com
top related