การเขียนเว็บเพจ

การเขี�ยน Web page ด้�วย Macromedia

Dreamwaver

บทนำ�ก่�อนำเข้�สู่��บทเรี�ยนำบทนำ�ก่�อนำเข้�สู่��บทเรี�ยนำ ก่รีเข้�ยนำ web page ด้�วยภษ html ในำสู่มั�ยก่�อนำ

เป็�นำเรี��องท��มั�ควมัย��งยก่ซั�บซั�อนำ ผู้��ท��จะพั�ฒนำนำ�%นำจ�เป็�นำต้�อง มั�ควมัรี��ควมัเชี่��ยวชี่ญ และใชี่�เวลในำก่รีท�ควมัเข้�ใจก่�บ

ค�สู่��งต้�ง ๆ มัก่มัย โป็รีแก่รีมั Macromedia Dreamwaver เป็�นำ

เครี��องมั�อชี่�วยในำก่รีพั�ฒนำ web page เป็�นำเรี��องง�ย เพั�ยงท�ควมัเข้�ใจก่�บว-ธี�ก่รีใชี่�ค�สู่��งผู้�นำก่รีคล-/ก่ mouse

เท�นำ�%นำ ท�นำก่0สู่มัรีถ เป็�นำ Webmaster ได้�อย�งสู่บย ๆ แต้�ก่รีท��จะพั�ฒนำ web page ให้�มั�ควมัสู่วยงมั

ได้�นำ�%นำ ข้4%นำอย��ก่�บท�ก่ษะและป็รีะสู่บก่รีณ์6ในำก่รีฝึ8ก่และทด้ลองท� ข้องต้�วท�นำเอง ย-�งท�นำลองท�มัก่ข้4%นำเท�ไรี ท�นำก่0จะสู่มัรีถ

พั�ฒนำ web page ได้�สู่วยงมัมัก่ข้4%นำเท�นำ�%นำ

องค6ป็รีะก่อบข้องรีะบบองค6ป็รีะก่อบข้องรีะบบคอมัพั-วเต้อรี6คอมัพั-วเต้อรี6

Hard ware

Soft ware

People ware

ควมัสู่�มัพั�นำธี6รีะห้ว�งองค6ป็รีะก่อบต้�ง ๆ ควมัสู่�มัพั�นำธี6รีะห้ว�งองค6ป็รีะก่อบต้�ง ๆในำรีะบบคอมัพั-วเต้อรี6ในำรีะบบคอมัพั-วเต้อรี6

Hardware

Software

ป็รีะโยชี่นำ6

Input Process

Output

Mouse

Keyboard

Scanner

Digital Camera

Touch screen

CPU

Monitor

Printer

LCD

Speaker

HardwareHardware

SoftwareSoftware

Operation Operation SoftwareSoftware

Aplication Aplication SoftwareSoftware

Utilities SoftwareUtilities Software

Windows 95 , 98 , ME , 2000 , XP , DOS , UNIX , NT , Linux

MS-Office , Photoshop , Dreamwaver , Soundforce , Winamp

Norton antivirus , Mcafee , DiskDoctor

PeoplewarePeopleware

User

Admin

TechnicalProgrammer

เครี�อข้�ยคอมัพั-วเต้อรี6เครี�อข้�ยคอมัพั-วเต้อรี6Computer NetworkComputer Network

ป็รีะเภทข้องเครี�อข้�ยป็รีะเภทข้องเครี�อข้�ยคอมัพั-วเต้อรี6คอมัพั-วเต้อรี6

LAN ( Local Area Network )

WAN ( Wide Area Network )

ภยในำองค6ก่รีภยในำองค6ก่รี

รีะห้ว�งองค6ก่รีรีะห้ว�งองค6ก่รี

องค6ป็รีะก่อบข้อง องค6ป็รีะก่อบข้อง Hardware Hardware ในำรีะบบเครี�อข้�ยในำรีะบบเครี�อข้�ย

