Welcome to Part 1 of Building a website with Web Premium CS4. In this tutorial series, you'll get step-by-step instructions to develop a website for a fictional travel services company, Adventure Tours. The website includes a home page and several other pages to market the company's travel services.

This series is divided into 15 separate tutorials. Begin with this tutorial to follow along with the instructions from start to finish or use the overview to jump in at a specific point along the way to start learning about a topic.

In Part 1, I'll describe the process of planning the website. This section explains how to gather all of the feedback from stakeholders to get a good understanding of the business requirements, so that you can develop the site's functional and technical requirements. This pre-planning phase is a critical step that will help everyone on the team communicate their thoughts and allow you to prepare a development plan that is in line with the project's goals.

So let's get started by reviewing the various elements we'll be working with to build this project. A website consists of multiple files. These files are commonly referred to as site assets and include:

• HTML files: HTML is a tag-based markup language that describes all or part of a web page. Static HTML files have a file extension of .html or .htm. HTML (HyperText Markup Language) can also be generated dynamically by an application server such as PHP; in that case, the file extension is determined by the application server. PHP uses pages with the file extension .php.
• CSS files: A CSS (cascading style sheet) file contains rules that determine the appearance of web page elements. CSS files use the file extension .css.
• JavaScript files: These files contain programming code that controls a page's behavior in the web browser. This code can be embedded in an HTML page or stored in a separate, external file with the file extension .js.
• Images: These are binary files that are rendered visually by the browser. Modern web browsers typically use three image formats: JPG files (for photographs or other photorealistic images with many colors), GIF files (for computer-generated graphics that use continuous tones) and PNG files (which can display both photorealistic and continuous tone images). Both GIF and PNG files support transparent backgrounds, while JPG files do not.
• Flash files: These are binary files that are loaded and played by Adobe Flash Player. Flash files can be used to present animations, sound and video, 3D objects and other rich content that's beyond the capabilities of the web browser.

Planning a website includes the following steps:

• Deciding who will make decisions on site content and presentation.
• Selecting and organizing the site assets.
• Setting up the site's physical organization, including the folder structure and file naming standards.

Although you can't anticipate every requirement in advance, investing some time in planning your site will increase the likelihood that your site will launch on time and as desired. In this part of the tutorial series, Building a website with Web Premium CS4, I'll describe some of the most important decisions you should make and describe the choices made for the Adventure Tours site. I'll also provide an overview of the design of the site that you are about to build.

Requirements

To make the most of this tutorial, you need to following software and files:

Photoshop CS4

• Try
• Buy

Sample files:

• adventure_tours_comps.zip (ZIP, 10 MB)

Prerequisite knowledge

Basic knowledge of working with files in Photoshop CS4.

Understanding stakeholders

Most websites are built for companies or organizations that have multiple individual contributors. Whether it's a company owner, a manager, a content contributor, or the webmaster who will eventually maintain the site, everyone is likely to have an opinion on how the site should be built. During the planning phase, I refer to all of these players as stakeholders. In the initial planning phase, it's good to know who they are, gather their requirements, and determine who has the final decision on each aspect of the site.

As everyone on the team is brainstorming, it is important to think about the demographic that will use the website, otherwise known as your target audience. Attempt to categorize the subset(s) of people who will likely comprise your site's visitors. Defining the target audience is helpful when making content and design decisions, because you can craft a message that will resonate well with a particular group.

Also, try to think of the goals associated with each web page. What do you hope that site visitors will do on each page? Register for the site? Enter their email address? Purchase a product? View the photos? Submit a form to contact you? Envision the top goals for the entire site, and then list out the action items that should drive the interface for each page in the site.

I've already completed the stakeholder interviews for the Adventure Tours site for you; here are the results:

• The company owner wants the site to be easy to use for her customers, and wants to ensure that her company's branding (including logo, colors, and other visual elements already in use in existing marketing materials) are properly represented.
• The head of information technology wants to use open source software on the server, and not be bound to a particular server-based operating system.
• The graphic designer is accustomed to working in Adobe Photoshop and wants to be sure he can use tools he already understands to develop the site's planned appearance.
• The webmaster (that's you) wants to be sure that the most modern web browser technologies are used to create the site. This includes such strategies as using div tags and cascading style sheets to lay out the pages, adding Ajax-style programming on layer presentations to make them interactive and embedding Flash presentations to display animations, video and rich media.

Describing the site's functional requirements

After interviewing the site's stakeholders, the next step is to create a functional requirements document. Depending on the size of the organization, this phase can be as simple as documenting your initial interviews, or it can expand to include focus groups, public surveys, and scenario maps.

The two important aspects of a good functional requirements document are:

• Functional requirements are always driven by business requirements.
• Functional requirements describe what the site needs to do, and not how it does it.

Based on your initial interviews, you've determined that the primary functional requirements of the the Adventure Tours site's are as follows:

• The site should present a simple interface that represents Adventure Tours as a modern and fun provider of travel services.
• The site's visual design should reflect the organization's branding, including the logo, colors, common images, and other graphical elements that are used in existing marketing materials.
• The first page a site visitor encounters (the home page) should lead them to the site's most important features.
• Site visitors should be able to easily locate and compare the details of selected tours.
• Tour details, such as prices and descriptions, should be easy to change without having to directly edit the site's web pages.
• The site should be built to support all modern web browsers and operating systems to reach the broadest possible audience.
• The site should be functionally identical and, as closely as possible, visually identical on all web browsers and operating systems identified as being in common use by the target audience.
• All server software should be available on multiple server platforms in the event of later migration to another server operating system.

The functional requirements document should be shared and reviewed with the stakeholders. If conflicts are found between stakeholders, call a meeting! And if you fail to find consensus on the requirements, don't hesitate to go to the key stakeholder (in this case, the company's owner) for a final decision.

