คู่มือประกอบการสร้างเว็บไซต์ dream

16
คคคคคคคคคคคคคคคคคคคคคคคคคคคค คคคคคคคคคค Macromedia Dreamweaver คคคคคคคคค 1.คคคคคคคคคคคค คคคคคคคค 53010520012 2.คคคคคคคคคคคค คคคคคคค 53010520025 3.คคคคคคคคคคคค คคคคคคคคค คคคคค 53010516046 4.คคคคคคคคคค คคคคคคค 53010516041 5.คคคคคคคคคคคคคคค คคคคคคค 53010516009

Upload: sommat

Post on 20-Jun-2015

172 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: คู่มือประกอบการสร้างเว็บไซต์  Dream

คู่��มื�อประกอบการสร�างเว็�บไซต์�โดยโปรแกรมื Macromedia Dreamweaver

จั�ดทำ�าโดย

1.นายทำว็!ศั�กด#$ เข็�มืเพชร 53010520012

2.นายภาณุ*ว็#ชญ์� แสนโกษา 53010520025

3.นายพ#ษณุ*พงษ� ส*รพงษ�พ#ว็�ฒนะ 53010516046

4.นายน�นทำว็*ธ อ#/มืจั#ต์ 53010516041

5.นางสาว็ดาราร�ต์น� สมืมืาต์ย� 53010516009

ช�0นป1ทำ!/ 1 คู่ณุะศั2กษาศัาสต์ร�

Page 2: คู่มือประกอบการสร้างเว็บไซต์  Dream

สาข็า เทำคู่โนโลย!และส�/อสารการศั2กษา

มืหาว็#ทำยาล�ยมืหาสารคู่ามื

คู่�าน�า

คู่��มื�อนี้�จั�ดทำ��ขึ้�นี้เพื่��อประกอบก�รเร�ยนี้ก�รสอนี้เก��ยวก�บก�รสร��งเว�บไซต์#ด�วยโปรแกรมื Dream ซ��งเป'นี้ก�รเร�ยนี้ร� �ก�รใช้�โปรแกรมืในี้ด��นี้อ��นี้ๆ ทำ��นี้อกเหนี้�อจั�กก�รพื่,มืพื่#ง�นี้ปกต์, นี้อกจั�กนี้�นี้คู่ณะผู้��จั�ดทำ��ย�งได�ทำ��ก�รสร��งเว�บไซต์#ได�มื�คู่ว�มืร� �เก��ยวก�บฮ�ร#ดแวร# ด�งนี้�นี้คู่ณะผู้��จั�ดทำ��จั�งได�จั�ดทำ��คู่��มื�อเก��ยวก�บก�รสร��งเว�บไซต์#นี้�เพื่��อให�ผู้��ศึ�กษ�เขึ้��ใจัว,ธี�ก�รสร��งเว�บไซต์#ด�วยโปรแกรมื Dream ได�ง��ยขึ้�นี้ ห�กผู้,ดพื่ล�ดประก�รใดขึ้ออภั�ยมื� ณ ทำ��นี้�ด�วยคู่��มื�อนี้�จั�ดทำ��ขึ้�นี้เพื่��อประกอบก�รเร�ยนี้ก�รสอนี้เก��ยวก�บก�รสร��งเว�บไซต์#ด�วยโปรแกรมื Dream

Page 3: คู่มือประกอบการสร้างเว็บไซต์  Dream

สารบ�ญ์

เร�/อง หน�า

ว�งโคู่รงสร��ง………………………………………………………………

……………………1

ก�รสร��งเว�บไซต์#ด�วยโปรแกรมื Macromedia Dreamweave…………….……….……….…….2

ก�รต์กแต์�งเนี้�อห� ( Content) ในี้เว�บเพื่จั……………………………………………………….5

ก�รใส�พื่�นี้หล�ง ( Background) และล�กษณะพื่,เศึษ................………………………………….. 7

ก�รสร��งไฮเปอร#ล,งคู่# ( Hyperlink)

…………………………………………………………….8

ก�รล,งคู่#ไปย�งเว�บเพื่จัอ��นี้………………………………………………………………………

…9

ขึ้

Page 4: คู่มือประกอบการสร้างเว็บไซต์  Dream

ก�รบ�นี้ทำ�กเว�บเพื่จั……………………………………………………

……………………….…10

อ��งอ,ง…………………………………………………………………

………………………...11

Page 5: คู่มือประกอบการสร้างเว็บไซต์  Dream

ว็างโคู่รงสร�าง

1. ก��หนี้ดเร��องขึ้องเว�บไซต์#

