គ្រប់គ្រងវេបសាយ Dreamweaver · 2020. 3. 31. · 2 Module 01:...

1 Module 01: Introduction BAYON HOSTING

Dreamweaver Web Development Tools

គ្រប់គ្រងវេបសាយ

អ្នកនឹងសិកាពីការគ្របគ់្រងវវបសាយ ររំដូែលមាន ស្រសាប ់ការរចនា និង ឧបករណ៍វផេងៗរបសក់ម្មវធិ ី

វ ៀបវ ៀងវោយៈ កុយ ទិត្យតារា សំរាប់បវគ្ងៀនវៅ មជ្ឈមណ្ឌ ល ITEC និងចែកចាយតាម Bayon Hosting

sophat-it.blogspot.com


Module 01: Introduction

01 Workspace

Workspace Layout

ដ ើមបីកំនត់ workspace layout រតូវចូលដៅ៖

Window -> Workspace Layout

Coder វានឹងបតូររទង់រាយដៅលកខណៈដ ើមរបស់ Dreamweaver សំរាប់អនកសរដសរកូ

Designer វានឹងបតូររទង់រាយដៅលកខណៈដ ើមរបស់ Dreamweaver សំរាប់អនក design

Dual Screen វានឹងបតូររទង់រាយដៅលកខណៈដ ើមរបស់ Dreamweaver សំរាប់អនកដរបើ screen ដលើសពី ១

Save Current សំរាប់ Save current layout

Manange សំរាប់រគប់រគងដលើ layout ដ លដយើងបាន Save ូចជាការ rename, delete

Welcome Screen

Welcome screen មានផទុករាល់ items

Open a Recent Item

o មានផទុកនូវ file ដ លដទើបនឹងដបើកចំនួន ៩ និងមាន Open...



o Click Open... ដ ើមបី browse រកដមើល file ដផេងដទៀត រក៏ឺដយើងអាចចុចដលើ File

Open(Ctrl+O)

Create New សំរាប់បដងកើត file ថមី និង site

o ចុចដលើពាកយ More...ដ ើមបីរកដមើលនូវរបដភទដផេងៗដទៀត ដ លវា ូចនឹងការដ លដយើងចុចដលើ File New (Ctrl+N)

Create From Sample

o ជាកដនលងដ លមាន template ដ លមានស្រាប់កនុង Dreamweaver

o Starter Page(Theme) វាមាន layout ាំងមូល និងដរចើនម ូ ូចជា page Entertainment,

Health...

o Starter Page (Basic)for CS3 and Page Designs for 8 វាមាននូវ page layout

ាមញ្ញសំរាប់ដធវើការដកច្ចនបនត Extend

o Dreamweaver Exchange សំរាប់ដសវងរក extension បដនថមដលើ កមមវធីិរបស់វា

Don't show again បិទកំុដអាយដចញដពលដរកាយ

Hide and show the Welcome Screen Edit->Preference(Ctrl+U)

ធីកដលើ Show Welcome Screen

Insert Bar

មានផទុកនូវ function ជាដរចើនដ លសំរលួកនុងការ access ដៅកាន់ function នីមួយៗ។ ចុច Ctrl+F2 ដ ើមបីលាក់ រ ឺបង្ហា ញ insert bar រក៏ឺចុច widow insert



Insert Bar មាន 2 view គឺ Menu និង Tab

Menu View មានលកខណៈ ូចខាងដរកាម៖

Tab View មានលកខណៈ ូចខាងដរកាម៖

ដ ើមបីបតូរពី view មួយដៅ view មួយដទៀត

កនុង tab view ចុចដលើរូប រចួចុច Show As Menu

កនុង menu view ចុចដលើ

Editing Favorite ចុចដលើ favorite menu រ ឺtab

right-click -> Customize Favorite...

ដពលដ ោះដយើងនឹងដឃើញពី item ដៅតាម category របស់វាខាងដឆវង

ចុចដលើសញ្ញញ >> ដ ើមបី add item

ចុចដលើ Add Seperator ដ ើមបីបដនថម separator ដលើ favorite

- ដយើងក៏អាចដរបើ Insert menu ជំនួសដអាយ insert bar ផងដ រ



Properties Inspector

ជាកដនលងដ លដរបរបួលដៅតាម element ដ លដយើង select ដលើ web page។ ដោយារដយើង select ដលើ blank

page មានន័យថាដយើង select ដលើ body tag។ ចុច Ctrl+F3 ដ ើមបីលាក់ រ ឺបង្ហា ញ Property Inspector រក៏ឺចុច widow Properties

- ដយើងអាច expand និង collapse បានដោយចុចដលើសញ្ញញ រពួញដឡើងដលើ និងចុោះដរកាម

ដបើដយើងយក form មកគូសដោយចូល Forms -> Form កនុង insert bar ដពលដ ោះ property

នឹងដរបរបួលដៅតាមដ ោះដ រ

Document Toolbar ជាផ្ទ ំងដ លដយើងដធវើការដលើជាចំបងកនុងការវាយកូ និងការ Design

Code Inspector: ជា inspector ដ លបង្ហា ញនូវរាល់កូ ាំងអស់ដ លដយើងបានដធវើការ



Window Code Inspector (F10)

1. សំរាប់បង្ហា ញដត Code View Page

2. សំរាប់បង្ហា ញាំង Code view និង Design view ផង

3. សំរាប់បង្ហា ញដត Design view page

4. Title សំរាប់ដក title របស់ page

5. File management សំរាប់ download និង upload file ពី Computer to Web server

6. Preview and Debug in Browser សំរាប់បង្ហា ញ page ដៅដលើ browser

7. Refresh Design View button សំរាប់ refresh design view ដពលដ លដយើងបានដកកូ កនុង Code View

