Your SlideShare is downloading. ×
0
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 08

855

Published on

การสร้างสรรค์ การพัฒนาและการจัดการเอกสารออนไลน์ ปฏิสัมพันธ์ขั้น …

การสร้างสรรค์ การพัฒนาและการจัดการเอกสารออนไลน์ ปฏิสัมพันธ์ขั้น
สูง ในเรื่องการพัฒนาเว็บไซต์ ปฏิสัมพันธ์ภาพเคลื่อนไหวสำหรับเว็บ
การออกแบบปฏิสัมพันธ์ และการพัฒนาสื่อดิจิทัลออนไลน์รูปแบบต่างๆ

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
855
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DHTML with JavaScript and CSS
  • 2. Dynamic HTML (DHTML) Dynamic HTML (DHTML) คืออะไร เป็นเทคนิคที่ ช่วยเพิ่มความสามารถให้ Browser สามารถทำาการโต้ตอบการผูใช้งานเองได้ โดยไม่ ้ ต้องจำาเป็นต้องไปขอข้อมูลจาก Web Server ทุกครั้งไป เป็นตัวเลือกที่จะให้ผใช้สร้าง ู้ เว็บเพจให้มีภาพเคลื่อนไหวมากขึ้น และตอบสนองผูใช้แบบ Interactive มากกว่า HTML ้ เวอร์ชนก่อน ั ส่วนใหญ่ของ Dynamic HTML ได้รับการระบุใน HTML 4.0 ตัวอย่างของเพจ Dynamic HTML สีตัวอักษรของหัวข้อเปลี่ยนเมื่อเมาส์ เคลื่อนผ่าน ยินยอมให้ผู้ใช้ในการ
  • 3. Dynamic HTML (DHTML) ซึ่งวิธการสร้างเป็นแบบ DHTML จะเป็นการใช้ ี เทคโนโลยีของ JavaScript และ Cascading Style Sheets เหล่านี้ชวยในการกำาหนดค่า ่ ต่างๆ ของความสูง ความกว้าง หรือตำาแหน่งของ ส่วนต่างๆ ซึ่งอยู่บนเว็บเพจ หรืออาจจะเป็นการรับข้อมูล User Interface ได้ด้วย JavaScript ก็เป็นได้
  • 4. JavaScript คืออะไร JavaScript ไม่ใช่ Java , JavaScript ไม่ใช่ HTML JavaScript เป็นภาษาสคริปต์เชิงวัตถุ หรือ เรียกว่า อ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming) ที่มีเป้าหมายในการออกแบบ และพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำาหรับผู้เขียนด้วยภาษา HTMLสามารถทำางาน ข้ามแพลตฟอร์มได้ โดยทำางานร่วมกับ ภาษา HTML และภาษา Java ได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่งเซิร์ฟเวอร์ (Server)
  • 5. CSS คืออะไร? CSS ย่อมาจากคำาว่า Cascading Style Sheets โดยทั่วไปก็จะเรียก CSS หรือไม่ก็ Style Sheets ฉะนั้นโปรดเข้าใจว่ามา มันคือตัวเดียวกัน CSS แนะนำาและสนับสนุนโดย Microsoft internet explorer 3.0 และ Netscape 4.0 เป็นต้นมาเป็นวิธีการ กำาหนดการแสดงผลของสิ่งต่างบนเว็บ เช่น ลักษณะอักษรขนาด สี พื้นหนัง ถ้าใครเคยศึกษา ภาษา Html มา
  • 6. CSS มีประโยชน์ยังไง?  CSS มีคณสมบัตมากกว่า tag ของ html ุ ิ เช่นการกำาหนดกรอบให้ขอความ รวมทั้งสีรูปแบบ ้ ของข้อความที่กล่าวมาแล้ว  CSS นันกำาหนดที่ตนของไฟล์ html หรือตำาแหน่ง ้ ้ อืน ๆ ก็ได้ และสามารถมีผล ่ กับเอกสารทั้งหมด หมายถึงกำาหนดครั้งเดียวจุดเดียวก็มีผลกับการแสดง ผลทั้งหมดทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้สะดวก ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร  CSS สามารถกำาหนดแยกไว้ตางหากจากไฟล์ ่ เอกสาร html และสามารถนำามาใช้ร่วมกับเอกสารหลายไฟล์ได้
  • 7. CSS Tutorial  www.w3schools.com/css/
  • 8. CSS Syntax selector { property : value}
  • 9. CSS file sample.css
  • 10. Import CSS file
  • 11. How to input CSS code
  • 12. CSS Examples Set the background color http://www.w3schools.com/css/css_examples.asp
  • 13. Creating a Transparent Image http://www.w3schools.com/css/css_image_transparency.asp
  • 14. Image Transparency Mouseover Effect On mouse out On mouse over
  • 15. CSS Drop Shadows
  • 16. CSS Drop Shadows shadow.gif shadowAlpha.png
  • 17. CSS Drop Shadows http://www.alistapart.com/articles/cssdropshadows/
  • 18. CSS image gallery
  • 19. CSS image gallery
  • 20. CSS image gallery http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
  • 21. 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

×