SlideShare a Scribd company logo
1 of 68
เริ่มต้นการใช้  ICT  ด้วยเว็บไซต์   ,[object Object],[object Object],[object Object]
ทำความรู้จักกับเอกสารเว็บ Home Page
เอกสารเว็บ ,[object Object],[object Object],[object Object],[object Object],[object Object]
ภาษา  HTML ,[object Object],[object Object],[object Object]
 
เว็บเบราเซอร์  (Web Browser) ,[object Object],[object Object],[object Object],[object Object],[object Object]
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object],[object Object],โอนเอกสารเว็บ ไปสู่เครื่องแม่ข่าย  (Server) เครื่องแม่ข่าย  (Server)  ทำงานด้วยระบบ  Unix เรียกดูเอกสารเว็บด้วย เครื่องแมคอินทอช เรียกดูเอกสารเว็บด้วย เครื่องพีซี พัฒนาเอกสารเว็บ บนระบบ  Windows 95
การพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object]
การพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object]
การพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object]
การพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object],[object Object]
http://www.school.net.th/library
http://www.think.com
แล้วจะเลือกเครื่องมือตัวใด ดีครับ ? ,[object Object],[object Object],[object Object],เครื่องมือแต่ละตัว ควรสนับสนุน ภาษาไทยน่ะครับ
ภาษาไทย กับการพัฒนาเว็บเพจ Windows95 IE Windows2000 IE Macintosh Windows98 Netscape พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows 95/98 Server : Unix/NT upload
ภาษาไทย กับการพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ภาษาไทย กับการพัฒนาเว็บเพจ
การออกแบบเว็บไซต์ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
การออกแบบเว็บไซต์ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
เป้าหมายของการพัฒนาเว็บ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
กลุ่มเป้าหมาย ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
truehits.gits.net.th
 
 
 
 
 
 
การออกแบบเว็บไซต์ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object],index.html p01.html p02.html p03.html p04.html p05.html
โฟลเดอร์ เป็นสิ่งสำคัญ ,[object Object],[object Object],Personal-web history image award ... image Personal-web image history award ...
ลักษณะของหน้าเว็บที่เหมาะสม Web Area 780 pixel Screen Area 600 pixel web Area
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object],Copy to….
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object]
Digital Images ,[object Object],[object Object],[object Object],[object Object]
มาตรฐานรูปแบบการนำเสนอภาพ    100    100 pixels    300    250 pixels    300    250 pixels Up to  1024    768 pixels Up to  1024    768 pixels Up to  1840    1232 pixels Up to  1840    1232 pixels Size 72 dpi 72 dpi 72 dpi 72 dpi 72 dpi Up to 350 dpi Up to 350 dpi Resolution PNG PNG JPEG GIF TIF JPEG JPEG JPEG TIFF JPEG, TIFF Format Pre view Website Database Presentation ภาพสำหรับ Digital Archive ภาพ สื่อสิ่งพิมพ์ ภาพต้นฉบับ
Format ,[object Object],[object Object],[object Object]
GIF ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JPEG ,[object Object],[object Object],[object Object],[object Object],[object Object]
PNG ,[object Object],[object Object],[object Object],[object Object]
TIFF ,[object Object],[object Object],[object Object],[object Object]
Pixel - Your eye perceives Continuity dpi = dot per inch
Bit
Pixel - Your eye perceives Continuity
Zoom-In on the Patch
Resolutions
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GIF / JPEG
GIF or JPEG?
เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ  Interlaced การแสดงผลภาพ แบบ  Progressive
การทำงานกับกราฟิกไฟล์สำหรับเว็บ ,[object Object],[object Object],[object Object],[object Object],[object Object]
การทำงานกับกราฟิกไฟล์สำหรับเว็บ สำหรับภาพฟอร์แมต  JPG  ค่า  Quality  ไม่ควรต่ำ หรือสูงเกินไป   และกำหนดรูปแบบการแสดงผล เป็นแบบ  Progressive  ด้วย สำหรับภาพที่มีขนาดโต
ลักษณะของหน้าเว็บที่เหมาะสม ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ลักษณะของหน้าเว็บที่เหมาะสม Web Area 780 pixel Screen Area 600 pixel web Area
เอกสารเสมือน  PDF Format ,[object Object],[object Object],[object Object],[object Object],ข้อมูลเพิ่มเติม  :  สารเนคเทค ฉบับที่  30  กันยายน  -  ตุลาคม  2542
การใช้เอกสาร  PDF  บนเว็บ ,[object Object],[object Object],<A HREF=”http://www.nectec.or.th/courseware/ d ownload/ar40eng.exe&quot;> <IMG SRC=&quot; http://www.nectec.or.th/courseware/image/getacro.gif&quot; BORDER=&quot;0&quot;  ALT=&quot;Get Acrobat Reader”><A>
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],index.html Save...
เครื่องมือพัฒนาเว็บ ,[object Object],[object Object],[object Object],[object Object]
เครื่องมือพัฒนาเว็บ ,[object Object],[object Object],[object Object],[object Object]
เครื่องมือพัฒนาเว็บ ,[object Object],[object Object],[object Object],[object Object]
แล้วจะเลือกเครื่องมือตัวใด ดีครับ  ? ,[object Object],[object Object],[object Object],เครื่องมือแต่ละตัว ควรสนับสนุน ภาษาไทยน่ะครับ
ภาษาไทย กับการพัฒนาเว็บเพจ Windows95 IE Windows95 Netscape Macintosh Windows98 Netscape พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows 95/98 Server : Unix/NT upload
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object],[object Object]
ขั้นตอนการพัฒนาเว็บเพจ ,[object Object],[object Object]
Microsoft Office ,[object Object],[object Object]
สร้างเอกสารเว็บ สร้างงานตามกระบวนการปกติ ใช้คำสั่ง  File, Save as HTML... ปฏิบัติตามขั้นตอนของแต่ละโปรแกรม ไม่ยากเลยน่ะครับ
www.nectec.or.th/courseware

