ปรับแต่งเว็บเพจด้วย Page Properties

Dreamweaver

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

การใช้งานเครื่องมือ Page Properties สามารถทำได้ดังนี้

    1.เปิดเว็บเพจที่ต้องการปรับแต่ง

    2.ไปที่ Menu เลือก Modify > Page Properties

    3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง





ทดลองเปลี่ยน พื้นหลัง , ชนิดของ font , สีของตัวอักษร , ระยะห่างของวัตถุกับหน้าเว็บเพจ

    1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง

    2.ไปที่ Menu เลือก Modify > Page Properties

    3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง

    4.ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับดังรูป



รายละเอียดต่างๆของเครื่องมือมีดังนี้

    1.Page font ใช้ปรับแต่งชนิดของ font ที่แสดงผล ด้านหลังจะมีสัญลักษณ์ B (ทำให้แสดงผลในหน้านี้เป็นตัวหนาทั้งหมด) และ I (ทำให้แสดงผลในหน้านี้เป็นตัวเอียงทั้งหมด) สามารถเลือกคลิกได้

    2.Size ในช่องนี้คือขนาดของตัวอักษรที่จะแสดงในเว็บเพจ

    3.Text color ใช้กำหนดสีของตัวอักษรที่จะแสดงในเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสีให้เลือก

    4.Background Color ใช้กำหนดสีพื้นหลังของเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสีให้เลือก

    5.Background image ใช้กำหนดภาพพื้นหลังของเว็บเพจ โดยคลิกที่ Browse จะมีหน้าต่างให้เลือกภาพที่จะใช้แสดงเป็นพื้นหลัง

    6.Repeat ใช้กำหนดการแสดงผลของภาพพื้นหลัง โดยมีคำสั่งดังนี้

        1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว

        2.repeat ให้แสดงผลภาพพื้นหลังซ้ำกันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ

        3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในแนวนอนเท่านั้น

        4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในตั้งนอนเท่านั้น

    7.Margin เป็นคำสั่งที่ใช้กำหนดระยะห่างของตัวอักษร และภาพ กับเว็บเพจ มีรายละเอียดดังนี้

        1. left margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจทางซ้ายเป็นระยะที่เรากำหนด

        2. right margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจทางขวาเป็นระยะที่เรากำหนด

        3. top margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านบนเป็นระยะที่เรากำหนด

        4. bottom margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านล่างเป็นระยะที่เรากำหนด

    คลิกโอเค เว็บเพจก็จะปรับหน้าตามที่เราได้ตั้งไว้



เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink

เราสามารถเปลี่ยนสี ขนาด การขีดเส้นใต้ ของตัวอักษรที่เป็น Hyperlink ได้ตามขั้นตอนด้านล่าง

    1.เปิดหน้าเว็บเพทที่ต้องการปรับแต่ง

    2.ไปที่ Menu เลือก Modify > Page Properties

    3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง

    4.ที่ categoty ทางซ้ายมือเลือก link จะมีหน้าจอให้ปรับดังรูป



รายละเอียดต่างๆของเครื่องมือมีดังนี้

    1. Link font เป็น font ที่จะใช้แสดงตัวอักษรที่เป็น hyperlink ด้านหลังจะมีสัญลักษณ์ B (ทำให้ตัวอักษรที่เป็น hyperlink เป็นตัวหนาทั้งหมด) และ I (ทำให้ตัวอักษรที่เป็น hyperlink เป็นตัวเอียงทั้งหมด) สามารถเลือกคลิกได้

    2. Size ปรับขนาดของตัวอักษรที่เป็น hyperlink

    3. การปรับสีของ hyperlink เมื่ออยู่ในสถานะต่างๆ มีรายละเอียดดังนี้

        1.Link Color เป็นสีที่ใช้แสดง Hyperlink ที่เรายังไม่เคยคลิกเปิดดู

        2.Visited Links เป็นสีที่ใช้แสดง Hyperlink ที่เราเคยคลิกเปิดดูแล้ว

        3.Rollover Links เป็นสีที่ใช้แสดง Hyperlink เมื่อมีเมาส์วางอยู่ด้านบน

        4.Active Links: เป็นสีที่ใช้แสดง Hyperlink เมื่อเราคลิกที่ hyperlink

    4.ปรับการขีดเส้นใต้ของ Hyperlink มีรายละเอียดดังนี้

        1.Always underline ให้แสดงเส้นใต้ในทุกกรณี

        2.Never underline ไม่แสดงเส้นใต้ในทุกกรณี

        3.Show underline only on rollver แสดงเส้นใต้เฉพาะตอนที่มีเมาส์อยู่ด้านบนเท่านั้น

        4.Hide underline on rollver ปรกติจะแสดงเส้นใต้ แต่เมื่อเมาส์อยู่ด้านบนไม่ต้องแสดงเส้นใต้

    คลิกโอเค Hyperlink ก็จะปรับหน้าตามที่เราได้ตั้งไว้