8. View Options:

i. Word Wrap កំនត់ដអាយកូ wrap ជាមួយនឹង window

ii. Line Numbers សំរាប់បង្ហា ញដលខប ទ ត់របស់កូ

iii. Hidden Characters សំរាប់បង្ហា ញ hidden character ូចជា enter, tab, space

iv. Highlight Invalid Code កំនត់ដអាយវា mark ពណ៌ដលឿង ដលើកូ ដ លមានកំហុស ូចជាការដរបើ attribute ពីរ ងកនុង tag ដតមួយ

v. Syntax Coloring ដរបើសំរាប់លាក់ របឺង្ហា ញដអាយ code

vi. Auto Indent កំនត់ដអាយ ចូលប ទ ត់ដោយសវ័យរបវតតិ vii. Head Contents: សំរាប់បង្ហា ញនូវ content ដ លមានកនុង head ដពលដយើងដធវើការដលើ Design

view ូចជា title, meta, style, script

viii. Ruler កំនត់ដអាយបង្ហា ញប ទ ត់

ix. Grid កំនត់ដអាយបង្ហា ត់ grid line

x. Guide កំនត់ដអាយបង្ហា ញ guide line

xi. Tracing Image កំនតដអាយបង្ហា ញ Tracing Image

xii. Design View On Top កំនត់ដអាយ design view ដៅខាងដលើ code view វញិ

2 1 3 4 5 6 7 8 9 10

11



9. Visual Aids:

a. Hide All Visual Aids បិទរាល់ប ទ ត់ដ លគូសកំនត់សំគាល់ាំងអស់

b. CSS Layout Background កំនត់ដអាយមានពណ៌ random ចំដពាោះ div ដ លដធវើជា layout c. CSS Layout Box Model

d. CSS Layout Outlines កំនត់ border ដអាយ div នីមួយៗ

e. AP Element Outlines កំនត់ border ដអាយ AP Element (Draw AP Div) f. Table Widths កំនត់ការបង្ហា ញ width ដពល select ដលើ table

g. Table Borders កំនត់ការបង្ហា ញ border របស់ table cell h. Frame Borders កំនត់ការបង្ហា ញ frame border i. Image Maps ការកំនត់ outline ដអាយ image map

j. Invisible Elements បង្ហា ញ element ដ ល hidden

10. Validate Markup សំរាប់ check ដមើល tag រ ឺcontext ថាដតើស្រសបនឹង standard និង content type ដ ររដឺទ

a. Validate Current Document សំរាប់ validate file ដ លកំពុងដបើក

b. Validate Entire Current Local Site សំរាប់ validate រគប់ file កនុង Local Site

c. Validate Selected Files in Site សំរាប់ validate រគប់ file ដ លបាន selected



d. Setting... សំរាបដបើក ផ្ទ ំងការកំនត់ការ validate វានឹងបង្ហា ញផ្ទ ំង Preferences

ូចខាងដរកាម៖

ផ្ទ ំងដនោះបង្ហា ញពីការដរជើសដរ ើស DOCTYPE ច្ន document ដ លរតូវ validate កនុងករណីដ ល page

មិនបានកំនត់ document type។ ចុច Options… button ដ ើមបីកំនត់បដនថម៖



11. Browser Capatibility សំរាប់ check ដមើល support របស់ Browsers

a. Check Browser Compatibility សំរាប់ check ដមើលការ support របស់ code HTML ដលើ browser

b. Next Error សំរាប់រកិំលដៅកាន់កំហុសប ទ ប់

c. Previous Error សំរាប់រកិំលដៅកាន់កំហុសមុន

d. Show All Error បង្ហា ញរគប់កំហុសាំងអស់

e. Check Accessibility (CS3) សំរាប់ Check Accessibility

f. Auto Check on Open (8)

g. Check Website for new Issue(CS3) សំរាប់ check web site រកដមើលបញ្ញា ថមី h. ងReport a Browser Rendering Issue (CS3) សំរាប់ report ដៅកាន់ web site adobe វញិ

i. Edit Ignored Error List សំរាប់កំនត់ករណីដលើកដលង

j. Setting... ដ ើមបី Select browser ដ លរតូវការដអាយ support ូចខាងដរកាម៖

Document Validation

ឧបមាថាដយើងមាន document ូចខាងដរកាម៖



ដបើ page ដយើងកំនត់យក HTML 4.01 Transitional ដ ោះកំហុសនឹងបង្ហា ញ ូចខាងដរកាម៖

ដបើ page ដយើងកំនត់យក XHTML 1.0 Transitional ដ ោះកំហុសនឹងបង្ហា ញ ូចខាងដរកាម៖

Browser Check Compatibility

ឧបមាដយើងសរដសរកូ CSS មួយចំនួន ដ លដរកាយពីចុចដលើ Check Browser Compatibility

វានឹងគូសប ទ ត់ច្បតងពីដរកាមបញ្ញា ក់ពីកំហុសរបស់កូ ូចខាងដរកាម៖

ដហើយកនុង Browser Compatibility Check នឹងបង្ហា ញ message ូចខាងដរកាម៖



Accessibility Checking

ដ ើមបី Check Accessibility ដយើងអាចចូលតាម Check Page toolbar រក៏ឺចូលដៅកាន់ Site Reports panel

ូចខាងដរកាម៖

ប ទ ប់មកចុចដលើសញ្ញញ រពួញដ ើមបីកំនត់នូវអវីដ លអនករតូវការពិនិតយ ូចខាងដរកាម៖

ឧបមាថាដយើងមានកូ <img src="" />

ដពលដយើង check Missing Alt Text វានឹងបង្ហា ញ ូចខាងដរកាម៖



