บทที่ การใช้งาน dreamweaver cs...

วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)

บทที่ 2

การใช้งาน Dreamweaver CS เบื้องต้น วิชาโปรแกรมประยุกต์ด้านทะเบียนบุคคลและการจ่ายเงินเดือน (4123645)

หัวข้อ 1. ส่วนประกอบของ Dreamweaver 2. การสร้าง Site 3. แนะนำหน้าต่าง CODE , DESIGN , SPLIT 4. การกำหนดค่าเบื้องต้นใน Dreamweaver 5. การใช้งานเคร่ืองมือ Insert 6. การใช้งานหน้าต่าง Properties 7. การจัดการข้อความ 8. การจัดการรูปภาพ 9. การสร้าง Link 10. การสร้างตาราง

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


การเปิดใช้งานครั้งแรก จะปรากฏหน้าต่าง ให้เลือกค่าต่าง ๆ ก่อนเข้าสู่โปรแกรม

ส่วนประกอบหน้าต่างของโปรแกรม Adobe Dreamweaver

1


1. ส่วนประกอบหน้าต่างของโปรแกรม Adobe Dreamweaver

1. แถบเมน ู2. หน้าต่างต้อนรับ Welcome Screen 3. หน้าต่าง file 4. หน้าต่างคุณสมบัติ Properties Window

2 3

4


หน้าต่าง Welcome Screen 1. Open a Recent 2. Create New 3. Top Feature

ให้กด Create New HTML


2. การสร้าง Site ใน Dreamweaver

การกำหนดไซต์ (Site) มีความสำคัญมากในการทำเว็บด้วย Dreamweaver ไม่ว่าจะสร้างเว็บไซต์ใหม่ หรือ แก้ไขเว็บไซต์เก่าที ่เคยทำมาแล้ว การกำหนดไซต์เป็นขั ้นแรกของการทำเว็บด้วย Dreamweaver เป็นการกำหนดให้โปรแกรมทราบที่อยู่ของไฟล์ต่างของเว็บไซต์ที่เราทำไว้ ทำให้โปรแกรมสามารถดึงมาแก้ไขได้

เครื่องมือต่าง ๆ ของ Dreamweaver นั้นจะทำงานโดยอ้างอิง site ที่เรากำหนดทั้งหมด ถ้าไม่ได้กำหนด site ก็ทำให้เครื่องมือเหล่านั้นแทบจะหมดความหมายไปเลยทีเดียว สิ่งแรกที่เราจะต้องเข้าใจในการทำเว็บไซต์คือ ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่าง ๆ เช่น HTML หรือไฟล์ VDO ที่อยู่ในเว็บไซต์ จะถูกรวมอยู่ใน Folder เดียวเราจะเรียก Folder นั้นว่า local root folder

การสร้าง Site จะช่วยใช้สำหรับการทำงานอย่างมีระบบ

โดยสามารถ


- จัดการโฟลเดอร์ - จัดการไฟล์ - อัพโหลด / ดาวน์โหลด กรณีที่ทำการเชื่อมต่อ กับ Host หรือ Server - ทดสอบการทำงาน Server Side Script / Server Side Technology - การทำ Link (Point to File)

ขั้นตอนการกำหนด site มีดังนี้ 1. ไปที่เมนู Site 2. เลือก New Site

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


4. Site Name คือ ชื่อของ Site โดยสามารถตั้งชื่อ Site ได้ตามต้องการ ในที่นี้ให้ตั้งเป็น Payroll_site 5. สำหรับ Local Site Folder คือที่อยู่โฟลเดอร์ภายในเครื่องคอมพิวเตอร์ ให้กำหนดเป็น

D:\Payroll_Web ในกรณีที่ต้องการทำงานร่วมกับ PHP หรือทดสอบการทำงานของ PHP ให้กำหนดโฟลเดอร์ที่เป็นโฟลเดอร์ที่เป็น root directory ดังตัวอย่างนี้คือ C:\appserv\www\Payroll_web ดังรูป

กรณีที่ใช้ XAMP เป็นเว็บเซิร์ฟเวอร์ ก็ต้องกำหนด Local site Folder ให้อยู่ใน root directory ของ XAMP …..C:\xampp\htdocs\Payroll_Web


6. ในแถบ Server เป็นการกำหนดค่าสำหรับการทดสอบการทำงานของสคริปฝั่งเซิร์ฟเวอร์ ในที่นี้หากเรา

