Creating a Page Layout with Adobe Dreamweaver CS6
- Web design basics
- Working with thumbnails and wireframes
- Defining a Dreamweaver site
- Using the Welcome screen
- Previewing your completed file
- Modifying an existing CSS layout
- Adding a background image to the header
- Inserting new components
- Changing element alignment
- Modifying the page width and background color
Note: This excerpt is from the forthcoming book Adobe Dreamweaver CS6 Classroom in a Book, ISBN 9780321822451.
From the book
From the book
From the book
Lesson Overview
In this lesson, you’ll learn
- The basics of webpage design
- How to create design thumbnails and wireframes
- How to insert and format new components into a predefined CSS layout
- How to use Code Navigator to identify CSS formatting
- How to check for browser compatibility
This lesson should take ?? minutes to complete. Before beginning, make sure you have copied the files for Lesson 4 to your hard drive as described in the “Getting Started” section at the beginning of the book. If you are starting from scratch in this lesson, use the method described in the “Jumpstart” section of “Getting Started.”
)
Figure 0 Whether you use thumbnails and wireframes or just a vivid imagination, Dreamweaver can quickly turn design concepts into complete, standards-based CSS layouts.
Web design basics
Before you begin any web design project for yourself or for a client, there are three important questions you need to answer:
- What is the purpose of the website?
- Who is the customer?
- How do they get here?
What is the purpose of the website?
Will the website sell or support a product or service? Is your site for entertainment or games? Will you provide information or news? Will you need a shopping cart or database? Do you need to accept credit card payments or electronic transfers? Knowing the purpose of the website tells you what type of content you’ll be developing and working with and what types of technologies you’ll need to incorporate.
Who is the customer?
Are the customers adults, children, seniors, professionals, hobbyists, men, women, everyone? Knowing who your market will be is vital to the overall design and functionality of your site. A site intended for children probably needs more animation, interactivity, and bright engaging colors. Adults will want serious content and in-depth analysis. Seniors may need larger type and other accessibility enhancements.
A good first step is to check out the competition. Is there an existing website performing the same service or selling the same product? Are they successful? You don’t have to mimic others just because they’re doing the same thing. Look at Google and Yahoo. They perform the same basic service, but their site designs couldn’t be more different from one another.
)
Figure 1 Could two sites be more different than Google and Yahoo? Yet they both perform the same service.
How do they get here?
This sounds like an odd question when speaking of the Internet. But, just as with a brick-and-mortar business, your online customers can come to you in a variety of ways. For example, are they accessing your site on a desktop computer, laptop, tablet, or cell phone? Are they using high-speed Internet, wireless, or dial-up service? What browser do they most like to use, and what is the size and resolution of the display? These answers will tell you a lot about what kind of experience your customers will expect. Dial-up and cell phone users may not want to see a lot of graphics or video, while users with large flat-panel displays and high-speed connections may demand as much bang and sizzle as you can send at them.
So, where do you get this information? Some you’ll have to get through painstaking research and demographic analysis. Some you’ll get from educated guesses based on your own tastes and understanding of your market. But a lot of it is actually available on the Internet itself. W3Schools, for one, keeps track of tons of statistics regarding access and usage, all updated regularly:
- w3schools.com/browsers/browsers_stats.asp: Provides more information about browser statistics.
- w3schools.com/browsers/browsers_os.asp: Gives the breakdown on operating systems. In 2011, they started to track the usage of mobile devices on the Internet.
- w3schools.com/browsers/browsers_display.asp: Lets you find out the latest information on the resolutions, or size, of screens using the Internet.
If you are redesigning an existing site, your web hosting service itself may provide valuable statistics on historical traffic patterns and even the visitors themselves. If you host your own site, third-party tools are available, like Google Analytics and Adobe Omniture, which you can incorporate into your code to do the tracking for you for free or for a small fee.
When you boil down all the statistics, this is what you will find: Windows (80 to 90 percent) dominates the Internet, with most users divided almost equally between Firefox (37 percent) and Google Chrome (33 percent), with various versions of Internet Explorer (22 percent) taking third position. The vast majority of browsers are set to a resolution higher than 1024 pixels by 768 pixels. If it weren’t for the growth in usage of cell phones and smartphones for accessing the Internet, these statistics would be great news for most web designers and developers. Designing a website that can look good and work effectively for both flat-panel displays and cell phones is a tall order.
Each day, more people are using cell phones and other mobile devices to access the Internet. Some users may use them now to access the Internet more frequently than they use desktop computers. This presents a nagging problem to web designers. For one thing, cell phone screens are a fraction of the size of even the smallest flat-panel display. How do you cram a two- or three-column page design into a meager 200 to 300 pixels? Another problem is that many device manufacturers have decided to follow Apple’s decision to drop support for Flash-based content on their mobile devices. Keep all these statistics in mind as you go through the process of designing your site.
)
Figure 2 Many of the concepts of print design are not applicable to the web, because you are not in control of the user’s experience. A page carefully designed for a typical flat panel is basically useless on a cell phone.
Scenario
For the purposes of this book you will be working to develop a website for Meridien GreenStart, a fictitious community-based organization dedicated to green investment and action. This website will offer a variety of products and services and require a broad range of webpage types, including dynamic pages using server-based technologies like PHP.
Your customers come from a broad demographic including all ages and education levels. They are people who are concerned about environmental conditions and who are dedicated to conservation, recycling, and the reuse of natural and human resources.
Your marketing research indicates that most of your customers use desktop computers or laptops, connecting via high-speed Internet services, but that you can expect 10 to 20 percent of your visitors via cell phone and other mobile devices.