More Related Content

What's hot

นุ๊ก
นุ๊กนุ๊ก
นุ๊กsirinet
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์sirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
หวิว
หวิวหวิว
หวิวViewMik
 
20100806 wordpress-server2 go
20100806 wordpress-server2 go20100806 wordpress-server2 go
20100806 wordpress-server2 gotaweesit doh
 
wordpress-server2
wordpress-server2 wordpress-server2
wordpress-server2 Nan Anan
 
20100806 wordpress-server2 go
20100806 wordpress-server2 go20100806 wordpress-server2 go
20100806 wordpress-server2 govongboonrod
 
20100806 wordpress-server2 go
20100806 wordpress-server2 go20100806 wordpress-server2 go
20100806 wordpress-server2 goarchitechture
 

What's hot (17)

นุ๊ก
นุ๊กนุ๊ก
นุ๊ก
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์
 
โบ
โบโบ
โบ
 
หมวย
หมวยหมวย
หมวย
 
Best
BestBest
Best
 
หวิว
หวิวหวิว
หวิว
 
20100806 wordpress-server2 go
20100806 wordpress-server2 go20100806 wordpress-server2 go
20100806 wordpress-server2 go
 
wordpress-server2
wordpress-server2 wordpress-server2
wordpress-server2
 
20100806 wordpress-server2 go
20100806 wordpress-server2 go20100806 wordpress-server2 go
20100806 wordpress-server2 go
 
20100806 wordpress-server2 go
20100806 wordpress-server2 go20100806 wordpress-server2 go
20100806 wordpress-server2 go
 
20100806 wordpress-server2 go
20100806 wordpress-server2 go20100806 wordpress-server2 go
20100806 wordpress-server2 go
 
Yuu
YuuYuu
Yuu
 
New
NewNew
New
 
Ten
TenTen
Ten
 
2010012 wordpress-com-boonkiat
2010012 wordpress-com-boonkiat2010012 wordpress-com-boonkiat
2010012 wordpress-com-boonkiat
 
Joomla CMS
Joomla CMSJoomla CMS
Joomla CMS
 
20110201 drupal-ir
20110201 drupal-ir20110201 drupal-ir
20110201 drupal-ir
 

Viewers also liked (19)

20100321 wordpress
20100321 wordpress20100321 wordpress
20100321 wordpress
 
trnn6group-command
trnn6group-commandtrnn6group-command
trnn6group-command
 
TNRR
TNRRTNRR
TNRR
 
Electric - Flood Manual
Electric - Flood ManualElectric - Flood Manual
Electric - Flood Manual
 
Open Access : Safety Issue
Open Access : Safety IssueOpen Access : Safety Issue
Open Access : Safety Issue
 
Digital Collection with Omeka
Digital Collection with OmekaDigital Collection with Omeka
Digital Collection with Omeka
 
Social Network
Social NetworkSocial Network
Social Network
 
openbiliohotri2go
openbiliohotri2goopenbiliohotri2go
openbiliohotri2go
 
Alternative Software for LIbrary
Alternative Software for LIbraryAlternative Software for LIbrary
Alternative Software for LIbrary
 
Higher Education Standard : Thailand
Higher Education Standard : ThailandHigher Education Standard : Thailand
Higher Education Standard : Thailand
 
Server with XAMPP
Server with XAMPPServer with XAMPP
Server with XAMPP
 
World-Class Standard School
World-Class Standard SchoolWorld-Class Standard School
World-Class Standard School
 
Procurement & Standard Price manual
Procurement  & Standard Price manualProcurement  & Standard Price manual
Procurement & Standard Price manual
 
Text Mining : Experience
Text Mining : ExperienceText Mining : Experience
Text Mining : Experience
 
Augmented Reality
Augmented RealityAugmented Reality
Augmented Reality
 
Mind Map How to
Mind Map How toMind Map How to
Mind Map How to
 
Higher Education Plan # 11
Higher Education Plan # 11Higher Education Plan # 11
Higher Education Plan # 11
 
S-Sence : Social Media Intelligence
S-Sence : Social Media IntelligenceS-Sence : Social Media Intelligence
S-Sence : Social Media Intelligence
 
ICT 2020
ICT 2020ICT 2020
ICT 2020
 