จริงแล้วการตั้ง page properties เป็นการกำหนด CSS ในเว็บเพจนั้นเองเราสามารถดูรายละเอียด CSS ที่เรากำหนดได้ที่ code หรือที่ vertical docking panel ในหัวข้อ CSS ดังรูปด้านล่าง(สามารถศึกษาเรื่อง CSS เพิ่มเติมได้ในเว็บไซต์ของเรา)



เกี่ยวกับบทความนี้

  • ระดับความยาก : พื้นฐาน
  • คะแนนของบทความนี้ : 7
  • สร้างเมื่อ : 16-05-2010
  • จำนวนครั้งที่เปิด : 3,225
  • เนื้อหาที่เกี่ยวข้อง :
      -

คะแนนความน่าสนใจ

158

คลิกที่ ชอบจัง! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ

บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (10 เรื่อง)

แนะนำ Dreamweaver

แนะนำ Dreamweaver

ในบทความนี้จะแนะนำโปรแกรม dreamweaver ว่าสามารถใช้งานอะไรได้บ้าง และดีอย่างไร ทำไมถึงมีชื่อเสียงโด่งดัง มีเว็บไซต์ชื่อดังมากมายใช้โปรแกรมนี้ในการพัฒนาเว็บไซต์ และทำไม ถึงมีออกมาหลายเวอร์ชัน

สร้างเมื่อ : 16-05-2010 9:40 | จำนวนครั้งที่เปิด : 6,997


เตรียมความพร้อมปรับแต่ง Dreamweaver ใช้งานภาษาไทยได้

เตรียมความพร้อมปรับแต่ง Dreamweaver ใช้งานภาษาไทยได้

ในบทความนี้จะเป็นเนื้อหาการปรับให้ Dreamweaver ทำงานกับภาษาไทยได้

สร้างเมื่อ : 16-05-2010 9:40 | จำนวนครั้งที่เปิด : 5,441


เครื่องมือต่างๆในโปรแกรม Dreamweaver

เครื่องมือต่างๆในโปรแกรม Dreamweaver

บทความนี้เกี่ยวกับตำแหน่งและ ชื่อเรียกเครื่องมือต่างๆ ของ Dreamweaver

สร้างเมื่อ : 16-05-2010 9:24 | จำนวนครั้งที่เปิด : 6,751


กำหนด Site ขั้นตอนสำคัญที่สุดของการทำเว็บด้วย Dreamweaver

กำหนด Site ขั้นตอนสำคัญที่สุดของการทำเว็บด้วย Dreamweaver

การกำหนด site เป็นขั้นตอนที่สำคัญมากในการทำเว็บด้วย dreamweaver เราแทบจะทำงานไม่ได้เลยถ้าไม่กำหนด site ให้กับ dreamweaver ก่อน

สร้างเมื่อ : 16-05-2010 9:40 | จำนวนครั้งที่เปิด : 6,770


ใส่ข้อความในเว็บเพจด้วย Dreamweaver

ใส่ข้อความในเว็บเพจด้วย Dreamweaver

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

สร้างเมื่อ : 16-05-2010 9:52 | จำนวนครั้งที่เปิด : 4,584


ใส่รูปภาพในเว็บเพจ (พื้นฐาน)

ใส่รูปภาพในเว็บเพจ (พื้นฐาน)

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

สร้างเมื่อ : 16-05-2010 9:36 | จำนวนครั้งที่เปิด : 3,920


สร้าง Hyperlink

สร้าง Hyperlink

เว็บไซต์ประกอบด้วยไฟล์หลายไฟล์มารวมกัน ทั้งเว็บเพจ รูป วีดีโอ เสียง ในบทความนี้จะทำ link เพื่อเชื่อมโยงไปยังไฟล์ต่างๆที่อยู่ในเว็บไซต์กัน

สร้างเมื่อ : 16-05-2010 8:48 | จำนวนครั้งที่เปิด : 3,234


ปรับแต่งเว็บเพจด้วย Page Properties

ปรับแต่งเว็บเพจด้วย Page Properties

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

สร้างเมื่อ : 16-05-2010 8:49 | จำนวนครั้งที่เปิด : 3,225


Adding Meta Tags สำหรับการค้นหาของ Search Engine

Adding Meta Tags สำหรับการค้นหาของ Search Engine

meta tags เป็นคำที่ใช้ในการอธิบายเว็บไซต์ของเราให้กับ Search Engine (เช่น google.com) ต่างๆ ว่าเว็บไซต์ของเราเกี่ยวข้องกับอะไรบ้าง

สร้างเมื่อ : 16-05-2010 8:50 | จำนวนครั้งที่เปิด : 2,434


แสดงผลเว็บเพจของคุณใน browser

แสดงผลเว็บเพจของคุณใน browser

ถึงแม้ว่า Dreamweaver จะแสดงผลเสมือนจริง แต่ก็ยังไม่ถูกต้องเสมอไป สุดท้ายเราก็ต้องดูผ่าน browser อยู่ดีว่าเว็บเพจที่เราเขียนนั้นเป็นอย่างไร

สร้างเมื่อ : 16-05-2010 8:50 | จำนวนครั้งที่เปิด : 3,032