Part I
Creating Great Websites
Chapter 1 compares different layout techniques you can use in Dreamweaver and provides an introduction to the toolbars, menus, and panels that make up Dreamweaverâs interface. In Chapter 2, you dive into setting up a website, creating web pages, and adding text, links, and meta data for search engines.
In Chapter 3, you find an introduction to web graphics with instructions for using Photoshop (or Photoshop Elements) to optimize images in GIF, PNG, and JPEG formats. Chapter 4 covers managing, testing and publishing your site, so you can make sure that everything works beautifully before you publish your site to a web server.
1
The Many Ways to Design a Web Page
In This Chapter
Organizing your siteâs design and files
Comparing static and dynamic site options
Saving time with static and dynamic templates
Choosing between tables, frames, layers, and CSS
Handling browser differences in web design
Customizing your Dreamweaver workspace
In the mid-1990s, learning to create websites â and teaching others how to do it â was easy. More than a dozen years and a dozen books later, the process is a lot more complex. Iâve come to realize that one of the first things to understand about web design is that there isnât just one way to create a website anymore.
In this chapter, I being with an introduction to the many ways you can create a website and the tools Dreamweaver offers to make those designs possible. I also introduce you to the basics of HTML and how websites and browsers work. At the end of this chapter, you find a quick tour of the Dreamweaver CS6 interface to help you get comfortable with the workspace.
Understanding How Web Design Works
In a nutshell, building a website involves creating individual pages and linking them to other pages. You need to have a home page, the first page visitors see when they arrive at your web address, (also known as your URL), and that page needs to bring them into the rest of the pages of the site, usually with links to each of the main sections of the site. Those pages, in turn, link to subsections that can then lead to deeper subsections.
After you create a website, you can test all the links on your own hard drive and then upload the pages to a web server when everything is ready and working well. You can read more about setting up a site and using Dreamweaver to create pages on your local computer in Chapter 2. In Chapter 4, you discover how to upload your pages to a web server when youâre ready to publish your site on the Internet.
The most important thing to remember is that you need to create a folder on your local computer that will mirror your website on your web server when you publish your site. Thatâs why the site setup process in Chapter 2 is so important â because it sets up Dreamweaver to help you create these two versions of your site: the version you create and edit on your computer and the copy you need to maintain on the web server.
Although you have to save all the files in your site in one main folder, you can create subfolders to organize the site. Thus a key part of planning a website is determining how to organize the pages of your site into sections and how those sections should link to one another. Dreamweaver makes creating pages and setting links easy, but how you arrange the pages and links is up to you.
If youâre just planning to create a small website, you may think you donât need to worry about how your site will grow and develop. Think again. All good websites grow, and the bigger they get, the harder they are to manage. Planning the path of growth for your website before you begin can make a tremendous difference later. Neglecting to think about growth is probably one of the most common mistakes among new designers. This oversight becomes even more serious when more than one person is working on the same site. Taking a little time to organize the structure of your site, and developing a few consistent conventions for tasks such as naming files, can make everything else go more smoothly.
Managing your siteâs structure
Managing the structure of a website has two sides: the side that users see, which depends on how you set up links, and the side thatâs behind the scenes, which depends on how you organize files and folders.
What the user sees
The side that the user sees is all about design and navigation. When users arrive at your home page, where do you direct them? How do they move from one page to another in your site? A good website is designed so that users navigate easily and intuitively and can make a beeline to the information most relevant to them. As you plan, make sure that users can
Access key information easily from more than one place in the site
Move easily between pages and sections
Return to main pages and subsections in one step
Setting links is easy in Dreamweaver; the challenge is to make sure that those links are easy for visitors to follow. One of the best ways to ensure that visitors can easily move around your site is to create on every page of your site a navigation or menu bar that includes links to the main pages of your site. You find instructions in Chapter 6 for creating a menu bar with CSS. In Chapter 11, you find out how to use Dreamweaverâs Spry features to create a menu with a drop-down list using AJAX. And in Chapter 8, you find instructions for using Dreamweaverâs template and library features, which make menus easier to include on your pages â as well as faster to update if you add or change a menu link later.
Whatâs behind the scenes
The second side to managing your website structure happens behind the scenes (where your users canât see the inform...
