ออกแบบเว็บไซต์ เขียนโปรแกรม ทำเว็บไซต์

Tip and Trick

ใช้ CSS ร่วมกับการออกแบบเว็บไซต์ ยากตอนเริ่มแต่ง่ายในอนาคต

by admin on ธ.ค..12, 2010, under Tip and Trick, Web Design

ใช้ CSS ร่วมกับการออกแบบเว็บไซต์ ยากตอนเริ่มแต่ง่ายในอนาคต


ทุกวันนี้เราจะเห็นได้ว่าเว็บไซต์ใหญ่ๆ ทำไมเขาปรับเปลี่ยนการ ออกแบบเว็บไซต์ กันได้เร็วจัง
บางที่เปลี่ยนกันถี่ถึงเดือนละครั้ง บางที่เปลี่ยนการออกแบบทุกๆ ไตรมาส ทำไมขยันจังโปรแกรมเมอร์ว่างจัดหรือไง

หรือว่าเงินเหลือเฟือจ้าง Programmer Designer มาประจำไว้เปลี่ยนเว็บไซต์กันเลย

ความจริงแล้วเทคนิคที่เว็บใหญ่ๆ ใช้คือการใช้ Cascading Style Sheets(CSS) เจ้า CSS นี้มันช่วยให้
นักพัฒนาเว็บไซต์และนักออกแบบเว็บไซต์มาพบกันครึ่งทาง จากเมื่อก่อนทำงานแบบห่างกันไม่ได้ใครจะแก้อะไรบนเว็บที่ทำด้วยกันต้องแจ้งกันวุ่นไปหมด
แต่เดี๋ยวนี้ CSS ช่วยสร้างอิสละให้บุคคลทั้ง 2 กลุ่มแล้ว โดยการตงลงกันในการวางดครงสร้างครั้งแรกและใช้ชื่อ Class หรือ ID เป็นตัวบอกว่า Class หรือ ID นั้นมีคุณสมบัติยังไง
โปรแกรมเมอร์ก็ไม่ต้องไปยุ่งเลยว่าจะให้ Class หรือ ID หน้าตาเป็นไงเพราะมันเป็นเรื่องของ Designer เพียงแค่กำหนดชื่อ Class หรือ ID ไปตามที่ตกลงกันก็พอ

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

อ้อ เดี๋ยวนี้เขามี CSS3 แล้วนะ ใครยังไม่รู้จัก CSS เลย อัพเดทด่วน

ที่มา: http://www.bizidea.co.th/รับออกแบบเว็บไซต์.php
เนื้อหาที่เกี่ยวข้อง : บริษัท รับออกแบบเว็บไซต์

Leave a Comment more...

การเขียน-css-ในรูปแบบย่อ

by admin on พ.ย..08, 2010, under Tip and Trick

ลองเขียน css ให้สั้นลงแต่ยังสามารถทำงานได้ตามปกติ

/——– Background (พื้นหลัง) ค่าคุณสมบัติ Background ——–/
element {
    background-color: #FF0000;
    background-image: url(image.png);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: scroll;
}
ตัวอย่างการเขียน CSS ของ Background แบบย่อ
element {
    background:#FF0000 url(image.png) repeat top left scroll;
}

/——– font (ตัวอักษร) ค่าคุณสมบัติ font ——–/
element {
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    font-size:1em;
    line-height:1.2em;
    font-family:georgia,”times new roman”,serif
}
ตัวอย่างการเขียน CSS ของ Font แบบย่อ
element {
    font:bold 1em/1.2em georgia,”times new roman”,serif;
}

/——– Border (ขอบ เส้นขอบ) ค่าคุณสมบัติของ Border (1) ——–/
element {
    border-width:1px;
    border-style:solid;
    border-color:#000;
}
ตัวอย่างการเขียน CSS ของ Border แบบย่อ
element {
    border:1px solid #000;
}

/——– Border (ขอบ เส้นขอบ) ค่าคุณสมบัติของ Border (2) ——–/
element {
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:#000;
}
ตัวอย่างการเขียน CSS ของ Border แบบย่อ (2)
element {
    border-top:1px solid #000;
}

/——– List (สิสท์รายการ) ค่าคุณสมบัติของ List ——–/
element {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.gif);
}
ตัวอย่างการเขียน CSS ของ List แบบย่อ
element {
    list-style:square inside url(image.gif);
}

/——– Margin (บริเวณนอกเส้นขอบออกไป) ค่าคุณสมบัติของ Margin ——–/
element {
    margin-top:1em;
    margin-right:0;
    margin-bottom:2em;
    margin-left:0.5em;
}
ตัวอย่างการเขียน CSS ของ Margin แบบย่อ
element {
    margin:1em 0 2em 0.5em;
}

/——– Padding (บริเวณในเส้นขอบเข้ามา) ——–/
ค่าคุณสมบัติของ Padding
element {
    padding-top:1em;
    padding-right:0;
    padding-bottom:2em;
    padding-left:0.5em;
}
ตัวอย่างการเขียน CSS ของ Padding แบบย่อ
element {
    padding:1em 0 2em 0.5em;
}

การเขียนเราต้องเรียงลำดับให้ถูกต้อง ลองเอาไปใช้กันดูนะครับ วันนี้แค่นี้ก่อนนะครับ

G-Kid

Leave a Comment more...

แก้ปัญหา Google Chrome ตัวอักษรภาษาไทยตัวเล็กเกินไป

by admin on ต.ค..27, 2010, under Tip and Trick

ใครติดตั้ง Google Chrome ครั้งแรกก็ต้องเซ็งไปตามๆ กันเมื่อเปิดเว็บที่เป็นภาษาไทยบางเว็บแล้วตัวอักษรภาษาไทยเล็กมากผิดปกติต้องกด Ctrl+ เพิ่มตัวอักษร แต่วิธีนี้ก็ไม่ได้แก้ปัญหายั่งยืนครับมันมีผลกระทบกับเว็บอื่นที่เราเข้าไปจากที่ปกติก็จะกลายเป้นตัวอักษรใหญ่เกิดไปยุ่งกันไปหมด

มีวิธีง่ายๆในการจัดการปัญหานี้ครับ

1.อันดับแรกเลยเปิด Google Chrome แล้วไปที่ไอคอนเครื่องมือตามรูปข้างล่าง



2.ไปที่แทบ “ขั้นสูง” แล้วเลือกตามรูปข้างล่าง

3.ตั้งค่าต่างๆ ตามรูปข้างล่าง

เท่านี้ท่านก็สามารถใช้งาน Google Chrome ได้อย่างเพลิดเพลินแล้วครับ

เรื่องโดย เชพมือหนึ่ง

Leave a Comment more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...