2. ก��หนี้ดส�วนี้ประกอบหล�กขึ้องเว�บ ประกอบไปด�วย

2.1 ส�วนี้ขึ้อง Title

2.2 ส�วนี้เมืนี้� ประกอบไปด�วย

2.2.1 บทำนี้��

2.2.2 กรรณ,ก�ร#

2.2.3 ขึ้นี้5นี้

2.2.4 คู่��แสด

2.2.5 ฝ�ง

2.2.6 อ�ญช้�ญ

2.2.7 อ��งอ,ง

2.2.8 ร�ยช้��อสมื�ช้,ก

2.3 ส�วนี้ขึ้องเนี้�อห�

1

Page 6: คู่มือประกอบการสร้างเว็บไซต์  Dream

การสร�างเว็�บไซต์�ด�ว็ยโปรแกรมื Macromedia Dreamweaver

ก�รสร��งเว�บไซต์#ก�คู่�อ ก�รสร��งเอกส�รส��หร�บแสดงผู้ลบนี้อ,นี้เทำอร#เนี้�ต์หร�อเว�บบร�ว#เซอร#โดยใช้�มื�ต์รฐ�นี้ HTML ซ��งผู้��สร��งจัะต์�องมื�คู่ว�มืร� �และเขึ้��ใจัโคู่รงสร��งภั�ษ� HTML พื่อสมืคู่วรจั�งจัะสร��งได� ป9จัจั5บ�นี้ได�มื�ก�รพื่�ฒนี้�โปรแกรมืส��เร�จัร�ปช้�วยในี้ก�รสร��งเว�บเพื่จั เช้�นี้ Dreamweaver และFrontPage เป'นี้ต์�นี้ เพื่��อช้�วยให�ผู้��พื่�ฒนี้�เว�บออกแบบได�อย��งสวยง�มืและรวดเร�ว โดยไมื�ต์�องพื่,มืพื่#คู่��ส��งภั�ษ� HTML ห�กแต์�ใช้�กร�ฟิ<กเขึ้��มื�ช้�วยออกแบบ อย��งไรก�ต์�มื ก�รสร��งเว�บเพื่จัทำ��ง��ยอ�กว,ธี�หนี้��ง คู่�อ ก�รสร��งด�วยโปรแกรมืไมืโคู่รซอฟิต์#เว,ร#ดซ��งมื�ว,ธี�ก�รสร��ง ด�งนี้�

1.ก�อนี้อ��นี้เร�ก�ต์�องเป<ดโปรแกรมื Dream ทำ��เร�จัะใช้�ง�นี้ขึ้�นี้มื� จั�กนี้�นี้ก�ต์�งโฟิลเดอร# จั�ดเก�บง�นี้ต์�มืต์�องก�ร พื่อเร�เล�อกไฟิล# หร�อโฟิล#เดอร# ต์�งช้��อไฟิล#เสร�จั เร�ก� ด�บเบ,ลคู่ล,กไฟิล#ทำ��เร�ต์�องก�ร ก�จัะได�ร�ปนี้�ขึ้�นี้มื�

2

Page 7: คู่มือประกอบการสร้างเว็บไซต์  Dream

2. จั�กนี้�นี้เร�ก�ก��หนี้ดขึ้อบเขึ้ต์เนี้�อห� ว��เร�ต์�องก�รพื่�นี้ทำ��มื�กนี้�อยเพื่�ยงใด ได�ต์�มืต์�องก�ร ก�อนี้อ��นี้เร�ต์�องคู่ล,กป5=มื เล�อก Layout >> I

Insert >>HTML >> Frames >>Top

Insert >>HTML >> Frames >> Bottom

Insert >>HTML >> Frames >> Left

Insert >>HTML >> Frames >> Right

3. ต์�อมื�เร�ก�จัะมื�ต์�งช้��อ ไฟิล#แต์�ละไฟิล#ขึ้องเร� โดยคู่ล,กขึ้ว� ทำ��ช้��อทำ��ขึ้�นี้ให� เร�เล�อกทำ��คู่��ว�� Save All จั�กนี้�นี้เร�ก�บ�นี้ทำ�กช้��อไฟิล# ต์�องเป'นี้ภั�ษ�อ�งกฤษ เทำ��นี้�นี้ Save ไว�ในี้ Dream ทำ��เร�ต์�ง ต์�งแต์�ทำ�แรก เพื่��อคู่ว�มืเขึ้��ใจัง��ยไมื�ส�บสนี้ ถ้��เร�ย�งไมื� Save จัะมื� * ขึ้�นี้ให�เร�เห�นี้ ทำ��ช้��อนี้�นี้ๆ

