การสร�างเว็บ ด้�ว็ยโปรแกรม Macromedia Dreamweaver 8

Macromedia Dreamweaver 8  เป็�นอี�กโป็รแกรมหน �ง ที่��ม�การอีอีกแบบ มาเพื่��อีที่��จะใช้�ในการจ�ดการก�บเอีกสารที่��ใช้�ส�าหร�บ การสร�างเว็ บเพื่จ  ซึ่ �งในสม�ยก$อีนหากจะม� การสร�างเว็ บเพื่จ ขึ้ &นแต่$ละเว็ บเพื่จน�&น ต่�อีงให�ผู้*�ที่��ม�คว็ามร* �ในภาษา HTML มาเขึ้�ยนรห�สค�า ส��ง (Code) ให� แต่$ ในป็.จจ/บ�น โป็รแกรม Macromedia Dreamweaver 8  สามารถที่��จะสร�างรห�สค�าส��งให�ก�บผู้*�ใช้�โดยอี�ต่โนม�ต่1  ซึ่ �งผู้*�ใช้�ไม$จ�า เป็�นต่�อีงม�คว็ามร* �ด�านขึ้อีงภาษา HTML เน�� อีงจากโป็รแกรม Macromedia Dreamweaver 8 น�&นจะม�ล�กษณะ การที่�างานที่��คล�ายๆ ก�บโป็รแกรมพื่1มพื่5เอีกสารที่��เราเคยใช้�และร* �จ�กก�นด�  ซึ่ �งจะม�เคร��อีงม�อีและแถบค�าส��งให�เราเล�อีกใช้�ได� เหม�อีนก�บ Word

Processor  จ งช้$ว็ยให�สามารถเว็ บเพื่จด�ว็ยคว็ามสะดว็ก และรว็ดเร ว็

จ/ดเด$นขึ้อีงโป็รแกรม  Macromedia Dreamweaver 8 1. โป็รแกรมจะที่�าการแป็ลงรห�สให�เป็�นภาษา HTML โดยอี�ต่โนม�ต่1ด�งน�&น ผู้*�ใช้�ที่��ไม$ม�คว็ามร* � ด�าน

น�&ก สามารถที่�าได� 2. ม�แถบเคร��อีงม�อี หร�อีแถบค�าส��ง ที่��ใช้�ในการคว็บค/มการที่�างาน แบ$งอีอีกเป็�นหมว็ดหม*$จ งช้$ว็ยใน

การที่�างานที่��ด�ขึ้ &น และรว็ดเร ว็ย1�งขึ้ &น 3. สน�บสน/นเว็ บเพื่จที่��เป็�นภาษาไที่ยได�ด� 4. ม�ค/ณสมบ�ต่1ที่��สามารถจ�ดการก�บร*ป็ภาพื่เคล��อีนไหว็ โดยไม$ต่�อีงอีาศั�ย Plugin 5. สามารถเร�ยกใช้�ต่ารางจากภายนอีก โดยการอี1มพื่อีร5ที่จาก Text File 6. เป็�นโป็รแกรมที่��สามารถสน�บสน/นการใช้�งาน CSS (Cadcading Style Sheet) 7. ม�คว็ามสามารถในการที่�า Drop Down Menu  รว็มไป็ถ งการที่�าให�ร*ป็ภาพื่เป็ล��ยนเม��อี

น�าเมาส5ไป็ช้�& เป็�นต่�น

คว็ามสามารถขึ้อีง Macromedia Dreamweaver 8

1

สร�างเว็ บเพื่จภาษาไที่ย ร* �จ�กฟั.งก5ช้� �นต่$าง ๆ ขึ้อีง

Macromedia Dreamweaver

การก�าหนดค$า เพื่��อีใช้�ในการสร�างเว็ บเพื่จ ภาษาไที่ยโป็รแกรม Macromedia Dreamweaver 8 ม�การเขึ้�ยนขึ้ &นมา เพื่��อีคว็ามสะดว็ก

สบาย ในการสร�างเว็ บเพื่จ เน��อีงจากม�ว็1ธี�การใช้�ที่��เหม�อีนก�บ โป็รแกรม Microsoft Office ม�เมน*ต่$างๆ ให�ผู้*�ใช้�เล�อีกใช้�จากน�&น โป็รแกรมจะที่�าการแป็ลงให�เป็�น ภาษา HTML ซึ่ �งเป็�นภาษาในการเ ขึ้� ย น เ ว็ บ เ พื่ จ ใ ห� เ อี ง โ ด ย อี� ต่ โ น ม� ต่1