คอมัพั-วเต้อรี6คอมัพั-วเต้อรี6Server : Data , InternetWorkStation or Client สู่ยสู่�ญญณ์ : ภยในำอครี ,ภยนำอก่อครี

อ�ป็ก่รีณ์6เชี่��อมัต้�อ : Lancard , Hub , Router

Work Station or Client

Server

Internet

Intranet Intranet Intranet

WANLAN

Extranet

จะเข้�สู่�� จะเข้�สู่�� internet internet ได้�ค�ณ์ต้�องได้�ค�ณ์ต้�อง มั�อะไรีบ�ง มั�อะไรีบ�ง ??

Computer

Modem : 56 k

Telephone : Direct

ISP : Loxinfo , A-net , CS

OptioOptionn

Video conference , Headphone , Microphone

ด้�นำก่รีสู่��อสู่รีต้-ด้ต้�อด้�นำก่รีสู่��อสู่รีต้-ด้ต้�อ ด้�นำก่รีด้�นำก่รีเรี�ยนำรี��เรี�ยนำรี��ด้�นำก่รีสู่�บค�นำข้�อมั�ลเพั��อก่รีค�นำคว�ด้�นำก่รีสู่�บค�นำข้�อมั�ลเพั��อก่รีค�นำคว� ด้�นำด้�นำก่รีบรี-ห้รีจ�ด้ก่รีก่รีบรี-ห้รีจ�ด้ก่รี

Compute

r

Modemสู่ย

โทรีศั�พัท6

ISP

Interner servic provider

สู่ยโทรีศั�พัท6

Modem

Compute

r

InterneInterner r

ServerServer

Webmast

er

Up load

Download

User

Interner Interner ServerServer

( Hostin( Hosting )g )

ก่รีเรี-�มัต้�นำใชี่�งนำโป็รีแก่รีมั ก่รีเรี-�มัต้�นำใชี่�งนำโป็รีแก่รีมัMacromedia Dreamwaver 4Macromedia Dreamwaver 4

คล-/ก่ซั�ยท�� Start button จก่นำ�%นำเล��อนำmouse ไป็ท��Programs >> Macromedia Dreamwaver 4 >> Dreamwaver 4 คล-/ก่ซั�ยเพั��อเข้�สู่��โป็รีแก่รีมั

ห้นำ�จอเรี-�มัต้�นำใชี่�งนำโป็รีแก่รีมัห้นำ�จอเรี-�มัต้�นำใชี่�งนำโป็รีแก่รีมั

Title Bar

Menu Bar

Remote Site Area Local Folder Area

ก่รีสู่รี�ง ก่รีสู่รี�ง File File ให้มั� สู่�ห้รี�บเรี-�มัต้�นำ ให้มั� สู่�ห้รี�บเรี-�มัต้�นำ ก่รีสู่รี�ง ก่รีสู่รี�ง Web pageWeb page

คล-/ก่ข้วเล�อก่ค�สู่��ง New file

File File ให้มั�ท��เก่-ด้ข้4%นำจะมั�สู่ก่�ลให้มั�ท��เก่-ด้ข้4%นำจะมั�สู่ก่�ล เป็�นำ เป็�นำ .html.html

File แรีก่ท��จะเป็�นำ Homepage ข้อง Website จะต้�%งชี่��อเป็�นำ index.html

ห้นำ�จอพัรี�อมัใชี่�งนำสู่�ห้รี�บก่รีห้นำ�จอพัรี�อมัใชี่�งนำสู่�ห้รี�บก่รี เข้�ยนำ เข้�ยนำ Web pageWeb page

ชี่��อ File พัรี�อมั location ข้อง File

คล-/ก่ท��นำ��เพั��อก่ล�บสู่��ห้นำ�จอจ�ด้ก่รีข้�อมั�ลในำ Web site

ก่รีใสู่� ก่รีใสู่� Frames Frames ในำ ในำ Web pageWeb page

เล�อก่ล�ก่ษณ์ะข้อง Frames ท��ต้�องก่รี

