Introduction to Online Document Development

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. Comment Code for CSS
การคอมเม้นท์ในโค้ด css เช่น
body {
background: #FFFFFF;
font-size: 0.9em;
}
ถ้าเราไม่อยากให้ font-size แสดงผล ทำาได้ด้วย
body {
background: #FFFFFF;
/* font-size: 0.9em;*/
/* ปิดการแสดงผลของขนาดตัวหนังสือ */
}

13. CSS Examples
Set the background color
http://www.w3schools.com/css/css_examples.asp

14. Creating a Transparent Image
http://www.w3schools.com/css/css_image_transparency.asp

15. Image Transparency
Mouseover Effect
On mouse out On mouse over

16. CSS Drop Shadows

17. CSS Drop Shadows
shadow.gif shadowAlpha.png

18. CSS Drop Shadows
http://www.alistapart.com/articles/cssdropshadows/

19. CSS image gallery

20. CSS image gallery

21. CSS image gallery
http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery

22. Key word search
 image gallery
 Photo Album
 Photo Gallery
 css image gallery
 Javascript photo gallery
 Free source photo gallery
 Free code photo Album
 www.cssplay.co.uk

23. Web Reference
 http://www.thaicss.com/