โป็รแกรม Macromedia Dreamweaver 8 น�&นถ*กอีอีกแบบมา ให�ใช้�ได�ก�บเว็ บเพื่จที่/กภาษา และสามารถที่��จะเล�อีกใช้�ฟัอีนต่5 ได�ต่ามที่��ม�ในระบบป็ฏิ1บ�ต่1การ ซึ่ �ง โป็รแกรม Macromedia Dreamweaver 8 จะม�ว็1ธี�ในการเขึ้�ารห�สที่��เป็�นต่�ว็อี�กษรแบบมาต่รฐานเที่$าน�&น ค�อี (Unicode) ซึ่ �งจะที่�าให�ม�คว็ามสะดว็กสบายย1�งขึ้ &น ที่��ไม$ต่�อีงต่1ดต่�&งโป็รแกรมเพื่1�มเต่1มเหม�อีนก�บเว็อีร5ช้� �นเก$าๆ แต่$ในการที่��จะใช้�ก�บภาษาอีะไร ต่�อีงม�การก�าหนดรห�ส (Encoding) ให�ก�บโ ป็ ร แ ก ร ม ด� ว็ ย เ พื่�� อี ที่�� จ ะ ไ ด� ไ ม$ ม� ป็. ญ ห า เ ก1 ด ขึ้ & น ภ า ย ห ล� ง

เน��อีงจากภาษาไที่ยน�&น ม�ต่�ว็อี�กษร ที่��ค$อีนขึ้�างจะละเอี�ยดอี$อีนมาก จ งที่�าให�เก1ดป็.ญหาบางคร�&ง จะอี$านภาษาไที่ยไม$ได� ด�งน�&น ก$อีนที่��จะ ลงม�อีในการสร�างเว็ บเพื่จ ด�ว็ยโป็รแกรม Macromedia Dreamweaver 8 น�&นต่�อีงม�การก�าหนดรห�ส (Encoding) เพื่��อีให�เว็ บเพื่จน�&นสามารถอี$าน ภาษาไที่ยได� ซึ่ �งม�ว็1ธี� ในการที่��จะก�าหนดเพื่��อีให� Macromedia Dreamweaver 8 อี$านภาษาไที่ยได�ด�งน�&

เล�อีกค�าส��งที่��เมน*บาโดยเล�อีก Modify จากน�&นเล�อีก Page Properties (หร�อีสามารถเล�อีกได�ที่��ป็/<ม Page Properties ที่��อีย*$บนพื่าแนล Properties Inspector)

จากน�&นให�เล�อีกที่��หมว็ดขึ้อีง Title/Encoding ในช้$อีง Encoding น�&นให�เล�อีกที่��  Thai (Windows) จากน�&นคล1ก OK

2

 

ร* �จ�กฟั.งก5ช้� �นต่$าง ๆ ขึ้อีง Macromedia Dreamweaver ส�าหร�บโป็รแกรม Macromedia Dreamweaver เป็�น โป็รแกรมเขึ้�ยนเว็ บ ที่��

อีอีกแบบมาเพื่��อี ช้$ว็ยจ�ดการก�บ เว็ บเพื่จ โดยผู้*�ใช้�ไม$จ�าเป็�นต่�อีงม�คว็ามร* � ในภาษา HTML ซึ่ �งเป็�นภาษาส�าหร�บสร�างเว็ บเพื่จ โดยต่รง ด�งน�&น โป็รแกรม Macromedia Dreamweaver  จ งม�ฟั.งก5ช้� �นต่$างๆ มากมายซึ่ �งแต่$ละ ฟั.งก5ช้� �นก จะ แสดงผู้ลในล�กษณะขึ้อีง ว็1นโดว็ส5 (WINDOWS) หร�อีแถบค�าส��ง (PALETTE) ต่�ว็อีย$างขึ้อีง ฟั.งก5ช้� �น เช้$น (BEHAVIOR) เป็�น ฟั.งก5ช้� �นส�าหร�บใช้�ในการคว็บค/ม การใช้�สคร1ป็ต่5ต่$างๆ เป็�นต่�น ในการที่��จะเล�อีกใช้�ฟั.งก5ช้� �น ผู้*�ใช้�ต่�อีงที่�าคว็ามเขึ้�าใจ และเร�ยนร* �ว็1ธี�ในการคว็บค/มการที่�างาน ขึ้อีงฟั.งก5ช้� �นต่$างๆ ให�เขึ้�าใจเส�ยก$อีน และว็1ธี�เร�ยกใช้�ฟั.งก5ช้� �นต่$างๆ ขึ้อีงโป็รแกรม Macromedia Dreamweaver ก สามารถที่�าได�ด�งน�& เล�อีกค�าส��งที่��เมน*บาโดยคล1กเล�อีกเมน* Window ก จะป็รากฏิ รายการขึ้อีงค�าส��งคว็บค/ม หร�อีฟั.งก5ช้� �นต่$างๆ ให�เล�อีก

