กรุณาปิด AdBlock!

Close your adBlock please.

ขยายหน้าเว็บRegister Login
Loading...
 Radio Online! ปิดเพลง
 พูดคุย ขอเพลง
 โฆษณา
หน้า: [1]  ลงล่าง
  พิมพ์  
topic

[Tips Hi5] CSS Optimizer ลดขนาด CSS Code ให้สั้นลง และอ่านยากขึ้น  (อ่าน 12276 ครั้ง)

ไอที
« เมื่อ: 7, 05 2008, 10:58:42 AM »
ตอนนี้คุณกำลังประสบปัญหาเกี่ยวกับ code ที่คุณใส่ยาวไปใช่หรือไม่?

และตอนนี้คุณมี code เด็ดๆ ที่ไม่อยากบอกใครอยู่ใช่หรือไม่?

เอานี่ไปเลยครับ เครื่องมือเทพๆ ที่เรียกว่า CSS Optimizer


1. เข้าเว็บนี้ก่อน เพื่อดูหน้าดูตาของเขาโปรแกรมนี้

http://www.cssoptimiser.com/ link

เว็บนี้เป็นบริการฟรีออนไลน์ ที่เอาไว้ใช้ในการลดขนาดของโค้ด CSS กันครับ

2. ให้เราก๊อบ CSS Code ที่เราจะย่อขนาดไปไว้ใน Notepad ก่อน กันพลาดครับ และเผื่อมีอะไรผิดพลาดจะได้ใช้ได้อีก  :aiwebs_046:

3. ให้ลบคำว่า <style type='text/css'> หรือ <style> หรือ </style> ออกจาก CSS code ให้หมดครับ มันไม่ต้องการ เพราะว่าส่วนนี้เป็นแค่การประกาศ HTML section ของ <style> จึงไม่จำเป็นครับ เพราะเขาย่อกันแต่ CSS code เท่านั้น!!!

4. เปิดหน้าเว็บในขั้นตอนที่ 1 อยู่ป่าวครับ อ่ะทีน้ีมันมี 3 กล่อง จะใส่ที่ไหน ผมจะอธิบายอย่างนี้
Optimize CSS via URI: จะเอาไว้ใส่ URI (Uniform Resource Identifier) link เข้าไป แบบนี้ครับ
ex1. http://www.dekitclub.com/style/main.css link

or Optimize CSS via File Upload: ตรงนี้ให้เรา อัพโหลดไฟล์ที่นามสกุล .css เข้าไปครับ (สังเกตุนะครับว่า ในไฟล์ .css จะไม่มีการประกาศ tag <style> เห็นม่ะๆ เพราะมันเป็น html ไม่ใช้ CSS) จากนั้นเราก็กด Browse File .css ในเครื่องที่ที่อยากจะย่อขนาดครับ
ex2. C:\AppServ\www\dekitclub.com\style\main.css

