SlideShare a Scribd company logo
1 of 26
Website        Adobe Dreamweaver CS3
        Dreamweaver

       Dreamweaver

                                             Web Master

                                              HTML

                     Java Scripts

                                HTML


                Dreamweaver


Text Editor


                                                               Table


              HTML                                Dreamweaver


                                                      HTML

                                                     Webmaster

                                    Tag


Dreamweaver

              Code HTML                          Dreamweaver


1.                       WYSIWYG (What You See Is What You

Get)                                  Dreamweaver
Code HTML

2.

3.                                    Client     Server         Java, ASP,

PHP, CGI, VBScript

4.                   Upload                         Server

                                                                   FTP

                     FTP                       WS FTP

5.                                ,                       ,

                            Flash , Fireworks


1.     HTML


2.                                               Effect
JavaScript           HTML
3.                Code
                           Web Browser
4.                            Tag <BR>              Shift+Enter

5.                            Tag <P>              Enter

6.                     Tag             &nbsp;                 Ctrl+ Shift +

Spacebar

7.             Tag             HTML                 Tag

8.    HTML       Script                                           Text Editor

                               Dreamweaver
9.




               Dreamweaver
                       Dreamweaver


     1. Click Mouse
     2.         All Program >
Dreamweaver
•           (Menu Bar)
•                 (Toolbar)
•          (Object Palette)


    (Horizontal Rule),        ,      ,          (Layer)
•                  (Status Bar)
•                        (Properties Palette)



                              ,



•          Panel Group


                          Application
Code    JavaScript   VBScript
                                        Panel
Group




               Dreamweaver




   (Document Windows)
          Dreamweaver
                   3
Toolbar
       Show Code View                               HTML


       Show Code and Design View
HTML
       Show Design View
HTML




                                     Site Manager


         Site >           New Site
1.      Edit >          Preferences
2.   Fonts > Font Setting >    Thai
3.       New Document




     template
1.click           site
New File
       2.
html
       3. double click




                                adobe photoshop
adobe dreamweaver cs3
1.    insert     table




2.
Rows >
Column >


Table Width >


Border >


Cell Padding
>
Cell Spacing >
                         Click    OK
1.   Click       Click   <td>
             (                  )   Click
Properties
1.   Click                      Click   <td>
                         (                     )
2.   Click   Properties                 BG
(             )


                  Marge Cell)
1.   Click
2. Click Properties
1.   Click
2.           Insert > image
Click Mouse                                 Table > Insert
Rows or Columns..
            Dialog Box
             Rows        Column
          Rows           Rows)
                         Rows              Above the Selection)
          Before the Selection)
                          Column                 Before current
Column)            After current Column)
Column         Rows           6 Rows




                                                  Word




                            Properties
• Format
• Font              Dreamweaver
                       PC           MAC
• Size                                  3
• Color




                             template


               Dreamweaver




1.         File > Save as
Template    save file
2.         Save as Template      click    Save




1.     Insert > Template Object > Edit Region
2.                          click mouse       ok
3.




     Insert > Template Object > Edit Region
click
mouse   ok
1.
2.   Template
                 click mouse   Select




      Template
Dreamweaver




                                              Save
Click Mouse      Yes


       Lock in



                       Update   Click Mouse    Close
Modify >
Templates > Update Pages




             Template
1.                 Template




                              1. Double click




2.                                              Modify >
                                                Templates
>                                               Apply
                                                Template to
                                                Page…
เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3
เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

More Related Content

Similar to เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
Frédéric Harper
 
Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010
Mahesh Panchal
 
Unit a adobe dreamweaver cs6
Unit a adobe dreamweaver cs6Unit a adobe dreamweaver cs6
Unit a adobe dreamweaver cs6
Krista Lawrence
 
WebMatrix, see what the matrix can do for you!!
WebMatrix, see what the matrix can do for you!!WebMatrix, see what the matrix can do for you!!
WebMatrix, see what the matrix can do for you!!
Frédéric Harper
 
โปรแกรม Dreamweaver 8
โปรแกรม Dreamweaver 8โปรแกรม Dreamweaver 8
โปรแกรม Dreamweaver 8
kruple
 
Web design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangitiWeb design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangiti
Charles Nyangiti
 
ส่วนประกอบของโปรแกรม Visual basic 6
ส่วนประกอบของโปรแกรม Visual basic 6ส่วนประกอบของโปรแกรม Visual basic 6
ส่วนประกอบของโปรแกรม Visual basic 6
Tom Nuntiya
 
Intro to MVC 3 for Government Developers
Intro to MVC 3 for Government DevelopersIntro to MVC 3 for Government Developers
Intro to MVC 3 for Government Developers
Frank La Vigne
 
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
Prairie Dev Con West -  2012-03-14 - Webmatrix, see what the matrix can do fo...Prairie Dev Con West -  2012-03-14 - Webmatrix, see what the matrix can do fo...
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
Frédéric Harper
 

Similar to เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3 (20)

DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
 
Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010
 
Unit a adobe dreamweaver cs6
Unit a adobe dreamweaver cs6Unit a adobe dreamweaver cs6
Unit a adobe dreamweaver cs6
 
