บทที่ 4 การใช้งานหน้าแรกของ BLOG ของ Doking
เมื่อทุกอย่างพร้อมแล้ว เราควรเริ่มต้นด้วยการออกแบบหน้าของ BLOG ของ Doking และการใช้งานส่วนหน้าของฐานข้อมูล
ในที่นี้ เราจะไม่พูดถึงความรู้เกี่ยวกับการสร้างเว็บอาร์ต แต่จะอธิบายแนวคิดและวิธีการสร้างเพจภายในของเว็บไซต์ใน Dreamweaver MX2004
4.1.1 แนวคิดการออกแบบเว็บไซต์
ก่อนเริ่มแต่ละเพจ โดยทั่วไปการออกแบบเพจพื้นฐานควรได้รับการออกแบบใน Firworks หรือซอฟต์แวร์ออกแบบรูปภาพ เช่น Photoshop รูปที่ 4-1-1 คือการออกแบบเพจพื้นฐานที่ออกแบบใน Photoshop
รูปที่ 4-1-1 การออกแบบหน้าพื้นฐานของบล็อกของ Doking มี
หมายเลขอยู่ในรูปที่ 4-1-1 ส่วนที่ทำเครื่องหมายด้วยวงกลมสี่เหลี่ยมสีแดงคือคอลัมน์ด้านซ้ายของหน้าเว็บ ซึ่งขณะนี้จะว่างเปล่า ทีละบทในบทต่อไปนี้ สิ่งที่เพิ่ม และส่วนที่ทำเครื่องหมายด้วยวงกลมสี่เหลี่ยมสีแดงที่หมายเลขซีเรียล ② คือแถบนำทางของเว็บไซต์ ซึ่งสร้างขึ้นแบบไดนามิกจากตาราง LM ในฐานข้อมูล dkblog.mdb ที่จัดตั้งขึ้นในบทที่ 3. หลังจากที่แนวคิดพื้นฐานชัดเจนแล้ว ให้เริ่มสร้างเทมเพลตสำหรับเว็บไซต์
4.1.2 แนวคิดการออกแบบสำหรับการสร้างเทมเพลตเว็บไซต์
: สร้างเทมเพลตเว็บไซต์และรวมการออกแบบเว็บไซต์ของเว็บไซต์เข้าด้วยกัน เนื้อหาของเมนูคอลัมน์ของเว็บไซต์ถูกสร้างขึ้นโดย LM แบบไดนามิกของตารางข้อมูล ซึ่งอำนวยความสะดวกในการปรับเปลี่ยนเนื้อหาเมนูคอลัมน์ของเว็บไซต์ด้วย
(1) เปิด [ไฟล์] → [ใหม่] เปิดกล่องโต้ตอบของ [เอกสารใหม่] เลือก "หมวดหมู่:" เป็น "หน้าเทมเพลต" เลือก "หน้าเทมเพลต:" เป็น "เทมเพลต ASP.NET VB" ผลลัพธ์ ดังแสดงในรูป ดังแสดงใน 4-1-2
รูปที่ 4-1-2 กล่องโต้ตอบเทมเพลตใหม่
(2) คลิกปุ่ม "สร้าง" แทรกเลเยอร์ในหน้าต่างคุณสมบัติ ตั้งค่า ID เป็น "main" เปลี่ยน "ซ้าย (L)" และ "ด้านบน (T) )" เป็น 0px ตั้งค่า "ความกว้าง (W)" เป็น 100% และตั้งค่าการจัดตำแหน่งให้อยู่กึ่งกลาง นี่คือการเป็นศูนย์กลางของหน้าเว็บ
(3) แทรกตาราง ตั้งค่า ID เป็น "bodyT" ตั้งค่าความกว้างเป็น 780 พิกเซล (ซึ่งได้รับการออกแบบตามความกว้างของการออกแบบหน้าพื้นฐานของคุณ) ตั้งค่าระยะขอบและระยะห่างของเซลล์หน่วยเป็น 0 และตั้งค่า ความหนาของเส้นขอบตั้งค่าเป็น 0
(4) ตั้งค่าการจัดตำแหน่งแนวตั้งของแถวที่สองของตาราง "bodyT" ไปที่ด้านบน จากนั้นแยกออกเป็น 2 คอลัมน์ ตั้งค่าความกว้างของคอลัมน์แรกเป็น 220px และความกว้างของคอลัมน์แรกเป็น 560px (ความกว้าง ของคอลัมน์ที่จัดสรรจะขึ้นอยู่กับ (กำหนดโดยการออกแบบเพจพื้นฐานของคุณ) ตั้งค่าสีพื้นหลังของคอลัมน์ 1 เป็น RGB (236, 236, 236)
(5) แทรกภาพพื้นหลังที่เกี่ยวข้องลงในแถวที่หนึ่งและสามของตาราง "bodyT" ตั้งค่าการจัดตำแหน่งแนวตั้งของแถวแรกไปที่ด้านล่างและการจัดตำแหน่งแนวนอนทางด้านขวา
(6) คุณยังสามารถออกแบบชื่อเรื่อง ขนาดตัวอักษร สีตัวอักษรที่เชื่อมต่อ หรือโทนสีได้ตามต้องการ
(7) สร้างแถบนำทางของเว็บไซต์
1. เริ่ม Access2003 เปิดฐานข้อมูล dkblog.mdb และป้อนบันทึกสี่รายการตามลำดับ รวมถึงการออกแบบกราฟิก การออกแบบ 3D การออกแบบเว็บ และการเขียนโปรแกรมเครือข่าย ในช่อง LM ของตาราง LM ดังแสดงในรูปที่ 4-1-3 .
รูปที่ 4-1-3 การป้อนข้อมูลตาราง LM
② กลับไปที่ Dreamweaver สลับไปที่แผง [Server Behavior] คลิกปุ่ม "+" และเลือก "ชุดข้อมูล" ในเมนูแบบเลื่อนลง ดังแสดงในรูปที่ 4- 1-4.
รูปที่ 4-1-4 การเพิ่มชุดข้อมูล
3 ในหน้าต่างป๊อปอัป [ชุดข้อมูล] ให้ป้อนชื่อชุดข้อมูลเป็น "menuda" เลือก "dkconn" ในเมนูแบบเลื่อนลงการเชื่อมต่อ เลือกตาราง LM ใน เมนูแบบเลื่อนลงของตาราง และเลือกคอลัมน์คือตัวเลือก "ทั้งหมด" เลือกฟิลด์ "LMID" ในเมนูแบบเลื่อนลงการเรียงลำดับ และตั้งค่าการเรียงลำดับจากน้อยไปหามาก ผลลัพธ์จะแสดงในรูปที่ 4-1-5 : :
รูปที่ 4-1-5 กล่องโต้ตอบชุดข้อมูล
④ คลิกปุ่ม "ทดสอบ" และกล่องโต้ตอบที่แสดงในรูปที่ 4-1-6 จะปรากฏขึ้น เพื่อระบุว่าสร้างชุดข้อมูลสำเร็จแล้ว .
รูปที่ 4-1-6 กล่องโต้ตอบการทดสอบชุดข้อมูล
⑤ สลับไปที่แท็บ [Binding] และขยายฟิลด์ของชุดข้อมูล (เมนู) ดังแสดงในรูปที่ 4-1-7:
รูปที่ 4-1-7 Binding tab
⑥ ลากฟิลด์ LM ไปที่แถวแรกของตาราง bodyT ดังแสดงในรูปที่ 4-1-8:
รูปที่ 4-1-8 ลากฟิลด์ LM
⑦ ปล่อยเมาส์ จากนั้นอักขระแรเงาจะถูกเพิ่มในบรรทัดแรก: {menuda.LM} ป้อน "Home Page | " ข้างหน้า จากนั้นป้อนสัญลักษณ์ " |. ติดต่อเรา” ผลลัพธ์แสดงในรูปที่ 4-1-9:
รูปที่ 4-1-9 Bind data to the bodyT table
⑧ เลือกตัวอักษรที่แรเงา {menuda.LM} และตัวอักษรต่อไปนี้ "|" เลือกเมนู [Insert] → [Application Object] → [Repeat Area] ในหน้าต่างป๊อปอัป ในกล่องโต้ตอบ [พื้นที่ซ้ำ] เลือกชุดข้อมูลเป็น "เมนู" และเลือกบันทึกที่แสดงเป็น "บันทึกทั้งหมด" ดังแสดงในรูปที่ 4-1-10 คลิกปุ่ม "ตกลง" เพื่อดำเนินการสำรวจเว็บไซต์ให้เสร็จสิ้น เมนู.
รูปที่ 4-1-10 กรอบโต้ตอบพื้นที่ทำซ้ำ
(7) เลื่อนเมาส์ไปที่แถวที่สองและคอลัมน์ที่สองของตาราง bodyT เลือกเมนู [Insert] → [Template Object] → [Editable Area] และคลิก [New Editable Area] ในกล่องโต้ตอบ ให้ป้อนชื่อ "mainbody" แล้วกดปุ่ม "OK" ดังแสดงในรูปที่ 4-1-11:
รูปที่ 4-1-11 สร้างพื้นที่ที่สามารถแก้ไขได้ใหม่
ซึ่งเป็นการเสร็จสิ้นการทำงานเบื้องต้นของเทมเพลตเว็บไซต์
4.1.3 แนวคิดการออกแบบสำหรับการออกแบบหน้าแรก
: หลังจากเสร็จสิ้นงานก่อสร้างเทมเพลตเว็บไซต์แล้ว ให้ใช้เพื่อสร้างและอัปเดตเว็บไซต์
(1) สร้างไดนามิกเพจ "ASP.NET VB" ใหม่ เปิดเมนู [แก้ไข] → [เทมเพลต] → [ใช้เทมเพลตกับเพจ] ในกล่องโต้ตอบป๊อปอัป [เลือกเทมเพลต] เลือกเทมเพลต "dkblog " และคลิกปุ่ม " Select" ดังแสดงในรูปที่ 4-1-12:
รูปที่ 4-1-12 เลือกเทมเพลต
(2) เลื่อนเมาส์ไปไว้ในพื้นที่แก้ไข "mainbody" แทรกตาราง และตั้งค่า ID เป็น "ztre" จริงๆ แล้วมันถูกออกแบบดังแสดงในรูปที่ 4-1-13 นี่คือสิ่งที่บันทึกการศึกษาแต่ละรายการจะแสดง
รูปที่ 4-1-13 เนื้อหาที่จะแสดงในแต่ละบันทึกการศึกษา
การแทรกชุดข้อมูลที่อธิบายไว้ในส่วนนี้ไม่ง่ายอย่างที่อธิบายไว้ในส่วนก่อนหน้า อันดับแรก ดูรูปที่ 4-1-13 บันทึกการศึกษาแต่ละรายการจะแสดงหัวข้อ เวลาที่ตีพิมพ์ หมวดหมู่บันทึก (เช่น คอลัมน์ย่อย) ผู้แต่ง (ชื่อ) และการตอบกลับ (หมายเลข) ดูแผนภาพการออกแบบของตาราง ZT (รูปที่ 3-2-2 ในส่วนที่ 3.2) มีเพียง LMID (ID ของคอลัมน์การจำแนกประเภท) และไม่มีชื่อคอลัมน์ซึ่งสามารถรับได้โดยการเชื่อมต่อกับตาราง LM ที่นั่น เป็นเพียง YHID (ID ของผู้จัดพิมพ์) แต่ไม่มีชื่อผู้แต่งซึ่งจำเป็นต้องเชื่อมต่อ โดยสามารถรับได้จากตาราง YH เท่านั้น ข้อมูลอื่นๆ สามารถรับได้จากตาราง ZT "มันซับซ้อนมาก!" จริงๆ แล้ว ไม่ต้องกังวล ปัญหาทั้งหมดสามารถแก้ไขได้ใน Access
4.2.1 สร้างแบบสอบถามการเชื่อมต่อตารางข้อมูล
(1) เริ่ม Access2003 เลือก [แบบสอบถาม] → ดับเบิลคลิก [สร้างแบบสอบถามในมุมมองการออกแบบ] และหน้าต่าง [แสดงตาราง] จะปรากฏขึ้น ดังแสดงในรูปที่ 4-2-1 : :
รูปที่ 4-2-1 เพิ่มตารางการเชื่อมต่อแบบสอบถาม
(2) เพิ่มตาราง LM, ตาราง ZT และตาราง YH ตามลำดับ ผลลัพธ์จะแสดงในรูปที่ 4-2-2:
รูปที่ 4-2-2 มุมมองการเชื่อมต่อตารางข้อมูล
(3) ออกแบบฟิลด์แบบสอบถามดังแสดงในรูปที่ 4-2-3:
รูปที่ 4-2-3 แผนภาพการออกแบบฟิลด์แบบสอบถาม
(4) บันทึกแบบสอบถามนี้เป็น ZTRE และกรอกแบบสอบถามการเชื่อมต่อตารางข้อมูลใน Access
4.2.2 ใส่ชุดข้อมูล
(1) กลับไปที่ Dreamweaver สลับไปที่แผง [Server Behavior] คลิกปุ่ม "+" เพิ่มชุดข้อมูล Ztre เลือกตารางเป็นแบบสอบถาม ZTRE เพิ่งสร้างใน Access และอื่นๆ ที่เกี่ยวข้อง การตั้งค่าดังแสดงในรูปที่ 4-2-4:
รูปที่ 4-2-4 การตั้งค่าชุดข้อมูล Ztre
(2) สลับไปที่แท็บ [Binding] ขยายชุดข้อมูล (Ztre) ลากฟิลด์ ZTNAME เพื่อแทนที่ "Study Note Topic" ในตาราง ztre แล้วลาก ฟิลด์ ZTTIME เพื่อแทนที่เวลา "เผยแพร่" ลากฟิลด์ LM เพื่อแทนที่ "หมวดหมู่" ลากฟิลด์ ZYTEXT ไปยังช่องว่างของแถวที่สองของตาราง ztre การออกแบบอื่น ๆ จะแสดงในรูปที่ 4-2-5:
รูปที่ 4-2-5 ผูกข้อมูลเข้ากับตาราง ztre
(3) สลับไปที่แผง [Server Behavior] คุณจะเห็นว่ามีการเพิ่มข้อความไดนามิกจำนวนมาก (Ztre.ZYTEXT) แล้วเลือก รูปแบบเป็น "Encoding—HTML Encoding" Format" ดังแสดงในรูปที่ 4-2-6:
รูปที่ 4-2-6 ตั้งค่ารูปแบบข้อความแบบไดนามิก
(4) เลือกแถวแรก ที่สอง และสามของตาราง ztre และกำหนดให้เป็นพื้นที่ทำซ้ำ การตั้งค่าดังแสดงในรูปที่ 4-2-7
รูปที่ 4-2-7 กำหนดพื้นที่การทำซ้ำ
การดำเนินการแทรกชุดข้อมูลและการผูกข้อมูลในหน้าแรกจะเสร็จสมบูรณ์
(1) เลือก "Home" ในแผง [Server Behavior] คลิกปุ่ม "+" เลือก [Dataset Paging] → [Move to the first page] ดังแสดงในรูปที่ 4-3-1:
รูปที่ 4-3-1 เมนูเพจชุดข้อมูล
(2) ในกล่องโต้ตอบป๊อปอัป ให้เลือกชุดข้อมูลเป็น Ztre แล้วกดปุ่ม "OK" ดังแสดงในรูปที่ 4-3-2:
รูปที่ 4-3-2 ย้ายไปยังกล่องโต้ตอบหน้าแรก
(3) เลือก "หน้าก่อนหน้า" และกำหนดให้เป็น "ย้ายไปยังหน้าก่อนหน้า" ของเพจชุดข้อมูล เลือก "หน้าถัดไป" และกำหนดให้เป็นชุดข้อมูล " ย้ายไปยังหน้าถัดไป" สำหรับการแบ่งหน้า เลือก "สุดท้าย" เพื่อกำหนด "ย้ายไปยังหน้าสุดท้าย" สำหรับการแบ่งหน้าชุดข้อมูล
(4) เปลี่ยน "หมายเลขหน้า" เป็น "หมายเลขหน้าปัจจุบัน:" ในแผง [พฤติกรรมของเซิร์ฟเวอร์] คลิกปุ่ม "+" และเลือก [แสดงจำนวนบันทึก] → [แสดงหมายเลขหน้าปัจจุบัน]
(5) บันทึก index.aspx เพื่อเสร็จสิ้นการออกแบบหน้าแรก ป้อนบันทึกสองสามรายการลงในตาราง ZT และตาราง YH ที่เกี่ยวข้องใน Access และเรียกดูในเบราว์เซอร์ IE (หากไม่มีคำแนะนำพิเศษในบทต่อไปนี้ หมายเหตุทั้งหมดอยู่ในคอลัมน์ "Network Programming") ดังแสดงในรูปที่ 4-3-3:
รูปที่ 4-3-3 รูปภาพการเรียกดูหน้าแรก