บทที่ การใช้งานเครื่องมือใน Dreamweaver CS...

วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (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

ชื่อ อาจารย์ ดร. นัฐพงศ์ ส่งเนียม ตำแหน่ง อาจารย์


สาขาวิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏพระนคร

จากหน้าต่าง File ให้สร้างไฟล์ index.php ขึ้นมา ดังรูป

การค่า Encoding Ctrl + J

เลือก Title/Encoding

เลือก Thai (Windows)


กด OK ไป

จากน้ันไปตั้งค่า Font ในหน้าต่าง Code กด Ctrl + U


เลือก Font

เลือก Code View ก าหนดให้เป็น Font ทีใ่ช้ภาษาไทยได้ในหน้าต่าง Code


จะได้


ไปทีห่น้า Design

• การแทรก Table

o ทีเ่คร่ืองมือ Insert

o เลือก Table

o จะได้หน้าต่างดังนี ้


ROW : แถว

Column คอลัมน ์

Table Width คือความกว้าง มีหน่วยเป็น pixel หรือ %

Border Thikness ความหนาของเส้น ถ้าไม่ต้องการให้มี เส้น ก็ใส่ 0

Cell Padding คือ ระยะห่างของเส้นตารางกับข้อความ

Cell Spacing คือ ช่องว่าง หรือระยะห่างของเส้น

ให้ก าหนดตามรูปนี ้


กด OK จะได้

ตารางนีม้ี 3 แถว 1 คอลัมน ์ไม่มีเส้นตาราง


คลิกเมาสใ์นแต่ละแถว แล้ว กดแป้น Enter เพ่ือขยายความสูง คือการพิมพช์่องว่างเข้าไป

• การใส่สีในช่อง Cell

o เลือกช่องทีต่้องการ

o โดยใช้ Tag Selector


Tag Selector แถบทีใ่ช้ส าหรับ Tag HTML

<td> คือ Tag คอลัมน ์

<tr> คือ Tag ของแถว

<talbe> คือ ตาราง

<body> คือ ส่วนเนือ้หา

การใสส่ี ใหด้ใูนหนา้ต่าง Properties


ใส่สีพืน้หลังส าหรับช่อง Cell ใด ๆ

เลือกสีทีต่้องการ


การจดัต าแหน่งขอ้ความในช่อง Cell

เลือกช่อง Cell เลือก Propoerties Horz : Center

เลือกช่อง Cell เลือก Propoerties Vert : Middle

ให้แทรก ตารางลงในช่อง Cell บนสุด


จะได้

จากน้ันพิมพข์้อความลงในแต่ช่อง Cell


หน้าแรก ข่าว/กิจกรรม ระบบทะเบียนบุคคล ระบบเงินเดือน/โอที การพัฒนาบุคลากร ระบบภาษี ระบบการลา ติดต่อเรา

หากต้องการปรับคอลัมน ์หรือแถว ให้เลือกตาราง ดังรูป

ปรับจ านวนคอลัมน ์หรือแถว ตามต้องการ เป็น 1แถว , 8 คอลัมน ์

การปรับความสูงของช่อง Cell ใด ๆ เลือก ช่อง Cell น้ัน ๆ ทีต่้องการ

ก าหนด Height H ในหน้าต่าง Properties


ให้พิมพข์้อความส าหรับท า Link ในช่อง Cell ด้านล่างดังนี ้


ท า Link ดังนี ้

ลากเมาสค์ลุมข้อความทีต่้องการ

ก าหนด Link ในหน้าต่าง Properties

PNRU : http://www.pnru.ac.th


ยังไม่ Start Service


แทรกตาราง 1 แถว 2 คอลัมน ์

แทรกรูป และ ข้อความดังนี ้

การสร้าง ไฟล ์หน้าอื่น ๆ

- ข่าว /กิจกรรม News.php หรือ news.html

- ระบบทะเบียนบุคคล Personal_record.php

- ระบบงานเงนิเดือน/โอท ี Payrolls.php

- ระบบการลา - ระบบภาษี - ระบบฯลฯ

Save as จากไฟลเ์ดิม


การเพ่ิมแถวโดยการกด แป้น TAB

คลิกไปในช่อง Cell ใด แล้วกดแป้น TAB ไปเร่ือย ๆ จะได้แถวต่อท้ายจากของเดิม ดังนี ้


การเว้นช่องว่างใน 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


POINT TO File


- Link ภายในเว็บไซต ์

- Link ระหว่างเว็บไซต ์

- Link ภายในเพจเดียวกัน


หนา้ทะเบียนบคุคล Personal_Record.php


การลบแถว ถ้าไม่ต้องการแถวใด หรือต้องการลบออกไป

- คลิกเมาสข์วา - เลือก Table

- เลือก Delete Row

ทะเบียนประวติั


แทรก ตาราง 1 แถว 4 คอลัมน ์

แล้วพิมพ ์ข้อความดังนี ้


โดยปกติ เราจะบันทกึ ข้อมูลประวัติพนักงานลงฐานข้อมูล

จะมี ตาราง

- ประวัติพนักงาน

- ประวัติการลา

- ประวัติการศึกษา

- ประวัติการท างาน

TbEmployee

รหสัพนกังาน ค าน าหนา้ ชื่อ นามสกลุ เพศ ต าแหน่ง เบอรโ์ทร ที่อยู่ รูป ... Emp000001

Data Dictionary


ทะเบียนบุคคล

1. รับสมัคร

2. ก าหนดต าแหน่ง / ก าหนดเงนิเดือน

3. เล่ือนขั้น

4. อบรม

5. ลา

6. ให้พ้นต าแหน่ง

7. ลาออก

Save as เป็นไฟลช์ื่อ Personal_Record_Person_dep.php เป็นหน้ารายชื่อพนักงานฝ่ายบุคคล

Save as เป็นไฟลช์ื่อ Personal_Record_Account_dep.php เป็นหน้ารายชื่อพนักงานฝ่ายบัญชี

บทที่ การใช้งานเครื่องมือใน Dreamweaver CS...

Documents

Transcript of บทที่ การใช้งานเครื่องมือใน Dreamweaver CS...