or Optimize CSS via Direct Input: อันนี้แหละที่เราจะใช้กัน เพราะว่าเรา copy ไว้ใน notepad เรียบร้อยแล้วนิครับ  aiwebs_026 ลองผมไม่ใช้ขั้นตอนนี้ ท่านๆ ทั้งหลายคงจะเคืองผมน่าดู ว่าจะให้ copy ใส่ notepad ทำไม!! ให้นำ css ที่อยู่ใน notepad นั้น ใส่ไปในช่องใหญ่ๆ เลยครับ
ex3. textarea {
background-image:url(http://dekitclub.com/img.jpg link)!important;
color: #000000;
width: 90%;
height: 160px!important;
background-color: #000000;
background-repeat: no-repeat;
background-position: left top;
border: 1px dashed #999999;
position: relative;
font-size: 12pt;
overflow: visible;
font-family: Verdana;
}


5. เมื่อท่านเลือกวิธีการใดวิธีการหนื่งได้แล้ว (มันมี 3 รูปแบบให้เลือก) กดปุ่ม  Optimize! แต่น แต้นนน เรียบร้อย เราจะได้ CSS code ที่ย่อขนาดแล้ว มาอย่างง่ายดาย
textarea{font:12pt verdana;background:#000 url(http://dekitclub.com/check_browser.php link)!important no-repeat left top;color:#000;width:90%;height:160px!important;border:1px dashed #999;position:relative;overflow:visible}

6. เอาไปใส่เลยครับ อย่าลืมเติม <style> และ </style>  ด้วยล่ะ ถ้าในขั้นตอนแรกท่านต้องลบมันออก พอเราย่อแล้ว ท่านก็เอาใส่เหมือนเดิมนะ code ที่ได้มาใหม่นี้จะมีขนาดเล็กลงกว่าเดิม และอ่านยากขึ้น ทำให้ยากต่อการลอกเลียนแบบ ให้นำไปใส่แทน css code อันเก่าได้เลยครับ

ปล. หากนำ css code ใหม่เข้าไปใส่แล้ว "เพี้ยน" ก็ให้ท่านอย่าเพิ่งปิด notepad ที่เราได้ทำการสำรองไว้ในตอนแรกนะครับ มันมีประโยชน์ จะได้ไม่เสียใจภายหลัง เหอๆๆๆ :aiwebs_044:
[ MoreMeng ]
เด็กไอทีตัวพ่อ
เด็กไอทีคลับชั้นเซียน
*
พลังความคิด 89
กระทู้: 3,536
บันทึกการเข้า

ไอที
« ตอบ #1 เมื่อ: 12, 05 2008, 03:02:59 AM »
ไม่รู้ว่า ผมเข้าใจถูกหรือเปล่านะ พี่

แต่ คือ โค้ด  ยาวๆ  มันจะย่อให้เหลือน้อยลง ประมาณเนี่ย ป่ะ พี่
nickk1133
เด็กไอทีตัวเต็มวัย
*
พลังความคิด 15
กระทู้: 494
บันทึกการเข้า
ไอที
« ตอบ #2 เมื่อ: 19, 05 2008, 11:34:34 PM »
 :aiwebs_033:  ยอดมากมาย ไว้ต้องศึกษากันอีกเยอะเลย ^^
lzephyrl
เด็กไอทีคลับหน้าใหม่
*
พลังความคิด 1
กระทู้: 8
บันทึกการเข้า
ไอที
« ตอบ #3 เมื่อ: 29, 10 2008, 08:00:18 PM »
มันสั้นได้ใจจริงๆวุ้ย เอามาทำโปรเจคได้รึเปล่าหว่า
IRONKONG
RUK-YOM
เทพไอทีมาจุติ
*
พลังความคิด 37
กระทู้: 2,486
เว็บไซต์
บันทึกการเข้า

"BN002"
ไอที
« ตอบ #4 เมื่อ: 9, 06 2009, 05:15:16 PM »
link


ดีดี...เค้าทำได้แล้วเย้ aiwebs_016 aiwebs_005
เทพบุตรดอทคอม
เด็กไอทีคลับขาประจำ
*
พลังความคิด 5
กระทู้: 353
บันทึกการเข้า

ไม่มีชายหรือหญิงคนไหนมีค่าพอที่คุณจะต้อง

เสียน้ำตาให้ ส่วนคนที่มีค่าพอนั้น

เขาย่อมที่จะไม่มีวันทำให้คุณร้องไห้อย่างเด็ดขาด
ไอที
« ตอบ #5 เมื่อ: 27, 10 2009, 09:02:47 PM »
โห จะเอาแนว มันมาทำ โปรแจค เลยหรอ อ้วน

แล้วได้ป่ะหล่ะ
CoolPha
RUK-YOM
ปรมาจารย์ด้านไอที
*
พลังความคิด 76
กระทู้: 5,261
เว็บไซต์
บันทึกการเข้า

ไอที
« ตอบ #6 เมื่อ: 29, 03 2010, 05:35:28 PM »
ดีเหมือนกันแหะ
paemam
เด็กไอทีคลับหน้าใหม่
*
พลังความคิด 3
กระทู้: 17
เว็บไซต์
บันทึกการเข้า

เว็บนี้เป็นเว็บทำงานที่ได้เงินจริงๆคับเด็กไอทีน่าจะเข้ามาดูนะคับ
                    www.yakuzaa.ws link
 เพิ่มโอกาสทางการตลาด และเพิ่มรายได้ จากการใช้ประโยชน์ทาง
                          อินเตอร์เน็ท
หน้า: [1]  ขึ้นบน
  พิมพ์  
 
กระโดดไป: