ห้องเรียน ม.3

 

 

 

icon-newข้อสอบ
ใบความรู้เรื่อง เริ่มต้นใช้งานด้วยโปรแกรม
Adobe Dreamweaver CS6
การเปิดโปรแกรม
วิธีที่ 1 คลิก start -> All Programs -> Adobe Dreamweaver CS6ดังตัวอย่างด้านล่าง
วิธีที่ 2 ดับเบิลคลิกไอคอน    p3  ที่หน้าจอ Desktop
p4

ส่วนประกอบของ welcome screen
หลังจากเปิดโปรแกรมขึ้นมาจะปรากฏหน้าต่าง welcome screen ซึ่งแบ่งออกเป็น 3 กลุ่มหลัก
ดังภาพด้านล่าง ดังนี้
p2
A. เปิดไฟล์งานเก่าที่เคยเรียกใช้งาน(open a recent ltem)
B. สร้างงานใหม่ (create new) ใช้สำหรับสร้างไฟล์งานใหม่ ซึ่งสามารถเลือกสร้างไฟล์งานได้หลายชนิด ไม่ว่าจะเป็น ไฟล์ html, php, asp,หรือJavaScript
C. สร้างงานสำเร็จรูป (create from samples) สร้างเว็บเพจใหม่โดยใช้ไฟล์ตัวอย่าง ที่โปรแกรมจัดเตรียมเอาไว้ให้ หรือที่เรียกกันว่า เทมเพลท (template) มีให้เลือกใช้มากมายหลายประเภท
ส่วนประกอบหน้าจอโปรแกรมAdobe Dreamweaver CS6p1
1. แถบเมนูหลัก (Menu bar) เป็นแถบรวมรวมคำสั่งทั้งหมดของโปรแกรม โดยแบ่งคำสั่งทั้งหมดออกเป็นหมวดหมู่ตามลักษณะของการใช้งาน
2. แถบเครื่องมือ (Insert Bar) เป็นแหล่งรวมเครื่องมือซึ่งใช้ในการวางออบเจ็กต์ชนิดต่าง ๆ ลงบนหน้าเว็บเพจ เช่น ข้อความ รูปภาพ ลิงค์ รูปเคลื่อนไหว เป็นต้น โดยจะแบ่งเป็นกลุ่มคำสั่งเพื่อให้ใช้งานได้สะดวก
ซึ่งจะประกอบด้วยกลุ่มคำสั่งดังนี้
–          Common ใช้วางออบเจ็กต์ที่ต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟล์มัลติมีเดีย เป็นต้น
–          Layout ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP element
(หรือเลเยอร์)
–          Forms ใช้วางออบเจ็กต์ที่ใช้ในการสร้างแบบฟร์อมรับข้อมูล เช่น ช่องรับข้อความ ปุ่มตัวเลือกต่าง ๆ เป็นต้น
–          Data ใช้วางคำสั่งที่ใช้การจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ
–          Saryใช้วางออบเจ็กต์ที่ใช้เทคโนโลยีของ Ajax
–          jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ jQuery
–          InContextEdtingใช้สร้างออบเจ็กต์ที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้
–          Text ใช้สำหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษรและข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัวหน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (Dollar) © (Copyright) เป็นต้น
–          Favorites เป็นกลุ่มที่สามารถเพิ่มปุ่มคำสั่งที่ใช้บ่อยจากกลุ่มอื่น ๆ เข้ามาเก็บไว้ใช้งานเอง เพื่อความสะดวกในการใช้งาน
3. พื้นที่สร้างงาน (Document area)เป็นส่วนที่ใช้สร้างหน้าเว็บเพจ ใส่เนื้อหา และองค์ประกอบต่าง ๆของเว็บเพจ ซึ่งสามารถเลือกเปิดพื้นที่สร้างงานได้ด้วยกัน 4มุมมอง
–          มุมมองออกแบบ (Design View)ใช้แก้ไขและจัดวางเนื้อหาต่าง ๆ ลงบนเว็บเพจ
–          มุมมองโค้ด (Code View) ใช้สำหรับเปิดดูคำสั่งต่าง ๆ เช่น HTML PHP ASP และ JSP และสามารถแก้ไขคำสั่งต่าง ๆ ได้ตามต้องการ
–          มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) แสดงทั้งแบบมุมมองออกแบบ และมุมมองโค้ดพร้อมกัน สามารถปรับขนาดพื้นที่ของแต่ละส่วนได้โดยคลิกลากที่เส้นแบ่งระหว่างทั้ง 2 ส่วนนี้
–          มุมมองแสดงเว็บเพจเหมือนดูบนเบราเซอร์ (Live View) แสดงหน้าเว็บเพจเหมือนดูบนเบราเซอร์ทั้งในส่วนของ JavaScript และ Plugin
4. หน้าต่าง properties inspector เป็นหน้าต่างเล็ก ๆ ที่อยู่ด้านล่างสุดของหน้าจอโปรแกรม เป็นส่วนที่ใช้งานมากที่สุด เนื่องจากเป็นส่วนที่ใช้กำหนดคุณสมบัติสำคัญ ๆ ของออบเจ็กต์ที่วางในหน้าเว็บเพจ เช่น ตำแหน่ง ขนาด และสี
5. กลุ่มหน้าต่างพาเนล (Panels) เป็นหน้าต่างเล็ก ๆ ที่รวบรวมเครื่องมือไว้เป็นกลุ่มตามหน้าที่ที่เกี่ยวข้อง ทำให้ใช้งานได้สะดวกขึ้น
6. แถบสถานะ (Status Bar) เป็นแถบที่อยู่ทางด้านล่างของหน้าต่าง ๆ Document ประกอบด้วย 2 ส่วน คือ ด้านซ้ายเป็น  Tag Selector ส่วนด้านขวาเป็นเครื่องมือต่าง ๆ
หลักสำคัญก่อนการสร้างเว็บเพจ
1. เลือกรูปแบบพื้นที่ทำงาน (Workspace) ให้เหมาะสม
2. จัดการกับหน้าต่างไฟล์
3. เตรียมโฟลเดอร์สำหรับสร้างเว็บไซต์
4. สร้าง Define Site เพื่อจัดระบบให้ข้อมูล
การบันทึกเว็บเพจ
1. คลิกเลือกคำสั่ง File – > Save (หรือกดคีย์ลัด Ctrl+S)
– ถ้าต้องการบันทึกเว็บเพจเดิมให้เป็นชื่อใหม่ เลือกคำสั่ง Save As
– ถ้าต้องการบันทึกเว็บเพจทั้งหมดที่เปิดใช้งานอยู่ เลือกคำสั่ง Save All
2. เปิดเข้าไปยังโฟลเดอร์หลักที่จัดเก็บเว็บไซต์และโฟลเดอร์ย่อยที่จะใช้เก็บไฟล์
3. ตั้งชื่อไฟล์ที่ต้องการ (กรณีหน้าแรกของเว็บไซต์ ต้องตั้งเป็น Index.html เท่านั้น นอกจากนั้นตั้งชื่อตามชนิดของไฟล์งาน)
4. เลือกประเภทไฟล์ที่จะบันทึกเป็น html
5. คลิกปุ่ม Save
ดังภาพ
p5

Line.baipak.blogspot29

001
clickhttps://docs.google.com/forms/d/119wDNVaddLTd2u5mK2vWnKYFn9L5ch7_yU9Fz1xZMa8/viewform?usp=send_form

raccoons-25024

Advertisements

One thought on “ห้องเรียน ม.3

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s