ส�าหร�บฟั.งก5ช้� �น ที่��เป็�นมาต่รฐานในการ ที่�างานก�บโป็รแกรม Macromedia Dreamweaver ที่��ม�การใช้� งานบ$อียๆ ก ม�อีย*$ 3 ฟั.งก5ช้� �น ได�แก$

ฟั.งก5ช้� �น Insert จะเป็�นฟั.งก5ช้� �นที่��ใช้�ส�าหร�บคว็บค/มเก��ยว็ก�บว็�ต่ถ/ต่$างๆ เช้$น เลเยอีร5, ร*ป็ภาพื่ ซึ่ �งแถบเคร��อีงม�อีน�&จะป็ระกอีบไป็ด�ว็ย ช้/ดเคร��อีงม�อีต่$างๆ ค�อี Characters , Common, Form, Frames, head, Invisible

ฟั.งก5ช้� �น Properties เป็�นฟั.งก5ช้� �นล�กษณะต่$างๆ เช้$น ใช้�ในการก�าหนดค$าขึ้อีงขึ้�อีคว็ามในเว็ บ ส�ขึ้อีงต่�ว็หน�งส�อี ร*ป็ภาพื่ ต่าราง เป็�นต่�น

ฟั.งก5ช้� �น Launcher เป็�นฟั.งก5ช้� �นส�าหร�บใช้�ในการจ�ดการหร�อีคว็บค/มในส$ว็นขึ้อีง สคร1ป็ต่5 (Behaviors)

3

4

ว็�ธี� เซ็ตให้� โปรแกรม Macromedia Dreamweaver 8 เป�ด้ขึ้��นมาเป�น ภาษาไทย1.เขึ้�าไป็ที่�� Edit->Preferences ด�งร*ป็ (หร�อีกด crl+u)

5

2.เล�อีก NEW Document แล�ว็เป็ล��นค$าต่$างๆ ให�เป็�น ด�ง

ค�าส��งพื่�&นฐานที่��คว็รที่ราบในการเร1�มสร�างเว็ บเพื่จ การก�าหนดต่�าแหน$งที่��เก บเว็ บไซึ่ต่5 ค�าส��งในการสร�าง เป็=ด บ�นที่ กเว็ บไซึ่ต่5 ฯลฯการเร1�มใช้�งานโป็รแกรม Dreamweaver 8   เม��อีเขึ้�าส*$โป็รแกรม Dreamweaver 8 � จะป็รากฏิกรอีบ Workspace Setup ด�งร*ป็ ให�คล1กเล�อีก Designer  แล�ว็คล1ก OK เพื่��อีเขึ้�าส*$หน�าจอีการอีอีกแบบขึ้อีงโป็รแกรม Macromedia Dreamweaver 8  

 

6

จากน�&นจะป็รากฎหน�าจอี Start Page ซึ่ �งเป็�นเคร��อีงม�อีส�าหร�บเร1�มต่�นการที่�างาน  โดยต่�ว็เล�อีกจะแบ$งเป็�น 3 กล/$มด�งร*ป็ ส�าหร�บการสร�างเว็ บเพื่จเป็ล$าแบบพื่�&นฐาน ให�เล�อีกกล/$ม Create New แล�ว็คล1กที่�� HTML

ส$ว็นป็ระกอีบขึ้อีงโป็รแกรม Dreamweaver 8  

แถบช้��อีเร��อีง (Title Bar) แสดงช้��อีแฟั@มขึ้�อีม*ลที่��ก�าล�งใช้�งานอีย*$ แถบค�าส��ง (Menu Bar) เป็�นส$ว็นที่��เก บค�าส��งต่$าง ๆ ที่��ใช้�งานในโป็รแกรม

Dreamweaver 8

7

แถบ Document Tool Bar เป็�นส$ว็นที่��ใช้�ในการจ�ดการก�บเว็ บเพื่จ ณ ขึ้ณะน�&น เช้$นการเป็ล��ยนม/มมอีงในการด*หน�าเว็ บเพื่จ

