Upload
jenchoke-tachagomain
View
832
Download
1
Embed Size (px)
DESCRIPTION
การสร้างสรรค์ การพัฒนาและการจัดการเอกสารออนไลน์ ปฏิสัมพันธ์ขั้นสูง ในเรื่องการพัฒนาเว็บไซต์ ปฏิสัมพันธ์ภาพเคลื่อนไหวสำหรับเว็บ การออกแบบปฏิสัมพันธ์ และการพัฒนาสื่อดิจิทัลออนไลน์รูปแบบต่างๆ
Citation preview
DHTML withJavaScript and
CSS
Dynamic HTML (DHTML)
Dynamic HTML (DHTML ) คื�ออะไร เป็�นเทคน�คทช่�วยเพิ่�มความสามารถให้� Browser สามารถท�าการโต้�ต้อบการผู้��ใช่�งานเองได้� โด้ยไม�ต้�องจำ�าเป็�นต้�องไป็ขอข�อม�ล
จำากWeb Server ท&กคร'(งไป็ เป็�นต้'วเล)อกทจำะให้�ผู้��ใช่�สร�างเว+บเพิ่จำให้�มภาพิ่เคล)อนไห้วมาก
ข-(นและต้อบสนองผู้��ใช่�แบบ Interactive มากกว�า HTML เวอร/ช่'นก�อน
ส�วนให้ญ่�ของ Dynamic HTML ได้�ร'บการระบ&ใน HTML 4.0 ต้'วอย�างของเพิ่จำ Dynamic HTML สต้'วอ'กษรของห้'วข�อเป็ลยนเม)อเมาส/เคล)อนผู้�าน ย�นยอมให้�ผู้��ใช่�ใน
การ drag and drop ภาพิ่ไป็ย'งทอ)นบนเว+บเพิ่จำ Dynamic HTML ยอมให้�เอกสาร
สามารถด้�และท�างาน เห้ม)อนโป็รแกรมป็ระย&กต้/บน desk top ห้ร)อม'ลต้�มเด้ย
Dynamic HTML (DHTML)
ซึ่-งว�ธีการสร�างเป็�นแบบ DHTML จำะเป็�นการใช่� เทคโนโลยของ JavaScript และ Cascading Style Sheets เห้ล�าน(ช่�วยในการก�าห้นด้ค�าต้�างๆ ของความส�ง ความกว�าง ห้ร)อต้�าแห้น�งของส�วนต้�างๆ ซึ่-งอย��บนเว+บเพิ่จำ ห้ร)ออาจำจำะเป็�นการร'บข�อม�ล User Interface ได้�ด้�วย JavaScript ก+เป็�นได้�
JavaScript คื�ออะไร JavaScript ไม่ใช่ Java , JavaScript ไม่ใช่ HTML JavaScript เป็�นภาษาสคร�ป็ต้/เช่�งว'ต้ถ& ห้ร)อเรยกว�า อ+อบเจำ+กโอเรยลเต้+ด้ (Object Oriented Programming ) ทมเป็5าห้มายในการออกแบบและพิ่'ฒนาโป็รแกรมในระบบอ�นเทอร/เน+ต้ ส�าห้ร'บผู้��เขยนด้�วยภาษา HTMLสามารถท�างานข�ามแพิ่ลต้ฟอร/มได้� โด้ยท�างานร�วมก'บ ภาษา HTML และภาษา Java ได้�ท'(งทางฝั่9 งไคลเอนต้/ (Client ) และ ทางฝั่9 งเซึ่�ร/ฟเวอร/ (Server )
CSS คื�ออะไร?
CSS ย�อมาจำากค�าว�า Cascading Style Sheets โด้ยท'วไป็ก+จำะเรยก
CSS ห้ร)อไม�ก+ Style Sheets ฉะน'(นโป็รด้เข�าใจำว�ามาม'นค)อต้'วเด้ยวก'น
CSS แนะน�าและสน'บสน&นโด้ย Microsoft internet explorer 30.
และ 40Netscape . เป็�นต้�นมาเป็�นว�ธีการก�าห้นด้การแสด้งผู้ลของส�งต้�างบนเว+บ
เช่�น ล'กษณะอ'กษรขนาด้ ส พิ่)(นห้น'ง ถ�าใครเคยศึ-กษาภาษา Html มา
ม'นก+ค)อ tag<font> น'นเอง แต้�เราสามารถใช่� CSS แทนได้�
CSS ม่�ประโยช่น์�ย�งไง? CSS ม่�คื�ณสม่บั�ติ�ม่ากกว่า tag ของ html
เช่�นการก�าห้นด้กรอบให้�ข�อความ รวมท'(งสร�ป็แบบของข�อความทกล�าวมาแล�ว
CSS น์� น์ก!าหน์ดที่�%ติ&น์ของไฟล์� html หร�อติ!าแหน์งอ�%น์ ๆ ก+ได& แล์ะสาม่ารถม่�ผล์ก�บัเอกสารที่� งหม่ด
ห้มายถ-งก�าห้นด้คร'(งเด้ยวจำ&ด้เด้ยวก+มผู้ลก'บการแสด้งผู้ลท'(งห้มด้ท�าให้�เวลาแก�ไขห้ร)อป็ร'บป็ร&งท�าได้�สะด้วกไม�ต้�องไล�ต้ามแก� tag ต้�างๆ ท'วท'(งเอกสาร
CSS สาม่ารถก!าหน์ดแยกไว่&ติางหากจากไฟล์�เอกสาร html แล์ะสาม่ารถน์!าม่าใช่&รว่ม่ก�บัเอกสารหล์ายไฟล์�ได& การแก�ไขก+แก�เพิ่ยงจำ&ด้เด้ยวก+มผู้ลก'บเอกสารท'(งห้มด้ได้�
CSS Tutorial www.w3schools.com/css/
CSS Syntax
selector { property : value}
CSS file
sample.css
Import CSS file
How to input CSS code
CSS ExamplesSet the background color
http://www.w3schools.com/css/css_examples.asp
Creating a Transparent Image
http://www.w3schools.com/css/css_image_transparency.asp
Image Transparency Mouseover Effect
On mouse out On mouse over
CSS Drop Shadows
CSS Drop Shadows
shadow.gif shadowAlpha.png
CSS Drop Shadows
http://www.alistapart.com/articles/cssdropshadows/
CSS image gallery
CSS image gallery
CSS image gallery
http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
Key word search image gallery Photo Album Photo Gallery css image gallery Php image gallery Javascript photo gallery Free source photo gallery Free code photo Album www.cssplay.co.uk