3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)

การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)

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

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

อันนี้เจอกับตัว เช่น เว็บไซต์ดาวน์โหลดบางแห่ง คลิกแล้วคลิกอีก ยังหาไม่เจอลิงค์ดาวน์โหลด หาเว็บใหม่เลยค่ะ :บ่น:

1. จากเนื้อหาเว็บไซต์ที่เราเตรียมไว้ ให้นำมาจัดหมวดหมู่ และลำดับเนื้อหาก่อนหลัง

Section 1
      Section 1.1
      Section 1.2
      Section 1.3
              Section 1.3.1
              Section 1.3.2
Section 2
Section 3
      Section 3.1
      Section 3.2

ข้อมูลผลิตภัณฑ์และข้อมูลต่างๆ ของบริษัท

1. สินค้า
            1.1 Computer
            1.2 Scanner
            1.3 Printer
                  1.3.1  Laser Printer
                  1.3.2  Inkjet Printer
2. สถานที่จำหน่าย
3. Support
           3.1 FAQ
           3.2 Manual
4. เกี่ยวกับบริษัท
          4.1 ประวัติ
          4.2 สถานที่ตั้ง

.

2. จัดทำแผนผังโครงสร้างเว็บไซด์ เป็นแผนผังที่แสดงถึงโครงสร้างข้อมูล, ลำดับชั้น และการเชื่อมโยงส่วนต่างๆ อย่างชัดเจน โดยจะเริ่มจากหน้า Homepage จนไปถึงหน้าย่อยต่างๆ ทั้งหมด

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

โครงสร้างเว็บไซต์อย่างง่าย เว็บไซต์นำเสนอข้อมูลดารานักร้อง

sitestructure

.
โครงสร้างเว็บไซต์ นำเสนอข้อมูลผลิตภัณฑ์และข้อมูลต่างๆ ของบริษัท

sitestructure

6 thoughts on "3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)"

  1. minky said:

    :เป้าหมาย: สุดยอดครับทั่น

  2. Name ( required ) said:

    background web คือตรงส่วนไหนค่ะ ถ้าเทียบกับwebนี้คือ ตรงสีฟ้าข้างๆหรือเปล่า
    แล้วทำไมเวลาทำถึงออกเป็นสีเดียวกันหมด แถมรูปก็ไม่ขึ้นค่ะ

    html {
    height: 100%;
    }

    body {
    height: 100%;
    margin-bottom: 1px;
    background-color: #2B2821 url(/site/images/background template/blackgroungweb.jpg);

    }
    tr,td,p,div
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    color:#333333;
    }

    .clr
    {
    clear:both;
    }

  3. joy said:

    CSS ของ enjoyday
    background: #4a4a4a url(‘images/bg.gif’) repeat-x;

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

    อธิบายแบบนี้เข้าใจมั้ยหว่า เหอๆ :หมาน้อย:

    CSS จากด้านบน
    background-color: #2B2821 url(/site/images/background template/blackgroungweb.jpg);
    ลองแก้เป็น
    background: #2B2821 url(/site/images/background template/blackgroungweb.jpg);
    ถ้าจะให้รูปซ้ำแนวนอน หรือตั้งก็เพิ่ม คำสั่ง repeat เข้าไป ลองดูจ้า

  4. Name ( required ) said:

    :ฝันเฟื่อง: :ไม่ยอม: :ohno: :555: :โกรธ: :สู้โ้ว้ย: :กรี๊ด:
    แจ่มมาก :บ๊ายบาย: :ซีด: :ขอร้อง: :ขอโทษ: :โทษที: :เศร้าจาย: :รักนะ:

  5. ผู้พันหยาง said:

    :โกรธ: :โกรธ: :โกรธ: :โกรธ: :โกรธ: :หมาน้อย: :หมาน้อย: :โกรธ: :โกรธ: :โกรธ: :โกรธ: :รักนะ: :เศร้าจาย: :รักนะ: :เศร้าจาย: :please:

แชร์ความคิดเห็นเกี่ยวกับบทความนี้

Your email address will not be published. Required fields are marked *

:ไม่ได้: :ไม่ยอม: :ไม่น่าเลย: :โทษที: :โกรธ: :เห้อ: :เหอๆ: :เศร้าจาย: :เยี่ยม: :เป้าหมาย: :เป็นไงล่ะ: :อ่ะนะ: :อืม: :อะไรหรอ: :อย่าไป: :หึหึ: :หมาน้อย: :หนาวเลย: :สู้โ้ว้ย: :รักนะ: :ระรื่น: :ฝันเฟื่อง: :บ๊ายบาย: :บ่น: :ทำร้ายตัวเอง: :ซีด: :ง่วง: :ขอโทษ: :ขอร้อง: :ก่งก๊ง: :กรี๊ด: :please: :ohno: :OK: :555: 15000 maximum characters 0 จาก 15000 characters You may use these HTML tags and attributes: <a class="" href="" title="" rel="" rev="" name="" target=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <p class="" align="" dir="" lang="" style=""> <img src="" alt="" width="" height="" class="">

Loading...