งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา"— ใบสำเนางานนำเสนอ:

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 จะต้องอยู่ในเครื่องหมาย < ... >
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> ขึ้นบรรทัดใหม่ ไม่เว้นบรรทัด การเว้นช่องว่างระหว่างคำ   เช่น html  ย่อมาจาก

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 #6B238E MediumForest Green #6B8E23 Salmon #6F4242 Dark Turquoise #7093DB Aquamarine #70DB93 Medium Turquoise #70DBDB Medium Slate Blue #7F00FF Medium 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> การเชื่อมโยงเพื่อส่ง <A ส่ง </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

31 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>

32 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>

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


ดาวน์โหลด ppt หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา

งานนำเสนอที่คล้ายกัน


Ads by Google