แต่งหน้านิยายยังไงให้ดึงดูด ภาค 1

เปิดประตูสู่ความน่าสนใจของนิยายเรา มาใส่โค้ดให้เป็นกันเถอะ!!
 

 

ก่อนอื่นมาทำความรู้จักหน้าเว็บเพจของเรากันก่อนนะคะ ^__^ ตามปกติแล้วในการสร้างหน้าเว็บเพจจะประกอบด้วยองค์ประกอบหลักๆ 2 อย่างดังนี้
 

• HTML (the Hypertext Markup Language)
• CSS (Cascading Style Sheets)
   

ไอ้เจ้า HTML เนี่ยคือโครงสร้างของเพจ ในขณะที่ CSS คือ layout หรือการออกแบบและตกแต่งเพจให้สวยงามค่ะ
 

หน้าตาของ HTML และ CSS

มารู้จักหน้าตาหรือโครงสร้างของสองอย่างนี้กันก่อนคร่าวๆ ดีกว่านะคะ เผื่อจะทำให้เข้าใจตัวโค้ดตกแต่งมากขึ้น (หรืออาจจะงงกว่าเดิม ฮ่าๆ)
 

เวลาเราจะเขียนโค้ด หากเราไม่มีโปรแกรมที่ไว้เขียนโค้ดเฉพาะเช่น EditPlus หรือ CodeBlocks พี่น้ำผึ้งขอแนะนำให้ใช้เครื่องมือที่ง่ายที่สุดเช่น Notepad

แล้วเวลาเขียนโค้ดก็ควรมี comment เล็กๆ น้อยๆ เพื่อเตือนตัวเองว่าสิ่งที่เราเขียนคืออะไร ในส่วนของ CSS เรามักจะใช้
 

