บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS...
Transcript of บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS...
![Page 1: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/1.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
บทที่ 3
การใช้งานเครือ่งมือใน Dreamweaver CS เบื้องต้น วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
หัวข้อ 1. ส่วนประกอบของ Dreamweaver 2. การสร้าง Site 3. แนะนำหน้าต่าง CODE , DESIGN , SPLIT 4. การกำหนดค่าเบื้องต้นใน Dreamweaver 5. การใช้งานเคร่ืองมือ Insert 6. การใช้งานหน้าต่าง Properties 7. การจัดการข้อความ 8. การจัดการรูปภาพ 9. การสร้าง Link 10. การสร้างตาราง 11. การสร้างไฟล์ และ Save as 12. CSS 13. FORM 14. Bootstrap
ชื่อ อาจารย์ ดร. นัฐพงศ์ ส่งเนียม ตำแหน่ง อาจารย์ สาขาวิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏพระนคร
![Page 2: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/2.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
จากหน้าต่าง File ให้สร้างไฟล์ index.php ขึ้นมา ดังรูป
การค่า Encoding Ctrl + J
เลือก Title/Encoding
เลือก Thai (Windows)
![Page 3: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/3.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
กด OK ไป
จากนั้นไปตั้งค่า Font ในหน้าต่าง Code กด Ctrl + U
![Page 4: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/4.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
เลือก Font
เลือก Code View กำหนดให้เป็น Font ที่ใช้ภาษาไทยได้ในหน้าต่าง Code
![Page 5: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/5.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
จะได้
![Page 6: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/6.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ไปท่ีหน้า Design
• การแทรก Table
o ที่เครื่องมือ Insert
o เลือก Table
o จะได้หน้าต่างดังนี้
![Page 7: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/7.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
![Page 8: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/8.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ROW : แถว
Column คอลัมน์ Table Width คือความกว้าง มีหน่วยเป็น pixel หรือ %
Border Thikness ความหนาของเส้น ถ้าไม่ต้องการให้มี เส้น ก็ใส่ 0
Cell Padding คือ ระยะห่างของเส้นตารางกับข้อความ
Cell Spacing คือ ช่องว่าง หรือระยะห่างของเส้น
ให้กำหนดตามรูปนี้
![Page 9: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/9.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
กด OK จะได้
ตารางนี้มี 3 แถว 1 คอลัมน์ ไม่มีเส้นตาราง
![Page 10: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/10.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
คลิกเมาส์ในแต่ละแถว แล้ว กดแป้น Enter เพื่อขยายความสูง คือการพิมพ์ช่องว่างเข้าไป
• การใส่สีในช่อง Cell
o เลือกช่องท่ีต้องการ
o โดยใช้ Tag Selector
![Page 11: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/11.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
Tag Selector แถบท่ีใช้สำหรับ Tag HTML
<td> คือ Tag คอลัมน์ <tr> คือ Tag ของแถว
<talbe> คือ ตาราง
<body> คือ ส่วนเนื้อหา
การใส่สี ให้ดูในหน้าต่าง Properties
![Page 12: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/12.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ใส่สีพื้นหลังสำหรับช่อง Cell ใด ๆ
เลือกสีท่ีต้องการ
![Page 13: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/13.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การจัดตำแหน่งข้อความในช่อง Cell
เลือกช่อง Cell เลือก Propoerties Horz : Center
เลือกช่อง Cell เลือก Propoerties Vert : Middle
ให้แทรก ตารางลงในช่อง Cell บนสุด
![Page 14: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/14.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
จะได้
จากนั้นพิมพ์ข้อความลงในแต่ช่อง Cell
![Page 15: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/15.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
หน้าแรก ข่าว/กิจกรรม ระบบทะเบียนบุคคล ระบบเงินเดือน/โอที การพัฒนาบุคลากร ระบบภาษี ระบบการลา ติดต่อเรา
หากต้องการปรับคอลัมน์ หรือแถว ให้เลือกตาราง ดังรูป
ปรับจำนวนคอลัมน์ หรือแถว ตามต้องการ เป็น 1แถว , 8 คอลัมน์
การปรับความสูงของช่อง Cell ใด ๆ เลือก ช่อง Cell นั้น ๆ ที่ต้องการ
กำหนด Height H ในหน้าต่าง Properties
![Page 16: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/16.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ให้พิมพ์ข้อความสำหรับทำ Link ในช่อง Cell ด้านล่างดังนี้
![Page 17: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/17.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ทำ Link ดังนี้ ลากเมาส์คลุมข้อความท่ีต้องการ
กำหนด Link ในหน้าต่าง Properties
PNRU : http://www.pnru.ac.th
![Page 18: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/18.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ยังไม่ Start Service
![Page 19: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/19.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
![Page 20: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/20.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
แทรกตาราง 1 แถว 2 คอลัมน์ แทรกรูป และ ข้อความดังนี้
การสร้าง ไฟล์ หน้าอื่น ๆ
- ข่าว /กิจกรรม News.php หรือ news.html
- ระบบทะเบียนบุคคล Personal_record.php
- ระบบงานเงินเดือน/โอที Payrolls.php
- ระบบการลา - ระบบภาษ ี
- ระบบฯลฯ
Save as จากไฟล์เดิม
![Page 21: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/21.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การเพิ่มแถวโดยการกด แป้น TAB
คลิกไปในช่อง Cell ใด แล้วกดแป้น TAB ไปเรื่อย ๆ จะได้แถวต่อท้ายจากของเดิม ดังนี้
![Page 22: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/22.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การเว้นช่องว่างใน Dream …. Ctrl + Shift + Space Bar ( )
บันทีกไฟล์ข่าว ตามวันที่ Save as file News_24_11_2562.php Save as file News_23_11_2562.php Save as file News_22_11_2562.php
![Page 23: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/23.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
POINT TO File
![Page 24: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/24.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
- Link ภายในเว็บไซต์ - Link ระหว่างเว็บไซต์ - Link ภายในเพจเดียวกัน
![Page 25: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/25.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
หน้าทะเบียนบุคคล Personal_Record.php
![Page 26: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/26.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การลบแถว ถ้าไม่ต้องการแถวใด หรือต้องการลบออกไป
- คลิกเมาส์ขวา - เลือก Table
- เลือก Delete Row
ทะเบียนประวติั
![Page 27: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/27.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
แทรก ตาราง 1 แถว 4 คอลัมน์ แล้วพิมพ์ ข้อความดังนี้
![Page 28: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/28.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
โดยปกติ เราจะบันทึก ข้อมูลประวัติพนักงานลงฐานข้อมูล
จะมี ตาราง
- ประวัติพนักงาน
- ประวัติการลา
- ประวัติการศึกษา
- ประวัติการทำงาน
TbEmployee
รหัสพนักงาน คำนำหน้า ช่ือ นามสกลุ เพศ ตำแหน่ง เบอร์โทร ที่อยู่ รูป ... Emp000001
Data Dictionary
![Page 29: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/29.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ทะเบียนบุคคล
1. รับสมัคร
2. กำหนดตำแหน่ง / กำหนดเงินเดือน
3. เลื่อนขั้น
4. อบรม
5. ลา
6. ให้พ้นตำแหน่ง
7. ลาออก
Save as เป็นไฟล์ชื่อ Personal_Record_Person_dep.php เป็นหน้ารายช่ือพนักงานฝ่ายบุคคล
![Page 30: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/30.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
Save as เป็นไฟล์ชื่อ Personal_Record_Account_dep.php เป็นหน้ารายช่ือพนักงานฝ่ายบัญชี
CSS คือ Cade Style Sheet
สคริปต์ หรือ แท็กสำหรับจัดการรูปแบบต่าง ๆ เอกสาร HTML
สำหรับ Dreamweaver จะใช้หน้าต่าง CSS Style สำหรับจัดการ CSS
All คือ CSS ทั้งหมดที่เคยทำไว้
Current ในไฟล์ปัจจุบัน
- CSS สามารถสร้างรูปแบบตัวอักษร เช่นสี พื้นหลัง ขนาด รูปแบบอักษร ฯลฯ
- CSS จัดรูปแบบของรูปภาพ
![Page 31: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/31.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
- CSS จัดการรูปแบบตารางได้ - CSS จัดการรูปแบบฟอร์มได้
การสร้าง CSS ใน Dreamweaver
1. ที่หน้าต่าง CSS Style (ถ้าไม่มีหน้าต่างปรากฏให้ไปท่ีเมนู window >> CSS Style)
2. คลิกเลือก ที่ All
3. ให้คลิกเมาส์ขวา จะมีเมนูย่อยปรากฏ ดังรูป
4. เลือก New… จะปรากฏหน้าต่างดังนี้
![Page 32: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/32.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
5. ตั้งชื่อ หากต้องการสร้างรูปแบบตัวอักษร ต.ย. .f1 (f :font)
6. ตรงด้านล่าง This document only หมายถึง Style จะถูกใช้เฉพาะในไฟล์ นี้เท่านั้น
7. กด OK จะปรากฏหน้าต่างดังนี้
![Page 33: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/33.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
จะเลือก font family และ font size และ color ดังนี้
จะได้ Style .f1
การนำ Style ไปใช้ 1. เลือกข้อความท่ีต้องการ
2. ในหน้าต่าง CSS ให้คลิกขวาที่ Style ที่ต้องการ
3. เลือก apply
![Page 34: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/34.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การแก้ไข CSS ที่สร้าง ด้วยหน้าต่าง CSS Properties
วิธีที่ 2
![Page 35: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/35.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
1. เลือกข้อความ
2. ในหน้าต่าง Properties
3. กำหนด Class เป็น .f1
ลองสร้าง Style แบบท่ี 2
1. ในหน้าต่าง CSS
2. คลิกขวา 3. เลือก new..
1.
![Page 36: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/36.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
4. จะได้หน้าต่าง สร้าง CSS ขึ้นมา
![Page 37: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/37.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
5. แล้วกด OK จะได้หน้าต่างสำหรับกำหนด Style ดังรูป
6. กำหนด Style ดังรูป
![Page 38: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/38.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
นำ Style .f2 ไปใช้งาน
การไปดู CODE ของ Style ที่สร้างขึ้นมา
![Page 39: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/39.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
1. ในหน้าต่าง CSS
2. คลิกขวาที่ Style .f1
3. เลือก go to CODE
4. จะได้หน้าต่าง CODE
การสร้าง CSS Style ดังกล่าว จะใช้ได้เพียงไฟล์ปัจจุบันเท่านั้น หากเราต้องการ
นำไปใช้ในไฟล์อ่ืน ๆ ด้วย ต้องสร้างเป็นไฟล์ *.css ขึ้นมา ทำได้ดังนี้
การสร้าง ไฟล์ CSS Style เพื่อใช้สำหรับทุกหน้าเว็บ
1. สร้าง folder ขึ้นมาเพื่อแยกเก็บไฟล์ให้เป็นระบบ ชื่อ folder CSS
![Page 40: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/40.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
2. ในหน้าต่าง CSS คลิกขวา เลือก new…
3. จะปรากฏหน้าต่าง สร้าง CSS
4. ตรงด้านล่างให้เลือก new Style Sheet file
![Page 41: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/41.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
5. กด OK จะได้หน้าต่างในการ Save file CSS
![Page 42: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/42.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
เลือก folder CSS
6. ตั้ง ชื่อ css_style1.css
![Page 43: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/43.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
7. จะได้หน้าต่างให้กำหนด CSS Style
![Page 44: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/44.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
8. กด OK
9. จะได้ Style .f3 ใน CSS_Style1.css ดังรูป
![Page 45: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/45.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การนำ Style .f3 ไปใช้ในหน้าเว็บอ่ืน ๆ
![Page 46: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/46.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ในหน้า News.html ยังไม่มี Style ใด หากต้องการใช้ Style .f3 ต้องนำเข้า CSS มาก่อน
วิธีการ
1. ในหน้าต่าง CSS
2. คลิกขวา
3. เลือก Attach Style Sheet นำ Style_css1.css เข้ามา
ดังรูป
![Page 47: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/47.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
4. กด Browse... เพื่อเลือกไฟล์ Css_Style1.css
5. กด OK จะได้
การ COPY และ Paste Style
1. ในหน้าต่าง CSS
2. คลิกขวา Style ที่ต้องการ
3. เลือก COPY
4. ไปวางไว้ในตำแหน่งที่ต้องการ เช่น ในไฟล์ news.html
5. คลิกขวา เลือก Paste
COPY
![Page 48: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/48.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
PASTE
![Page 49: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/49.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
CSS Style กับ Table
1. ในหน้า CSS
![Page 50: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/50.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
2. คลิกขวา
3. เลือก New…
4. ตั้งชื่อ CSS … เป็น .tb1
5. กด OK
6. กำหนดรายละเอียดดังนี้ 7. สมมติ ใส่รูปเป็นพื้นหลังใน Table
![Page 51: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/51.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
Repeat
![Page 52: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/52.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ต.ย. ต้องการทำให้ตาราง มีเส้น ดังรูป
ฟอร์ม กับการสมัครสมาชิก
![Page 53: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/53.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
![Page 54: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/54.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
1. ในหน้าต่าง Insert
2. เลือก Table
3. สร้างตารางขนาด 1 แถว 2 คอลัมน์ ความกว้าง 90%
![Page 55: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/55.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
4. กด OK
5. จะได้
![Page 56: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/56.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
![Page 57: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/57.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
<FORM> …Textfield , button ,radio button ,.. </FORM>
6. ตรง commond ในหน้าต่าง insert เลือก form
![Page 58: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/58.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
จะได้
![Page 59: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/59.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
7. แทรก Tag Form
![Page 60: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/60.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
8. แทรกตาราง ใน Tag Form (เส้นสีแดง) เพื่อจัดตำแหน่งของ object ต่าง ๆให้สวยงาม
![Page 61: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/61.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
9. กด OK
![Page 62: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/62.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
แทรก Text Field ดังรูป
![Page 63: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/63.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
![Page 64: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/64.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
<input name="TxtFName" type="text" id="TxtFName" value="ชื่อ" size="30" maxlength="30" />
![Page 65: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/65.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
<input name="TxtLName" type="text" id="TxtLName" value="นามสกุล" size="30" maxlength="30" />
![Page 66: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/66.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
![Page 67: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/67.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
<input name="TxtPWD" type="password" id="TxtPWD" value="รหัสผ่านใหม่" size="30" maxlength="16" />
วันเกิด
เลือก List Value
sDay sMount sYear
![Page 68: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/68.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
rMale , Male rFeMale , Female
![Page 69: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/69.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
btnRegis
![Page 70: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/70.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
Boostrap
เป็น Framework คือกรอบการทำงานที่ เป็นการรวบรวมจาวาสคริป เพื่อการออกแบบเว็บที่สวยงาม *** ไม่จำเป็นต้องใช้ Bootstrab
ไปที่เว็บไซต์ Bootstrap หรือ ไปเว็บตัวอย่างการใช้งาน w3Schools
*** ณ ตอนนี้เป็น Boostrap 4.0 วันที่ 07 ธ.ค. 2562
![Page 71: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/71.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
สามารถเรียกงาน Bootstrap ได้ วิธี 1. Download มาเป็นไฟล์ 2. เรียกใช้ผ่าทางเว็บ
ให้ไปท่ีเว็บ W3School
![Page 72: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/72.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
![Page 73: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/73.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
![Page 74: บทที่ 3 การใช้งานเครื่องมือใน Dreamweaver CS เบื้องต้น · 2. การสร้าง Site 3. แนะนำหน้าต่าง](https://reader034.fdocuments.net/reader034/viewer/2022050608/5faf2010ee922f64a679c3dd/html5/thumbnails/74.jpg)
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)