การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV สื่อ ... · การสร้างเว็บเพจโดยใช้

การสรางเวบเพจโดยใช HTML5 และ CSS ขนตน

Part IV สอประสม ตาราง และอน ๆ

ผศ.วนชย ขนต [email protected]

คณะพาณชยศาสตรและการบญช มธ. 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

Documents

การสร้างเว็บเพจโดยใช้ HTML5 และ CSS ขั้นต้น Part IV สื่อ ... · การสร้างเว็บเพจโดยใช้