Page 1
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (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
ชื่อ อาจารย์ ดร. นัฐพงศ์ ส่งเนียม ตำแหน่ง อาจารย์
Page 2
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
สาขาวิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏพระนคร
จากหน้าต่าง File ให้สร้างไฟล์ index.php ขึ้นมา ดังรูป
การค่า Encoding Ctrl + J
เลือก Title/Encoding
เลือก Thai (Windows)
Page 3
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
กด OK ไป
จากน้ันไปตั้งค่า Font ในหน้าต่าง Code กด Ctrl + U
Page 4
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
เลือก Font
เลือก Code View ก าหนดให้เป็น Font ทีใ่ช้ภาษาไทยได้ในหน้าต่าง Code
Page 5
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
จะได้
Page 6
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ไปทีห่น้า Design
• การแทรก Table
o ทีเ่คร่ืองมือ Insert
o เลือก Table
o จะได้หน้าต่างดังนี ้
Page 7
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
Page 8
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ROW : แถว
Column คอลัมน ์
Table Width คือความกว้าง มีหน่วยเป็น pixel หรือ %
Border Thikness ความหนาของเส้น ถ้าไม่ต้องการให้มี เส้น ก็ใส่ 0
Cell Padding คือ ระยะห่างของเส้นตารางกับข้อความ
Cell Spacing คือ ช่องว่าง หรือระยะห่างของเส้น
ให้ก าหนดตามรูปนี ้
Page 9
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
กด OK จะได้
ตารางนีม้ี 3 แถว 1 คอลัมน ์ไม่มีเส้นตาราง
Page 10
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
คลิกเมาสใ์นแต่ละแถว แล้ว กดแป้น Enter เพ่ือขยายความสูง คือการพิมพช์่องว่างเข้าไป
• การใส่สีในช่อง Cell
o เลือกช่องทีต่้องการ
o โดยใช้ Tag Selector
Page 11
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
Tag Selector แถบทีใ่ช้ส าหรับ Tag HTML
<td> คือ Tag คอลัมน ์
<tr> คือ Tag ของแถว
<talbe> คือ ตาราง
<body> คือ ส่วนเนือ้หา
การใสส่ี ใหด้ใูนหนา้ต่าง Properties
Page 12
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ใส่สีพืน้หลังส าหรับช่อง Cell ใด ๆ
เลือกสีทีต่้องการ
Page 13
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การจดัต าแหน่งขอ้ความในช่อง Cell
เลือกช่อง Cell เลือก Propoerties Horz : Center
เลือกช่อง Cell เลือก Propoerties Vert : Middle
ให้แทรก ตารางลงในช่อง Cell บนสุด
Page 14
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
จะได้
จากน้ันพิมพข์้อความลงในแต่ช่อง Cell
Page 15
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
หน้าแรก ข่าว/กิจกรรม ระบบทะเบียนบุคคล ระบบเงินเดือน/โอที การพัฒนาบุคลากร ระบบภาษี ระบบการลา ติดต่อเรา
หากต้องการปรับคอลัมน ์หรือแถว ให้เลือกตาราง ดังรูป
ปรับจ านวนคอลัมน ์หรือแถว ตามต้องการ เป็น 1แถว , 8 คอลัมน ์
การปรับความสูงของช่อง Cell ใด ๆ เลือก ช่อง Cell น้ัน ๆ ทีต่้องการ
ก าหนด Height H ในหน้าต่าง Properties
Page 16
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ให้พิมพข์้อความส าหรับท า Link ในช่อง Cell ด้านล่างดังนี ้
Page 17
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ท า Link ดังนี ้
ลากเมาสค์ลุมข้อความทีต่้องการ
ก าหนด Link ในหน้าต่าง Properties
PNRU : http://www.pnru.ac.th
Page 18
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ยังไม่ Start Service
Page 19
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
Page 20
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
แทรกตาราง 1 แถว 2 คอลัมน ์
แทรกรูป และ ข้อความดังนี ้
การสร้าง ไฟล ์หน้าอื่น ๆ
- ข่าว /กิจกรรม News.php หรือ news.html
- ระบบทะเบียนบุคคล Personal_record.php
- ระบบงานเงนิเดือน/โอท ี Payrolls.php
- ระบบการลา - ระบบภาษี - ระบบฯลฯ
Save as จากไฟลเ์ดิม
Page 21
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การเพ่ิมแถวโดยการกด แป้น TAB
คลิกไปในช่อง Cell ใด แล้วกดแป้น TAB ไปเร่ือย ๆ จะได้แถวต่อท้ายจากของเดิม ดังนี ้
Page 22
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (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
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
POINT TO File
Page 24
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
- Link ภายในเว็บไซต ์
- Link ระหว่างเว็บไซต ์
- Link ภายในเพจเดียวกัน
Page 25
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
หนา้ทะเบียนบคุคล Personal_Record.php
Page 26
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
การลบแถว ถ้าไม่ต้องการแถวใด หรือต้องการลบออกไป
- คลิกเมาสข์วา - เลือก Table
- เลือก Delete Row
ทะเบียนประวติั
Page 27
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
แทรก ตาราง 1 แถว 4 คอลัมน ์
แล้วพิมพ ์ข้อความดังนี ้
Page 28
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
โดยปกติ เราจะบันทกึ ข้อมูลประวัติพนักงานลงฐานข้อมูล
จะมี ตาราง
- ประวัติพนักงาน
- ประวัติการลา
- ประวัติการศึกษา
- ประวัติการท างาน
TbEmployee
รหสัพนกังาน ค าน าหนา้ ชื่อ นามสกลุ เพศ ต าแหน่ง เบอรโ์ทร ที่อยู่ รูป ... Emp000001
Data Dictionary
Page 29
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)
ทะเบียนบุคคล
1. รับสมัคร
2. ก าหนดต าแหน่ง / ก าหนดเงนิเดือน
3. เล่ือนขั้น
4. อบรม
5. ลา
6. ให้พ้นต าแหน่ง
7. ลาออก
Save as เป็นไฟลช์ื่อ Personal_Record_Person_dep.php เป็นหน้ารายชื่อพนักงานฝ่ายบุคคล
Save as เป็นไฟลช์ื่อ Personal_Record_Account_dep.php เป็นหน้ารายชื่อพนักงานฝ่ายบัญชี
Page 30
วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)