DHTML with
    JavaScript and CSS
Dynamic HTML (DHTML)
  Dynamic HTML (DHTML) คืออะไร เป็นเทคนิคที่
  ช่วยเพิ่มความสามารถให้
Browser สามารถทำาการโต้ตอบการผู...
Dynamic HTML (DHTML)

    ซึ่งวิธการสร้างเป็นแบบ DHTML จะเป็นการใช้
           ี
เทคโนโลยีของ JavaScript และ Cascading
Sty...
JavaScript คืออะไร

    JavaScript ไม่ใช่ Java , JavaScript
ไม่ใช่ HTML
    JavaScript เป็นภาษาสคริปต์เชิงวัตถุ หรือ
เรียก...
CSS คืออะไร?

      CSS ย่อมาจากคำาว่า Cascading Style Sheets
  โดยทั่วไปก็จะเรียก
CSS หรือไม่ก็ Style Sheets ฉะนั้นโปรดเข...
CSS มีประโยชน์ยังไง?
   CSS มีคณสมบัตมากกว่า tag ของ 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 Examples
 Set 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
   Javasc...
Upcoming SlideShare
Loading in...5
×

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

865

Published on

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

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

  • Be the first to like this

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

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×