ต้องการทำการสดสอบการทำงานของ PHP ก็จำเป็นต้องกำหนดค่าต่าง ๆ ดังนี้


6.1 ให้คลิกที่ + จะปรากฏหน้าต่าง ดังนี้

6.2 ช่อง Server Name เป็นการกำหนดชื่อ Server ให้กำหนดเป็น server1 6.3 ช่อง Connect using ให้กำหนดเป็น Local/Network ดังรูป

6.4 ในช่อง Server Folder ให้กำหนดเป็น C:\AppServ\www\Payroll_web ดังรูป


กรณีที่ใช้ XAMP ก็กำหนดเป็น C:\xampp\htdocs\Payroll_Web 6.5 ในช่องเว็บไซต์ให้กำหนดเป็น www.payroll2019.com ดังรูป

6.6 จากนั้นให้กด Save 6.7 จะกลับหน้าต่างก่อนหน้า ดังรูป


6.8 ให้คลิกตรง Testing ดังรูปด้านบน

จะหน้าต่าง File

• การแสดงหน้าต่าง File ไปที่เมนู Window >> File หรือ กด F8


• การสร้าง File ในหน้าต่าง File คลิกเมาส์ขวา เลือก New File

ให้สร้างชื่อไฟล์ index.html ดังรูป

ถ้าต้องการเปลี่ยนชื่อไฟล์ หรือ แก้ไขไฟล์ หรือ ลบ ก็ให้คลิกที่ชื่อไฟล์ index.html


3. การกำหนดค่าเบื้องต้นใน Dreamweaver


• หนา้ต่าง Code

• หนา้ต่าง Split

• หนา้ต่าง Design

หนา้ต่าง Code

กำหนด Title ดังนี้ ระบบสารสนเทศด้านงานทะเบียนบุคคลและการจ่ายเงินเดือน

<title>ระบบสารสนเทศด้านงานทะเบียนบุคคลและการจ่ายเงินเดือน</title>

• การ Config ค่าเบื้องต้นใน Dreamweaver o การกำหนด Encoding คือการเข้ารหัสแบบอักษร >> Thai Windows / UTF8

▪ ไปท่ีเมนู Modify >> Page Properties (Ctrl + J)


▪ จะปรากฏหน้าต่างข้ึนมา

ให้กำหนดเป็น Thai Windows

แล้วกด OK จะได้ผลลัพธ์ดังนี้


ให้กำหนด Preferrence ไปท่ีเมนู Edit >> เลือก Preferrence (Ctrl + U) จะได้หน้าต่างดังนี้ ให้เลือกแทบ Fonts

ให้กำหนด Font ดังรูป


เว็บ W3C


<!DOCTYPE html> <html> <head> <title>ระบบสารสนเทศด้านงานทะเบียนบุคคลและการจ่ายเงินเดือน</title>

</head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>

การใช้งานเครื่องมือ Insert


การเลือก ประเภทเครื่องมือ


การใส่เส้นแนวนอน <HR>


การจดัการกบัขอ้ความ

• การท าตวัหนา

• การท าตวัเอียง • การใส่ Bullet

1. ลากเมาสค์ลมุขอ้ความที่ตอ้งการ 2. ในหนา้ต่าง Properties

3. เลือก B


การแทรกรูปภาพ

ใชเ้ครื่องมือ Insert >> Image


การจดัต าแหน่งรูปภาพ

คลิกเมาสข์วาดา้นขา้งรูปภาพ


<div align="center"><img src="HRM.jpg" width="443" height="295" />

</div>

images\HRM.jpg

กด Ctrl + S เพ่ือ Save

กด F12 เพ่ือดูผลลัพธ ์


การก าหนดไม่ถูกต้อง สามารถแก้ไข Site ดังนี ้

ไปทีเ่มนู Site เลือก Manage Sites

แก้ไข ตรง Web URL :>> http://localhost/Payroll_web/

http://localhost/Payroll_web/


การปิด IIS

กด STOP

แล้วเปิด Services ของ XAMP


d

กด Start


ที ่Dreamweaver กด F12 อีกคร้ังจะได ้


ww

ไฟล ์.html ไมส่ามารถใชง้าน PHP จะตอ้งบนัทกึเป็น index.php


ให้ Save เป็น index.php

Scriptlet

คือการแทรกค าส่ัง PHP เข้าไปในไฟล ์.php ทีร่่วม กับ HTML


• ค าส่ัง echo ของ PHP


จะได้ผลลัพธด์ังนี ้

บทที่ การใช้งาน dreamweaver cs...

Documents