• Comment only 1 line ใช้ // ตามด้วยข้อความที่เราจะชี้แจงแค่ 1 บรรทัด
• Comment many lines ใช้ /* ตามด้วยข้อความที่เราจะชี้แจงได้มากกว่า 1 บรรทัด *​
   

แต่ถ้าเป็น comment ในส่วนของ html จะใช้ตามรูปด้านล่างเลยจ้า

 

โครงสร้างแบบ HTML

คำที่อยู่ภายใน < และ > เรียกว่า tags  เช่น ทุกครั้งที่ขึ้นต้นด้วย < body > (หมายถึงเปิด tag) เราจำเป็นจะต้องปิด tag ด้วยเสมอด้วยการใส่ / ไว้ข้างหน้า แบบนี้ < /body >

จะเห็นได้ว่าภายใต้ tag body นั้นจะมี tag ประหลาดอีกสองอัน (และมากกว่านั้นขึ้นอยู่กับโค้ด) ซึ่งภายใต้ body นั้นจะเป็นส่วนที่เราจะใช้ตกแต่งค่ะ โดย h คือ หัวเรื่อง และ p คือ ย่อหน้าค่ะ ส่วน font คือ ลักษณะฟอนต์ที่ต้องการ และนอกจากนี้ก็ยังมีลักษณะตัวอักษรอื่นๆ ที่ใช้เช่น ตัวหนา เป็นต้น

หลายคนอาจจะกังวลว่าตัวใหญ่ ตัวเล็กมีผลไหม คำตอบคือไม่มีผลค่ะ!

โคงสร้างแบบ CSS

หน้าตาของ CSS จะดูง่ายกว่า html แถมผลลัพธ์ออกมายังเหมือนกันด้วยค่ะ โดยเราจะใช้ tag < style > (เวลาใช้ไม่ต้องเว้นวรรคระหว่าง < > นะคะ)   ซึ่ง h กับ p คือหัวเรื่องและย่อหน้าเหมือนเดิมค่ะ เพียงแต่ภายในวงเล็บปีกกา { } จะใส่คุณสมบัติที่เราต้องการ และภายในวงเล็บปีกกา ทุกครั้งที่ขึ้นบรรทัดใหม่จำเป็นต้องใส่เครื่องหมาย semicolon ; เสมอนะคะ ^__^

เช่น ภายใน h จะเป็นหัวเรื่องที่เป็นสีแดง และเป็นลักษณะฟอนต์ Arial ค่ะ ส่วนใน p จะเป็นสีดำ ลักษณะฟอนต์ Arial และตัวหนาค่ะ และถ้าหากเราอยากเปลี่ยนสีตัวอักษรก็แค่ใส่สีที่ต้องการลงไปได้เลย อาจจะเป็นรหัสสีเช่น สีแดง คือ red หรือ #FF0000 หรือ rgb(250,0,0) ก็ได้ค่ะ แต่สามารถเลือกได้อย่างใดอย่างหนึ่งเท่านั้นนะคะ  โดยน้องๆ สามารถดูรหัสสีได้ที่นี่เลยค่ะ จิ้ม

และนอกจากนี้ก็ยังมีส่วนที่น่าสนใจอีกหลายอย่างไม่ว่าจะเป็นการใส่พื้นหลัง การใส่รูป เป็นต้น ซึ่งน้องๆ อาจจะศึกษาเพิ่มเติมเองได้ผ่านเว็บไซต์ดังต่อไปนี้ค่ะ w3school, w3C หรือ Thaicss 

เอาล่ะค่ะ พอรู้จักส่วนประกอบของมันคร่าวๆ แล้ว เวลาแกะโค้ดในเด็กดีจะได้ง่ายขึ้นค่ะ ซึ่งวิธีการแกะโค้ดนั้นพี่น้ำผึ้งขอไม่ลงลึกในส่วนนี้นะคะ เพราะพี่เห็นว่ามีเพื่อนในเด็กดีของเราบางคนนั้นได้ตั้งบทความสอนการสร้างธีมด้วยตัวเอง (อีกนัยก็คือการแกะโค้ดอย่างหนึ่งค่ะ) ซึ่งพี่น้ำผึ้งเข้าไปดูแล้วพบว่ามันดีมากๆ เลยค่ะ เขียนเข้าใจง่าย ถ้าน้องๆ สนใจอยากทำธีมด้วยตัวเองก็จิ้มที่รูปด้านล่างเลยค่ะ ^___^

\

สอนแต่งบทความโดยไอติมเย็น :)

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

ตอนที่เราสร้างนิยายเสร็จใหม่ๆ จะมีหน้าตาเรียบๆ แบบนี้ เห็นกรอบสีแดงๆ ไหมคะ ตรงส่วนนั้นเราสามารถพิมพ์ตามใจชอบได้เลย หรือบางทีเราก็สามารถใส่โค้ดตกแต่งตรงนั้นได้ค่ะ (เดี๋ยวจะสอนวิธีใส่อีกทีนะ)

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

เวลาเราจะใส่โค้ดลงไป ให้เราคลิกที่ HTML ที่พี่วงสีแดงๆ เอาไว้ 

พอคลิกเสร็จมันก็จะเปลี่ยนไปทันที!! 

ส่วนที่เป็นสีดำแหละค่ะคือพื้นที่การใส่โค้ดของเรา ถ้าเราจะใส่โค้ดธีมก็ให้มาใส่ด้านล่างที่พี่บอกค่ะ เป็นกรอบสีเหลืองๆ (เดี๋ยวๆ ทำไมสีมันเปลี่ยนไปล่ะ!!? ฮ่าๆ) แล้วกรอบแดงๆ ที่ล้อมคำว่า reset โค้ด มันมีเอาไว้ล้างโค้ดทั้งหมดเวลาเกิดบักค่ะ :D

จบแล้วนะคะสำหรับการสร้างธีมและใส่โค้ดด้วยตัวเอง แต่ถ้าใครรู้สึกว่าเขียนโค้ดมันทั้งยากทั้งงง ครั้งหน้าพี่จะนำบทความที่แจกธีมให้เราฟรีๆ มาฝากค่ะ! อย่าลืมติดตามกันนะคะ ส่วนใครที่ลองสร้างธีมก็อย่าลืมเอามาอวดพี่ด้วยล่ะ