1 / 33

หลักการออกแบบเว็บ

หลักการออกแบบเว็บ. กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา ทิศทางการไหลของหน้าเว็บ. ทิศทางการไหล. แบบลำดับขั้น (Hierarchy) แบบเชิงเส้น (Linear) แบบผสม (Combination). สิ่งจำเป็นสำหรับการเขียนเว็บเพจ. Text Editor ใช้สำหรับเขียนคำสั่งต่าง ๆ ลงไป แล้วบันทึกไฟล์ นามสกุลเป็น .htm หรือ .html

cynthia-soto
Download Presentation

หลักการออกแบบเว็บ

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. หลักการออกแบบเว็บ • กำหนดกลุ่มเป้าหมาย • จำแนกกลุ่มเนื้อหา • ทิศทางการไหลของหน้าเว็บ

  2. ทิศทางการไหล • แบบลำดับขั้น (Hierarchy) • แบบเชิงเส้น (Linear) • แบบผสม (Combination)

  3. สิ่งจำเป็นสำหรับการเขียนเว็บเพจสิ่งจำเป็นสำหรับการเขียนเว็บเพจ • Text Editor ใช้สำหรับเขียนคำสั่งต่าง ๆ ลงไป แล้วบันทึกไฟล์ นามสกุลเป็น .htm หรือ .html ตัวอย่างโปรแกรมอื่น ๆ ได้แก่ FrontPage, Hot Dog , Home site , Dreamweaver , Ms. Office • โปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer Netscape , Opera

  4. กฎในการใช้ HTML 1. แต่ละ TAG จะต้องอยู่ในเครื่องหมาย < ... > 2. คำสั่งใน TAG จะพิมพ์ด้วยตัวพิมพ์เล็ก หรือตัวพิมพ์ใหญ่ก็ได้ 3. เกือบจะแทบทุก TAG ที่มี TAG เปิด และ TAG ปิด โดย TAG ปิด จะมีเครื่องหมาย / ด้วย เช่น <B> ข้อความ </B>

  5. โครงสร้างของภาษา HTML • HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการตกแต่งเอกสารอิเล็กทรอนิกส์ ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web Browser <HTML><HEAD>: …ข้อมูลที่ต้องการแสดงในส่วนหัว... </HEAD><BODY bgcolor="#FFFFFF"> : ...คำสั่งหรือข้อความที่ต้องการให้แสดง... </BODY></HTML>

  6. โครงสร้างของภาษา HTML • Horizontal Symmetry • Vertical Symmetry เป็นพื้นที่ส่วนหัว เป็นพื้นที่ส่วนเนื้อหา

  7. โครงสร้างของภาษา HTML • <HTML>...</HTML>เป็นคำสั่งทุกเอกสาร html จะต้องมีและคำสั่งทั้งหมดจะต้องอยู่ภายใน คำสั่ง html นี้ • <HEAD>...</HEAD>ใช้กำหนดหัวข้อของเอกสาร เพื่อให้ผู้ที่ดูเว็บเพจรู้ว่าอยู่ที่หน้าไหน • <TITLE>...</TITLE>จะแสดงข้อความที่อยู่ใน tags นี้ไปปรากฏบนไตเติลบาร์ ที่อยู่ด้านบนของหน้าต่าง • <BODY>...</BODY>คำสั่ง BODY นี้ใช้เขียนเพื่อกำหนดเนื้อหาบนเว็บเพจ โดยที่จะเขียน คำสั่งต่างๆ ทั้งหมดลงไปไว้ในส่วนนี้ และยังเป็นตัวที่กำหนด Background ของเว็บเพจนั้นด้วย และสามารถกำหนดตัวหนังสือทั้งหมดภายเอกสาร

  8. คำสั่งเพื่อจัดรูปแบบตัวอักษรคำสั่งเพื่อจัดรูปแบบตัวอักษร • หัวเรื่อง • เริ่มจาก <H1>..ใหญ่สุด..</H1> ถึง <H6>..เล็กสุด..</H6> • การย่อหน้าข้อความ • <P>…</P>ย่อหน้าใหม่เว้น 1 บรรทัด • การขึ้นบรรทัดใหม่ • <BR>ขึ้นบรรทัดใหม่ ไม่เว้นบรรทัด • การเว้นช่องว่างระหว่างคำ • &nbsp; เช่น html&nbsp;&nbsp;ย่อมาจาก

  9. ตัวอย่างการใช้งาน HTML

  10. คำสั่งเพื่อจัดรูปแบบตัวอักษรคำสั่งเพื่อจัดรูปแบบตัวอักษร • ตัวอักษรตัวหนา • <B>…</B> • ตัวอักษรปกติตัวเอียง • <I>…</I> • ตัวอักษรปกติขีดเสันใต้ • <U>…</U> • ตัวอักษรกระพริบ • <BLINK>…</BLINK>

  11. ตัวอย่างการใช้งาน HTML

  12. คำสั่งเพื่อจัดรูปแบบตัวอักษรคำสั่งเพื่อจัดรูปแบบตัวอักษร • การปรับปรุงฟอนต์ • <FONT FACE=“ชื่อฟอนต์ที่ต้องการ”>..ข้อความที่ปรับปรุง..</FONT> • เช่น <FONT FACE=“AngsanaUPC”>..ข้อความที่ปรับปรุง..</FONT> • การเปลี่ยนขนาดฟอนต์มีค่าอยู่ระหว่าง 7-1 • <FONT SIZE=”ขนาดที่ต้องการ”>..ข้อความที่ปรับปรุง..</FONT> • เช่น <FONT SIZE=”+2”>..ข้อความที่ปรับปรุง..</FONT> • การเปลี่ยนสีตัวอักษร • <FONT COLOR=“RED”>ตัวอักษรสีแดง</FONT>ตัวอักษรสีปกติ

  13. ตัวอย่างการใช้งาน HTML

  14. คำสั่งเพื่อจัดรูปแบบตัวอักษรคำสั่งเพื่อจัดรูปแบบตัวอักษร • การเพิ่มรูปภาพ • <IMG SRC=“ตำแหน่งที่อยู่ของภาพ”> • เช่น <IMG SRC=“mon.jpg”> • การควบคุมขนาดของภาพ • <IMG SRC=“mon.jpg”WIDTH=“640”HEIGHT=“480”> • การควบคุมตำแหน่งของรูปภาพ • <IMG SRC=“mon.jpg”ALIGN=“ TOP / CENTER / BOTTOM ”>

  15. ตัวอย่างการใช้งาน HTML

  16. ค่าของสีที่นำไป่ใส่ใน Font , Background , Table ได้ Dark Slate Blue #6B238EMediumForest Green #6B8E23 Salmon #6F4242 Dark Turquoise #7093DB Aquamarine #70DB93Medium Turquoise #70DBDBMedium Slate Blue #7F00FFMedium Spring Green #7FFF00

  17. คำสั่งเพิ่มเติม • ภาพ BACKGROUNG <BODY BACKGROUNG=URL> • กำหนดสีพื้น <BODY BGCOLOR=#NNNNNN> • กำหนดสีตัวอักษร <BODY TEXT=#NNNNNN>

  18. ตัวอย่างการใช้งาน HTML

  19. การสร้างรายการ • รายการแบบไม่มีลำดับ จะมีตัวอักษรนำหน้ารายการ <UL>    <LI>ฮาร์ดแวร์    <LI>ซอฟต์แวร์    <LI>พีเพิลแวร์</UL> • รายการแบบมีลำดับ จะมีตัวเลขนำหน้ารายการ <OL><LI>ฮาร์ดแวร์    <LI>ซอฟต์แวร์    <LI>พีเพิลแวร์</OL>

  20. ตัวอย่างการใช้งาน HTML

  21. การสร้างรายการ • รายการแบบคำอธิบาย <DL>    <DT>Data </DT>    <DD>"command center" of HTML document formatting.</DD></DL> DATA "command center" of HTML document formatting

  22. ตัวอย่างการใช้งาน HTML

  23. การเชื่อมโยงระหว่างเว็บเพ็จการเชื่อมโยงระหว่างเว็บเพ็จ • <A>...</A> • การเชื่อมโยงเพื่อส่ง email • <A HREF=”webmaster@swu.ac.th"> ส่ง email </A> • การเชื่อมโยงแบบสัมพัทธ์ • <A HREF=“index.html">My home Page</A>

  24. ตัวอย่างการใช้งาน HTML

  25. การใช้ตาราง <TABLE>….</TABLE> กำหนดจุดเริ่มต้นและจุดสิ้นสุดตาราง < TR>...</TR> แบ่งตารางออกเป็นแถว <TD>...</TD> แบ่งแถวออกเป็นคอลัมน์ <TABLE> <TR><TD>ชาย</TD><TD>100</TD></TR> <TR><TD>หญิง</TD><TD>200</TD></TR> </TABLE>

  26. ตัวอย่างการใช้งาน HTML

  27. การอ้างอิงตำแหน่งต่างๆ ในเวปเพ็จ • การกำหนดชื่อ • <A NAME=“ชื่อต้องการ">ข้อความอ้างถึง</A> • เช่น <A NAME=“MON1">ข้อความอ้างถึง</A> • การอ้างอิงถึงชื่อ • <A HREF=“#MON1">อ้างถึงชื่อMON1</A>

  28. ตัวอย่างการใช้งาน HTML

  29. HTML

  30. HTML • HTML <HTML> <BODY> <H1>Example</H1> <IMG SRC="images/SUTLogo.JPG"><BR> <B>Hello Bold</B> <I>Hello Italic</I> Hello ASP 1 + 1 = 2 </BODY> </HTML>

  31. HTML <HTML> <BODY> <H1>Example</H1> <IMG SRC="images/SUTLogo.JPG"> <BR> <B>Hello Bold</B><BR> <I>Hello Italic</I><BR> Hello ASP 1 + 1 = 2 </BODY> </HTML>

  32. ตัวอย่างการใช้งาน HTML

More Related