ก่รีใสู่� ก่รีใสู่� Frames Frames ในำ ในำ Web page Web page ( ( ต้�อ ต้�อ ))

Frames บนำ

Frames ล�ง

ก่รีเป็ล��ยนำสู่�พั�%นำห้ล�งในำ ก่รีเป็ล��ยนำสู่�พั�%นำห้ล�งในำ Web Web pagepage

คล-/ก่ข้วในำ Framesท��ต้�องก่รีเป็ล��ยนำสู่�พั�%นำห้ล�ง

จก่นำ�%นำเล�อก่ค�สู่��ง Page Propeties

ก่รีเป็ล��ยนำสู่�พั�%นำห้ล�งในำ ก่รีเป็ล��ยนำสู่�พั�%นำห้ล�งในำ Web Web page ( page ( ต้�อ ต้�อ ))

เล�อก่สู่�ท��ต้�องก่รี

ก่รีเป็ล��ยนำ ก่รีเป็ล��ยนำ Font Font ต้�วอ�ก่ษรีในำ ต้�วอ�ก่ษรีในำWeb pageWeb page

ข้�อสู่�ค�ญ ค�อ ต้�อง Hi light ข้�อควมัท��ต้�องก่รีแก่�ไข้ก่�อนำเสู่มัอ

ก่รีเป็ล��ยนำสู่�ต้�วอ�ก่ษรีในำ ก่รีเป็ล��ยนำสู่�ต้�วอ�ก่ษรีในำ Web Web pagepage

ข้�อสู่�ค�ญ ค�อ ต้�อง Hi light ข้�อควมัท��ต้�องก่รีแก่�ไข้ก่�อนำเสู่มัอ

ก่รีเป็ล��ยนำสู่�ต้�วอ�ก่ษรีในำ ก่รีเป็ล��ยนำสู่�ต้�วอ�ก่ษรีในำ Web Web page ( page ( ต้�อ ต้�อ ))

เล�อก่สู่�ท��ต้�องก่รีจก่นำ�%นำClick ท�� ป็�;มั OK

ก่รีต้�%งค�รี�ป็แบบต้�วอ�ก่ษรีในำ ก่รีต้�%งค�รี�ป็แบบต้�วอ�ก่ษรีในำ Web Web pagepage

ให้�เล�อก่ท�� Preformatted Text เพั��อท�ให้�สู่มัรีถจ�ด้ต้�แห้นำ�งอ�ก่ษรีได้�อย�งอ-สู่รีะ

ก่รีจ�ด้วงต้�แห้นำ�งต้�วอ�ก่ษรีในำ ก่รีจ�ด้วงต้�แห้นำ�งต้�วอ�ก่ษรีในำWeb pageWeb page

ข้�อสู่�ค�ญ ค�อ ต้�อง Hi light ข้�อควมัท��ต้�องก่รีแก่�ไข้ก่�อนำเสู่มัอ

ก่รีก่�ห้นำด้รี�ป็แบบพั-เศัษต้�วอ�ก่ษรีก่รีก่�ห้นำด้รี�ป็แบบพั-เศัษต้�วอ�ก่ษรี ในำ ในำ Web pageWeb page

ข้�อสู่�ค�ญ ค�อ ต้�อง Hi light ข้�อควมัท��ต้�องก่รีแก่�ไข้ก่�อนำเสู่มัอ

ก่รีก่�ห้นำด้ข้นำด้ต้�วอ�ก่ษรีในำ ก่รีก่�ห้นำด้ข้นำด้ต้�วอ�ก่ษรีในำ Web Web pagepage

ข้�อสู่�ค�ญ ค�อ ต้�อง Hi light ข้�อควมัท��ต้�องก่รีแก่�ไข้ก่�อนำเสู่มัอ

ก่รีท� ก่รีท� Links Links เชี่��อมัโยงรีะห้ว�ง เชี่��อมัโยงรีะห้ว�งWeb pageWeb page

