3. เมื่อเราได้ชื่อเว็บไซด์แล้ว เราก็มาคิดเนื้อหาของเว็บไซด์โดยสอดคล้องกับวัตถุประสงค์ เป้าหมาย และความต้องการของลูกค้า เรานำเนื้อหาเหล่านั้นมากำหนด Main Menu ซึ่งจะเป็นหัวช้อหลักในการเยี่ยมชมเว็บไซด์ และรายละเอียดปลีกย่อยจะอยู่ใน Main Menu ต่อไป นอกจากเราคิด Main Menu แล้ว เราต้องคิดต่อไปว่าจะทำอย่างไรให้ผู้เยี่ยมชมสนใจที่จะเข้าไปดูเนื้อหาในเว็บไซด์ของเรา ซึ่งเราต้องอาศัยแนวศิลป์ ประสบการณ์ หรือลักษณะการนำเสนอของเว็บไซด์คู่แข่งมาเป็นแนวคิด จากตัวอย่างที่นำมาเป็นแนวคิดในการออกแบบ ซึ่งเป็นเว็บไซด์ด้านบันเทิง สถานบริการต่างๆ จะนำเอารูปผู้หญิงมาเป็น Main Menu กำหนดหัวข้อหลักอยู่ในตัวของผู้หญิงนี้เพื่อให้ผู้เยี่ยมชมคลิ๊กเข้าไปชมเนื้อหาต่อไป ซึ่งเราจะนำหัวข้อหลักมาใส่ไว้ตามรูป การกำหนดขนาดจะเป็นสิ่งสำคัญในการออกแบบต่อไป เราต้องกำหนดขนาด จำนวนคอลัมถ์ แถว ในการออกแบบและเขียนเว็บไซด์ในขั้นต่อไป ดูตามรูป
สำหรับตัวอย่างนี้ผู้เขียนได้ออกแบบใน Ilustrator CS3 แทนการออกแบบรูปแบบในกระดาษก่อน หรือจะออกแบบใน Photoshop ก็ได้ แล้วแต่ความสะดวก การออกแบบจะแบ่งออกเป็น 2 ส่วนคือ Main Menu และอีกส่วนสำหรับเนื้อหาและรูปภาพประกอบซึ่งขึ้นอยู่กับข้อมูลเหล่านี้ที่จะนำเสนอ
จากตัวอย่างตามรูป จะกำหนด Main Menu เป็น Home, Our Model, Room&Bath, Rate&Promotion, Contact us ตามเนื้อหาที่ได้เตรียมไว้ และสอดคล้องกับเว็บที่ตั้ง www.cgpx.com
การวางเส้น Guide ต้องให้ตรงกับที่เรากำหนดไว้ในแบบร่าง ซึ่งจะแบ่งพื้นที่ชัดเจนให้เรานำไปออกแบบในขั้นตอนต่อไป ตามรูป ซึ่งจะนำ Main Menu มาวางไว้ตามแบบที่เราร่างไว้ก่อนหน้า
7. ต่อไปเราจะทำภาพซ้อน Roll over Image เมื่อนำไปใช้ใน Dreamweaver ซึ่งต้องเข้าใจคำสั่งนี้
Roll over Image คือคำสั่งใน Dreamweaver ที่กำหนดให้ภาพแรกที่เราเห็นเป็นภาพที่ 1 เมื่อเราเอา Mouse ไปคลิ๊กจะเปลี่ยนเป็นภาพที่ 2 นี่จะเป็นลักษณะของ Roll over Image
ซึ่งเราจะเอาส่วนที่เป็น Main Menu มาทำภาพให้แตกต่างจากภาพหลักที่มองเห็นปกติ เราจะออกแบบให้ผู้ชมได้รู้และอยากจะเข้าไปดูรายละเอียดข้างใน นี่จะเป็นการออกแบบหลักในการดึงดูดความสนใจ
ก่อนออกแบบเราต้องเลือกส่วนที่ต้องการออกแบบมาแยกเป็นไฟล์ภาพต่างหาก เพื่อให้ง่ายในการออกแบบและการแก้ไข ในที่นี้เราจะใช้ Crop Tool ในการแยกส่วนที่เราต้องการออกแบบเพื่อนำไปทำ Roll over Image
การ Crop ที่ถูกต้องจะต้องได้สัดส่วนที่เราได้ร่างแบบไว้ก่อนหน้า ตามพื้นที่ของส่วนนั้นๆ ซึ่งจะดูได้ที่ Menu Image > Image Size
ต่อไปจะเป็นการนำไฟล์ที่ได้ทำไว้ใน Photoshop หรือโปรแกรมอื่นตามที่เราออกแบบไว้ มาวางในโปรแกรม Dreamweaver ซึ่งจะใช้ Macromedia Dreamweaver 8 ในการออกแบบ
1. เมื่อเปิดโปรแกรมแล้วเราจะต้องทำการสร้าง New Site… เพื่อกำหนดที่อยู่ของเว็บไซด์ให้ง่ายต่อการออกแบบ โดยใช้คำสั่ง Menu Site > New Site
4. เมื่อสร้างตารางเสร็จแล้วให้กำหนดการจัดวางตารางตามที่ต้องการ ส่วนมากจะใช้ Center ซึ่งจะอยู่ตรงกลางหน้าจอไม่ว่าจอจะขนาดเท่าไหร่ตามที่แสดงในหน้าเว็บไซด์
9. การกำหนด Link กับ Main Menu ที่เราได้สร้างไว้ เพียงเราลากไปยังไฟล์ html ที่เราสร้างไว้ หรือในกรณีให้ลิ้งก์รูป หรือไฟล์ต่างๆ ก็ให้ลากไปยังที่อยู่ของไฟล์นั้น หรืออาจจะใช้กล่องไฟลเดอร์ใกล้ๆ คลิ๊กเลือกหาที่ต้องการลิ้งก์ก็ได้
ในการ Link ข้อความก็ทำเช่นเดียวกันเพียงคลิ๊กเลือกข้อความแล้วลากไปยังที่ต้องการ หรือจะหาจากกล่องโฟลเดอร์ก็ได้