การแทรกวัตถุในหน้าเว็บเพจ

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

ในส่วนของ Blog ใต้ Banner ส่วนนี้จะเป็นตัวแสดงเนื้อหาย่อยแบบย่อๆ เพื่อ Link ไปยังหน้าเนื้อหาจริงๆ

ให้เราทำการวิเคราะห์สัดส่วนของเนื้อหา แล้วแบ่งตามหัวข้อที่เราได้ออกแบบไว้ แล้วสร้างตารางลงไปในช่อง เพื่อใส่รายละเอียดลงในส่วนนี้ โดยจากตัวอย่างสามารถแบ่งได้ 3 ช่อง ให้สร้างตารางลงไปในช่อง Blog 3 ช่องแล้วใส่รายละเอียดตามต้องการ

 

โดยปรับค่า Rows เป็น 3 / Columns เป็น 1 / Table width ตามความเหมาะสน ถ้ายังไม่รุ้จะใช้เท่าไรดี ให้ปรับไว้น้อยๆไว้ก่อน ผมลองไว้ที่ 300 เพราะถ้าใหญ่เกินขนาดที่ได้มาอาจจะล้นจอ ยากต่อการจัดการ แล้วค่อยไปปรับขนาดในหน้า UI ให้เหมาะสมอีกที ซึ่งปรับง่ายกว่า

หาภาพมาตกแต่งเว็บเพจ โดยค้นหาจาก Internet (โปรดศึกษาเรื่องลิขสิทธิ์ภาพก่อนนำไปใช้งานจริง) หรือจะสร้างเองจากโปรแกรมสร้าง ภาพต่างๆให้เลือกภาพที่มีขนาดไม่ใหญ่เกินไป เพราะจะกินเนื้อที่เว็ปและจะทำให้ Download ช้าโดยไม่จำเป็น เลือกไฟล์ .PNG ถ้าไม่ต้อง การให้มีพื้นหลัง และSave ไฟล์ไว้ใน Floder เดียวกันกับงานทั้งหมด และใส่เนื้อหาลงไปตามความเหมาะสม จัดหน้าให้เรียบร้อย

 

Save งาน หน้าเปล่า ตั้งชื่อตามห้วข้อ (ภาษาอังกฤษ) เพื่อให้เป็นหน้าของเนื้อหา

 

ใส่เนื้อหา รายละเอียด และรูปภาพ จัดหน้าตามความเหมาะสม

 

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

 

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

 

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

 

           

ตารางแรก Rows 1 / Columns 2 แทนกรอบสีแดง                     ตารางใน Rows 1 / Columns 2 แทนกรอบสีเขียว

ผลลัพท์ที่ได้ออกมาตามแบบครับ จัดขนาดแต่ละช่องตามความเหมาะสม ใส่เนื้อหาได้เลยครับ

ในเมื่อจัดเนื้อหา จัดตาราง สร้างหน้าเพจใหม่ แนบLink ได้ครบแล้ว ก็สามารถจัดการส่วนอื่นๆได้เลยครับ

อ่อเกือบลืม!!!!!!

ลบขอบตารางให้คลิ้กที่ขอบตารางของแต่ละอัน แล้วตั้งค่า Border ให้เป็น 0 ทำให้หมดทุกตาราง เพียงเท่านี้ก็ไม่มีขอบตารางมากวนใจ

 

 

 

 
copyright © 2021 By ปวส.C2/2