ข้�อสู่�ค�ญ ค�อ ต้�อง Hi light ข้�อควมัท��

ต้�องก่รีท� links ก่�อนำ เสู่มัอ จก่นำ�%นำ

คล-/ก่ข้วเพั��อห้ค�สู่��ง

ก่รีท� ก่รีท� Links Links เชี่��อมัโยงรีะห้ว�ง เชี่��อมัโยงรีะห้ว�งWeb page ( Web page ( ต้�อ ต้�อ ))

เล�อก่ File ท�� ต้�องก่รี links ไป็ห้

ก่รีใสู่�รี�ป็ภพัลงในำ ก่รีใสู่�รี�ป็ภพัลงในำ Web pageWeb page

ข้�อสู่�ค�ญ ค�อ ก่�ห้นำด้ต้�แห้นำ�งท��ต้�องก่รีวงรี�ป็ภพัไว�ก่�อนำเสู่มัอ

ก่รีใสู่�รี�ป็ภพัลงในำ ก่รีใสู่�รี�ป็ภพัลงในำ Web page Web page ( ( ต้�อ ต้�อ ))

เล�อก่แห้ล�งท��เก่0บรี�ป็ภพัท��ต้�องก่รีนำ�มั

ใสู่�ไว�ในำ Web page

ก่รีใสู่�รี�ป็ภพัลงในำ ก่รีใสู่�รี�ป็ภพัลงในำ Web page Web page ( ( ต้�อ ต้�อ ))

เล�อก่ต้�แห้นำ�งท��ต้�องก่รีจะจ�ด้เก่0บ

รี�ป็ภพัไว�ในำ Web site

ก่รีแก่�ไข้ข้นำด้รี�ป็ภพัในำ ก่รีแก่�ไข้ข้นำด้รี�ป็ภพัในำ Web Web pagepage

ใชี่�ว-ธี�ก่รีคล-/ก่mouse ซั�ยค�งแล�วลก่ป็รี�บข้นำด้ต้มัต้�องก่รี

ก่รีจ�ด้ต้�แห้นำ�งรี�ป็ภพัในำ ก่รีจ�ด้ต้�แห้นำ�งรี�ป็ภพัในำ Web Web pagepage

ข้�อสู่�ค�ญ ค�อ ต้�องคล-/ก่ซั�ยท��รี�ป็ภพัท��

ต้�องก่รีจ�ด้ต้�แห้นำ�งให้�Active ก่�อนำท�ก่ครี�%งเสู่มัอ

ก่รีใสู่�ต้รีงลงในำ ก่รีใสู่�ต้รีงลงในำ Web pageWeb page

ข้�อสู่�ค�ญ ค�อ ก่�ห้นำด้ต้�แห้นำ�งท��ต้�องก่รีวงต้รีงไว�ก่�อนำเสู่มัอ

ก่รีใสู่�ต้รีงลงในำ ก่รีใสู่�ต้รีงลงในำ Web page ( Web page ( ต้�อ ต้�อ ))

เล�อก่จ�นำวนำ Rows และ Columns

ต้มัท��ต้�องก่รี

ก่รีแก่�ไข้ข้นำด้ต้รีงในำ ก่รีแก่�ไข้ข้นำด้ต้รีงในำ Web Web pagepage

ใชี่�ว-ธี�ก่รีคล-/ก่mouse ซั�ยค�งแล�วลก่ป็รี�บข้นำด้ต้มัต้�องก่รี

ต้�วอย�งก่รีจ�ด้รี�ป็แบบในำ ต้�วอย�งก่รีจ�ด้รี�ป็แบบในำ Web Web pagepage

Frames บนำใชี่�ในำก่รีก่�ห้นำด้เมันำ�

ใสู่�รี�ป็ภพัในำต้รีง

พั-มัพั6 Text ท��มั�ก่รีเชี่��อมัโยง ไป็ย�ง page อ��นำ ๆ

ต้รีงท��ใชี่�ในำก่รีวงภพัและต้�วอ�ก่ษรี