If you are new to Dreamweaver and to web development, this is definitely the book for you! Dreamweaver CS5 Mastering the Basics will equip you with a step by step plan for creating a Dreamweaver website and making it live. Filled with practical walk-through exercises, this book will demystify the process of building accessible, standards-compliant sites, showing you how to leverage the power of Cascading Style Sheets and Dreamweaver templates to maintain a consistent look and feel on all pages...Topics include: Using CSS for web page layout, Using Dreamweaver accessibility tools, Working with images, Creating hyperlinks, Using Dreamweaver templates and libraries, The 12-step plan for building a complete site, Getting your website hosted for free, Uploading files to a live server, Testing and maintaining a site, Creating an enquiry form, Installing a form-handling script, Using JavaScript behaviors, Enhancing interactivity with Spry widgets, Using Spry form validation widgets...
Steps involved in building a Dreamweaver website
Dreamweaver CS5 Mastering the Basics breaks down the process of creating a basic site within Dreamweaver into the 12 steps shown below.
1. Plan and design
Before you start, you should have a clear idea of what information you want to display in your website and the options that will be available to visitors. It's best to start with an achievable goal--a project that you can realistically bring to a satisfactory conclusion. Don't attempt an "all singing, all dancing" e-commerce site as your first project.
Planning and design can be done using a pencil and paper. However, you will almost certainly need access to graphics tools such as Adobe Photoshop and Illustrator to collate and optimize all available relevant graphics such logos and photos showing key personnel, services or products--or whatever your site requires.
2. Create Local Site Folder
Before you are ready to start defining your Dreamweaver site, you should create a folder whose sole purpose in life is to contain the various files which will constitute the website you intend to create--your version of the site, the version that you develop and test and which only you can see.
Create a folder in any convenient location and don't put anything in this folder but the files relating to your site. Once you have completed your project, the contents of the Local Site Folder will mirror the live version of your site.
3. Create Default Images Folder
The Default Images Folder is a folder you create inside the Local Site Folder and which you later designate as the default location for images. This will help prevent you ending up with missing images on your pages. (This process was described in Chapter 1: Getting Started, page 12).
4. Define Dreamweaver site
To create a new site in Dreamweaver, choose Site > New Site. The key elements that you need to define are shown below.
Site Category
Site Name
In the Site category on the left of the dialog, enter a name for the site.
Local Site Folder
The second field in the Site category allows you to specify the Local Site Folder that you created in step 2. Simply click on the Browse for folder button, navigate to the folder, open it then click on the Select button (or Choose button on Mac).
Servers category
If you have already signed up with a hosting company, this is the category which allows you to enter the details which will enable Dreamweaver to connect to the server and upload files to make them live. (This process is described in Chapter 13: Site Management and Checking, page 238.)
Advanced category > Local info
Default Images Folder
In this section you should specify the Default Images Folder that you created in step 3, by clicking on the Browse for folder button.
5. Create all files and folders
Before actually putting any content in your pages, you should ensure that all the pages you mapped out in your original plan have been created and saved. Instead of creating and then completing each page individually, it is best to create and save every single folder and every single page in your design.
The reason for this approach is that it will help prevent the creation of links that don't work properly. Basically, using this method, whenever you come to create a link, the page you are linking to will already exist in the correct location within your site structure. To create a link to any page, you can then simply browse for it or use the Point to file tool; and Dreamweaver generates the correct link automatically.
6. Create template
There are still a couple more steps that you should perform before you are ready to actually start work on the page content; to get the most benefit from a program like Dreamweaver, you should create at least one template. Templates allow you to maintain a consistent look and feel throughout the site.
7. Create CSS file
The other key element which will enable you to create themed and consistent pages is CSS. For the greatest flexibility, the normal practice is to create an external CSS file which will hold the rules controlling the layout and formatting of all the pages in the site.
8. Link CSS file to template
The rules in the CSS file will control the layout and formatting of all elements on the template. To achieve this, the template must be linked to the CSS file.
9. Create and style template content
a. Create locked content
Locked content refers to those elements which will be reproduced on all pages based on the template but which can only be edited on the template itself. Typically, this will be items such as logos, navigation links, banners and footers.
b. Define editable regions
Editable regions are those areas of the template which will be modifiable on pages based on the template. Each time you apply the template to a page, you can put unique content in the editable regions. A template must have at least one editable region to be of any use.
c. Create CSS Rules
The layout of the content of the template is achieved by creating CSS rules to control the positioning and formatting of the elements on the page. These rules will be stored in the external CSS file created in step 7. Since the template is linked to the CSS file, all pages based on the template will also be linked to the CSS file.
10. Add content to pages
Having finished your template and your CSS file, you are ready to build the web pages that will constitute your site. Simply open each page, choose Modify > Templates > Apply Template to Page and then add the text, images, etc. that make up the unique content of that page.
11. Test your website
Whenever you build a new website, you can almost guarantee that you will make mistakes and that there will be errors within the site that need to be fixed before it goes live. Adobe Dreamweaver has a number of tools for helping you to locate such errors and correct them. The program allows you to perform browser compatibility checks, locate broken links, orphaned files and locate syntax errors within your code.
Testing your website should be an on-going part of building the site and not just an isolated step which is performed after the site has been built. Every page that forms part of the site should function correctly in all its aspects in all of the browsers which the site is designed for. Using Adobe Dreamweaver's various reports is a great way of ensuring that your site is error-free.
The tools available in Dreamweaver for testing and validating are described in Chapter 13: Site management and checking.
12. Upload site and go live
Once you are happy that everything checks out OK, you can think about going live. If you have not already done so, you will need to enter server information to enable Dreamweaver to connect to the server. Uploading a site is done using the Files panel.
...By the time you finish this book, you will have acquired the key web developer skill of knowing how to build a standards-compliant web site and make it live on the web.