WebMatrix, see what the matrix can do for you!!
WebMatrix, see what the matrix can do for you!!WebMatrix, see what the matrix can do for you!!
WebMatrix, see what the matrix can do for you!!
 
โปรแกรม Dreamweaver 8
โปรแกรม Dreamweaver 8โปรแกรม Dreamweaver 8
โปรแกรม Dreamweaver 8
 
Chrome devtool
Chrome devtoolChrome devtool
Chrome devtool
 
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...
How to choose between Joomla, Drupal and Wordpress - Is there a best choice? ...
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
UNIT 2.2 Web Programming HTML Basics - Benchmark standard
UNIT 2.2 Web Programming HTML Basics - Benchmark standardUNIT 2.2 Web Programming HTML Basics - Benchmark standard
UNIT 2.2 Web Programming HTML Basics - Benchmark standard
 
Web design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangitiWeb design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangiti
 
Dreamweaver - Introduction AND WALKTHROUGH
Dreamweaver - Introduction AND WALKTHROUGHDreamweaver - Introduction AND WALKTHROUGH
Dreamweaver - Introduction AND WALKTHROUGH
 
Dw cs3-introduction
Dw cs3-introductionDw cs3-introduction
Dw cs3-introduction
 
ส่วนประกอบของโปรแกรม Visual basic 6
ส่วนประกอบของโปรแกรม Visual basic 6ส่วนประกอบของโปรแกรม Visual basic 6
ส่วนประกอบของโปรแกรม Visual basic 6
 
Intro to MVC 3 for Government Developers
Intro to MVC 3 for Government DevelopersIntro to MVC 3 for Government Developers
Intro to MVC 3 for Government Developers
 
Firebug: Javascript Development Made Easier
Firebug: Javascript Development Made EasierFirebug: Javascript Development Made Easier
Firebug: Javascript Development Made Easier
 
Google chrome developer and tags
Google chrome developer and tagsGoogle chrome developer and tags
Google chrome developer and tags
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
Prairie Dev Con West -  2012-03-14 - Webmatrix, see what the matrix can do fo...Prairie Dev Con West -  2012-03-14 - Webmatrix, see what the matrix can do fo...
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
 
The internet
The internetThe internet
The internet
 
Enhanced web design
Enhanced web designEnhanced web design
Enhanced web design
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

  • 1. Website Adobe Dreamweaver CS3 Dreamweaver Dreamweaver Web Master HTML Java Scripts HTML Dreamweaver Text Editor Table HTML Dreamweaver HTML Webmaster Tag Dreamweaver Code HTML Dreamweaver 1. WYSIWYG (What You See Is What You Get) Dreamweaver
  • 2. Code HTML 2. 3. Client Server Java, ASP, PHP, CGI, VBScript 4. Upload Server FTP FTP WS FTP 5. , , Flash , Fireworks 1. HTML 2. Effect JavaScript HTML 3. Code Web Browser 4. Tag <BR> Shift+Enter 5. Tag <P> Enter 6. Tag &nbsp; Ctrl+ Shift + Spacebar 7. Tag HTML Tag 8. HTML Script Text Editor Dreamweaver
  • 3. 9. Dreamweaver Dreamweaver 1. Click Mouse 2. All Program >
  • 4. Dreamweaver • (Menu Bar) • (Toolbar) • (Object Palette) (Horizontal Rule), , , (Layer) • (Status Bar) • (Properties Palette) , • Panel Group Application
  • 5. Code JavaScript VBScript Panel Group Dreamweaver (Document Windows) Dreamweaver 3
  • 6. Toolbar Show Code View HTML Show Code and Design View HTML Show Design View HTML Site Manager Site > New Site
  • 7.
  • 8.
  • 9. 1. Edit > Preferences 2. Fonts > Font Setting > Thai
  • 10. 3. New Document template
  • 11. 1.click site New File 2. html 3. double click adobe photoshop
  • 12. adobe dreamweaver cs3 1. insert table 2. Rows > Column > Table Width > Border > Cell Padding > Cell Spacing > Click OK
  • 13. 1. Click Click <td> ( ) Click Properties
  • 14. 1. Click Click <td> ( ) 2. Click Properties BG ( ) Marge Cell) 1. Click 2. Click Properties
  • 15. 1. Click 2. Insert > image
  • 16.
  • 17. Click Mouse Table > Insert Rows or Columns.. Dialog Box Rows Column Rows Rows) Rows Above the Selection) Before the Selection) Column Before current Column) After current Column)
  • 18. Column Rows 6 Rows Word Properties • Format • Font Dreamweaver PC MAC
  • 19. • Size 3 • Color template Dreamweaver 1. File > Save as Template save file
  • 20. 2. Save as Template click Save 1. Insert > Template Object > Edit Region 2. click mouse ok 3. Insert > Template Object > Edit Region
  • 22. 1. 2. Template click mouse Select Template
  • 23. Dreamweaver Save Click Mouse Yes Lock in Update Click Mouse Close
  • 24. Modify > Templates > Update Pages Template 1. Template 1. Double click 2. Modify > Templates > Apply Template to Page…