3

Page 8: คู่มือประกอบการสร้างเว็บไซต์  Dream

4. พื่อเร�ก��หนี้ดพื่�นี้ทำ��เสร�จัเร�ก�ใส�ขึ้�อมื�ลลงไป ต์�มืขึ้�นี้ต์อนี้ทำ��เร�ว�งไว� พื่ร�อมืก�รบ�นี้ทำ�กไปด�วยเพื่��อไมื�ให�เก,ดป9ญห�ต์�มืมื�ทำ�หล�ง เร�จัะใส�ภั�พื่ห�วขึ้�อบนี้ส5ด โดยคู่ล,กทำ�� Common >> ต์�วทำ��คู่ล��ยร�ปภั�พื่ เร�ก�จัะได�ภั�พื่นี้�ขึ้�นี้มื� เร�ก�เล�อกว��เร�จัะเอ�ภั�พื่ไหนี้ขึ้�นี้ แล�ว คู่ล,ก Ok

5. เร�ก�จัะได�ภั�พื่ต์�มืทำ��เร�ต์�องก�ร

4

Page 9: คู่มือประกอบการสร้างเว็บไซต์  Dream

6. ก�รใส�ต์�ร�ง เร�เล�อก Layout แล�วเล�อก Table จัะได�ภั�พื่เหมื�อนี้ด��นี้ล��ง เร�ก�ใส� Rows ใส�Columns ต์�มืเร�ต์�องก�ร คู่ล,ก Ok

การต์กแต์�งเน�0อหา ( Content) ในเว็�บเพจั

7. เร�ก�จัะได�ต์�ร�งต์�มืทำ��เร�ต์�องก�ร จั�กนี้�นี้เร�ก�ใส�ขึ้�อคู่ว�มื ต์กแต์�งต์�วหนี้�งส�อ ใส�ส�ต์�มืเร�ต์�องก�ร

5

Page 10: คู่มือประกอบการสร้างเว็บไซต์  Dream

8. พื่อเร�ต์กแต์�งต์�วหนี้�งส�อเสร�จั เร�ก�ต์กแต์�ง พื่�นี้ล�งขึ้องต์�ร�ง พื่�นี้หล�งขึ้องขึ้องห�วขึ้�อ หร�อต์��แหนี้�งทำ��เร�อย�กจัะใส� เร�ส�มื�รถ้ใส�ได�ต์�มืต์�องก�ร แต์�คู่วรใส�ให�พื่อเหมื�ะ

การใส�พ�0นหล�ง ( Background) และล�กษณุะพ#เศัษในเว็�บเพจั7

Page 11: คู่มือประกอบการสร้างเว็บไซต์  Dream

9. ว,ธี�ใส�พื่�นี้หล�ง เร�เล�อกด��นี้ขึ้��งขึ้องภั�พื่เร�ด��นี้ใด ด��นี้หนี้��งบร,เวณทำ��ว�� คู่ล,กขึ้ว� >> เล�อกทำ�� Page Properties >> เร�ก�จัะได�ด�งภั�พื่ด��นี้ล��ง เล�อก Link >>เล�วเร�ก�เล�อกส�ต์�มืต์�องก�ร

10. ก�รใส�เนี้�อห� ขึ้องบทำนี้��เร�ต์�องว�ง Latout ก�อนี้ทำ5กคู่ร�งเพื่ร�ะเป'นี้ก�รเหมื�อนี้เป'นี้กรอบป@องก�นี้ เพื่��อทำ��จัะให�ง�นี้อย��ในี้ต์��แหนี้�งทำ��เร�ต์�องก�ร ก�รใส�บทำนี้�� เร�ส�มื�รถ้ Coppy ว�งได�เลย

11. ต์�วอย��งก�รใส�เนี้�อห�ร เร�ก�คู่ล,ก โฟิลเดอร# ทำ��ว��งทำ��เร�ต์�องก�รให�ง�นี้เขึ้��ไปอย��ขึ้�นี้มื� แล�วเร�ก� เป<ดโฟิล#เดอร# จั�กนี้�นี้ก� Coppy ง�นี้ในี้ Word เร�มื�ว�งในี้ โฟิล#เดอร#เร�ได�เลย เร�ก�ทำ��แบบนี้�ไปจันี้กว��เร�จัะใส�

Page 12: คู่มือประกอบการสร้างเว็บไซต์  Dream

