SlideShare una empresa de Scribd logo
1 de 36
Chapter 1 Getting Started with Dreamweaver
Chapter 1 Lessons ,[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Getting Started with Dreamweaver ,[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Using Dreamweaver Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Fig 1: Dreamweaver CS4 Workspace © 2010 Delmar Cengage Learning Property inspector Tag selector Document window Document border Related files toolbar Application bar (Win) or Menu bar (Mac) Workspace switcher Insert panel Files panel Zoom tool Hand  tool Select tool Drag the panel border up or down to resize insert panel
Working with Dreamweaver Views ,[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Starting Dreamweaver: Windows ,[object Object],[object Object],© 2010 Delmar Cengage Learning
Figure 3: Starting Dreamweaver CS4 © 2010 Delmar Cengage Learning Click Adobe Dreamweaver CS4
Starting Dreamweaver: (Macintosh) ,[object Object],[object Object],© 2010 Delmar Cengage Learning
Changing Views ,[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Figure 5: Code View for  New Document © 2010 Delmar Cengage Learning Coding toolbar Show Code view button Show Code and Design view button Show Design view button Switch Design View  to Live View button Some options may differ depending on what was last selected Click to collapse all panels to icons
Opening a Web Page ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Basic Web Page Elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Fig. 8: Common Web Page Elements  © 2010 Delmar Cengage Learning Banner with logo Image Contact information Search feature Link to main pages in the website Links to support pages National Endowment for the Arts website – www.arts.endow.gov
Using Dreamweaver Help ,[object Object],© 2010 Delmar Cengage Learning
Fig. 10: Dreamweaver Help and Support Web Page © 2010 Delmar Cengage Learning Dreamweaver help (web) link
Fig. 11: Displaying Help Content © 2010 Delmar Cengage Learning Selected subtopic content opens on right side of Help window Click plus sign to expand menu of Help topics
Fig. 13: Phases of a Website Development Project © 2010 Delmar Cengage Learning
Planning a Website ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Setting Up the Basic Structure ,[object Object],[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Fig. 14: Striped Umbrella Website Storyboard © 2010 Delmar Cengage Learning
Creating the Web Pages and Collecting the Page Content ,[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Testing the Pages ,[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Modifying the Pages ,[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Publishing the Site ,[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Publishing the Site ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Publishing the Site ,[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Fig. 16: Creating a Root Folder Using the Files Panel © 2010 Delmar Cengage Learning If you just see a drive or folder name here you do not currently have a website open Striped_umbrella root folder Your drive or folder may differ
Fig. 18: Site Definition Striped Umbrella Dialog Box © 2010 Delmar Cengage Learning Advanced tab Website name Browse for file icon Local root folder text box – your drive may differ Links relative to: option Enable cache check box
Fig. 19: Setting the Remote Access © 2010 Delmar Cengage Learning Remote Info category Access pop-up menu
Adding a Folder to a Website ,[object Object],[object Object],© 2010 Delmar Cengage Learning
The Assets Folder ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Creating the Home Page ,[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Adding Pages to a Website ,[object Object],[object Object],[object Object],[object Object],© 2010 Delmar Cengage Learning
Fig. 22: Site Definition with Assets Folder Set as Default Images Folder © 2010 Delmar Cengage Learning Default images folder text box Browse for file icon
Fig. 23: Index.html Placed in Striped_Umbrella Root Folder © 2010 Delmar Cengage Learning Windows users see the path; Mac users see only the file name and document type Index.html Root folder Broken link icon Link to banner is broken because the banner is not yet inside the website

Más contenido relacionado

La actualidad más candente

Introduction to Prezi (updated)
Introduction to Prezi (updated)Introduction to Prezi (updated)
Introduction to Prezi (updated)
Tiffaney Lavoie
 
Office box user_guide_v3.0
Office box user_guide_v3.0Office box user_guide_v3.0
Office box user_guide_v3.0
Jiransoft
 
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
 
Just Enough Web Design.doc.doc
Just Enough Web Design.doc.docJust Enough Web Design.doc.doc
Just Enough Web Design.doc.doc
butest
 

La actualidad más candente (20)

Dreaweaver cs5
Dreaweaver cs5Dreaweaver cs5
Dreaweaver cs5
 
Dream weaver ppt
Dream weaver pptDream weaver ppt
Dream weaver ppt
 
Twinspace
TwinspaceTwinspace
Twinspace
 
Creating Accessible Web Pages Using Dreamweaver Mx 2004
Creating Accessible Web Pages Using Dreamweaver Mx 2004Creating Accessible Web Pages Using Dreamweaver Mx 2004
Creating Accessible Web Pages Using Dreamweaver Mx 2004
 
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
 
Colleen's Test
Colleen's TestColleen's Test
Colleen's Test
 
Web Page Creation
Web Page CreationWeb Page Creation
Web Page Creation
 
Canvas 101 packet
Canvas 101 packetCanvas 101 packet
Canvas 101 packet
 
Chapter 7 - Web Design
Chapter 7 - Web DesignChapter 7 - Web Design
Chapter 7 - Web Design
 
Chapter 11 - Web Design
Chapter 11 - Web DesignChapter 11 - Web Design
Chapter 11 - Web Design
 
Introduction to Prezi (updated)
Introduction to Prezi (updated)Introduction to Prezi (updated)
Introduction to Prezi (updated)
 
Blackboard As Your School Website
Blackboard As Your School WebsiteBlackboard As Your School Website
Blackboard As Your School Website
 
Group 3 basic web page creation
Group 3  basic web page creationGroup 3  basic web page creation
Group 3 basic web page creation
 
Office box user_guide_v3.0
Office box user_guide_v3.0Office box user_guide_v3.0
Office box user_guide_v3.0
 
Box vs OneDrive Features Comparison
Box vs OneDrive Features ComparisonBox vs OneDrive Features Comparison
Box vs OneDrive Features Comparison
 
Chapter 5 - Web Design
Chapter 5 - Web DesignChapter 5 - Web Design
Chapter 5 - Web Design
 
How websites and search engines work
How websites and search engines workHow websites and search engines work
How websites and search engines work
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Web design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangitiWeb design with dreamweaver charles nyangiti
Web design with dreamweaver charles nyangiti
 
Just Enough Web Design.doc.doc
Just Enough Web Design.doc.docJust Enough Web Design.doc.doc
Just Enough Web Design.doc.doc
 

Destacado (13)

Gambar geometri - Latih 01
Gambar geometri - Latih 01Gambar geometri - Latih 01
Gambar geometri - Latih 01
 
Evaluation Question Two
Evaluation Question TwoEvaluation Question Two
Evaluation Question Two
 
My Dream
My DreamMy Dream
My Dream
 
Testing Slide Share
Testing Slide ShareTesting Slide Share
Testing Slide Share
 
Technologies Used In The Planning Stage
Technologies Used In The Planning StageTechnologies Used In The Planning Stage
Technologies Used In The Planning Stage
 
Technologies Used In The Research Stage
Technologies Used In The Research StageTechnologies Used In The Research Stage
Technologies Used In The Research Stage
 
Evaluation Question Two
Evaluation Question TwoEvaluation Question Two
Evaluation Question Two
 
Documentaries
DocumentariesDocumentaries
Documentaries
 
Technologies Used In The Construction Stage
Technologies Used In The Construction StageTechnologies Used In The Construction Stage
Technologies Used In The Construction Stage
 
egutegia 2011 kolonbia
egutegia 2011 kolonbiaegutegia 2011 kolonbia
egutegia 2011 kolonbia
 
Software Development Training For Technical Recruiters
Software  Development  Training  For  Technical  RecruitersSoftware  Development  Training  For  Technical  Recruiters
Software Development Training For Technical Recruiters
 
Pak Raden di Sarang Lebah
Pak Raden di Sarang LebahPak Raden di Sarang Lebah
Pak Raden di Sarang Lebah
 
Imagine cup 2011 predloga za pripravo predstavitve
Imagine cup 2011   predloga za pripravo predstavitveImagine cup 2011   predloga za pripravo predstavitve
Imagine cup 2011 predloga za pripravo predstavitve
 

Similar a Chapter 01

iWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaiWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndrea
D'Andrea
 
Nvu tutorial1 1
Nvu tutorial1 1Nvu tutorial1 1
Nvu tutorial1 1
RJOROZCO
 
TID Chapter 8 Web Page Development
TID Chapter 8 Web Page DevelopmentTID Chapter 8 Web Page Development
TID Chapter 8 Web Page Development
WanBK Leo
 

Similar a Chapter 01 (20)

DW Unit 1.pdf
DW Unit 1.pdfDW Unit 1.pdf
DW Unit 1.pdf
 
Web Design Guide
Web Design Guide Web Design Guide
Web Design Guide
 
Dw cs3-introduction
Dw cs3-introductionDw cs3-introduction
Dw cs3-introduction
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
Web development
Web developmentWeb development
Web development
 
iWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaiWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndrea
 
Dot Net Nuke
Dot Net NukeDot Net Nuke
Dot Net Nuke
 
WordPress Curriculum guide.pdf
WordPress Curriculum  guide.pdfWordPress Curriculum  guide.pdf
WordPress Curriculum guide.pdf
 
Lesson 8 Building a Website - Computer Pt.pdf
Lesson 8 Building a Website - Computer Pt.pdfLesson 8 Building a Website - Computer Pt.pdf
Lesson 8 Building a Website - Computer Pt.pdf
 
Dream weaver cs6
Dream weaver cs6Dream weaver cs6
Dream weaver cs6
 
ADOBE DREAMWEAVER
ADOBE DREAMWEAVERADOBE DREAMWEAVER
ADOBE DREAMWEAVER
 
BUILDING WEBSITES ON WORDPRESS
BUILDING WEBSITES ON WORDPRESSBUILDING WEBSITES ON WORDPRESS
BUILDING WEBSITES ON WORDPRESS
 
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 HoursCreating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
 
Walkthrough asp.net
Walkthrough asp.netWalkthrough asp.net
Walkthrough asp.net
 
Nvu tutorial1 1
Nvu tutorial1 1Nvu tutorial1 1
Nvu tutorial1 1
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
171dreamweaver
171dreamweaver171dreamweaver
171dreamweaver
 
171dreamweaver
171dreamweaver171dreamweaver
171dreamweaver
 
TID Chapter 8 Web Page Development
TID Chapter 8 Web Page DevelopmentTID Chapter 8 Web Page Development
TID Chapter 8 Web Page Development
 
Website Toolkit: Netdrive tutorial
Website Toolkit: Netdrive tutorialWebsite Toolkit: Netdrive tutorial
Website Toolkit: Netdrive tutorial
 

Último

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 

Último (20)

Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 

Chapter 01

  • 1. Chapter 1 Getting Started with Dreamweaver
  • 2.
  • 3.
  • 4.
  • 5. Fig 1: Dreamweaver CS4 Workspace © 2010 Delmar Cengage Learning Property inspector Tag selector Document window Document border Related files toolbar Application bar (Win) or Menu bar (Mac) Workspace switcher Insert panel Files panel Zoom tool Hand tool Select tool Drag the panel border up or down to resize insert panel
  • 6.
  • 7.
  • 8. Figure 3: Starting Dreamweaver CS4 © 2010 Delmar Cengage Learning Click Adobe Dreamweaver CS4
  • 9.
  • 10.
  • 11. Figure 5: Code View for New Document © 2010 Delmar Cengage Learning Coding toolbar Show Code view button Show Code and Design view button Show Design view button Switch Design View to Live View button Some options may differ depending on what was last selected Click to collapse all panels to icons
  • 12.
  • 13.
  • 14. Fig. 8: Common Web Page Elements © 2010 Delmar Cengage Learning Banner with logo Image Contact information Search feature Link to main pages in the website Links to support pages National Endowment for the Arts website – www.arts.endow.gov
  • 15.
  • 16. Fig. 10: Dreamweaver Help and Support Web Page © 2010 Delmar Cengage Learning Dreamweaver help (web) link
  • 17. Fig. 11: Displaying Help Content © 2010 Delmar Cengage Learning Selected subtopic content opens on right side of Help window Click plus sign to expand menu of Help topics
  • 18. Fig. 13: Phases of a Website Development Project © 2010 Delmar Cengage Learning
  • 19.
  • 20.
  • 21. Fig. 14: Striped Umbrella Website Storyboard © 2010 Delmar Cengage Learning
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28. Fig. 16: Creating a Root Folder Using the Files Panel © 2010 Delmar Cengage Learning If you just see a drive or folder name here you do not currently have a website open Striped_umbrella root folder Your drive or folder may differ
  • 29. Fig. 18: Site Definition Striped Umbrella Dialog Box © 2010 Delmar Cengage Learning Advanced tab Website name Browse for file icon Local root folder text box – your drive may differ Links relative to: option Enable cache check box
  • 30. Fig. 19: Setting the Remote Access © 2010 Delmar Cengage Learning Remote Info category Access pop-up menu
  • 31.
  • 32.
  • 33.
  • 34.
  • 35. Fig. 22: Site Definition with Assets Folder Set as Default Images Folder © 2010 Delmar Cengage Learning Default images folder text box Browse for file icon
  • 36. Fig. 23: Index.html Placed in Striped_Umbrella Root Folder © 2010 Delmar Cengage Learning Windows users see the path; Mac users see only the file name and document type Index.html Root folder Broken link icon Link to banner is broken because the banner is not yet inside the website