แถบ Insert Bar เป็�นกล/$มเคร��อีงม�อีที่��ใช้�สร�างอีงค5ป็ระกอีบต่$าง ๆ ในเว็ บเพื่จ ซึ่ �งป็ระกอีบด�ว็ยช้/ดเคร��อีงม�อี 8 ช้/ดด�ว็ยก�น

พื่�&นที่��อีอีกแบบ (Document Window) เป็�นส$ว็นที่��ใช้�ส�าหร�บใส$เน�&อีหาและจ�ดอีงค5ป็ระกอีบขึ้อีงเว็ บเพื่จ โดยป็ระกอีบด�ว็ยม/มมอีงการที่�างาน 3 ร*ป็แบบด�ว็ยก�นค�อี Design, Code และ Code and Design

แถบสถานะ (Status Bar) เป็�นส$ว็นที่��แสดงสถานะขึ้อีงการใช้�งานโป็รแกรม ณ ขึ้ณะน�&น หน�าต่$าง Properties เป็�นส$ว็นขึ้อีงค�าส��งที่��ใช้�ในการก�าหนดค/ณสมบ�ต่1ขึ้อีงอีงค5ป็ระกอีบต่$าง ๆ ที่��เราต่�อีงการเป็ล��ยนแป็ลงหร�อีต่กแต่$ง

Panel Group เป็�นกล/$มขึ้อีงแผู้งคว็บค/ม ที่��ใช้�แที่นค�าส��งและต่1ดต่$อีก�บฐานขึ้�อีม*ล

ม/มมอีงต่$าง ๆ ขึ้อีง Document Windows   ในการอีอีกแบบหน�าเว็ บเพื่จด�ว็ยโป็รแกรม Dreamweaver 8 เราสามารถเล�อีกร*ป็แบบหร�อีม/มมอีงขึ้อีงหน�าต่$างเว็ บเพื่จได� 3 ร*ป็แบบด�ว็ยก�นค�อี  Show Code View    ใช้�แสดงหน�าจอีอีอีกแบบเป็�นภาษา HTML Show Code and Design View   ใช้�แสดงหน�าจอีอีอีกแบบเป็�นภาษา HTML  และหน�าจอีอีอีกแบบจร1ง Show Design View   ใช้�แสดงหน�าจอีอีอีกแบบเป็�นหน�าจอีอีอีกแบบจร1ง

การซึ่$อีนและแสดงเคร��อีงม�อีอีอีกแบบ ในการอีอีกแบบเว็ บเพื่จน�&น บางคร�&งต่�อีงการใช้�เคร��อีงม�อีเพื่1�มเต่1มเพื่��อีใช้�ในการอีอีกแบบ แต่$บางคร�&งก ต่�อีงการซึ่$อีนเคร��อีงม�อีต่$าง ๆ ไว็�ช้� �ว็ขึ้ณะเพื่��อีด*หน�าเว็ บเพื่จที่��อีอีกแบบไว็�ให�ช้�ดเจน การซึ่$อีนและแสดงเคร��อีงม�อีอีอีกแบบในโป็รแกรม Dreamweaver 8 สามารถที่�าได�หลายว็1ธี�ด�ว็ยก�น ด�งน�&ค�อี ว็1ธี�ที่�� 1 โดยการคล1กที่��ค�าส��ง Windows แล�ว็คล1กค�าส��งที่��ต่�อีงการใช้�งาน ว็1ธี�ที่�� 2 โดยการคล1กที่��ป็/<มล*กศัรเล ก ๆ หน�าแถบ Panel

8

ว็1ธี�ที่�� 3 กดแป็@นพื่1มพื่5 <F4> เพื่��อีซึ่$อีนหร�อีแสดงเคร��อีงม�อีที่�&งหมด

การก�าหนดโฟัลเดอีร5เพื่��อีเก บเว็ บไซึ่ต่5ที่��สร�างใหม$ การเร1�มต่�นสร�างเว็ บไซึ่ต่5ใหม$ในโป็รแกรม Dreamweaver 8 จะต่�อีงเร1�มต่�นจากการต่�&งช้��อีเว็ บไซึ่ต่5 และก�าหนดต่�าแหน$ง เช้$น ไดร5ฟั และโฟัลเดอีร5 ที่��จะใช้�เก บไฟัล5ต่$าง ๆ ขึ้อีงเว็ บไซึ่ต่5ที่��เราจะอีอีกแบบ ซึ่ �งที่�าได�ต่ามขึ้�&นต่อีนด�งน�&ค�อี

