Munu
การทำเวบด้วย wordpress เราจะต้องจัดเตรียมอุปกรณ์ให้พร้อมก่อนที่เราจะเริ่มกัน เครื่องมือที่ผมรวบรวมจะเป็นเครื่องมือที่จำเป็น ดังนี้ 1.คอมพิวเตอร์ และอินเตอร์เน็ต ถือว่าเป็นสิ่งสำคัญอันดับแรกสำหรับคนที่ต้องการสร้างเวบไซต์เพราะการอยู่ในโลกออนไลน์
เครื่องใหม่ล่าสุด ที่ดูเหมือนคุ้นๆว่าไปคล้ายๆใครมา นั้นก็คือ google +1 ซึ่งตอนนี้ถือว่าเป็นที่นิยมมาก เวบไหนก็ต้องมีไว้ เมื่อผู้เข้าชมเวบ อ่านเวบของเราแล้วตกลงปลงใจชม เขาก็อยากที่จะกดให้คะแนนเราบ้าง เราจะเพิ่มปุ่ม
อีกวิธีที่สร้างความแตกต่างให้ wordpress theme ที่เราสร้างขึ้น ก็คือการใส่รูปภาพที่แสดงถึงความเป็นตัวตนของ theme ที่เราสร้าง ในเมนูที่ใช้สำหรับเลือก theme รูปแบบบล็อก > Theme เราจะเห็น theme มากมายที่เราได้เลือกเก็บไว้ ซึ่งสิ่งหนึ่งที่แสดงความแตกต่างก็คือภาพตัวอย่างของละ
ในหน้า theme option จะปรากฎหน้าต่างของ theme wordpress มากมาย ที่เราเลือกเอาไว้ ในแต่ละ theme ก็จะแสดงรายละเอียดเพื่อให้เราเลือกตัดสินใจ ส่วนที่ 1. คือรูป screenshot สามารถดูวิธีเปลี่ยนได้ที่ screenshot ส่วนที่ 2. เป็นรายละเอียดของ theme ประกอบด้วย ชื่อ
เมื่อเราโหลดไฟล์ wordpress theme มาแล้วจะพบว่ามีไฟล์เยอะแยะมากมายเต็มไปหมด ซึ่งแต่ส่วนก็มีความสำคัญหรือหน้าที่ไม่เหมือนกันดังนี้ มาตรฐาน พิเศษ หลัก ขยะ 404.php แสดงหน้า Error page เมื่อเข้าเยี่ยมชมเ้ขาไปยังหน้าที่ไม่ปรากฎใน URL
DOCTYPE ใน wordpress theme โดย abxnet / โพสต์เมื่อ 31 กรกฎาคม 2011 DOCTYPE คือ การประกาศว่าบล็อกนั้นสร้างขึ้นมาโดยยึดหลักตามมาตราฐานของอะไร ระหว่าง 2 มาตรฐาน คือ – HTML – XHTML ทั้ง 2 มาตราฐาน จะมีการแบ่งการพัฒนาออกเป็นไปอีก 3 ประเภท คือ 1.Transitional ? 1 <!DOCTYPE
tag ที่ต่อจาก <html> ก็ต้องเป็น <head> ซึ่งในส่วนนี้ก็ต้องใส่ <meta> เพื่อเป็นข้อมูลที่สำคัญของบล็อก และเป็นข้อมูลให้ browser รู้ว่าข้อความที่อยู่ในบล็อกเรา เป็น content ภาษาอะไร แทรกโค้ดข้างล่างนี้ต่อจาก DOCTYPE ใน ไฟล์ header.php ? 1 2 3 <meta
Title Tag คือ ข้อความที่แสดงบน title bar ของเวบ และยังมีประโยชน์อย่างมากสำหรับ SEO เพราะว่า title tag ที่เราใส่ลงไป ยังไปแสดงผลในหน้า search result ของ google (more…)
wordpress คือ CMS (Content Management System) รูปแบบหนึ่งที่ได้รับความนิยมมากในปัจจุบัน ที่จะช่วยทำให้การเขียนบล็อกของเรานั้นง่ายขึ้นอย่างคาดไม่ถึง wordpressเปรียบเสมือนโปรแกรมที่คอยช่วยจัดการบทความที่เราเขียนลงให้เป็นระบบ และแสดงผลออกมาสวยงาม wordpress ถูกเขียนขึ้นด้วยภาษา
คู่มือ wordpress นี้ ถูกเขียนขึ้นเพื่อเป็นแนวทางการใช้งาน wordpress.com แต่ในรายละเอียดแล้วสามารถนำมาประยุกต์ใช้กับ wordpress.orgได้อีกด้วย โดยเนื้อหาภายในประกอบด้วย 71 หน้า รายละเอียดตามสารบัญด้านล่าง (more…)
ยุคสมัยนี้การใช้งานผ่านเวบส่วนใหญ่จะใช้งานผ่านอุปกรณ์ มือถือ เช่น สมาร์โฟน เท็บเล็ต ดังนั้นการที่ผู้ชมเว็บไซต์จะจดจำ URL หรือว่ากดบันทึกคงเป็นเรื่องลำบาก แต่มีสิ่งหนึ่งที่ทำให้ผู้ชมเว็บไซต์สามารถจดจำเวบไซค์ได้ง่าย
Scroll bar การกำหนด style ใ้ห้กับ Scroll bar ใช้งานได้เฉพาะ IE5.5+ ไม่สามารถใช้ได้กับ Firefox Property Value scrollbar-face-color color สีแถบที่เลื่อน scrollbar-highlight-color color สีขอบด้านบน และด้านซ้าย ด้านใน scrollbar-shadow-color color สีขอบด้านล่าง และด้านขวา ด้านใน scrollbar-3dlight-color color สีขอบด้านบน และด้านซ้าย
Form เรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วนที่อยากจะพูดถึงค่ะ ส่วนแรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วนที่สอง คือ การทำ Form โดยไม่ใช้ Table หรือเรียกว่า Tableless Form Form Elements เราสามารถตกแต่ง ส่วนประกอบของ Form ได้แก่ inputbox, textarea, button เป็นต้น ให้มีสีสันที่สวยงามได้
Image เราสามารถตกแต่งภาพด้วย border และใช้ filter ให้ภาพดูโปร่งใส (Transparent) สำหรับ browser IE จะใช้ propety filter:alpha(opacity=0-100) ส่วน Firefox จะใช้ property opacity:0.0-1.0 ตัวเลขยิ่งน้อย ยิ่งดูโปร่งใส Example <html> <body> ภาพปกติ<br /> <img src=”../images/lotus.jpg” /><br /> ภาพโปร่งใส 50%<br /> <img src=”../images/lotus.jpg”
Positioning การจัดวางตำแหน่งวัตถุ Property Description Values top ใช้กำหนดระยะของวัตถุ ว่าให้อยู่เหนือ หรือ ล่าง ขอบด้านบน auto % length bottom ใช้กำหนดระยะของวัตถุ ว่าให้อยู่เหนือ หรือ ล่าง ขอบด้านล่าง auto % length left ใช้กำหนดระยะของวัตถุ ว่าให้อยู่ขวา หรือ ซ้าย
Classification การแสดงผลวัตถุว่าจะแสดงอย่างไร ที่ไหน Property Description Values float ใช้กำหนดการจัดวางรูปภาพ หรือวัตถุที่ต้องการ ว่าจะให้อยู่ทางด้านใดของข้อความที่มีอยู่ left right none display ใช้กำหนดรูปแบบการแสดงของวัตถุ value description none ไม่แสดงวัตถุนั้น block แสดงเป็น
Link Property Purpose a:link กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click a:visited กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว a:hover กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link a:active กำหนด style ให้กับ link ขณะถูกคลิก Example <html> <head> <style type=”text/css”> .linkbox a:link {color: #FF0000} /* unvisited link
Table ต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป *บาง property เมื่อทดสอบแล้วไม่เห็นผล Property Description Values table-layout ใช้กำหนดความกว้างของตารางและคอลัมน์ automatic fixed Default กว้างตามที่ำกำหนดเท่านั้น caption-side ใช้กำหนดตำแหน่งของชื่อตาราง top bottom left right
List Property Description Values list-style-type ใช้กำหนดลักษณะที่ใช้นำหน้าแต่ละรายการย่อย none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian georgian cjk-ideographic hiragana hiragana-iroha katakana-iroha list-style-position ใช้การกำหนดลักษณะการปัดขึ้นบรรทัดใหม่ของข้อความ
Margin, Padding Property Description Values margin-top ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ auto length เช่น 5px, 5pt,5cm margin-bottom ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ margin-left ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ margin-right
Border เราสามารถกำหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น <p>, <div> เป็นต้น Property Description Values border-width ใช้กำหนดขนาดของกรอบของวัตถุทั้ง 4 ด้าน thin medium thick length เช่น 5px, 5pt border-style ใช้การกำหนดลักษณะของกรอบของวัตถุทั้ง 4 ด้าน none hidden dotted dashed solid double groove ridge inset outset dotted dashed solid double groove ridge inset outset border-color
Background เราสามารถกำหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น <body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้น Property Description Values background-attachment ใช้กำหนดว่าต้องการให้ภาพพื้นหลังนั้นอยู่กับที่ หรือว่าเลื่อนไปตาม Scroll Bar fixed scroll fix อยู่กับที่ เลื่อนตาม Scroll Bar background-color
Text เราสามารถกำหนดรูปแบบให้ข้อความ เช่น ความสูงของบรรทัด, ตำแหน่งการจัดวางข้อความ, การขีดเส้นใต้, การกำหนดตัวพิมพ์เล็กพิมพ์ใหญ่ และอื่นๆ ผ่าน Property ต่างๆ ดังนี้ Property Description Values color ใช้กำหนดสี สี red #000099 direction ใช้กำหนดทิศทางของ text (IE6) ltr rtl
การกำหนดลักษณะให้ตัวอักษร ใน HTML เราจะใช้ tag <font face=”ชนิดตัวอักษร” size=”number” color=”สี”>ข้อความ</font> น่าจะพอจำกันได้อยู่ แต่ในเอกสาร HTML/XHTML แบบ strict จะถือว่า tag <font> เป็น tag ที่ล้าสมัยแล้ว ไม่สามารถนำมาใช้งานได้ ให้เราใช้ CSS แทนค่ะ เรา็สามารถใช้
Contextual selectors การประกาศ selector ซ้อนกัน โดยเคาะ spacebar ทำให้สามารถสืบทอดคุณสมบัติเดิม และเพิ่มคุณสมบัติที่แตกต่างได้ ดูตัวอย่างเพื่อให้เข้าใจมากขึ้นค่ะ Example <html> <head> <style type=”text/css”> h1 { color: blue; background-color:#FFFFCC } h1 em { color: red } h1 u { color:green} </style> </head> <body>
การเขียนคำสั่ง Style Sheet Selector ที่เป็น HTML Tag Example <html> <body> <head> <style type=”text/css”> <!– h1{color:red; font-family:Arial } p{color:black; font-family:Arial } –> </style> </head> <body> <h1>วิธีดูแลรักษาสุขภาพ</h1> <p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p> <h1>วิธีกินผลไม้ที่ถูกต้อง</h1> <p>ให้กินผลไม้แค่ทีละอย่าง
วิธีใช้งาน Style Sheet 1. Inline Styles วิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เีพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยู่ในคำสั่ง style=”” ดังนี้ <Tag style=”property:value;”> Example <html> <body> <h1 style=”color:red; font-family:Arial”>วิธีดูแลรักษาสุขภาพ</h1> <p
สี (Color) การกำหนดสีให้ตัวอักษร พื้นหลัง เส้นขอบ หรือส่วนอื่นๆ ของวัตถุ สามารถกำหนดได้หลายแบบ 1. กำหนดโดยใช้ชื่อสี แต่การระบุชื่อสีแบบนี้ใช้สีได้จำนวนจำกัด ได้แก่ aqua, black, blue, fuchsia (แดงอมม่วง), gray, green, lime, maroon (น้ำตาลแดง), navy, olive, purple, red, silver,
หน่วยที่ใช้วัดค่าต่างๆ ใน Style Sheet จาก syntax ของคำสั่ง CSS ค่า value ของ property บางค่าจะต้องมีการระบุหน่วยด้วย หน่วยที่ใช้งานใน CSS มีอะไรบ้าง มาดูกันค่ะ หน่วยแบบ Relative Length (กำหนดแบบอัตราส่วน) px (pixels, สัมพันธ์กับค่าความละเอียดของหน้าจอ) เช่น
โครงสร้างคำสั่ง คำสั่งของ CSS ประกอบด้วย selector, property และ value selector { property:value } selector { property1:value1; property2:value2 } – selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้ – property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี,
ก่อนเริ่มเรียน CSS คุณจำเป็นต้องมีพื้นฐาน HTML มาก่อนค่ะ สำหรับผู้อ่านที่ได้ศึกษาบทเรียน HTML มาแล้ว อาจมีคำถามว่าจำเป็นหรือไม่ที่จะต้องศึกษา CSS ด้วย สำหรับในปัจจุบัน CSS มีความสำคัญหากคุณต้องการที่จะทำเว็บไซต์ให้มีมาตรฐาน
หลักการออกแบบเว็บเพจ การสร้างลำดับความสำคัญขององค์ประกอบ การออกแบบเว็บให้เหมาะสมกับเนื้อหา ์ควรมีความสม่ำเสมอตลอดทั้งเว็บไซต จัดวางส่วนประกอบให้เป็นระเบียบ ใช้รูปภาพประกอบอย่างเหมาะสม คำนึงถึงสภาพแวดล้อมในการใช้งาน สำหรับหลักการออกแบบเว็บเพจนั้นมีเนื้อหาและรายละเอียดค่อนข้างมาก
หลักการออกแบบเว็บไซต์ การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง 1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย
หลักการออกแบบเว็บเพจที่จริงแล้วไม่มีอะไรตายตัวหรอกครับ เพียงแต่เราต้องยึดหลักเกณฑ์เพื่อความเป็นสากลนิยมและความเหมาะสมของเว็บเพจ การออกแบบเว็บเพจนั้นเราจะคำนึงของผู้เยี่ยมชมเป็นหลักว่า เว็บที่เราทำออกมานั้นต้องการดึงดูดคนประเภทไหนเข้ามา
หลักการออกแบบเว็บไซต์ เว็บไซต์เป็นสื่อที่ได้รับความนิยมอย่ามากบนอินเตอร์เน็ต ซึ่งเว็บไซต์เป็นสื่อที่อยู่ในความควบคุมของผู้ใช้โดยสมบูรณ์ กล่าวคือ ผู้ใช้สามารถตัดสินใจเลือกได้ว่าจะดูเว็บไซต์ใดและจะไม่เลือกดูเว็บไซต์ใด
ขั้นตอนที่ 1 กำหนดโครงสร้างของเว็บไซต์ การสร้างเว็บไซต์นั้นควรเริ่มจากการสร้าง แผนผังของเว็บไซต์ก่อน หรือที่เรียกว่า Site Map ดังภาพตัวอย่างมีการกำหนดหน้าเว็บเพจ 4 หน้า การกำหนดโครงร่างของเว็บไซต์ ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ เราต้องกำหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้า เชื่อมโยงถึงกันเื่พื่อให้กลับไปกลับมา
