การเรียนรู้ CSS2

feriona

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

ต่อมาจะเป็นเรื่องของขอบด้านข้างทั้งสองของตัวบล็อกนะคะที่เป็นสีส้มน่ะค่ะ

ตอนนี้เรามาดูลูกเล่นที่น่าสนใจเกี่ยวกับโมเดลปลาทูของอาจารย์
จันทวรรณที่ดิฉันจะนำมาให้ท่านทั้งหลายได้ลองเล่นกันต่อนะคะ

ตอนนี้จะมาอธิบายเกี่ยวกับสีด้านข้างที่จะสามารถใส่ลงไปได้นะคะ จริงๆแล้วก็เป็นการเอารูปมาแปะลงไปในโค้ดนั่นเองค่ะ แต่รูปที่จะทำได้สวยๆอย่างนี้ก็ต้องใช้ photoshop เข้ามาช่วยในการสร้างรูปบ้างค่ะ แต่ถ้าใครไม่ถนัดก็อาจจะไปหาภาพสวยๆมาใส่ก็ได้นะคะ สำหรับดิฉันคิดว่าไม่ควรเอาภาพที่รกตาจนเกินไป เพราะจะทำให้มองเนื้อหาของบล็อกไม่เห็นได้ค่ะ

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

 div#subtitle { font-size: medium; color:#FAEDE6;}
div#container {width: 840px; background: #ffffff;}
div#sidebar2 {width: 215px;
background-image:url("/file/jantana811/content_bg.gif");
border: 0px solid #ffffff;}
div#content2 {background: #ffffff; width: 595px; 
background-image:url("/file/jantana811/content2_bg.gif");
border: 0px solid #ffffff;}
body{ background: #FAEDE6;
background-image: url("/file/jantana811/bg_orange.gif");
background-repeat: repeat-x;}
div#title{padding: 10px 4px 35px;  
font-size: big; color:#FAEDE6; 
background:#E96324;  
background-image:url("/file/jantana811/banner1.jpg ");  
background-repeat:no-repeat;  
background-position:center center;  
height:35px;
div#title span {display:none;}

บรรทัดที่ 4. background-image:url("/file/jantana811/content_bg.gif"); จะเป็นในส่วนของภาพด้านขวาของบล็อกค่ะ ภาพที่ดิฉันนำมาใส่นั้นมีขนาด width=400 pixel และ high=1 pixel ค่ะ <p></p><p>สามารถทำได้โดยการนำไฟล์ภาพที่ได้ใส่เข้าไปใน”ไฟล์อัลบัม” จากนั้นก็ copy shortcut ไฟล์ภาพที่ได้ แล้วก็ตัดเอาเฉพาะส่วนที่ต่อจาก http://gotoknow.org เท่านั้นค่ะ ซึ่งก็ทำเหมือนกันกับครั้งที่แล้วนะคะ ถ้าใครยังไม่ค่อยถนัดก็สามารถกลับไปดูได้ที่นี่ค่ะ การทำCSSครั้งแรก </p><p>ส่วนบรรทัดที่ 7. background-image:url("/file/jantana811/content2_bg.gif");ก็จะเป็นในส่วนของภาพด้านซ้ายของบล็อกค่ะ ซึ่งขนาดภาพที่ใส่เข้าไปนั้นคือ width=600 pixel และ high=1 pixel ค่ะ ขั้นตอนต่างๆก็เมือนกับภาพด้านขวาค่ะ</p><p>ส่วนค่าสีและความเข้มสีที่ใช้ในการทำเป็นพื้นหลังของบล็อกนั้นดิฉันใช้ ค่าสี 8% และความเข้มสี 100% ค่ะ ส่วนท่านใดที่ต้องการทำสีอื่นๆที่ไม่ใช่สีเดียวกับของดิฉันก็สามารถเทียบค่าสีได้จากบล็อกของอาจารย์จันทวรรณ ที่นี่ค่ะ ภาพชุดสีเพื่อใช้ในเปลี่ยนสีของบล็อก เพียงแค่นี้ก็จะได้สีที่ทำให้บล็อกของคุณดูมีความโดดเด่นขึ้นมาจากพื้นหลังแล้วค่ะ ส่วนใครที่ theme เป็นสีส้มแบบนี้ก็สามารถเอา code นี้ไปใช้ได้แบบไม่ต้องเสียเวลานั่งทำก็ได้ค่ะ แต่อาจจะเปลี่ยนภาพที่เป็น banner ด้านบนให้เป็นของตัวเองได้โดยเอาไฟล์ภาพมาแปะไว้ที่บรรทัดนี้ค่ะ 15.background-image:url("/file/jantana811/banner1.jpg ");  </p><p>ปล.ภาพที่เป็นรูปดาวนั้นดิฉันได้มาจาก gettyimages  ค่ะ</p><p> </p>

บันทึกนี้เขียนที่ GotoKnow โดย  ใน การเรียนรู้ CSS2

คำสำคัญ (Tags)#css

หมายเลขบันทึก: 58242, เขียน: 09 Nov 2006 @ 19:04, แก้ไข, 06 Sep 2013 @ 17:37, สัญญาอนุญาต: สงวนสิทธิ์ทุกประการ, ความเห็น: 9, อ่าน: คลิก
บันทึกล่าสุด


ความเห็น (9)

จะลองไปทำดู ขอบคุณสำหรับคำแนะนำดีๆ
maawza
เขียนเมื่อ 11 Nov 2006 @ 15:19

มีคนช่วยแนะนำความคิดดีๆก็งี้แหละ เราจะได้เอาไปศึกษาต่อ ขอบใจหลาย

ทำกราฟฟิกด้านข้างซ้ายให้เหมือนกับข้างขวานะค่ะ แล้วจะดูดีขึ้นมาค่ะ ใช้การ Rotate 180 องศา ค่ะ

เวลาใส่ code ครั้งต่อไป ไม่ต้องใส่หมายเลขนะค่ะ เพราะถ้าต้องการให้คนอื่นนำไปใช้ เขาจะได้สะดวกค่ะ คือ copy ไปใช้ได้เลยค่ะ

สีส้มนี้สวยดีอ่ะ พยาต่อไปนะ

theme สีส้มนี้ดูสะดุดตาดีนะคะ เด่นมากๆเลย

feriona
เขียนเมื่อ 13 Nov 2006 @ 15:33
เรื่องหมายเลขหน้า code แก้ไขให้แล้วค่ะ
อยากทำได้บ้างจัง ไล่สีซะสวยเชียวนะ
Mr. hansa jaimipak
เขียนเมื่อ 30 Aug 2007 @ 13:58

บล็อคสวยดีนะครับผมกำลังฝึกเหมือนกัน เป็นครูให้ผมด้วยนะครับ