บทที่ 3 การใช้งานเครื่องมือใน 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 12. CSS 13. FORM 14. Bootstrap

ชื่อ อาจารย์ ดร. นัฐพงศ์ ส่งเนียม ตำแหน่ง อาจารย์ สาขาวิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏพระนคร


จากหน้าต่าง 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 เป็นหน้ารายช่ือพนักงานฝ่ายบัญชี

CSS คือ Cade Style Sheet

สคริปต์ หรือ แท็กสำหรับจัดการรูปแบบต่าง ๆ เอกสาร HTML

สำหรับ Dreamweaver จะใช้หน้าต่าง CSS Style สำหรับจัดการ CSS

All คือ CSS ทั้งหมดที่เคยทำไว้

Current ในไฟล์ปัจจุบัน

- CSS สามารถสร้างรูปแบบตัวอักษร เช่นสี พื้นหลัง ขนาด รูปแบบอักษร ฯลฯ

- CSS จัดรูปแบบของรูปภาพ


- CSS จัดการรูปแบบตารางได้ - CSS จัดการรูปแบบฟอร์มได้

การสร้าง CSS ใน Dreamweaver

1. ที่หน้าต่าง CSS Style (ถ้าไม่มีหน้าต่างปรากฏให้ไปท่ีเมนู window >> CSS Style)

2. คลิกเลือก ที่ All

3. ให้คลิกเมาส์ขวา จะมีเมนูย่อยปรากฏ ดังรูป

4. เลือก New… จะปรากฏหน้าต่างดังนี้


5. ตั้งชื่อ หากต้องการสร้างรูปแบบตัวอักษร ต.ย. .f1 (f :font)

6. ตรงด้านล่าง This document only หมายถึง Style จะถูกใช้เฉพาะในไฟล์ นี้เท่านั้น

7. กด OK จะปรากฏหน้าต่างดังนี้


จะเลือก font family และ font size และ color ดังนี้

จะได้ Style .f1

การนำ Style ไปใช้ 1. เลือกข้อความท่ีต้องการ

2. ในหน้าต่าง CSS ให้คลิกขวาที่ Style ที่ต้องการ

3. เลือก apply


การแก้ไข CSS ที่สร้าง ด้วยหน้าต่าง CSS Properties

วิธีที่ 2


1. เลือกข้อความ

2. ในหน้าต่าง Properties

3. กำหนด Class เป็น .f1

ลองสร้าง Style แบบท่ี 2

1. ในหน้าต่าง CSS

2. คลิกขวา 3. เลือก new..

1.


4. จะได้หน้าต่าง สร้าง CSS ขึ้นมา


5. แล้วกด OK จะได้หน้าต่างสำหรับกำหนด Style ดังรูป

6. กำหนด Style ดังรูป


นำ Style .f2 ไปใช้งาน

การไปดู CODE ของ Style ที่สร้างขึ้นมา



2. คลิกขวาที่ Style .f1

3. เลือก go to CODE

4. จะได้หน้าต่าง CODE

การสร้าง CSS Style ดังกล่าว จะใช้ได้เพียงไฟล์ปัจจุบันเท่านั้น หากเราต้องการ

นำไปใช้ในไฟล์อ่ืน ๆ ด้วย ต้องสร้างเป็นไฟล์ *.css ขึ้นมา ทำได้ดังนี้

การสร้าง ไฟล์ CSS Style เพื่อใช้สำหรับทุกหน้าเว็บ

1. สร้าง folder ขึ้นมาเพื่อแยกเก็บไฟล์ให้เป็นระบบ ชื่อ folder CSS


2. ในหน้าต่าง CSS คลิกขวา เลือก new…

3. จะปรากฏหน้าต่าง สร้าง CSS

4. ตรงด้านล่างให้เลือก new Style Sheet file


5. กด OK จะได้หน้าต่างในการ Save file CSS


เลือก folder CSS

6. ตั้ง ชื่อ css_style1.css


7. จะได้หน้าต่างให้กำหนด CSS Style


8. กด OK

9. จะได้ Style .f3 ใน CSS_Style1.css ดังรูป


การนำ Style .f3 ไปใช้ในหน้าเว็บอ่ืน ๆ


ในหน้า News.html ยังไม่มี Style ใด หากต้องการใช้ Style .f3 ต้องนำเข้า CSS มาก่อน

วิธีการ


2. คลิกขวา

3. เลือก Attach Style Sheet นำ Style_css1.css เข้ามา

ดังรูป


4. กด Browse... เพื่อเลือกไฟล์ Css_Style1.css

5. กด OK จะได้

การ COPY และ Paste Style


2. คลิกขวา Style ที่ต้องการ

3. เลือก COPY

4. ไปวางไว้ในตำแหน่งที่ต้องการ เช่น ในไฟล์ news.html

5. คลิกขวา เลือก Paste

COPY


PASTE


CSS Style กับ Table

1. ในหน้า CSS


2. คลิกขวา

3. เลือก New…

4. ตั้งชื่อ CSS … เป็น .tb1

5. กด OK

6. กำหนดรายละเอียดดังนี้ 7. สมมติ ใส่รูปเป็นพื้นหลังใน Table


Repeat


ต.ย. ต้องการทำให้ตาราง มีเส้น ดังรูป

ฟอร์ม กับการสมัครสมาชิก


1. ในหน้าต่าง Insert

2. เลือก Table

3. สร้างตารางขนาด 1 แถว 2 คอลัมน์ ความกว้าง 90%


4. กด OK

5. จะได้


<FORM> …Textfield , button ,radio button ,.. </FORM>

6. ตรง commond ในหน้าต่าง insert เลือก form


จะได้


7. แทรก Tag Form


8. แทรกตาราง ใน Tag Form (เส้นสีแดง) เพื่อจัดตำแหน่งของ object ต่าง ๆให้สวยงาม


9. กด OK


แทรก Text Field ดังรูป


<input name="TxtPWD" type="password" id="TxtPWD" value="รหัสผ่านใหม่" size="30" maxlength="16" />

วันเกิด

เลือก List Value

sDay sMount sYear


rMale , Male rFeMale , Female


btnRegis


Boostrap

เป็น Framework คือกรอบการทำงานที่ เป็นการรวบรวมจาวาสคริป เพื่อการออกแบบเว็บที่สวยงาม *** ไม่จำเป็นต้องใช้ Bootstrab

ไปที่เว็บไซต์ Bootstrap หรือ ไปเว็บตัวอย่างการใช้งาน w3Schools

*** ณ ตอนนี้เป็น Boostrap 4.0 วันที่ 07 ธ.ค. 2562


สามารถเรียกงาน Bootstrap ได้ วิธี 1. Download มาเป็นไฟล์ 2. เรียกใช้ผ่าทางเว็บ

ให้ไปท่ีเว็บ W3School

บทที่ 3 การใช้งานเครื่องมือใน dreamweaver cs...

Documents