@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";
@font-face
{
fontFamily: "2005_iannnnnCPU";
src: url("/assets/fonts/2005_iannnnnCPU.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Tahoma";
fontWeight: bold;
src: url("/assets/fonts/tahomabd.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Tahoma";
src: url("/assets/fonts/TAHOMA.TTF");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Impact";
src: url("/assets/fonts/impact_0.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "AgencyGP";
src: url("/assets/fonts/dY_AgencyGP.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "-Layiji TaMaiTine1";
src: url("/assets/fonts/layiji_TarMineTine1.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Arial";
src: url("/assets/fonts/arial.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Arial";
fontWeight: bold;
src: url("/assets/fonts/arialbd.ttf");
embedAsCFF: true;
}
.langFontStyle{}
.fontSize12{}
.fontSize18{}
.fontSize20{}
.fontSize21{}
.fontSize22{}
.fontSize24{}
.fontSize25{}
.fontSize27{}
.fontSize28{}
.fontSize30{}
.fontSize31{}
.fontSize32{}
.fontSize33{}
.fontSize34{}
.fontSize35{}
.fontSize36{}
.fontSize38{}
.fontSize39{}
.fontSize40{}
.fontSize42{}
.fontSize44{}
.fontSize45{}
.fontSize46{}
.fontSize48{}
.fontSize49{}
.fontSize50{}
.fontSize52{}
.fontSize54{}
.fontSize56{}
.fontSize60{}
.fontSize64{}
.fontSize72{}
.fontSize100{}
.fontSize120{}
.fontSize128{}

ซึ่งที่เขียนเตรียมไว้เยอะๆเพราะเราจะต้องเขียนเผื่อขนาดฟอนท์ที่จะใช้ทั้งหมดในโปรเจ็คนั่นเอง (หรือจะมาเขียนเพิ่มเองทุกครั้งที่มีไซส์ใหม่ก็ได้)

• จากนั้นในไฟล์ Application หลัก โดยปกติจะมี  <fx:Style source=”Main.css” /> แต่ถ้ายังไม่มีก็ให้ใส่ก่อน <fx:Script> ครับ
• ทีนี้ก็มาถึงส่วนตั้งค่าละ

if(lang=="en"||lang=="th"){ //ถ้าเป็นภาษาอังกฤษหรือไทย
styleManager.getStyleDeclaration(".langFontStyle").setStyle("fontFamily","2005_iannnnnCPU"); //ใช้ฟอนท์นี้
for(i=0;i<200;i++){
if(styleManager.getStyleDeclaration(".fontSize"+i)!=null)
styleManager.getStyleDeclaration(".fontSize"+i).setStyle("fontSize",i); //รันแก้คลาสชื่อนี้ทั้งหมดให้เป็นขนาดที่ใส่เลขไว้
}
}
else{ //ถ้าเป็นภาษาอื่นๆใช้ฟอนท์นี้และเซ็ทค่าต่างๆ
styleManager.getStyleDeclaration(".langFontStyle").setStyle("fontFamily","Arial");
styleManager.getStyleDeclaration(".langFontStyle").setStyle("fontWeight","bold");
for(i=0;i<200;i++){
if(styleManager.getStyleDeclaration(".fontSize"+i)!=null)
styleManager.getStyleDeclaration(".fontSize"+i).setStyle("fontSize",i/2);
}
}


• จากนั้นในแท็กต่างๆของเราที่ปกติใช้ property fontFamily=”xxx” fontSize=”yyy” ก็มาใช้เป็น styleName=”langFontStyle fontSize44″ เท่านี้แหละครับ

style = “border:0px;overflow:hidden;”

IE

border=0 scrolling=”no” frameborder=”0″

สรุปแล้วรวมได้ดังนี้

<iframe src=”" border=0 scrolling=”no” frameborder=”0″ style = “border:0px;overflow:hidden;”></iframe>

เราก็มักจะใช้ javascript ในการทำใช่ไหมครับ

(ที่บอกว่าส่วนใหญ่ใช้วิธีนี้เพราัะว่ามันติดมากับโปรแกรม Dreamweaver ครับ)

ซึ่งจริงๆแล้วเราไม่จำเป็นต้องใช้วิธีนั้นเลยครับ ใช้แค่ CSS อย่างเดียวก็พอแล้ว

วิธีการก็ไม่ยากเลยครับ

รูปที่ใช้ button_1.gif ขนาด100x50px

รูปที่ใช้ตอน rollover button_1_over.gif ขนาดเท่ากัน

จากนั้น อันนี้คือส่วนของ css ครับ

a.image{

}

a.image:hover{

}

แล้ว html เราก็แค่ใส่ class ให้ tag a เท่านั้นเองครับ

ตัวอย่าง

เห็นไหมครับไม่ยากเลย….

แต่เดี๋ยวก่อน! ผมยังมีของเด็ดกว่านี้อีก

คือ การใช้รูปเพียงรูปเดียวในการทำ rollover image

นี่คือไฟล์รูปครับ ลองคลิกขวาดูได้ครับ จะเห็นว่าเป็นรูปเดียว

ที่มีขนาด 100x105px

จากนั้นเรามาเปลี่ยน css กันซักหน่อยครับ เป็น

a.image_single{

}

ตัวอย่าง

รูปที่ทำจากวิธีนี้จะเป็นรูปด้านล่างนะครับ จะเห็นได้ว่าไม่แตกต่างกันเลย ประหยัดไปไฟล์นึงด้วยนะเอ้อ

ดาว์นโหลดตัวอย่างทั้งหมด

edit @ 31 Aug 2009 19:30:15 by Akara_gat

หัวข้อที่ผมเอาไปพูดก็คือ Web design Tips & Technique 1.5
(ที่ต้องเป็น1.5 เพราะว่าทำ2ไม่ทัน ในslideเป็นของครั้งแรกที่พูดใน barcampbkk2 ซะครึ่งนึง)

ทีนี้ในslideก็จะมีหัวข้อนึงน่ะครับ ที่เกี่ยวกับเครื่องมือในการทำงานกับhtmlและcss
ซึ่งเดี๋ยวผมจะพูดต่อไปนี่แหละครับ ว่ามันมีเครื่องมืออะไรที่น่าใช้บ้าง
(ตกลงที่แพล่มไปตั้งนานนี่ไม่ได้เกี่ยวเลยใช่ไหม…. -_-”)

ก่อนอื่นเลยครับ ผมขอแบ่งเครื่องมือออกเป็น3ประเภทหลักๆคือ

1. เครื่องมือสำหรับการสร้าง html และ css (Creation)
2. เครื่องมือสำหรับการตรวจสอบการรับรองการทำงาานบนBrowserต่างๆ (Check Compatibility)
3. เครื่องมือสำหรับการแก้บั๊ก (Debug)

1. Creation

ผมใช้เพียงตัวเดียวเท่านั้นเลยครับ ก็คืิอ EDITPLUS เท่านั้นเอง
หลายๆคนอาจจะถนัดกับ dreamweaver ครับ แต่ผมไม่ค่อยชอบเท่าไร
บางทีมันชอบใส่อะไรประหลาดๆเข้าไปในโค้ดให้เอง เช่น &nbsp; ซึ่งมันจะทำให้ได้ผลลัพธ์ไม่ได้ดั่งใจเท่าไร

2. Check Compatibility

ที่ผมเห็น มันก็มีหลายๆโปรแกรมนะครับ ที่ช่วยตรวจสอบพวกนี้ได้ แต่สุดท้ายแล้ว
มันก็มักจะมีบางจุดที่เกิดบั๊กอยู่ดี ผมจึงคิดว่าที่ดีที่สุดก็คือลองเปิดด้วยตัวมันเองเลยจะดีที่สุดครับ

browser ที่ผมตรวจสอบนั้น ปกติแล้วก็จะมี Firefox , ie7 ,ie6 ครับ
(แต่สำหรับในเว็บนี้ ขอออกตัวไว้ก่อนเลยครับไม่ได้รับรองie6)

แต่ก็มีคำถามตามๆมาครับ ว่าแล้วจะเช็ค ie6 ยังไง ในเมื่อwindowเราลง ie7 ไปแล้ว
มันก็มีหลายๆวิธีน่ะนะครับ ทั้ง ietester , ie6 portable

แต่ผมก็ยังเจอจุดผิดพลาดทั้งสองตัวอยู่ ตัวที่ผมใช้ในปัจจุบันและ happy กับมันที่สุดคือตัวนี้ครับ

XENOCODE สำหรับตัวนี้ไม่จำเป็นต้องลงโปรแกรมไว้ในเครื่องด้วยครับ
เพราะมันสามารถรันbrowserที่ท่านต้องการผ่านหน้าเว็บได้เลย
ซึ่งนอกจาก ie6 แล้ว xenocode ยังสามารถรันbrowserอื่นๆได้อีกด้วย (ลองไปเล่นกันดูเองละกันครับ)

3.Debug

จะมีใ้ช้ด้วยกัน2ตัวครับคือ firebug ซึ่งเป็น add-on อยู่บน firefox (คิดว่าหลายๆท่านน่าจะรู้จักกัน)

และ IE developer toolbar สำหรับ บน ie ครับ

แต่คราวนี้ผมจะมาพูดถึงอีกปัญหานึงครับ ไม่ใช่ปัญหาธรรมดาๆอย่างที่กล่าวมา

ก็ไม่รู้จะอธิบายเป็นคำพูดยังให้เข้าใจง่ายๆยังไงอ่ะนะครับ ลองไปดูจากตัวอย่างเลยดีกว่า

<div style=”background:#567ED4;padding:20px;”>
<img src=”color_code_567ED4.png”>
</div>

นี่คือโค้ดHTMLที่ผมกำหนดให้พื้นหลังของ div มีค่าสีเป็น #567ED4

ซึ่งเป็นสีเดียวกับรูป color_code_567ED4.png

แล้วลองมาดูผลที่ไ่ด้ใน firefox และ ie ครับ

จะเห็นได้ว่าผลที่แสดงออกมาบน ie นั้น สีของรูป เพี้ยนไปจากเดิมครับ

ซึ่งปัญหานี้เท่าที่ผมค้นหามา รู้สึกว่าจะเจอแต่บน ie เท่านั้น browserอื่นๆ ไม่มีปัญหาอะไร

ส่วนวิธีแก้น่ะหรอครับ เหอะๆๆๆ

…

ผมก็ใช้วิธีโง่ๆเอาด้วยการใช้รูป png ที่เป็นสีที่ต้องการนั้นแหละไปใส่เป็น background แทน