1. คล1กค�าส��ง Site>New Site… 2. จะป็รากฏิกรอีบ Site Definition ขึ้ &นมา ให�พื่1มพื่5ช้��อีเว็ บไซึ่ต่5ที่��ต่�อีงการ แล�ว็คล1กป็/<ม

Next 3. ให�คล1กเล�อีก No, I do not want…….. แล�ว็คล1กป็/<ม Next 4. ระบ/ช้��อีไดร5ฟัและโฟัลเดอีร5ที่��จะใช้�เก บขึ้�อีม*ลขึ้อีงเว็ บไซึ่ต่5ที่��จะที่�าการอีอีกแบบ จากน�&นคล1กป็/<ม

Next 5. คล1กที่��ช้$อีง How do you connect to your remote server ?

แล�ว็คล1กต่�ว็เล�อีก None จากน�&นให�คล1กที่��ป็/<ม Next 6. จะแสดงกรอีบให�เห นว็$าได�ก�าหนดเว็ บไซึ่ต่5ใหม$เป็�นที่��เร �ยบร�อียแล�ว็ คล1กที่��ป็/<ม Done เพื่��อีเร1�ม

ต่�นการอีอีกแบบเว็ บเพื่จ 7. จะป็รากฏิช้��อีขึ้อีงเว็ บไซึ่ต่5 พื่ร�อีมที่�&งต่�าแหน$งที่��เก บเว็ บไซึ่ต่5 แสดงไว็�ใน Panel Group

9

การสร�างหน�าเว็ บเพื่จใหม$

10

การสร�างเว็ บเพื่จใหม$ สามารถที่�าได�โดย 1. คล1กค�าส��ง File>New... ที่��แถบเมน* 2. จะป็รากฎกรอีบ New Document ขึ้ &นมา โดยคล1กที่��ต่�ว็เล�อีก Basic page ใน

ช้$อีง Category 3. คล1กต่�ว็เล�อีก HTML ที่��ช้$อีง Basic page 4. คล1กป็/<ม Create

 

การก�าหนดค/ณสมบ�ต่1พื่�&นฐานขึ้อีงเว็ บเพื่จ ก$อีนการอีอีกแบบเว็ บเพื่จที่/กคร�&ง คว็รเร1�มจากการก�าหนดค/ณสมบ�ต่1พื่�&นฐาน เช้$น ช้��อีเว็ บเพื่จ (Title) ส�พื่�&น (Background color) ส�ขึ้อีงขึ้�อีคว็าม (Text color) เป็�นต่�น Page Propertiesโดยสามารถก�าหนดได�ด�ว็ยค�าส��ง Modify

1. การก�าหนดล�กษณะการแสดงผู้ล (Appearance) Appearance เป็�นค/ณสมบ�ต่1ที่��ว็ไป็ ในการแสดงผู้ลขึ้อีงหน�าเว็ บเพื่จ ม�รายละเอี�ยดด�งน�&ค�อี

11

Page font ร*ป็แบบต่�ว็อี�กษร Size ขึ้นาดต่�ว็อี�กษร Text color ส�ขึ้อีงขึ้�อีคว็ามที่��ว็ไป็ Background color ส�พื่�&นหล�งขึ้อีงหน�าเว็ บเพื่จ Background image ภาพื่ฉากหล�งขึ้อีงหน�าเว็ บเพื่จ Repeat ว็1ธี�แสดงภาพื่ฉากหล�งแบบซึ่�&า ๆ Left margin ระยะขึ้อีงด�านซึ่�ายขึ้อีงหน�าเว็ บเพื่จ Right margin ระยะขึ้อีงด�านขึ้ว็าขึ้อีงหน�าเว็ บเพื่จ Top margin ระยะขึ้อีงด�านบนขึ้อีงหน�าเว็ บเพื่จ Bottom margin ระยะขึ้อีงด�านล$างขึ้อีงหน�าเว็ บเพื่จ

2. การก�าหนดล�กษณะขึ้�อีคว็ามห�ว็เร��อีงและภาษา (Title/Encoding)Title/Encoding เป็�นการก�าหนดช้��อีและภาษาที่��ใช้�ขึ้อีงเว็ บเพื่จ ม�รายละเอี�ยดด�งน�&ค�อี

12

