Week 3 - Session 1 <ul><li>Session aims </li></ul><ul><li>To introduce Dreamweaver software </li></ul><ul><li>To introduce...
Learning outcomes <ul><li>Describe what they did on week 2, session 2. </li></ul><ul><li>Label 12 areas of the Dreamweaver...
 
 
 
Create a folder structure for your website <ul><li>a website is a collection of files and folders, you don’t have to be on...
Use HTML to write a web page HTML page structure The code below shows the basic tags that create the main structure of eve...
Make a web page using HTML & Dreamweaver 1. Getting Started with HTML To begin using html you will need to use the code vi...
Create new document  <ul><li>choose page type and layout, docType - none </li></ul>
Switch to split view <ul><li>Add page title and type in the design pane. Watch the code change as you type </li></ul>
Preview your web document in a browser <ul><li>right click the document and choose open in safari </li></ul>
Define your site <ul><li>site > new site </li></ul>
 
 
 
 
Create new page
Make a new document <ul><li>file > new </li></ul>
Define the document <ul><li>html > 2 column fixed </li></ul>
Save the style sheet file <ul><li>navigate to your website folder </li></ul>
Dreamweaver makes you  a document <ul><li>the layout is fixed 2 column with a header and footer </li></ul>
Split code and design view
Web document edited in Dreamweaver
Web document preview in a web browser
Edit your web document in Dreamweaver  <ul><li>Delete the text you don’t want and add your moodboard image </li></ul>
Add an image to your web document <ul><li>copy your moodboard image into your image folder (in assets folder of website) <...
Add image to web document <ul><li>position cursor, drag image, add alt text, resize holding down shift key </li></ul>
Upcoming SlideShare
Loading in …5
×

Dreamweaver

1,051 views
970 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,051
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dreamweaver

  1. 1. Week 3 - Session 1 <ul><li>Session aims </li></ul><ul><li>To introduce Dreamweaver software </li></ul><ul><li>To introduce web design techniques using Dreamweaver </li></ul><ul><li>To introduce file naming and folder structure for web design Learning Outcomes 2 & 3 Assessment criteria 2.3, 3.1, 3.3, 3.6 </li></ul>
  2. 2. Learning outcomes <ul><li>Describe what they did on week 2, session 2. </li></ul><ul><li>Label 12 areas of the Dreamweaver workspace </li></ul><ul><li>Set up folder and files for a website </li></ul><ul><li>Understand how Dreamweaver writes HTML code to display your web page </li></ul><ul><li>Make a moodboard page in Dreamweaver </li></ul><ul><li>Define the page properties for a Dreamweaver web site </li></ul><ul><li>Upload this page to their Digital Diary </li></ul>
  3. 6. Create a folder structure for your website <ul><li>a website is a collection of files and folders, you don’t have to be online to look at a website </li></ul>
  4. 7. Use HTML to write a web page HTML page structure The code below shows the basic tags that create the main structure of every web page. <html> <head> <title> Text that appears at the head of the browser window </title> </head> <body> This is where the content of the web page is added .</body> </html> Short for H yper T ext M arkup L anguage, the authoring language used to create document s on the World Wide Web .
  5. 8. Make a web page using HTML & Dreamweaver 1. Getting Started with HTML To begin using html you will need to use the code view in Dreamweaver NOTE: text editors which include formatting information (eg Microsoft Word) should not be used for authoring web pages. In order to preview your HTML page you will need a web browser, such as Internet Explorer, Firefox, Google Chrome, etc. You don’t need to be online. IMPORTANT: Always save an html file with the file extension “ .html ” or “ .htm ”. Use the <html> <head> <title> <body> tags to create a web document. Remember to close the tags.
  6. 9. Create new document <ul><li>choose page type and layout, docType - none </li></ul>
  7. 10. Switch to split view <ul><li>Add page title and type in the design pane. Watch the code change as you type </li></ul>
  8. 11. Preview your web document in a browser <ul><li>right click the document and choose open in safari </li></ul>
  9. 12. Define your site <ul><li>site > new site </li></ul>
  10. 17. Create new page
  11. 18. Make a new document <ul><li>file > new </li></ul>
  12. 19. Define the document <ul><li>html > 2 column fixed </li></ul>
  13. 20. Save the style sheet file <ul><li>navigate to your website folder </li></ul>
  14. 21. Dreamweaver makes you a document <ul><li>the layout is fixed 2 column with a header and footer </li></ul>
  15. 22. Split code and design view
  16. 23. Web document edited in Dreamweaver
  17. 24. Web document preview in a web browser
  18. 25. Edit your web document in Dreamweaver <ul><li>Delete the text you don’t want and add your moodboard image </li></ul>
  19. 26. Add an image to your web document <ul><li>copy your moodboard image into your image folder (in assets folder of website) </li></ul>
  20. 27. Add image to web document <ul><li>position cursor, drag image, add alt text, resize holding down shift key </li></ul>

×