Dreamweaver Learning to be a web design master! By: Mr. Brunton

Introduction to Dreamweaver To do list … 1. Open Dreamweaver 2. Define a site 3. Design a page on paper 4. Design a layout using layout view 1. Think of screen size (1024x768 is a pretty standard size) 5. Setting some basic properties 6. Adding images to the page 7. Saving the page as a template so that all other pages in the site look the same 8. Adding text to the page 9. Adding links to the page 8. Practice site

Introduction to Dreamweaver Open Dreamweaver Start Menu Programs Adobe Web Standard CS4 Choose Dreamweaver shortcut

Create a folder Open your H-drive through My computer and create website folder Introduction to Dreamweaver

Getting Started … On the top bar, choose: Site … New Site  This screen will pop up Name your site No to server Edit local copies and choose where to save it by clicking on the folder Define a site

Introduction to Dreamweaver Define a site (continued) Choose “None” for how to connect to server Choose Done You now have a list of files in your site’s folder (might be nothing at this point). You will see this on the right hand side of the screen

Introduction to Dreamweaver Designing a web page Take a moment or two to design what you page will look like on paper … (demonstration on board) What you are left with is a design layout that you will use in the next steps

Introduction to Dreamweaver Create your table Add a table (Insert  Table) with the number of rows and columns needed. Merge cells and re-align as needed. Follow demonstration on board.

Introduction to Dreamweaver Setting some properties Page properties – right click (at bottom) Title, page margins, colour, fonts, etc. Table properties – click on at bottom Colours, etc. Cell properties – click on desired cell, right-click, ‘Edit tag ’ Colours, alignment, etc.

Introduction to Dreamweaver Adding images Create an images folder Right-click on the site folder, choose New Folder. Call it ‘images’ Create / steal images and save them to this new folder Click and drag the image where you want to insert it (let’s start with a top banner)

Introduction to Dreamweaver Saving the document Save as an html file Go to File, Save Save the document as index Save as a Dreamweaver template file Go to File, Save as … Save the document as template

Introduction to Dreamweaver Adding text Make sure you are working in the index.htm file, not the template file. Click where you want and type away At the bottom of the page, you will notice many of the same features that you would see in Word or WordPerfect Ie: bold, italics, centre, indent, bullets, numbering, font face

Introduction to Dreamweaver Adding links Create a second file (use your template to do this) Save the file as about.htm (be sure to choose html file On the left hand side, create a link back to the home page Type ‘Home’ in the appropriate spot Highlight ‘Home’ Use the point to file function to link to index.htm You can also type in an address in the Link box

Practice Site Create a website for one of the following: SJSH Restaurant Sports team The site should have 4 pages; each page should look the same and should have links to all other pages in the site Be sure to organize files into a folder Introduction to Dreamweaver