Document Window

ជាកដនលងដ លដយើងរតូវដធវើការដលើវាជាញឹកញាប់កនុងការបដងកើត Web page។ Document Window ជាកដនលងដ លសំរាប់ោក់របូភាព វាយអកេរ បដងកើត table form និងដផេងៗដទៀត

ដយើងអាចដឃើញ document toolbar

ដមើលខាងដលើបំផុតដយើងដឃើញ ដយើងនឹងដឃើញដ ម្ ោះ file ដ ល dreamweaver ោក់ដអាយ គឺ

untitiled-x

page title ជាឃ្លល ដ ល user ដឃើញដៅដលើ titile bar ច្ន browser របស់ដគ

file name ជាដ ម្ ោះពិតរបាក ច្ន document ដ លមាន extension .html

* មានន័យថា document បានបតូរដហើយមិនាន់បាន save

ដផនកខាងដរកាមច្ន Document Window (Status Bar)

tag selector

1. tag selector area ជាធមមតាដយើងដឃើញ body tagដោយារ page ដយើងមិនាន់មានអវីដៅដឡើយ ដគដរបើសំរាប់ select table, និង complex tag

2. Select tool ដរបើសំរាប់ select element និង edit element 3. Hand tool(H) សំរាប់ាញដមើលរគប់ដផនកច្ន document ដលើ screen

4. Zoom tool(Z) សំរាប់ពរងីកបរងួម page

ចុច Alt សំរាប់ zoom out

ចុច space បតូរដៅជា hand tool

1

2

3

4

5

6

7



5. Set magnification មានផទុកនូវ zoom ស្រាប់ និងលកខណៈបីដទៀត ូចជា៖

a. Fit Selection សំរាប់ zoom ដៅកាន់ content ដ លបាន select b. Fit All តរមូវដអាយដឃើញាំង height ផង និង width ផង

c. Fit Width តរមូវតាមដត width របស់ document ដទ

6. បង្ហា ញពី screen resolution និង recommended size ដ ើមបីដអាយទំហំ fit នឹង size របស់ document

browser ចំណំ តំច្លនឹង disable ដពលអនកឋិតកនុង maximize

7. document size/ download time បង្ហា ញពី file size និង រយៈដពលដ លរតូវការ download file ជាទូដៅ

speed ដ លកំនត់គឺ 56 kbps រ ឺ8 Kbps។ ដ ើមបីបតូរចុចដលើ drop down ច្ន document size->Edit Size..

ដពលដយើងមាន page ដលើសពីមួយនឹងបដងកើតជា tabs ដរចើនសំរាប់ដយើងដរជើសដរ ើស



Panels

Panel ជាកដនលងដ លមានផទុក tools និងinformation សំរាប់ការង្ហរជាក់លាក់ណមួយ

Panelនីមួយៗមានគុណសមបតតិខុសៗគាន Panel អាចោក់ជាមួយគាន ដអាយកាល យជា panel group

File Panel Group

Files

Assets

Snippets

រគប់ panel group សុទធដតមាន panel menu ដរៀងៗខលួន

ដយើងអាច ាញ panel group ដចញបានដោយចុចដលើសញ្ញញ ::: ដពលដចញ Move Tool វានឹងកាល យជា

Floading panel ផ្ទ ល់ខលួនរបស់វា

ដយើងអាច group Panel group បញ្ចូ លគាន ដោយាញ panel group មួយដៅោក់ខាងកនុង Panel Group

មួយដទៀត

ដ ើមបី group panel មួយដៅកាន់ panel មួយដទៀត

Panel Menu-> Group Panel With: ដរជើសដរ ើស panel ដ លរតូវ group ជាមួយ រ ឺបដងកើត panel

group ថមី ដយើងអាច hide និង resize Panel បានដោយសញ្ញញ > ខាងដឆវងកណត លច្ន panel group

F4 សំរាប់ hide និង unhide រគប់ panel group

09 Save Workspace

ដយើងអាច save នូវការដរៀបចំរបស់ដយើងដ លាក់ទងនឹង panel group,resize

Window->Workspace Layout-> Save Current...

វាយដ ម្ ោះដអាយ workspace



Window->Workspace Layout-> Manage

10 Browser

កតាត ចំបងកនុង design website គឺការ test webpage ដៅដលើ browser ដរចើនរបដភទ ដោយ browser ជាអនក

បកដរបកូ ដ លអាចដធវើដអាយមានភាពខុសគាន ពី browser មួយដៅ browser មួយដទៀត

Dreamweaver ផតល់ភាពស្រសួលកនុងការ test web page ដលើ browser ដផេងៗ ូចជា Opera, Firefox,

Netscape, Safari, IE...

Edit->Preferences

Preview in Browser:

* Checkbox

Primary អាចចុច keyborad F12

Secondary អាចចុច keyboard Ctrl+F12

Preview in Temporary File: ដពល preview page ដយើងមិនចំបាច់ save ដទ គឺវា

បដងកើត copy ច្ន file ដហើយ preview វាជំនួសដអាយ file ដ ើម


16 Module 2 Site Control BAYON HOSTING

Module 2 Site Control

Site Folder ជា Folder ដ លរគប់ file របស់ដយើងឋិតដៅ ូចជា document file, images file, Video files...

Local Root Flder

Creating a New Site

ដ ើមបបីដងកើត Site ថមីមួយអនករតូវ

កនុង Welcome Screen ចុចដលើ Dreamweaver Site...

មយ ងដទៀតអនកអាចចុចដលើ Site-> New Site...

ប ទ ប់មកអនកនឹងដឃើញផ្ទ ំង ូចខាងដរកាម៖