Similar to ICT with Web site

หมวย
หมวยหมวย
หมวยsirinet
 
การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibility
การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibilityการพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibility
การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web AccessibilityBoonlert Aroonpiboon
 
OAI-PMH with Drupal + XAMPP Portable + PKP OHS
OAI-PMH with Drupal + XAMPP Portable + PKP OHSOAI-PMH with Drupal + XAMPP Portable + PKP OHS
OAI-PMH with Drupal + XAMPP Portable + PKP OHSBoonlert Aroonpiboon
 
e-Courseware with Microsoft Producer & HotPotatoes
e-Courseware with Microsoft Producer & HotPotatoese-Courseware with Microsoft Producer & HotPotatoes
e-Courseware with Microsoft Producer & HotPotatoesBoonlert Aroonpiboon
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshopการบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla WorkshopSatapon Yosakonkun
 
แนวทางการพัฒนา e-Learning
แนวทางการพัฒนา e-Learningแนวทางการพัฒนา e-Learning
แนวทางการพัฒนา e-LearningBoonlert Aroonpiboon
 

Similar to ICT with Web site (20)

20080620 E Publishing
20080620 E Publishing20080620 E Publishing
20080620 E Publishing
 
e-Publishing
e-Publishinge-Publishing
e-Publishing
 
หมวย
หมวยหมวย
หมวย
 
Digital Content for Web
Digital Content for WebDigital Content for Web
Digital Content for Web
 
e-Publishing
e-Publishinge-Publishing
e-Publishing
 
How to manage e-Media
How to manage e-MediaHow to manage e-Media
How to manage e-Media
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
e-Media Development
e-Media Developmente-Media Development
e-Media Development
 
การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibility
การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibilityการพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibility
การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibility
 
Php
PhpPhp
Php
 
Web Accessibility Coding
Web Accessibility CodingWeb Accessibility Coding
Web Accessibility Coding
 
OAI-PMH with Drupal + XAMPP Portable + PKP OHS
OAI-PMH with Drupal + XAMPP Portable + PKP OHSOAI-PMH with Drupal + XAMPP Portable + PKP OHS
OAI-PMH with Drupal + XAMPP Portable + PKP OHS
 
e-Courseware with Microsoft Producer & HotPotatoes
e-Courseware with Microsoft Producer & HotPotatoese-Courseware with Microsoft Producer & HotPotatoes
e-Courseware with Microsoft Producer & HotPotatoes
 
Digital Media
Digital MediaDigital Media
Digital Media
 
Webbasic
WebbasicWebbasic
Webbasic
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshopการบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
 
แนวทางการพัฒนา e-Learning
แนวทางการพัฒนา e-Learningแนวทางการพัฒนา e-Learning
แนวทางการพัฒนา e-Learning
 

More from Boonlert Aroonpiboon (20)

Excel quiz
Excel quizExcel quiz
Excel quiz
 
Scival for Research Performance
Scival for Research PerformanceScival for Research Performance
Scival for Research Performance
 
20190726 icde-session-chularat-nstda-4
20190726 icde-session-chularat-nstda-420190726 icde-session-chularat-nstda-4
20190726 icde-session-chularat-nstda-4
 
20190409 social-media-backup
20190409 social-media-backup20190409 social-media-backup
20190409 social-media-backup
 
20190220 open-library
20190220 open-library20190220 open-library
20190220 open-library
 
20190220 digital-archives
20190220 digital-archives20190220 digital-archives
20190220 digital-archives
 
OER KKU Library
OER KKU LibraryOER KKU Library
OER KKU Library
 
Museum digital-code
Museum digital-codeMuseum digital-code
Museum digital-code
 
OER MOOC - Success Story
OER MOOC - Success StoryOER MOOC - Success Story
OER MOOC - Success Story
 
LAM Code of conduct
LAM Code of conductLAM Code of conduct
LAM Code of conduct
 
RLPD - OER MOOC
RLPD - OER MOOCRLPD - OER MOOC
RLPD - OER MOOC
 
New Technology for Information Services
New Technology for Information ServicesNew Technology for Information Services
New Technology for Information Services
 
New Technology for Information Services
New Technology for Information ServicesNew Technology for Information Services
New Technology for Information Services
 
digital law for GLAM
digital law for GLAMdigital law for GLAM
digital law for GLAM
 
20180919 digital-collections
20180919 digital-collections20180919 digital-collections
20180919 digital-collections
 
Field-Weighted Citation Impact (FWCI)
Field-Weighted Citation Impact (FWCI)Field-Weighted Citation Impact (FWCI)
Field-Weighted Citation Impact (FWCI)
 
20180828 digital-archives
20180828 digital-archives20180828 digital-archives
20180828 digital-archives
 
Local Wisdom Information : How to
Local Wisdom Information : How toLocal Wisdom Information : How to
Local Wisdom Information : How to
 
201403 etda-library-settup
201403 etda-library-settup201403 etda-library-settup
201403 etda-library-settup
 
201403 etda-library
201403 etda-library201403 etda-library
201403 etda-library
 

ICT with Web site