Describing the site's technical specifications

The next step is to translate the functional requirements into technical specifications. These documents include:

• Detailed descriptions of site features
• Descriptions of requirement infrastructure, such as selected server software
• Requirements for web browser compatibility

The following list is a brief example of a technical specification for a single web page, the home page, which includes the following elements:

• A graphical banner incorporating the company name and logo and an image that makes the visitor wish they were there.
• A navigational interface that presents links to other critical web pages.
• A data entry form that allows the website visitor to search for tours by various criteria.
• A graphical display of three current tours, where data for the tours is stored in a server-side database.
• For each tour, a check box that allows the visitor to select tours for comparison.
• A form button that allows the visitor to quickly access the tour comparison page.

And the following is a brief example of the type of technical documentation you should provide for the site's server infrastructure:

• The site will be hosted initially on a server with the Microsoft Windows 2008 operating system, but should be portable to Linux and other operating systems that are compatible with Apache and PHP
• All server software should be available on multiple server platforms in the event of later migration to another server operating system.
• The site will be built using PHP as the application server.
• All web pages will be built as PHP files.
• A common look and feel will be achieved with the use of PHP-based header and footer files.

Exploring the site design

The exercise files for this tutorial include 4 comps, or compositions, built in Adobe Photoshop CS4. Each comp represents a visual design for one of the website's required pages:

• The Home page, with navigational links to all other pages and a data entry form that allows visitors to select tours by various criteria.
• The Tour Comparison page, which dynamically presents one or more tours and their details such as price, length, and rating for a side-by-side comparison.
• The Map page, which provides website visitors with the details of specific tour packages.
• The Blog page, which allows the business to share news with website visitors.

Follow these steps to extract the exercise files and review the comps for the AdventureTours site designs:

1. Create a new folder anywhere on your hard disk named AdventureTours.
2. Extract the contents of the tutorial's exercise files archive to the AdventureTours folder. You should see a new subfolder named AdventureToursComps.

3. Open the AdventureToursComps subfolder. You'll see the following files:

   • Blog.psd
   • Compare.psd
   • Home.psd
   • Map.psd
4. Open each of the following files in Photoshop to review the designs of the files that make up the pages of the AdventureTours site (see Figures 1 through 4).

Figure 1. The design of the AdventureTours home page (Home.psd).

Figure 2. The Tour Comparison page design (Compare.psd).

Figure 3. The Map page design (Map.psd).

Figure 4. The Blog page design (Blog.psd).

The tasks you'll perform in the remaining tutorials include:

• Transforming the Photoshop comps into modern web page layouts using div tags and cascading style sheets (CSS).
• Testing web page designs over a variety of operating systems and browsers with Adobe BrowserLab.
• Building dynamically generated PHP pages with Dreamweaver that bring in external data from a MySQL database connected to the server.
• Using Adobe Creative Suite 4 integration features, such as Smart Objects.
• Using InContext Editing to edit website content from within a web browser.

Take some time to examine each of the Photoshop composition files before moving on to Part 2 of this tutorial series, which describes the process of installing Apache, MySQL and PHP on your local system. Part 2 also describes how to define the site in Dreamweaver in order to connect via FTP to the remote hosted server.

Building a website with Adobe Creative Suite 4 Web Premium

For your reference, here are all the parts in this series:

Introduction
Part 1: Planning the website
Part 2: Creating a local site
Part 3: Creating a remote site
Part 4: Creating a visual design
Part 5: Slicing and exporting site assets with Fireworks
Part 6: Adding styles to finalize the page design
Part 7: Finalizing and reviewing the home page
Part 8: Creating a database
Part 9: Presenting dynamic data
Part 10: Adding Ajax functionality with Spry
Part 11: Creating an interactive web form
Part 12: Creating and presenting a Flash animation
Part 13: Adding video to the website
Part 14: Creating a blog with InContext Editing

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author