កនុង Site Definition Window

Basic Tab: មានលកខណៈ wizard និង ពនយល់ពីចំនុចនីមួយៗ

Advanced Tab: សំរាប់កំនត់នូវពណ៌មានលំអិតជាង Basic tab

Basic Tab

ជំហានសំរាប់អនុវតតកនុង Basic Tab មាន ូចជា៖

វាយដ ម្ ោះ Site

វាដ ម្ ោះ Web Address Optional:

ចុច Next



វានឹងបង្ហា ញផ្ទ ំងដអាយដរជើសដរ ើស Server Technology ដ លដរបើសំរាប់ Connect Database, Create

Dynamic Content

ដបើ Site របស់អនកដរបើដតជាមួយនឹង client-side language ដទ អនកគួរដរជើសដរ ើសយក ជំដរ ើសទី១គឺ No, I

do not want to use a server technology.

ដបើ Site របស់អនកដរបើនូវ server-side language អនកចំបាច់បញ្ញា ក់នូវ server technology ដ លអនកដរបើ ដ លមាន ូចខាងដរកាម៖



ប ទ ប់មកចុច Next។ ដបើអនកដរជើសយក server-side technology មួយណដ ោះវានឹងបង្ហា ញដអាយដរជើសដរ ើសជំដរ ើសបី ូចខាងដរកាម៖

