The Photoshop file for the document is sme-layout.psd, in the
PSD mock-ups folder within the chapter 10 folder of the download files. The completed
web page (along with associated files) is within the sme-website folder, within the chapter
10 folder. The following image shows the Photoshop mock-up of the page.
About the design and required images
This design is clean and modern. The site is fixed-width, with a dark background color for
the overall page; a dark gradient from the top draws the attention toward the top of the
page. The masthead contains the company logo, along with a short sentence regarding
what the organization offers. Below that is the navigation, followed by the content area.
PUTTING EVERYTHING TOGETHER
387
10
The content area is simple: an introductory heading and paragraph (with a floated image
to the right) is followed by a client quote. Below that is a large horizontal rule, which is followed
by two columns.
Image-wise, the masthead background was exported (with the sentence turned off??”that
was added in HTML text), as was the background gradient. Other images were sourced
from elsewhere, the temporary image being the same one as in the previous layout
example, and the navigation images being taken directly from the example created for
Chapter 5.
Putting the business site together
When creating this layout, I made use of methods shown in the following exercises/sections:
Creating a fixed-width wrapper (Chapter 7)
Manipulating two structural divs for fixed-width layouts (Chapter 7)
Placing columns within a wrapper (Chapter 7)
Creating a two-tier navigation menu (Chapter 5)
Using CSS to wrap text around images (Chapter 4)
Gradients (Chapter 2, from the ???Web page background ideas??? section)
Styling semantic markup: A traditional example with serif fonts and a baseline grid
(Chapter 3)
Creating a boxout (Chapter 7)
Creating pull quotes in CSS (Chapter 3)
Open index.
Pages:
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496