การบ�นที่ ก (Save) เว็ บเพื่จ ไฟัล5เว็ บเพื่จขึ้อีง Dreamweaver 8 ถ�าย�งไม$ได�บ�นที่ ก (Save) ขึ้�อีม*ลที่��ที่�าการแก�ไขึ้ จะส�งเกต่ได�จากบนแถบช้��อีเร��อีง (Title Bar) จะม�เคร��อีงหมาย * ป็รากฏิอีย*$ที่�ายช้��อีไฟัล5 ซึ่ �งเป็�นเคร��อีงหมายเต่�อีนว็$าย�งไม$ได�บ�นที่ ก (Save) ขึ้�อีม*ลขึ้อีงไฟัล5น� &น ไฟัล5ขึ้�อีม*ลขึ้อีง Dreamweaver 8 จะถ*กจ�ดเก บให�เป็�นไฟัล5ป็ระเภที่ html ให�อี�ต่โนม�ต่1 ค�าส��งที่��ใช้�ในการจ�ดเก บขึ้�อีม*ล สามารถเล�อีกใช้�ได�ด�งน�&ค�อี

o File>Save… จ�ดเก บไฟัล5โดยใช้�ช้��อีเด1ม o File>Save As… จ�ดเก บไฟัล5โดยใช้�ช้��อีใหม$ o File>Save as Template… จ�ดเก บเป็�นไฟัล5เที่มเพื่ลต่ o File>Save to Remote Server จ�ดเก บไว็�ที่�� Remote

Server o File>Save All จ�ดเก บที่/กไฟัล5ที่��เป็=ดใช้�งานอีย*$ o นอีกจากน�&ย�งสามารถใช้�แป็@นพื่1มพื่5 <Ctrl>+<S> แที่นการใช้�ค�าส��ง

File>Save… หร�อี File>Save As… ได�

การด*ผู้ลการอีอีบแบบบนบราว็เซึ่อีร5 การอีอีกแบบเว็ บเพื่จด�ว็ยโป็รแกรม Dreamweaver 8 ผู้*�อีอีกแบบคว็รที่�าการต่รว็จสอีบการแสดงผู้ลที่��เว็ บบราว็เซึ่อีร5 (Web Browser) ด�ว็ย เพื่ราะการแสดงผู้ลบางอีย$างไม$สามารถจะแสดงผู้ลใน Dreamweaver 8 ได� ส�าหร�บการด*ผู้ลที่��เว็ บบราว็เซึ่อีร5 (Browser) ที่�าได�ด�งน�&ค�อี

13

คล1กค�าส��ง File>Preview in Browser>iexplorer (หร�อีคล1กแป็@นพื่1มพื่5 <F12>)

จะป็รากฏิหน�าขึ้อีงเว็ บเพื่จในเว็ บบราว็เซึ่อีร5 (Web Browser) การเป็=ด (Open) ขึ้ &นมาแก�ไขึ้ เว็ บเพื่จที่��ได�อีอีกแบบย�งไม$เสร จหร�อีต่�อีงการที่�าการแก�ไขึ้ใหม$ สามารถเป็=ดเว็ บเพื่จน�&น ๆ ขึ้ &นมาแก�ไขึ้ได� ต่ามขึ้�&นต่อีนด�งน�& ค�อี

1. เร�ยกใช้�งานในส$ว็นขึ้อีง Group Panel จากน�&นให�คล1กเล�อีกช้��อีขึ้อีงเว็ บไซึ่ต่5ที่��ต่�อีงการแก�ไขึ้ขึ้ &นมา

2. ด�บเบ1ลคล1กช้��อีไฟัล5ป็ระเภที่ htm หร�อี html ที่��ต่�อีงการแก�ไขึ้ 3. ไฟัล5ที่��ต่�อีงการแก�ไขึ้จะป็รากฏิขึ้ &นมา

 

การแที่รกขึ้�อีคว็ามบนหน�าเว็ บเพื่จ การแที่รกขึ้�อีคว็าม และอี�กขึ้ระพื่1เศัษ และการจ�ดร*ป็แบบขึ้�อีคว็าม

การใส$ Title ห�ว็เร��อีงหร�อีไต่เต่1ล (Title) ขึ้อีงเว็ บเพื่จ ม�คว็ามส�าค�ญมาก เพื่ราะเป็�นขึ้�อีคว็ามที่��แสดงบนบราว็เซึ่อีร5เพื่��อีให�ผู้*�เขึ้�าช้มเว็ บไซึ่ต่5เขึ้�าใจว็$าเน�&อีหาในหน�าเว็ บเพื่จน�&นเก��ยว็ก�บเร��อีงใด นอีกจากน�&ย�งเป็�นขึ้�อีม*ลส�าค�ญที่�� Search Engine ใช้�ค�นหาเว็ บเพื่จอี�กด�ว็ย การใส$ห�ว็เร��อีงขึ้อีงเว็ บเพื่จสามารถที่�าได� 2 ว็1ธี�ด�งน�&ค�อี