เนี้�อห�คู่รบ ต์�มืทำ��เร�ต์�องก�รเร�ก�เป<ดมื�ทำ��หนี้��หล�กขึ้องเร� ก�จัะได�ภั�พื่นี้�ขึ้�นี้มื� เร�ก�ต์กแต์�งได�ต์�มืต์�องก�รต์�มืเหมื�ะสมื

การสร�างไฮเปอร�ล#งคู่� ( Hyperlink)

ไฮเปอร#ล,งคู่# หมื�ยถ้�ง ก�รเช้��อมืโยงเอกส�รจั�กจั5ดหนี้��งไปย�งอ�กจั5ดหนี้��ง เร�ยกส�นี้ว�� ล,งคู่# ( links )

ซ��งมื�หล�ยล�กษณะ ทำ�งก�รล,งคู่#ภั�ยในี้เว�บเพื่จัหนี้��เด�ยวก�นี้ ล,งคู่#ระหว��งหนี้��ในี้เว�บไซต์#เด�ยวก�นี้ และล,งคู่#ไปย�งเว�บไซต์#อ��นี้ เหต์5ผู้ลทำ��ต์�องสร��งล,งคู่# ก�คู่�อ ขึ้�อมื�ลทำ��จัะนี้��เสนี้อในี้เว�บเพื่จัมื�จั��นี้วนี้มื�กไมื�ส�มื�รถ้นี้��เสนี้อให�คู่รบได�ในี้หนี้��เด�ยว จั�งต์�องเช้��อมืโยงเอกส�รจั�กหนี้��หนี้��งไปย�งหนี้��อ��นี้ๆ

ล,งคู่#อ�จัเป'นี้ต์�วอ�กษร คู่�� ขึ้�อคู่ว�มื ภั�พื่ หร�ออ��นี้ๆ โดยจัะใช้�ส�แต์กต์��งจั�กขึ้�อคู่ว�มืปกต์,หร�อมื�ขึ้�ดเส�นี้ใต์�ไว� ส�มื�รถ้คู่ล,กเพื่��อล,งคู่#ไปย�งต์��แหนี้�งทำ��เช้��อมืโยงไว�ทำ�นี้ทำ�

การล#งคู่�ประกอบด�ว็ย

1. ขึ้�อมื�ลต์�นี้ทำ�ง ส��หร�บผู้��ใช้�คู่ล,กเพื่��อเช้��อมืโยงไปย�งขึ้�อมื�ลอ��นี้ๆ 2. ขึ้�อมื�ลปล�ยทำ�ง เป'นี้หนี้��เว�บเพื่จั หร�อแหล�งขึ้�อมื�ลทำ��สร��ง

8

Page 13: คู่มือประกอบการสร้างเว็บไซต์  Dream

ไว�ส��หร�บแสดงผู้ล

การล#งคู่�ไปย�งเว็�บเพจัอ�/น

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

การสร�างล#งคู่�ไปย�งเว็�บเพจัอ�/น มื!ว็#ธ!การทำ�าด�งน!0

1. คู่ล5มืด��ส,�งทำ��เร�ต์�องก�ร ล,งคู่#2. เป<ดไฟิล#ขึ้�อมื�ลต์�นี้ทำ�ง แล�วคู่ล,กระบ�ยขึ้�อคู่ว�มืทำ��ต์�องก�รจัะ

สร��งล,งคู่# Coppy

3. นี้��มื�ว�งต์รงคู่��ว�� Link

9

Page 14: คู่มือประกอบการสร้างเว็บไซต์  Dream

การบ�นทำ2กเว็�บเพจั

เมื��อสร��งและต์กแต์�งเว�บเพื่จัเสร�จัแล�ว จัะต์�องบ�นี้ทำ�กไฟิล#ให�เป'นี้เอกส�ร HTML ด�งนี้�

1. คู่ล,กทำ��คู่��ส��ง File => Save Frame All

2. จัะได�ร�ปด�งภั�พื่ จั�กนี้�นี้เร�ก�ต์�งช้��อ ง�นี้ขึ้องเร� เร�ก�กด Save

เร�ก�จัะได�ง�นี้ขึ้องเร�

1

Page 15: คู่มือประกอบการสร้างเว็บไซต์  Dream

3. เร�ก�จัะได�เว�บเพื่จัต์�มืทำ��เร�ต์�องก�ร

อ�างอ#ง

http://www.rspg.or.th/plants_data/herbs/herbs_200.htm

http://www.rspg.or.th/plants_data/herbs/herb1.htm

http://www.rspg.or.th/plants_data/herbs/herbs_30.htm