ទី១គឺអនក ដក និង test ដៅដលើមា សីុនដតមួយ(មានន័យថាមា សីុនអនកមានតំដឡើង virtual web server

ូចជា Apache, AppServe, Tom Cat, រ ឺIIS ជាដ ើម។



ទី២ គឺអនកដធវើការដកដលើមា សីុនរបស់អនក ដហើយ test ដៅដលើ remote testing server។ មានន័យថាមា សីុនរបស់អនកមិនមាន virtual web server ូដចនោះរតូវពឹង remote server ដ លមាន web server installed។

ទី៣ គឺអនកដធវើការដក និង test ដៅដលើ remote testing server ដោយដរបើ local network។

ដតដបើអនកដរជើសយក មិនដរបើ Server Technology អនកមានជំដរ ើសដត ២ ប ុដណណ ោះគឺ ១ ដកផ្ទ ល់ដលើមា សីុន local, ប ទ ប់មកដទើប upload ដៅកាន់ Server ដពលដករចួរាល់

២ ដកផ្ទ ល់ជាមួយនឹង Server ដោយដរបើ Local Network

ប ទ ប់ចុចដលើរបូ folder ដ ើមបី browse ដៅកាន់ site folder ដ លផទុកកនុង Master Folder។

ចុច Next វានឹងបង្ហា ញពីវធីិដ លដយើងដរបើសំរាប់ Connect ដៅកាន់ Remote Server

None: ដរជើសជំដរ ើសដបើអនកមិនរតូវការ connect ដៅកាន់ remote server

Local/Network: ដរជើសជំដរ ើសដនោះដបើ server ឋិតកនុង LAN ជាមួយគាន



FTP: ដរជើសជំដរ ើសដនោះដបើ remote web server support ដហើយអនកមានពត៌មាន ូចជា៖

o របអប់ទីមួយអនកវាយនូវ host name រ ឺip web របស់អនក

o ទី២ សំរាប់បញ្ញា ក់ពីដ ម្ ោះ folder ដ លជា root folder របស់អនក ូចជា public_html

o FTP Login ជា username ដ លរតូវ login ដៅកាន់ server

o Password ជា password ដ លរតូវដផទៀងផ្ទ ត់ជាមួយ username របស់អនក

WebDAV:Web-based Distributed Authoring and Versioning:

RDS: Remote Development Services:

Microsoft Visual SourceSafe:

ចុច Next ប ទ ប់មកវានឹងបង្ហា ញនូវផ្ទ ំង ូចខាងដរកាម៖



ការ Checking out a file គឺដសមើនឹងអនករបកាសថាអនកកំពុងដធវើការដលើ file ដ ោះ មិនអាចដអាយអនកប ោះបានដទ។ ដពលដ ល file មួយរតូវបាន check out ដ ម្ ោះអនកដ លកំពុងដរបើ file ដ ោះនឹងបង្ហា ញកនុង file panel ជមួយនឹងសញ្ញញ check ពណ៌រកហម ចំដពាោះអនក ច្ទដឃើញ និងពណ៌ច្បតងចំដពាោះអនកដ លកំពុង check out។

ការ Checking in a file គឺបញ្ញា ក់ថា file មួយអាចដធវើការ check out និងដកបានដហើយ។ ដពលអនក check in file មួយដរកាយពីអនកដធវើការដកវា version ដ លដៅកនុង មា សីុនរបស់អនកនឹងកាល យជា read-only និងមានសញ្ញា lock ពីមុខ file កនុង File panel ការពារមិនដអាយអនកដកដលើ file ដ ោះ។

ប ទ ប់មកវានឹងបង្ហា ញ Summary Page ដ លបង្ហា ញពត៌មានដ លអនកបានបំដពញ។

ចុច Done ជាការដស្រសច។

Advanced Tab

កនុង Advanced tag, options ដរៀបចំជា categories ូចជា៖



Local Info

កនុង Local Info Category: សំរាប់ការង្ហរដលើមា សីុន local

Site name: ោក់ដ ម្ ោះដអាយ Site របស់អនក វាមិនប ោះពាល់ ល់ online resource ដទ

Local Root Folder: ជា folder ដ លផទុករាល់ file ច្ន site របស់ដយើង។ ចុចដលើរបូ folder ដ ើមបី browse

រកទីតំាងរបស់ folder

Default image folder: ជា folder ដ ល dreamweaver ោក់របូភាពដ លអនកបដនថមចូលកនុង site

របស់អនក។ ឧបមាថាដយើង insert របូភាពពី drive d: វានឹង copy របូភាពដ ោះមកោក់កនុង

ទីតំាងដនោះដ ើមបីបដងកើតជា relative path រ ឺroot path

Links relative to:

o Document

o Site root

HTTP address: ជា address ដ លដរបើសំរាប់ site relative links និង សំរាប់ Link Checker ដ ើមបី detect

HTTP links ដ ល refer ដៅកាន់ site ខលួនឯង

Case-sensitive links: បងខំដអាយដយើងវាយ link ដអាយដៅតាមអកេរធំ និងតូច(យកលអគួរដតដរបើអកេរតូចាំងអស់)

Cache: រកាទុកពត៌មាន file និង ពត៌មាន ដ លមានកនុង site។ វាជួយបដងកើនដលបឿនកនុង Asset panel,

link management, និង Site Map ។

Remote Info



Testing Server



Enable Cloaking មានន័យថាអនកអាចមានសិទធិកនុងការកំនត់នូវ file រ ឺfolder ដ លអនកមិនចង់ដអាយដធវើការ synchronized

ចំដពាោះ check box ទី២ កំនត់នូវរាល់ file ដ លមាន extension បានកំនត់មិនដអាយ synchronize។



file panel

ចូលដៅកនុង File Panelដយើងនឹងដឃើញដ ម្ ោះ site និង ទីតំាងរបស់ site ដៅដលើ root folder។ កនុង file panel

ដយើងអាច select site ច្ទដទៀត រក៏ឺ browse រក file តាមរយៈ file drop down ។ file ដ លមានកនុង file panel មិនដមនវា copy ពី site folder ដទគឺវាបង្ហា ញ file ដ លមានកនុង site

folder។ កនុង file panel ដយើងអាចបដងកើត លុប បតូរដ ម្ ោះ បតូរទីតំាង document, folder បាន។

ដ ើមបីដធវើការដលើ file ដយើងរតូវ right-click ដលើ folder ដ លដយើងចង់ដធវើការដលើវា



ដពលដ លអនកចុចដលើ New File... រ ឺNew Folder... ថមីដ ោះ ដពលពិនិតយកនុង physical root folder

ដយើងនឹងដឃើញមាន folder ដ លដយើងដទើបនឹងបដងកើតថមីដ ោះ

Path Structure Dreamweaver Site មានលទធភាពកនុងការជួសជុល path name ។ ចំដពាោះ file ដ លបាន link ដៅកាន់ page ច្ទ។

ដពលដយើងរតូវការ move វានឹងបង្ហា ញ Update Files Diaglog សួរដយើងថាដតើចង់ update link កនុង file ដ ល link

មកកាន់ file ដ លដយើងកំពុង move រដឺទ។

Import Content import by internal file panel

import from external explorer and used default images folder

Site Map ដ ើមបបីង្ហា ញ structure ច្ន web siteមួយអនករតូវ៖

តំបូង expand to show local and remote site button

ចុចដលើ site map button-> Map Only

វានឹងបង្ហា ញដត map area ប ុនដ ោះ។ ដយើងអាចដឃើញ file ណ link ដៅកាន់ file ណ ដហើយដយើងអាច expand

page នីមួយៗដ ើមបីដមើលថាដតើវា link ដៅណបនតដទៀត

ចំដពាោះ Map and File នឹងបង្ហា ញ ូចខាងដរកាម៖



វានឹងបង្ហា ញាំង map area និង file area។ ដ ើមបី Save Site Map ដយើងចូល panel menu-> Save Site Map...



Blank Site Consideration

រាល់ដពលដ លអនកបដងកើត Site ថមីមួយ ក៏ ូចជាបដងកើត project ថមីអនករតូវបដងកើត Folder ថមីមួយដធវើជា

Master Folder ដ លដធវើជា Folder ធំសំរាប់ផទុកនូវ Folder ដ លដធវើជា site root ដ លបានកំនត់កនុង Dreamweaer។ កនុង Master Folder អនកគួរមាន Structure ូចខាងដរកាម៖

backup: ផទុកនូវ file ដ លបាន backup ពី root folder ការ backup មានជាលកខណៈ zip, rar…

raw images: ផទុកនូវរាល់របូភាពដ លមិនាន់បានដក ដ លមានទំហំធំ ដហើយចាស់សំរាប់បំដលងោក់កនុង web pages

root: ផទុកនូវរាល់ឯការដ លរតូវបដង្ហា ោះ មាន ូចជា web file, converted images, prepared media file.

site info: ផទុកនូវពត៌មានរបស់ web site ូចជា hosting info, domain info, database username and password ជាដ ើម

text files: ជា folder ដ លរតូវផទុកនូវ content ដ លនឹងបំរងុនឹងោក់កនុង web page។

media files សំរាប់ផទុកនូវ media file ូចជា Flash Project file, audio file, movie file…

02 New Blank Page

បដងកើត Fileថមីមួយ

Right-click -> New File...

វាយដ ម្ ោះ file ថា index.html

double click ដ ើមបីដបើកវា

កនុង Welcome Screen > Create New HTML

Save Page : File > Save (Ctrl + S)

Dreamweaver នឹងដៅកាន់ local root folder ដ ើមបីដអាយដយើង save file

កនុង CS3 វាមាន button សំរាប់ដអាយដយើងដៅកាន់ site root ដោយមិនបាច់ browse ដទ

ប ទ ំប់មកោក់ដ ម្ ោះ

និងបំដពញ page title

File > New

Blank -> Create -> Save -> អនកអាចបដងកើត sub folder ដោយ create new folder

គួរដរបើតាម file panel វារបដសើរជាងការដ លដយើងរតូវបដងកើត New Document

ដ ើមបីធា ថាវាឋិតដៅកដនលងរតឹមរតូវ



03 Document Type

File -> New ដយើងសដងកតដឃើញថាដយើងមាន Document Type (DTD) រ ឺDoc Type

ដ លដអាយដយើងដរជើសដរ ើស

DTD Document Type Decoration ដគដរបើវាកនុងដគាលបំនងចំបងពីរយ ងគឺ៖

១ ដពលដយើងដរបើ XHTML Validator របាប់ Validator ពីជំ ន់របស់ XHTML ដ លដរបើ ូដចនោះដពល Validator ដមើល line តំបូងច្ន document

វានឹងដឃើញ ពីជំ ន់របស់ HTML

២ Document Type Decoration របាប់ Web Browser ថារតូវបង្ហា ញតាម DTD។ វាដធវើដអាយ

browser ដផេងៗគាន ដធវើតាម DTD ដ លបានកំនត់

ជាពិដសសដពលដយើងដរបើ Style Sheet វានឹងដធវើដអាយ page បង្ហា ញមកយ ងរតឹមរតូវ កនុង Doctype tag ដយើងនឹងដឃើញពី address ច្ន dtd file ដ លផទុកពត៌មានដ លរបាប់ browser

ពីរដបៀបកនុងការបកដរប site ដអាយរតឹមរតូវតាម standard ដ លបានកំនត់

ដ ើមបី លកខណៈ default របស់ Document Type ៖

Edit> Preference (C+U) > New Document > Category:

ដរជើសដរ ើស Default Document Type

04 Adding Images

ដយើងអាច Copy ដៅ Physical location វាជាការង្ហយស្រសួលជាងការ copy តាម file panel។

ដតអនករតូវោក់កនុង site folder

Asset Panel ជារបដភទ ច្ន file រក៏ឺ code មួយចំនួនដ លអាចដរបើបានកនុង site របស់អនក ូចជា៖

images

colors

Links

URL

Flash

Shockwave

Movie

Script

Template

Library

ដ ើមបី Add របូភាពចូលកនុង document select ទីតំាងដ លរតូវោក់រចួ៖

1. ចុចដលើ asset panel -> ដរជើសដរ ើសរបូភាព

ដពលដយើង select ដលើរបូភាពវានឹងបង្ហា ញ preview ដៅដលើ Preview area

ចុចដលើ button insert

ដពលដ ោះវានឹងបង្ហា ញ Image Tag Accesibility Attributes diaglog

Accessibility អាចជាកតីបារមមណ៍ចំដពាោះ developer សពវច្ថៃដនោះ

មានន័យថាដធវើដអាយ page របស់អនក accessible តាមដ លអាចដៅរចួ

ក៏ ូចជាការដមើល web page ដលើឧបករណ៏ចល័តតូចៗ ូចជា

Phone, PDA ជាពិដសសដពល Web browser ដ លបិទមិនដអាយបង្ហា ញ images

ដ ោះវានឹងបង្ហា ញ alternate text ដ លរបាប់

ពីរបូភាពដ លរតូវបានោក់បង្ហា ញ។

មយ ងវញិដទៀតចំដពាោះអនកពិការដភនកអាចដរបើកមមវធីិដ លអាចអាន ូដចនោះដទើបដគ ឹងថា របូភាពមានលកខណៈ ូចដមតច។


31 Module 8: Table BAYON HOSTING

2. ដយើងក៏អាចដរបើ Insert Bar > Common>

Images រករបូភាពបានដ រ (Ctrl+Alt+I)

Image Placeholder: ជា image element ដ លមិនាន់បានកំនត់ src

ដ លដរបើសំរាប់បញ្ញា ក់ទីតំាង និងទំហំច្នរបូភាពដ លរតូវយកមកោក់។

3. ដយើងក៏អាចាញ image កនុង file panel រ ឺasset panel មកោក់ដលើ web page

ដតមតងក៏បានដ រ

ដបើដយើងចង់បតូរ property របស់ image ដ លដទើបោក់អនកអាច select របូភាពដហើយដក attribute

របស់វាកនុង Property Inspector

05 Adding Text to a Web Page

ដ ើមបីបដនថម text ចូលកនុង web page រគាន់ោក់ cursor

ចំទីតំាងដ លដយើងចង់បង្ហា ញរចួវាយជាការដស្រសច

ចំណំ៖

ដពលចុច Enter វានឹងបដងកើត paragraph ថមី ដបើដយើងចង់បាន <br/> ដយើងរតូវដរបើ Shift+Enter

06 Aligning

ោក់ cursor ដៅតំាងដ លរតូវការ align

ដលើ property inspector ដយើងដឃើញមាន align toolbar

កនុង ករណីដ លគាម ន container ដ លផទុកវាដទ វានឹងោក់ content ាំងដ ោះចូលកនុង <div

align="align">...</div>

07 Meta Data

កនុង Common category(CS3), HTML (8( ច្ន Insert Bar -> Head-> Key word

រ ឺInsert -> HTML -> Head TAgs -> Keywords

រតូវោក់ word រ ឺshort phrase ដ លវាដបងដចកគាន ដោយ (, ) comma and space កនុងចដ ល ោះ 10 -

15 keyowords

Description

វាយការពិពណ៌ ចូលកនុង text area

searchenginewatch.com

Module 8: Table

Creating an Table

ដ ើមបីបដងកើត table ដយើងរតូវ៖

កនុង Insert bar កនុង Common ចុចដលើ table



ប ទ ប់មកវានឹងបង្ហា ញផ្ទ ំង ូចខាងដរកាម៖

Summary: ដរបើសំរាប់សដងខបពត៌មានអំពី table វាមិនរតូវបានបង្ហា ញកនុង browser ដទ។ ប ុដនតវារតូវបានអានដោយ other screen reader ដ ើមបី ឹងពីពត៌មានរបស់ table



ធមមតាដពលដ លដយើងមិនបានកំនត់ ទំហំរបស់ table វានឹងដធវើដអាយ cell ដយើងរមួតូច

ដ ើមបីង្ហយស្រសួលកនុងការោក់ cursor ចូលកនុង field ដគអាចដរបើ expanded mode របស់ table mode ដ ើមបីដធវើដអាយ cell របស់ table មានទំហំធំ។



ដយើងអាចចូលបានដោយ View -> Table Mode -> Expanded Table Mode F6 ប ទ ប់មកវានឹងបង្ហា ញ message

ូចខាងដរកាម៖ ដហើយវានឹងដធវើដអាយ table មានលកខណៈ ូចខាងដរកាមជំនួសវញិ៖

ដ ើមបីោក់ទិននន័យចូល table cell រគាន់ដតោក់ cursor ចូលកនុង cell ណដ លចង់បញ្ចូ ល។ ចុច tab key ដ ើមបី switch ពី cell មួយដៅ cell មួយដទៀត។ ចុច shift + tab key ដ ើមបី switch back បកដរកាយវញិ។

ចំណំថា border dotted គឺមិនរតូវបានបង្ហា ញកនុង browser ដទ វាគឺរគាន់ដតដរបើសំរាប់បង្ហា ញ រពរំរបស់ table cell

នីមួយៗប ុនដ ោះ។

<table summary="All Student in ITEC">

<caption>

ITEC: Student List



</caption>

<tr>

<th scope="col">ID</th>

<th scope="col">Student Name</th>

<th scope="col">Sex</th>

</tr>

<tr>

<td>1</td>

<td>Kit Somethea</td>

<td>Male</td>

</tr>

<tr>

<td>2</td>

<td>Tep Panet</td>

<td>Female</td>

</tr>

<tr>

<td>3</td>

<td>Tep Vicheat</td>

<td>Male</td>

</tr>

</table>

Selection

ដយើងអាចដធវើការ select table ាំងមូល រ ឺrow ណមួយ ឬ column ណមួយដោយដធវើរកិំលដអាយបង្ហា ញ mouse pointer ូចខាងដរកាម៖

- ដ ើមបី select cell មួយ ដយើងរគាន់ដតោក់ cursor ចំ cell ដ លដយើងចង់ select - ដ ើមបី select row មួយ ដយើងរគាន់ដតោក់ cursor ចំ cell ដ លឋិតកនុង row ដ លដយើងចង់

select រចួកនុង tag selector ចុចដលើ <tr> - ដ ើមបី select table មួយ ដយើងរគាន់ដតោក់ cursor ចំ cell ដ លឋិតកនុង table ដ លដយើងចង់ select

រចួកនុង tag selector ចុចដលើ <table>

- ដ ើមបី select column ណមួយរតូវដធវើ ដអាយ mouse រចួចុចវានឹង select column ដ ោះជាមិនខាន

Table Property



Cell Property

ការ insert Special Character



Sorting Table:


40 Module 5: Template BAYON HOSTING

Module 5: Template

ដ ើម្បីបដ្កើត template មួ្យរតូវ៖ 1. រតូវដបើកនូវ document ដ លអ្នកច្់ save ជា template:

a. ដ ើម្បីដបើកឯកសារដ លមានស្រសាប់ File > Open ដររើដរ ើស document

b. ដ ើម្បីបដ្កើត new blank document File > New។ កនុ្ diaglog box រតូវដររើសយកBasic Page រ ឺDynamic page បន្ទា ប់ម្កចុច Create

2. ដពលដបើក document រចួដ ើយរតូវដ្វើ ូចខា្ដរោម្

a. Select File > Save as Template

b. ឬ កនុ្ Common category នន Insert bar ចុចដលើសញ្ញា រពួញដលើ template button

បន្ទា ប់ចុចដលើពាកយថ Make Template

c. បន្ទា ប់ម្កវានឹ្ដចញផ្ា ាំ្ Save As Template ូចខា្ដរោម្

3. ដររើសដរ ើស site ដ ើម្បី save template ពីកនុ្ site pop-up menu បន្ទា ប់បញ្ចូ លដ ម្ ោះដោយtemplate

កុាំដោយជាន់នឹ្ template នៃដៃៀត។

4. ចុច Save

Dreamweaver save template file កនុ្ folder របស់ site ដ ម្ ោះថ Template ដៅកនុ្ local root folder នន

site ជាមួ្យនឹ្ extension .dwt។ ដបើ folder Template មិ្នមានកនុ្ site ដៃ Dreamweaver

នឹ្បដ្កើតដោយសវ័យរបវតតិ ដពលអ្នកបដ្កើត template ថ្មីមួ្យ

ចាំណាំ មិ្នរតូវបតូរៃីតាំ្ template ដចញពី folder Templates រោឺក់ file ដផេ្ចូលកនុ្ folder Templates

រក៏ឺបតូរៃីតាំ្ folder Template ដចញពី root folder ដោយដសាោះ ដ្វើដបបដនោះោចដ្វើដោយមានកាំ ុសចាំដពាោះ path របស់ templates file

Updating Pages

ដរកាយពីដធវើការដកដរប document ជាពិដសស Optional Region អនករតូវ Update document ដ ើមបីដអាយមាន effect ដៅកាន់ document Modify Templates Update Current Page រ ឺUpdate Pages


41 Module: Layout BAYON HOSTING

Module: Layout

Layout Tools

Tracing Image ជា layout របស់ page ដ លដយើងអាច design កនុង Photoshop, firework ដហើយ

អនក export វាជា jpg, gif, png ដហើយអនកអាច load វាចូលកនុង background កនុង design view។ tracing

image ដៅដរកាយ page របស់អនក ូដចនោះអនកអាចោក់ elements ពីដលើវា ដ ល tracing image បញ្ញា ក់

ពីទីតំាងចាស់លាស់ពី ទីតំាងចាស់លាស់ពីទីតំាងរបស់ elements ដលើ page។

Layer ដយើងអាចគូស layer ដលើ screen ដ ល layer គឺជា div ដ លមាន position absolute។ div

tag ជា tag ដ លអនកជំុវញិ elements របស់ page ដ ើមបីបញ្ញា ក់ពី ដផនក section រ ឺការដបងដចក division

របស់វាកនុង document.

Table

Tracing Image

ដ ើមបីកំនត់ Tracing image រតូវចូល Page Property -> Tracing Image

click Browse ដ ើមបីដសវងរករូបភាពដ លជា tracing image

ដយើងនឹងដឃើញរបូភាពដ ោះបង្ហា ញកនុង design view ដបើពិនិតយដមើលកូ វាបដនថម attribute 2 ដទៀត

កនុង body ដ ល attribute ាំង 2 ដនោះដរបើបានាគ ល់ដោយ dreamweaver ប ុនដ ោះ។

ូដចនោះដពលដយើងដបើកកនុង browser របូភាពដ ោះនឹងមិនបង្ហា ញដទ។

ដយើងអាចដក position របស់ tracing image បានដោយចូលដៅ

View -> Tracing Image -> Adjust Position...

AP Div

ដរបើសំរាប់ position ដអាយ ូចនឹង tracing image

Insert -> Layout Object -> AP Div

ដយើងអាចដរបើ guide line ូចកនុង photo shop ដ ើមបីដអាយវា snap object


42 Module: Layout BAYON HOSTING

Layout Table

View -> Table Mode -> Layout Mode

ដយើងអាច resize , move វាបានតាមចិតត កនុង Insert bar -> Layout

Draw Layout Table

Draw and Drag ជំុវញិ page layout

Draw Layout Cell

សំរាប់កំនត់ដផនកមួយច្ន page

ប ទ ប់មកគួសតាមដផនកមួយៗរបស់ document

Table Width

ដ ើមបីបតូរពី absolute ដៅជា relative វញិគឺរតូវ select cell នីមួយៗដហើយដធវើ ូចខាងដរកាម៖

- កនុង property inspector -> ចុចដលើ Autostrech


43 Rollover BAYON HOSTING

Rollover

Rollover Image

Introduction

HTML vs Javascript to create

Dreamweaver know how to write for you

You may need 2 images

off

on mouseover

need same size

Simple Rollover

2 pieces of 1 work

original state or off state out state

on state over state

Swap image

Insert bar -> common -> Images ->Rollover Image

Insert -> Image Objects -> Rollover Image

#nolink

Disjointed Roller

ដពលដ ល mouseover ដលើ image មួយដធវើដអាយ image មួយដទៀតដរបរបួលបាន

ដយើងរតូវការ blank image មួយដ លមានទំហំ ូចដៅនឹង របូភាពដ លរតូវបង្ហា ញសំរាប់

ដអាយវាលាក់ដពល mouseout

insert blank image -> set id ដអាយវា

select ដលើវាដហើយចុចដលើ tag inspector -> Behaviors panel

ប ទ ប់មកចុចដលើ rollover image ដ លអនករតូវការ mouseover ដហើយបតូរ របូភាពជំនួសដអាយ

blank image



កនុង Behaviors double click ដលើ behavior onMouseOver

ប ទ ប់មក select id របស់ blank image ដ លបានកំនត់ ដហើយកំនត់ទីតំាងរបូភាពដអាយវា

ដពលវា mouse over

ដយើងក៏អាចដរបើការង្ហរដនោះដលើ image link ណដ លមិនមាន rollover effect ក៏បានដ រ អនករគាន់ដតចុចដលើ link ដហើយកនុង behavior ចុចដលើ សញ្ញញ បូកដហើយយក Swap Image

នឹងបាន ូចខាងដលើអញ្ា ឹងដ រ

Navigator with images

images->Navigator

អនករតូវការរបូភាពបួនរបដភទ

down, over, out. overdown



Show "Down image" initially មានន័យថា page ដយើងកំពុងដតដបើក

use table មានន័យថាអនកចង់បដងកើត table ដអាយដស្រសច

អនកអាច copy navigator ដៅកាន់Page ច្ទដទៀតបាន

Modify -> Navigation Bar ដ ើមបីដក down image initially

Flash Button

editable,

need plug-in, activeX

insert bar -> Common -> Flash -> Flash Button


47 Module 10: The Spry framework BAYON HOSTING

Module 10: The Spry framework Spry framework ជា library ច្ន javascript មួយដ លផតល់ដអាយ web designer ជាមួយសមថភាពកនុងការបដងកើត web pages ដ លផតល់ភាពង្ហយស្រសួល ល់ visitor។ ជាមួយ Spry, អនកអាចដរបើ HTML, CSS និងកូ Javascript ជាមួយនឹង XML data ចូលកនុង HTML document ូចជា menu bars, ោក់ effect ដអាយ page elements។


គ្រប់គ្រងវេបសាយ Dreamweaver · 2020. 3. 31. · 2 Module 01:...

Documents

Transcript of គ្រប់គ្រងវេបសាយ Dreamweaver · 2020. 3. 31. · 2 Module 01:...