GotoKnow
  • เข้าระบบ
  • สมัครสมาชิก
  • แผงจัดการ
  • ออกจากระบบ
GotoKnow

การทำCSSครั้งแรก

css

 เริ่มใช้งาน blog อย่างจริงจัง ครั้งแรกค่ะ

ก่อนอื่นก็ต้องขออนุญาติอาจารย์จันทวรรณก่อนนะคะ ที่ดิฉันจะเอาโมเดลปลาทูของอาจารย์มาใช้ในการแก้ไข และตกแต่งเพิ่มเติมให้เป็นของตัวเอง เพราะว่าไม่อยากซ้ำกับใครค่ะ และดิฉันก็คิดว่าแต่ละคนก็อยากมีโฉมหน้าบล็อกที่ไม่ซ้ำใครด้วยเหมือนกันใช่รึเปล่าคะ ดังนั้นดิฉันขอเริ่มวิธีการแปลงโฉมบล็อก ณ บัดนี้ค่ะ แต่ตอนนี้ทำได้แค่เปลี่ยนภาพthemeด้านบนเท่านั้นค่ะ เพราะนั่งทำจนปวดหัว ปวดตาไปหมดแล้วค่ะ(ใจจริงอยากเปลี่ยน themeให้เป็นสีส้มทั้งหมดค่ะ) ก็ได้เท่านี้ก่อนละกันค่ะ ถ้าหากมีอะไรคืบหน้าจะรีบมารายงานค่า

เริ่มจาก code ตัวสีแดงๆที่อาจารย์จันทวรรณท่านให้มาก่อนนะคะ

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

ส่วนที่ต้องแก้ไขก็คือบรรทัดที่ 15 นั่นล่ะค่ะ เป็นส่วนที่เอาไว้ใส่รูปให้กับ theme ของเราไงล่ะคะ แต่ก่อนที่จะเปลี่ยนภาพได้นั้นเราก็ต้องนำภาพที่จะเอามาใส่ โดยขนาดของภาพที่จะใช้คือ width=850 pixel และ high=80 pixel ค่ะ  <p></p><p>



ต่อมาก็นำไฟล์ภาพที่ได้ใส่เข้าไปใน”ไฟล์อัลบัม” จากนั้นก็ copy shortcut ไฟล์ภาพที่ได้
ดังนี้</p><p></p><p>แล้วก็ตัด ส่วนที่เป็นสีชมพูออกไปเอาเฉพาะส่วนที่เหลือค่ะ
 http://gotoknow.org /file/jantana811/banner1.gif </p><p> แปะส่วนสีดำลงไปแทนที่ด้านล่างนะคะ
15.   background-image:url("/file/jantana811/banner1.gif");   </p><p>สุดท้ายก็บันทึกเก็บ แค่นี้ก็จะได้ theme ที่เป็นชื่อของเราเองแล้วค่ะ  </p><p>ปล.ภาพที่นำมาทำหัวของบล็อกนำมาจาก gettyimages ซึ่งได้เว็บนี้มาจากบล็อกของคุณมันทนา(http://gotoknow.org/blog/growthrings/56794) ค่ะ</p><p> </p>

บันทึกนี้เขียนที่ GotoKnow โดย 

คำสำคัญ (keywords): css
หมายเลขบันทึก: 57451
เขียน:
แก้ไข:
ความเห็น: 5
อ่าน:
สัญญาอนุญาต: สงวนสิทธิ์ทุกประการ

ความเห็น (5)

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

ตอบข้อสงสัยค่ะ

คิดว่าทำได้นะคะ แต่ตอนนี้ก็ยังไม่สามารถที่จะหาวิธีแก้ไขได้ค่ะ ถ้าทำได้แล้วจะรีบมาบอกกล่าวกันนะคะ

เขียนอย่างในบันทึกนี่ละค่ะดีมาก คือ เขียนอธิบายว่าทำอะไรไปบ้างและทำอย่างไร ดีค่ะ แต่การพิมพ์จาก word มานั้น ควรแปะใน notepad ก่อนแล้วจึงนำมาแปะในบล็อกค่ะ font จะได้เป็น default เหมือนในระบบค่ะ

ส่วนเรื่อง css ดูจากที่นี่ก็ได้ค่ะ http://www.w3schools.com/css/

  • ขอบคุณมากค่ะ  ดีจัง 
  • แต่ครูอ้อยยังไม่ได้ทำ 
  • เพราะเขียนบันทึก เร่งสรุปวิจัยค่ะ 
  • เสร็จเมื่อไรจะลุย...

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