14

การใส$ขึ้�อีคว็ามบนหน�าเว็ บ การแที่รกขึ้�อีคว็ามในหน�าเว็ บเพื่จ ผู้*�อีอีกแบบเพื่�ยงแต่$พื่1มพื่5ขึ้�อีคว็ามที่��ต่�อีงการลงไป็ หร�อีอีาจจะค�ดลอีก (Copy) ขึ้�อีคว็ามที่��พื่1มพื่5ไว็�เร�ยบร�อียแล�ว็จากไฟัล5อี��นมาใช้�ก ได� 1. การพื่1มพื่5ขึ้�อีคว็ามในหน�าเว็ บเพื่จ การพื่1มพื่5ขึ้�อีคว็ามในหน�าเว็ บเพื่จสามารถที่�าได�ง$าย โดยพื่1มพื่5ขึ้�อีคว็ามที่��ต่�อีงการ เม��อีต่�อีงการขึ้ &นบรรที่�ดใหม$ให�กดแป็@นพื่1มพื่5 หร�อีกดแป็@นพื่1มพื่5 พื่ร�อีมก�บ ในกรณ�ที่��ต่�อีงการให�ระยะบรรที่�ดไม$ห$างก�นมาก 2. การค�ดลอีกขึ้�อีคว็ามจากไฟัล5อี��นมาไว็�ในหน�าเว็ บเพื่จ เราสามารถค�ดลอีกขึ้�อีคว็ามที่��พื่1มพื่5ไว็�ด�ว็ยโป็รแกรมอี��น แล�ว็น�ามาว็างไว็�ในหน�าเว็ บเพื่จได� ซึ่ �งส$ว็นมากในการที่�าเว็ บไซึ่ต่5 ม�กจะน1ยมพื่1มพื่5ขึ้�อีคว็ามที่��ต่�อีงการเต่ร�ยมไว็�โดยใช้�โป็รแกรม Notepad แล�ว็เก บบ�นที่ กไว็�เป็�นแบบ Text File (ม�นามสก/ลเป็�น txt) โดยม�ว็1ธี�การด�งน�&ค�อี

เป็=ดไฟัล5ที่��เก บขึ้�อีคว็ามที่��ต่�อีงการขึ้ &นมา จากน�&นระบายขึ้�อีคว็ามที่��ต่�อีงการ

15

คล1กค�าส��ง Edit>Copy หร�อีกดแป็@นพื่1มพื่5 <Ctrl>+<C> เป็=ดหน�าขึ้อีงเว็ บเพื่จที่��อีอีกแบบด�ว็ยโป็รแกรม Dreamweaver 8

จากน�&นคล1กค�าส��ง Edit>Paste หร�อีกดแป็@นพื่1มพื่5 <Ctrl>+<V>

ขึ้�อีคว็ามที่��ค�ดลอีกมาจะแสดงในหน�าเว็ บเพื่จ 3. การเว็�นว็รรคระหว็$างขึ้�อีคว็าม การใส$ขึ้�อีคว็ามบนหน�าเว็ บเพื่จน�&น ป็กต่1แล�ว็โป็รแกรม Dreamweaver 8 จะเว็�นว็รรคให�เพื่�ยง 1 คร�&งเที่$าน�&น แต่$อีย$างไรก ต่ามเราสามารถที่��จะเว็�นว็รรคมากกว็$า 1 คร�&งได� โดย กดแป็@นพื่1มพื่5 <Ctrl>+<Shift>+<Space>

การจ�ดร*ป็แบบขึ้�อีคว็ามบนหน�าเว็ บ การจ�ดร*ป็แบบอี�กษรในงานอีอีกแบบเว็ บเพื่จด�ว็ยโป็รแกรม Dreamweaver 8 สามารถที่�าได�ด�งน�&ค�อี

1. ระบายขึ้�อีคว็ามที่��ต่�อีงการจ�ดร*ป็แบบอี�กษร 2. ก�าหนดค$าในส$ว็นขึ้อีงพื่าเนล Properties

