tag:blogger.com,1999:blog-64931222558598616872024-02-20T10:40:48.990-08:00บทที่6การออกแบบเเละพัฒนาเว็บไซต์http://www.blogger.com/profile/09284739676133932227noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-6493122255859861687.post-58341608117848419572019-02-25T06:07:00.004-08:002019-02-25T06:10:01.272-08:00<h3 align="left" id="sites-page-title-header" style="background-color: white; color: #b0b366; font-family: Impact, fantasy; margin: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;" xmlns="http://www.w3.org/1999/xhtml">
<span dir="ltr" id="sites-page-title" style="outline: none;" tabindex="-1"><span style="font-size: large;">การเปิดใช้งาน Adobe Dreamweaver CS</span></span></h3>
<h3 align="left" id="sites-page-title-header" style="background-color: white; color: #b0b366; margin: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;" xmlns="http://www.w3.org/1999/xhtml">
<div class="sites-canvas-main" id="sites-canvas-main" style="background-image: none !important; color: #444444; font-size: 13.3333px; font-weight: 400; min-height: 150px; overflow: hidden; padding-bottom: 5px; padding-top: 15px;">
<div id="sites-canvas-main-content">
<table cellspacing="0" class="sites-layout-name-one-column sites-layout-hbox" style="margin: 0px; table-layout: fixed; width: 1030px;" xmlns="http://www.w3.org/1999/xhtml"><tbody>
<tr><td class="sites-layout-tile sites-tile-name-content-1" style="padding: 10px; vertical-align: top;"><div dir="ltr">
<div style="line-height: normal; margin-bottom: 0px; margin-top: 0px;">
<span style="font-size: medium;"><span style="color: black; font-family: "tahoma"; font-size: large;"> </span><span lang="TH" style="color: #444444; font-family: "th sarabunit๙" , sans-serif;">เมื่อต้องการเข้าสู่้โปรแกรม
</span><span style="color: #444444; font-family: "th sarabunit๙" , sans-serif;">Adobe Dreamweaver CS6 </span></span><br />
<span style="font-size: medium;"><span style="color: #444444; font-family: "th sarabunit๙" , sans-serif;"><span lang="TH"> เพื่อเปิดใช้งาน มีขั้นตอนดังนี้ (ระบบปฏิบัติการ </span>Windows XP)</span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "th sarabunit๙" , "sans-serif"; font-size: 18.0pt;"> </span><br />
<span style="font-family: "th sarabunit๙" , "sans-serif"; font-size: 18.0pt;"> </span><img src="http://www.kruwan-d.info/images/201.jpg" height="229" style="color: #444444; font-size: 13.3333px;" width="320" /> </div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: normal; margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;">
<span style="color: black; font-family: "th sarabunit๙" , sans-serif; font-size: 18pt;"> </span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: small; font-weight: normal;"><span style="color: black;">1. <span lang="TH">คลิกที่ปุ่ม </span>Start</span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: small; font-weight: normal;"><span style="color: black;"> 2. <span lang="TH">คลิก </span>Programs <span lang="TH">หรือ </span>All Programs</span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: small; font-weight: normal;"><span style="color: black;"> 3. <span lang="TH">เลือก </span>Adobe Dreamweaver CS6</span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: small; font-weight: normal;"><span style="color: black;"> 4. <span lang="TH">จะปรากฏหน้าต่าง </span>Welcome Screen <span lang="TH">ก่อนการเข้าสู่หน้าโปรแกรมหลัก
ซึ่งแต่ละส่วนมีรายละเอียด ดังนี้</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: small; font-weight: normal;"><span style="color: black;"><span lang="TH"><br /></span></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;">
<img src="http://www.kruwan-d.info/images/202.jpg" height="204" width="320" /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;">
<o:p><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: small; font-weight: normal;"> </span></o:p><span style="color: black; font-family: "th sarabunit๙" , sans-serif; font-size: 18pt;"> </span><span style="color: #ff6600; font-family: "th sarabunit๙" , sans-serif; font-size: 18pt;"> </span><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-weight: normal;"><span style="font-size: small;"><span style="color: black;">1.</span><span style="color: #ff6600;"> Open a Recent Item</span><span style="color: black;"> : <span lang="TH">แสดงชื่อเว็บเพจที่เคยใช้งานมาแล้ว
หรือคลิกที่ปุ่ม </span>Open <span lang="TH">เพื่อค้นหาไฟล์ที่ต้องการ</span></span></span></span></span></div>
<br />
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span><span style="color: #ff6600;"> </span><span style="color: black;">
2.</span><span style="color: #ff6600;"> Create New</span><span style="color: #ff6600;"> </span><span style="color: black;">: <span lang="TH">เป็นการสร้างไฟล์งานใหม่ เช่น </span>HTML,
ColdFusion, PHP, ASP, JavaScript <span lang="TH">เป็นต้น</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span><span style="color: blue;">
- HTML</span><span style="color: black;"> : <span lang="TH">สร้างหน้าเว็บธรรมดา
เหมาะสำหรับผู้เริ่มต้นสร้างเว็บ</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span><span style="color: blue;">
- ColdFusion </span><span style="color: black;">: <span lang="TH">สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์
</span>ColdFusion</span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span><span style="color: blue;"> - PHP</span><span style="color: black;"> : <span lang="TH">สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่งเซิร์ฟเวอร์
</span>PHP</span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span><span style="color: blue;"> - CSS</span><span style="color: black;"> : <span lang="TH">สร้างไฟล์เก็บรูปแบบตัวอักษร
ตาราง สีพื้นหลัง เพื่อนำไปใช้ในทุก ๆ หน้าเว็บเพจ</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span><span style="color: blue;"> - JavaScript</span><span style="color: black;"> : <span lang="TH">สร้างไฟล์สคริปต์ที่ทำงานฝั่งไคลเอนต์
และทำงานที่เครื่องของผู้เข้าชมเว็บไซต์</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span><span style="color: blue;">
- Dreamweaver Site</span><span style="color: black;"> : <span lang="TH">สร้างเว็บไซต์ใหม่</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
3. </span><span style="color: #ff6600;">Top Features (Videos)</span><span style="color: black;"> : <span lang="TH">เข้าสู่หน้าเว็บ </span>Adobe
TV <span lang="TH">ดูวีดิโอสาธิตการใช้งาน</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="color: black; font-family: "th sarabunit๙" , "sans-serif"; font-size: 18.0pt;"> </span><span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"><span lang="TH">ส่วนประกอบของโปรแกรม </span>Adobe Dreamweaver CS6 <span lang="TH">มีองค์ประกอบ
ดังนี้</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
</div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: normal; margin-bottom: 0.0001pt;">
<img src="http://www.kruwan-d.info/images/203.jpg" height="174" width="320" /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="color: black; font-family: "th sarabunit๙" , "sans-serif"; font-size: 18.0pt;"> </span><span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> </span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;"> 1. </span><span style="color: #ff6600;">Menu bar</span><span style="color: black;"> <span lang="TH">เป็นแถบรวบรวมคำสั่งทั้งหมดของโปรแกรม</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
- </span><span style="color: blue;">Code</span><span style="color: black;"> <span lang="TH">สำหรับแสดงการทำงานในรูปแบบ </span>HTML
<span lang="TH">นอกจากนี้ยังสามารถเขียนคำสั่ง </span>HTML <span lang="TH">หรือคำสั่งภาษาสคริปต์
(</span>Script) <span lang="TH">อื่นๆ ได้ด้วย</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
- </span><span style="color: blue;">Split</span><span style="color: black;"> <span lang="TH">สำหรับแสดงการทำงานแบบ </span>HTML
<span lang="TH">กับการแสดงพื้นที่ออกแบบ โดยจะแสดงส่วนของคำสั่ง
ไว้ด้านบนและแสดงเว็บเพจปกติไว้ ด้านล่าง</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
- </span><span style="color: blue;">Design</span><span style="color: black;"> <span lang="TH">สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์
เช่น ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
- </span><span style="color: blue;">Title</span><span style="color: black;"> <span lang="TH">สำหรับแสดงชื่อของเว็บเพจ
ในส่วนของแถบหัวเรื่อง</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
2. </span><span style="color: #ff6600;">Toolbar</span><span style="color: black;"> <span lang="TH">เป็นแถบรวบรวมคำสั่งที่ใช้งานบ่อยๆ</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
3. </span><span style="color: #ff6600;">Document Windows</span><span style="color: black;"> <span lang="TH">เป็นพื้นที่สำหรับสร้างหน้าเว็บเพจ
และสามารถเลือกพื้นที่การทำงานได้หลายมุมมอง เช่น</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
- Code View <span lang="TH">สำหรับแสดงการทำงานในรูปแบบ </span>HTML <span lang="TH">นอกจากนี้ยังสามารถเขียนคำสั่ง
</span>HTML <span lang="TH">หรือคำสั่งภาษาสคริปต์ (</span>Script) <span lang="TH">อื่นๆ
ได้ด้วย</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
- Code and Design <span lang="TH">สำหรับแสดงการทำงานแบบ </span>HTML <span lang="TH">กับการแสดงพื้นที่ออกแบบ โดยด้านบนจะแสดงส่วนของคำสั่ง และด้านล่างแสดงเว็บเพจปกติไว้</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
- Design View <span lang="TH">สำหรับแสดงเว็บเพจคล้ายกับที่เราเห็นในบราวเซอร์ เช่น
ข้อความ กราฟิก หรือออปเจ็กต์อื่นๆ และสามารถแก้ไขเนื้อหาลงเว็บเพจได้</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
4. </span><span style="color: #ff6600;">Status bar</span><span style="color: black;"> <span lang="TH">เป็นแถบแสดงสถานะ
ซึ่งประกอบด้วย </span>2 <span lang="TH">ส่วน คือ ทางด้านซ้ายเรียกว่า </span>Tag
Selector <span lang="TH">ใช้สำหรับแสดงคำสั่ง </span>HTML <span lang="TH">ของส่วนประกอบในเว็บเพจที่เลือกอยู่
และทางด้านขวาเป็นส่วนที่บอกขนาดหน้าจอการแสดงผลและเวลาที่ใช้ในการดาวน์โหลดเว็บเพจ</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black;">
5. </span><span style="color: #ff6600;">Properties Inspector</span><span style="color: black;"> <span lang="TH">เป็นส่วนที่กำหนดคุณสมบัติต่าง
ๆ ในการปรับแต่งองค์ประกอบของหน้าเว็บเพจ</span></span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<br /></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black; line-height: 107%;">
6. </span><span style="color: #ff6600; line-height: 107%;">Insert Bar</span><span style="color: black; line-height: 107%;"> <span lang="TH">เป็นแถบที่ประกอบด้วยปุ่มคำสั่งที่ใช้ในการแทรกออบเจ็กต์
(องค์ประกอบต่างๆ) ลงในเว็บเพจ โดยแบ่งเป็น</span></span></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small; font-weight: normal;"><span style="color: black; line-height: 107%;"><span lang="TH"><br /></span></span></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: normal; margin-bottom: 0.0001pt;">
<img src="http://www.kruwan-d.info/images/204.jpg" height="173" width="320" /></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: normal; margin-bottom: 0.0001pt;">
<br /></div>
</h3>
การออกแบบเเละพัฒนาเว็บไซต์http://www.blogger.com/profile/09284739676133932227noreply@blogger.com