Lect 08 Css

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

Comment Code for CSSการคือม่เม่&น์ที่�ใน์โคื&ด css เช่น์body {

#background: FFFFFF;font-size : 0.9em;}

 ถ&าเราไม่อยากให& font-size แสดงผล์ ที่!าได&ด&ว่ย body {

#background: FFFFFF; */ font-size : 0.9em;*/ * ป็=ด้การแสด้งผู้ลของขนาด้ต้'วห้น'งส)อ */}

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 Javascript photo gallery Free source photo gallery Free code photo Album www.cssplay.co.uk

Web Reference

http://www.thaicss.com/