1. Dreamweaver – Setting up a Site and Page Layouts
Web Design
Section 8-2
Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

2. Objectives The Student will: Create a site definition
Establish local folder
Add pages to the site
Using the file panel to organize files
Create page layout using different methods
Freestyle
Dreamweaver templates
Tables

3. Setting Up a New Site
In Dreamweaver the term site refers to the local and remote storage where the files that make up a site are stored.
To use all Dreamweaver’s features you always start by defining a site

4. Creating a Site
In Dreamweaver, a site organizes on your local computer all the documents associated with your website.
A site lets you
track and maintain links
manage files, share files
transfer your site files to a web server.
Think of your Dreamweaver site as the "bucket" that contains all of the files and assets for your website.

5. Creating a Site
When you create a local site, you can place any existing assets (images or other pieces of content) in the local site's root folder (the main folder for the site). That way when you add content to your pages, the assets are there and ready for you to use.

6. Local Sites
You must define a Dreamweaver local site folder for each new website you create.
Dreamweaver needs to know where your site files are to create all the internal links correctly, and to update them when you move files to a different location within your site.

7. Creating a Site
Start Dreamweaver and choose Site > New Site. The Site Setup dialog box appears.

8. Creating a Site
Pick a Site Name. This can be anything you want. The name is used internally by Dreamweaver to identify the site. It doesn’t matter if it contains spaces.
Local Site Folder: Choose an existing folder or create a new one. All the files will be in this folder.
Click Save and you have your site created.

9. Files Panel
The Files panel in Dreamweaver now shows the new local root folder for your current site. The file list in the Files panel acts as a file manager, enabling you to copy, paste, delete, move, and open files just as you would on a desktop

10. Files Panel
If you use the File Panel to move files, etc. Dreamweaver will automatically update the links within the files.

11. Best practices for naming files and folders in a website
A typical website contains a large number of files and folders. For ease of maintenance, it’s important to organize them logically. Create separate, appropriately named folders for images, videos, style sheets, and external JavaScript files.

12. Best practices for naming files and folders in a website
Keep the following points in mind:
File and folder names in websites should never contain spaces or any of the following characters: /\?%*:|”<>.
Although other special characters are permitted, it’s generally a good idea to use only alphanumeric characters, hyphens, and underscores.
Most file and folder names end up as part of a web page’s URL, so keep them short, but meaningful. Long URLs are difficult for users to remember and type into browsers on a mobile device.

13. Dreamweaver Sites Summary
Using a site in Dreamweaver allows you to manage all the files and the links between them.
Sites also allow you to link your working copies to the “official” web site and upload your files
We will not be doing that in this class.

14. Page Layout Options
There are a number of ways to layout a page in Dreamweaver. We will cover 3 of them:
Freestyle – Do the page layout as you build your page.
Difficult for complex layouts!
Dreamweaver templates
By using a table

15. “Freestyle”
Freestyle is what you have been doing in your index.htm file
Use <div> to separate the content and use CSS commands (float: left, etc) to position the content on the page.
Complicated CSS code!

16. Using Built in Templates
Dreamweaver has a number of built in templates to rapidly layout the page.
Creates the CSS code for you
Once created you can alter the CSS code to change the appearance to what you want

17. Using Built in Templates
Click on File -> New and choose HTML. Choose the template you want.

18. Using a Table to Define the Layout
Tables help you divide the space on your page.
Tables give you the option of making your page a fixed size or making it fit to the user's window the best it can.
Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.

19. Example
To create a web page with a layout like this:

20. Example
Create a table with 3 row and 3 columns that takes up 100% of the screen

21. Example
Highlight the first row of cells by placing your cursor in either far left or far right cell and dragging to the other side.
Click on the merge cells button in properties panel
Do the same with the bottom row

22. Example
Highlight and merge the middle and right cells in the middle row. This section will be used for your main content, and the leftover cell will be used for links.

23. Example
Now you can adjust the table by clicking and dragging on the handles to make the table look more like a familiar webpage
From here you can insert additional tables into any of the cells you want. This will let you place your text and images exactly where you want them within each section.

24. Summary - Layouts
There are different ways to create a page layout in Dreamweaver
Choose the 1 that works the best for your application

25. Rest of Today Download the instructions for Homework 8-2.
Complete the assignment and show me the result.
You have 2 days to complete this assignment.
All questions and answers must be added to your tools.html file.

26. tools.html

27. Freestyle

28. Table

29. Dreamweaver