การแที่รกต่�ว็อี�กษรพื่1เศัษ (Symbol) 1. การเพื่1�มระยะเว็�นว็รรคระหว็$างขึ้�อีคว็าม Dreamweaver 8 ก�าหนดให�เว็�นว็รรคระหว็$างขึ้�อีคว็ามได�เพื่�ยง 1 ช้$อีงเที่$าน�&น เม��อีต่�อีงการที่��จะให�ม�ระยะเว็�นว็รรคมากขึ้ &น จะต่�อีงใช้�ค�าส��งเพื่��อีเพื่1�มระยะการเว็�นว็รรค ซึ่ �งที่�าได�ด�งน�&ค�อี

ว็างเคอีร5เซึ่อีร5ในต่�าแหน$งที่��ต่�อีงการเพื่1�มระยะเว็�นว็รรค คล1กแถบ "Common" แล�ว็คล1กเล�อีกแถบ "Text" จากน�&นกดแป็@นพื่1มพื่5 <Ctrl>+<Shift>+<Space Bar>  หร�อี

คล1กเคร��อีงม�อี "BR" แล�ว็คล1กค�าส��ง "Non-Breaking Space"

16

2. การแที่รกส�ญล�กษณ5พื่1เศัษ ส�ญล�กษณ5พื่1เศัษที่��ไม$ม�ในแป็@นพื่1มพื่5 สามารถจะแที่รกเพื่1�มเต่1มได�จากแถบ Characters โดยที่�าได�ด�งน�&ค�อี

ว็างเคอีร5เซึ่อีร5ในต่�าแหน$งที่��ต่�อีงการแที่รกส�ญล�กษณ5พื่1เศัษ คล1กแถบ "Common" แล�ว็คล1กเล�อีกแถบ "Text" จากน�&นคล1กเคร��อีงม�อี "BR" แล�ว็คล1กเล�อีกส�ญล�กษณ5ต่ามต่�อีงการ

การใส$ว็�นที่�� การใส$ว็�นที่��ในหน�าเว็ บเพื่จ นอีกจากเพื่��อีต่�อีงการแสดงว็�นที่��แล�ว็ เราย�งสามารถก�าหนดร*ป็แบบว็�นที่�� พื่ร�อีมที่�&งก�าหนดให�ว็�นที่��ป็ร�บเป็ล��ยนต่ามว็�นได�อี�ต่โนม�ต่1ด�ว็ย โดยที่�าต่ามขึ้�&นต่อีนด�งน�&ค�อี

ว็างเคอีร5เซึ่อีร5ในต่�าแหน$งที่��ต่�อีงการแที่รกว็�นที่�� คล1กแถบ "Common" บน Insert Bar

จากน�&นคล1กเคร��อีงม�อี   จะป็รากฏิกรอีบให�ก�าหนดร*ป็แบบ ให�เล�อีกร*ป็แบบต่ามที่��ต่�อีงการแล�ว็คล1ก OK ถ�าต่�อีงการให�ว็�นที่��ป็ร�บเป็ล��ยนอี�ต่โนม�ต่1ให�คล1กเคร��อีงหมายถ*ก ที่��หน�าขึ้�อีคว็าม Update

Automatically on Save

การใส$เส�นค��นเน�&อีหา 1. การแที่รกเส�นแบ$งเน�&อีหา ม�ว็1ธี�การด�งน�&ค�อี

ว็างเคอีร5เซึ่อีร5ในต่�าแหน$งที่��ต่�อีงการแที่รกเส�น คล1กเล�อีกแถบ "HTML" บน Insert Bar

จากน�&นคล1กเคร��อีงม�อี 2. การป็ร�บแต่$งส�เส�น

คล1กที่��เส�นค��นที่��ต่�อีงการป็ร�บแต่$ง ก�าหนดค$าในส$ว็นขึ้อีงพื่าเนล Properties  ซึ่ �งป็ระกอีบด�ว็ย

o W ค�อีคว็ามยาว็ขึ้อีงเส�น ซึ่ �งจะเล�อีกก�าหนดเป็�นแบบพื่1กเซึ่ล หร�อี % ก ได� o H ค�อีคว็ามหนาขึ้อีงเส�น ค$าป็กต่1จะก�าหนดคว็ามหนาไว็�ที่�� 3 พื่1กเซึ่ล o Align ค�อีการจ�ดว็างเส�น จะเล�อีกแบบช้1ดซึ่�าย กลาง ขึ้ว็า ก ได� o Shading ค�อีการก�าหนดให�เส�นเป็�นแบบเส�นที่ บหร�อีเส�นโป็ร$ง

17