Search engines have always shown a preference for CSS based layout over table, based layout. CSS allows you to separate your design from your content. Old-school web design taught to control placement of text and graphics using tables. The purpose of tables is to organize tabular information into rows and columns. Tables would be appropriate for an income statement or balance sheet showing financial data, and tables can and should be used in database-driven web sites. CSS separates the content (text and images) from the layout (color, size, position). The reason CSS is cascading is because the CSS can be in three locations: an external file, in the html document head, or inline in the html body. The specificity of CSS says start with the formatting in the external file, but if the same rule is defined in the html head then add the additional formatting on top of the external CSS rule. While many designers have begun to use CSS layout, most do it incorrectly. Good CSS layout should only require 50-60 rules to accomplish all formatting, anything more should be considered CSS sprawl.

CSS is comprised of three selectors: tag, class and id. There is a fourth hybrid selector called compound that combines any two or more selectors. Each selector is comprised of properties (color, size, position.). CSS is similar to using paragraph and character styles in ms word or Adobe InDesign.

To better understand CSS, this tutorial will create the NY SEO Expert website.

For instructions on the define a site process refer to our earlier blog post on How to Define a Website with Adobe Dreamweaver

To download the files required to follow this tutorial, click here.

Add a new file to the site and name it index.htm. For instructions on how to add a file to your site, review this post.

1. Open the new index.htm file and set the page properties:
   1. In the Appearance category:
      1. Set all margins to zero.
      2. Set the background color to: #1b2429 (The dark blue/grey in the photoshop file; The hexadecimal code was obtained using the eyedropper tool to sample the darker color).
   2. In the Title/encoding category:
      1. In the Title box type:
      2. IT Company – Developing Ideas – IT Solutions – Computer Help – Call 212 555 1212
2. In order to define the CSS Advanced ID Div tags you need to divide the Photoshop document into pieces and measure the width and height of boxes using the ruler tool.
   1. Use the image menu > image size command to get the width and height of the finished page; You should see the width is 775 pixels and the height is 680 pixels.
   2. Measure the distance from the top of the page to the bottom horizontal rule below the tagline that reads SOLUTIONS FOR A DIGITAL WORLD, this will be the header div. I measured the height as roughly 172 pixels but just round that off to 170 pixels to simplify measurements.
   3. Measure the distance from the top of the page to the top of the logo; I measured it as 22 pixels.
   4. Measure the distance from the left edge of the page to the left edge of the logo; I measured roughly 10 pixels. Measure the width and height of the logo; I measured the width as 230 pixels and the height as 55 pixels.
   5. To the right of the logo, measure the width and height of the colored rectangle with the Home, Help and Site map text; I measure the width as 485 pixels and the height as 86 pixels, which I round off to 85 pixels; Also, use the eyedropper to get the hex color for the blue/grey; I measured #282f39. This will be the background color of the HeaderRightBox div.
   6. Measure the height of the orange menu bar; I measured 39 pixels but will round off to 40 pixels for simplicity. Also measure the distance from the bottom edge of the menu bar to the top edge of the horizontal white line above the tagline; I measured 10 pixels; This will be the bottom margin of the menu div. Also, use the eyedropper to get the hex color for the orange; I measured #d7350f. This will be the background color of the menu div box.
   7. Measure the distance from from the top white horizontal line to the bottom horizontal white line surrounding the ‘tagline’ text “SOLUTIONS FOR A DIGITAL WORLD”; I measure the height as 30 pixels. This will be used for the height of the tagline div. Also, measure the distance from the bottom of the horizontal white line below the SOLUTIONS text to the top of the white box with Services Overview; I measured roughly 10 pixels; This will be the bottom margin for the tagline div.
   8. Measure the width and height of the left column, from the top of the picture of the couple to the bottom edge, just above the orange footer bar; Measure the width but stop where the colors shift; Also, use the eyedropper to sample the blue/grey background color. I measured the height as 430 pixels and the width as 240 pixels. I measured the color as #282f39
   9. Measure the width and height of the right column (the white rectangle); I measured the width as 495 pixels and the height as 430 pixels;
   10. Measure the height of the orange footer bar and use the eyedropper to sample the orange color; I measured the height as 65 pixels; I measured the color as #d7350f
   11. Now we will use these measurements to create the CSS Advanced ID selectors in Dreamweaver. We’ll need to return to measurements again later to determine the margins of all the text
3. In Dreamweaver, at the bottom of the CSS panel, click the + button to add a new CSS rule. In the New CSS Rule dialog, change the selector type to Advanced ID, type #wrapper for the name and Define In This Document Only; Click the OK button to display the CSS Properties Dialog;
   1. In the CSS Properties dialog, change the category to Box;
   2. Set the width of the box to 100% (not pixels) and click the OK button.

4. Insert the wrapper div onto the page; From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command; In the Insert Div Tag dialog set Insert to: At Insertion Point set the ID to: wrapper and click the OK button

5. Now we will define the box for the header; The header will contain the logo box, the HeaderRightBox, the menu box and the tagline box;
   At the bottom of the CSS panel, click the + button to add a new CSS rule.
   In the New CSS Rule dialog:
   change the selector type to Advanced ID
   type #header for the name
   Define In This Document Only;
   Click the OK button to display the CSS Properties Dialog;

   1. In the CSS Properties dialog, change the category to Box;

   2. click the OK button.
6. Insert the header div onto the page nested inside the wrapper;
   Triple Click the place holder text inside the wrapper to select it; Press the delete or backspace key to remove it; DO NOT CLICK ANYWHERE ON THE PAGE
   From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
   In the Insert Div Tag dialog set Insert to: At Insertion Point
   set the ID to: header
   Click the OK button
7. Now we will define the logo div;
   At the bottom of the CSS panel, click the + button to add a new CSS rule.
   In the New CSS Rule dialog:
   change the selector type to Advanced ID
   type #logo for the name
   Define In This Document Only;
   Click the OK button to display the CSS Properties Dialog;
   1. In the CSS Properties dialog, change the category to Box;
   2. Set the width of the box to 230 pixels;
      Set the height of the box to 55 pixels;
      Set the Float to Left;
      Uncheck Margins: Same for All;
      Set the Top Margin to 22 pixels;
      Set the Left Margin to 10 pixels;
      click the OK button.
      Set the width of the box to 775 pixels;
      Set the height of the box to 170 pixels;
      Uncheck Margins: Same for All;
      Set the Left and Right margin to Auto;
      Save the webpage.
8. Insert the logo div onto the page nested inside the header div;
   Triple Click the place holder text inside the header div to select it; Press the delete or backspace key to remove it; DO NOT CLICK ANYWHERE ON THE PAGE
   From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
   In the Insert Div Tag dialog set Insert to: At Insertion Point
   set the ID to: logo
   Click the OK button
9. Now we will define the HeaderRightBox div;
   At the bottom of the CSS panel, click the + button to add a new CSS rule.
   In the New CSS Rule dialog:
   change the selector type to Advanced ID
   type #HeaderRightBox the name
   Define In This Document Only;
   Click the OK button to display the CSS Properties Dialog;
   1. In the CSS Properties dialog, change the category to Box;
   2. Set the width of the box to 485 pixels;
      Set the height of the box to 85 pixels;
      Set the Float to Right;
      In the Background Category:
      Set the Background Color to: #282f39
      click the OK button.
10. Insert the HeaderRightBox div onto the page nested inside the header div after the logo div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag
    To the right, select #logo;
    set the ID to: HeaderRightBox
    Click the OK button
11. Now we will define the menu div;
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #menu the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
    2. Set the width of the box to 775 pixels;
       Set the height of the box to 40 pixels;
       Set the Clear to: Both
       Uncheck Margins: Same for All;
       Set the bottom margin to 10 pixels;
       In the Background Category:
       Set the Background Color to: #d7350f
       click the OK button.
12. Insert the menu div onto the page nested inside the header div after the HeaderRightBox div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag
    To the right, select # HeaderRightBox;
    set the ID to: menu
    Click the OK button
13. Now we will define the tagline div;
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #tagline the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 775 pixels;
       Set the height of the box to 30 pixels;
       Uncheck Margins Same For All;
       Set the Bottom Margin to 10 pixels;
       In the Border Category:
       Uncheck all the boxes: Same for all
       In the Style column:
       Change the Top and Bottom to Solid
       In the Width Column:
       Type 1 pixel for Top and Bottom
       In the Color Column:
       Set the Top to White and the Bottom to White
       In the Block Category:
       Set the Text Align to Center
       click the OK button.
14. Insert the tagline div onto the page nested inside the header div after the menu div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag
    To the right, select # menu;
    set the ID to: tagline
    Click the OK button
    Save the web page.
15. Now we will define the container div; The container div will contain the left and right column divs
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #container the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 775 pixels;
       Set the height of the box to 430 pixels;
       Uncheck Margins: Same for All;
       Set the Left and Right Margin to Auto;
       click the OK button.
16. Insert the container div onto the page below the header div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag
    To the right, select # header;
    set the ID to: container
    Click the OK button
17. Now we will define the leftcolumn div; The leftcolumn div will be nested inside the container.
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #LeftColumn the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 240 pixels;
       Set the height of the box to 430 pixels;
       Set the Float to: Left
       In the click Background category:
       Set the Background Color to: #282f39
       Click the OK button.
18. Insert the LeftColumn div onto the page inside the container div;
    Select the Placeholder text in the container div (Triple click it) and press the delete or backspace key;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: At Insertion Point;
    set the ID to: LeftColumn
    Click the OK button
19. Next we will define the RightColumn div; The RightColumn div will be nested inside the container after the left column.
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #RightColumn the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 495 pixels;
       Set the height of the box to 430 pixels;
       Set the Float to: Right
       In the click Background category:
       Set the Background Color to: #FFFFFF (white)
       Click the OK button.
20. Insert the RightColumn div onto the page inside the container div after the LeftColumn div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag;
    To the right, select # LeftColumn;
    set the ID to: RightColumn
    Click the OK button
21. The final step in part 1 is to create the footer box. The footer will appear after the container div.
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #footer the name box
    Define In: This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 795 pixels;
       Set the height of the box to 65 pixels;
       Uncheck Margins: Same for All;
       Set the Left and Right Margin to Auto;
       In the click Background category:
       Set the Background Color to: #d7350f
       Click the OK button.
22. Insert the footer div onto the page below the container div :
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag;
    To the right, select #container;
    set the ID to: footer
    Click the OK button
    Save the web page.

After you create a composite layout of your website in Photoshop (refer to this post for more information), the next step is to define a website with Adobe Dreamweaver. The purpose of defining a new site is tell Dreamweaver where your files are located. In particular you will set a local root folder which tells Dreamweaver where to locate the html, flash and images (jpg/gif) displayed on your web pages.

Steps to Define a New Website with Adobe Dreamweaver

1. Select the Site menu > New Site command;
   
2. In the Site Definition Dialog, switch from the Basic tab to the Advanced tab
   
3. In the Local Info Category type a Site name; This can be anything you want, and can include spaces/punctuation; If you develop multiple sites with identical names but different suffixes (i.e.: .com, .org., .net, .biz extensions) then it’s a good idea to include the suffix in the site name.
4. Next, select the Local Root Folder. The Local Root Folder is a folder on your computer’s hard-disk that will store the html files and images you will eventually post to the internet. To select the Local Root Folder, click the browse for folder icon. Then, create a new folder somewhere on your computer and click the Select button.
5. 
   
6. Although optional, best-practice is to also include a Default Images Folder that should be located inside the local root folder. The default images folder is often named images, and is used to help organize all graphic content into one location.
7. At this stage, don’t worry about the Links Relative To setting. This option becomes important when you begin to write scripts or work with dynamic database driven content. For now, leave this set to Relative To Document. When links are relative to document they would appear in this format:../contact/contactus.htmWhen links are relative to the Site root they would appear in this format:/contact/contactus.htm
   
8. Other options you should not be too concerned with at this stage:
   a) Case Sensitive Links: This is important if you host your website on a Unix server (Apache, Linux, BSD, etc) as Unix servers are case-sensitive. Windows servers are not case-sensitive. For example:contactus.htm
   ContactUs.htm

   

   eamweaver Training – Define a Site Links Relative

   is two unique files on a Unix operation system (Linux, Apache, CentOS, RedHat, etc), but one single file under a Windows operating system.

   b) The site cache: Best-practice is to leave the site cache enabled.

   The purpose of the site cache is keep track of files, images, and links; In theory, it should speed up the operation of switching from one site to another, although in practice it often slows your computer down. Dreamweaver features that utilize the site cache are the Assets Panel, the Check Links feature, and the Site Map; If you don’t enable the cache, Dreamweaver will recreate it each time you access one of these three features. Of the three features mentioned, check links probably is the most often used. This feature is utilized when you delete, move, or rename any file in your site.

9. When you want to publish your web pages you will need to utilize the Remote Info Category. The remote info category allows you to create an ftp connection to your web host. Change None to FTP. FTP is an acronym for File Transfer Protocol. FTP is used to pass files between computers in different locations.
   
10. FTP Host: YourSite.com (Note this varies by web host. Some hosts, like networksolutions.com use bizarre prefixes and codes to cloak the FTP username and password, which is not a secured file transfer).
    Host Directory: Can be either blank, www, htdocs, YourSite.com – depends on remote server configuration; This is the public folder that maps to your Local Root Folder from step 4.
    Login: The username your web host assigns to you.
    Password: The password your web host assigns to you.
    Use Passive FTP: If active FTP (best choice) fails to transfer your files, sometimes passive FTP will make the connection work; Passive FTP means that if the web server is busy, wait until it’s ready to receive your uploaded data.
    Use Firewall: Not recommended, the firewall will block incoming and outgoing traffic. FTP uses port 21 and you would have to program the firewall to leave port 21 open. Also, if you use Windows, I recommend you turn off the windows firewall (via the Start button > Control Panel > Windows Firewall).
    
11. Click the Test button to determine if you have correctly entered the ftp host, login and password.

How to Modify the Site Definition

After you define a website you can modify the site definition. Either:

A) Select the Site menu > Manage Sites command. Select a website from the list and click the Edit button.

B) Double click the site name in the files panel.

Add Files & Folders to Your Site

When you need new pages for your website, you could create them by choosing the File menu > New command, then selecting the Blank Page HTML option and clicking the Create Button. Then, you would have to use the Save As command to make sure you put the new file inside the local root folder. This is not the recommended approach since it requires and extra step during save.

The recommended method to add a new page to your website:

1. In the Files Panel, right click on the site folder
   (if on a macintosh and no 2-button mouse, use Ctrl+click).
2. Select the New File command
3. Type a name and be sure to also type the .htm file extension, Dreamweaver does not automatically add it for you.

Set Page Properties

THE FIRST TASK TO PERFORM AFTER ADDING A PAGE TO YOUR SITE IS TO SET THE PAGE PROPERTIES.

Page properties define the default fonts, font sizes, margins, link colors and page titles.

To Set Page Properties

With a file open, select the Modify menu > Page Properties command.

On the Properties Panel, select the Page Properties … button.

In the page properties dialog you should:

Appearance Category:

Page Font: Set a default font (serif or sans serif);

Text Color: Choose a default text color if it is something other than black (the default);

Background Color: Change this if the page background will be something other than white (the default);

Margins: Set all Margins to 0 (very important, every browser has different default margin settings).

Links Category:

If you want to change the default link font or link color

Title Category:

Page Title: Very Important! Search engines like Google and Yahoo return the first 60 characters from your page title after a user searches. The Page Title can/should contain your .com name (which should also include keywords you want found in searches) as well as keywords that can be found on your web page.

If you have and questions or comments about this blog post, you are encourage to post your comments for review.

Introduction to Web Page Design with Adobe Photoshop – Level I

Before you can layout a web page in Dreamweaver, my Dreamweaver class first instructs you to create your layout with Photoshop. My introductory learn Dreamweaver class blog covers concepts like:

• How to create a new Photoshop document,
• How to work with Photoshop layers,
• Drawing vector shapes with Photoshop
• How to use Photoshop to pick colors,
• Add text

Here is a visual of the web page we’ll create with Adobe Photoshop.

A separate level II tutorial will address advanced Photoshop web page design concepts like:

• Photoshop Layer Masks
• Photoshop Clipping Masks
• Photoshop Layer Effects

The reason it is important to begin your design in Photoshop is because we will use Photoshop to help us choose colors, set sizes and measure positions prior to creating CSS rules with Dreamweaver. We’ll start with a new Photoshop document.

Step 1:

In the Adobe Photoshop program, select the file menu > new command.

In the new file dialog you will choose a document size (width and height), a color mode, and a resolution. For the width and height I prefer to measure web pages with the pixel measurement system. Most web pages are fewer than 1,000 pixels wide, I will create a document that is 1,200 pixels wide to show the graphics that appear on the left and right of the web page on wide screen laptops. Note that laptop screens are wider than desktop monitors. If you design on a laptop you should resist the temptation to make your webpage wider unless you want visitors to have to scroll horizontally left or right.

Another decision is the document resolution. Although Windows computers display up to 96 dots per inch (dpi), Apple Mac computers correctly display 72 dpi (WYSIWYG: what you see is what you get). One tenet of web design is always target your web page design for the lowest common denominator. You should set the new document resolution to 72 dpi. If you design at 96 dpi your web pages will appear 25% larger when viewed on an Apple Macintosh.

Another decision to make in the new document dialog is the color mode. Web pages display on monitors or projectors, which use the RGB (red, green, blue) color model. CMYK (cyan, magenta, yellow, black) is used for print work.

You also have the option to change the background color. For now choose white.

Click the OK button to create a new document.

Step 2

The next step is to show the rulers. Select the View menu > Ruler command. The rulers appear along the top and left edges of the document window. If for some reason the rulers don’t display the pixel measurement system, point the tip of the mouse in the ruler and click the right mouse button to select or change the measurement system.

We’ll use the rulers to add guides to the page to indicate the left and right boundaries of the webpage. The Photoshop document is 1,200 pixels wide but the website will be 880 pixels wide. How did I decide to use 880 pixels for the width? Using Photoshop to lay out the web page, after I added my text and images to the page I determined that I’d need at least 880 pixels to fit my information.

When placing ruler guides in the document, you’ll want to display the Info panel, which shows the pixel measure as you drag a guide onto the document. To show the Info panel select the Window menu > Info command. The X measures the horizontal position and the Y measures the vertical position.

Point your mouse cursor over the vertical ruler along the left side of the document window. Press and hold the left mouse button and drag a guide onto the screen until the Info Panel shows an X measurement of 155. If Photoshop is uncooperative and reaching 155 is difficult, don’t worry, 154 or 156 is close enough. If you’re all about precision, you can more easily get to 155X by increasing the zoom. To increase the zoom you should press and release the Ctrl and the + keys together. Then, change to the move tool,

point the tip of the mouse over the guide, click and hold the left mouse button, and drag the guide to a new position.

Drag a second vertical guide until the X measurement shows 1045.

Where did the X measures of 155 and 1045 come from? The document is 1,200 pixels wide. The web page will eventually be 880 pixels wide. Subtract 1,200-880 and you are left with 320. Divide the 320 by 2 because we want an equal amount of space on the left and right of the 880 pixels.

Now we’ll add colored regions, a black outer background, and an inner regions with orange, several shades of grey and white. To help separate and organize these colored regions, we’ll work with the Layer Panel. To show the Layer Panel, select the Window menu > Layers command.

On the Layer Panel, note the presence of a background layer, and to the right, a lock symbol. The lock symbol indicates that you cannot move the layer or change its effects. Although you could paint on the background layer we’ll leave it alone.

To add a new layer you can click the new layer button illustrated above. Even better, when using the New Layer command, to show layer options that allow you to name the layer while creating it, hold the alt key when left clicking the new layer command.

If you need to rename an existing layer, either double click the layer name and type a new name or right click the layer name and choose the layer properties command.

Name the new layer Black Background.

Now we’ll paint the entire layer black. There are multiple ways to accomplish a black fill. The Edit menu > Fill command shows the Fill dialog.

Notice the Fill Contents drop-down menu shows Foreground Color. The foreground color is the top square near the bottom of the tools panel.

If your foreground color isn’t black you can change the Contents Use: Foreground Color option to Contents Use: Black

Another way to paint a layer (or a selection) is to use the paint bucket tool. The paint bucket tool paints fills using the foreground color. You can find the paint bucket tool hidden behind the gradient tool on the tools panel. To access the paint bucket tool click and hold your mouse on the gradient tool, or alt-click the gradient tool.

The next step is to add a rectangular grey fill region inside the cyan guides.

There are many techniques to create a grey filled rectangle. I find the easiest technique will be to use the rectangle tool.

Select the rectangle tool on the tools panel.

After you select the rectangle tool, Photoshop shows rectangle tool options on the horizontal options bar located across the top of the screen.

Make the following changes as needed:

Make sure the shape layer option is selected.

Make sure the new shape layer option is selected.

Click in the center of the color picker square to change the fill color of the rectangle.

In the color picker dialog change the hex value outlined in the diagram above to 1B2429 and click the OK button to close the color picker dialog.

A note about hexadecimal colors: On the web, HTML reads red, green, blue (RGB) color values as hexadecimal. In the hexadecimal measuring system, color values range from 0 – 9, and then A – F. Zero (0) represents the absence of color whereas F represents the maximum amount of a color. The hex code for black is #000000 and the hex code for white is #FFFFFF. The first two characters represent the amount of red, the second two characters represent the amount of green, and the third two characters represent the amount of blue.

To draw the rectangular shape, point the mouse cursor at the upper left corner, at the intersection of the top of the document window and the vertical guide, press and hold the left mouse button, and drag diagonally down to the right until you reach the bottom of the document window and the right vertical guide. Your screen should now appear like this:

If you drew the shape to narrow/wide or short/tall it is easy to resize it. Press the Ctrl + t key to enter transform mode (or select the edit menu > free transform command). Drag the square handles along the edges of your rectangle to change its dimensions. Key to the transform tool: to commit an edit press the enter key, to cancel your transformation press the escape key (upper left corner of your keyboard, labeled esc).

Note on the layer panel the shape creates a new layer named Shape 1. To keep your project organized, each time you add a layer that you’ll keep you should give it a meaningful name.

To rename the Shape 1 layer, double click the text Shape 1 and type Outer Gray Box. If you inadvertently open the layer styles dialog click cancel and double click again on the Shape 1 layer name.

Next we’ll use the rectangle tool again to create two inner gray rectangles, one for the flash banner and another for the left menu (shown inside the white outlines below)

Draw the flash banner rectangle:

Select the rectangle tool. On the options bar, change the color to 282F39.

Use the ruler to help guide the positioning. The top rectangle begins at the 450 pixel mark on the ruler. The height is 100 pixels. If you draw it to small/large don’t panic, press Ctrl+t to transform it (remember to press the enter key to commit the transform).

Remember to name your layers, on the layer panel (Window menu > Layers) double click the Shape 1 text and rename it Flash Banner

Draw the left menu rectangle:

Select the rectangle tool.

Use the ruler to help guide the positioning of the second rectangle. The left rectangle begins at 230 pixels on the vertical ruler and at the 155 pixel mark at the guide; The height fills the document and the width is 280 pixels, which leaves a 10 pixel vertical gap between the two rectangle shapes. Again, don’t worry too much at this stage about exact positioning, Dreamweaver CSS rules will take care of precise positioning, widths, and heights.

Rename the new Shape 2 layer Left Menu. Your layer panel should now appear as shown below. If you accidentally drew any extra shapes alt-click the trash can icon at the bottom of the layer panel to remove them now. Alt clicking the trash can removes the layer without displaying a confirmation dialog.

Next we’ll create the orange horizontal bar for the horizontal menu as outlined below. The bar stretches from guideline to guideline, is 10 pixels below the flash banner rectangle, and is 50 pixels tall. The easiest way to do this precisely is to add guides to the screen. Before adding guides, show the info panel (Window menu > Info). To add horizontal guides at the 110 pixel and 160 pixel mark, point the tip of the mouse over the horizontal ruler at the top of the document window. Click and hold the mouse and drag the guide down, note the position on the info panel.

Select the rectangle tool to show the rectangle tool options bar. Change the fill color to CC6600, then drag the rectangle shape.

Rename the new shape layer Top Menu.

The last rectangle is the white content region to the right of the left menu. It will be the same width as the flash banner layer and the same height as the left menu. First we’ll eyeball the measurements, then use the transform tool to resize as needed.

Select the rectangle tool (if it’s not selected), and on the tool options bar change the fill color from orange to white (FFFFFF).

Click and drag a box as shown below.

Before we use free transform, make sure there is a checkmark next to the View menu > Show > Smartguides command. Smartguides will help you keep your transformation aligned to other shapes edges.

Press the Ctrl+t key to enter free transform mode. Note that when you point the mouse over the edge of a square sizing handle, the mouse cursor changes shape to a two-headed arrow. Drag the square handles along the top edge up/down and note how smartguides show you alignment relative to the top edge of the left menu shape. Drag the square handle along the left edge to the left and right and note how the smartguides show you the alignment relative to the left edge of the flash banner. Remember to press the enter key to commit the transform.

Before we can add text, the final color item to add is two horizontal white lines below the orange menu, above the white content.

To select the line tool, click once on the rectangle tool. On the tool options bar, change from the rectangle shape to the line shape.

Change the weight to 2 pixels and make sure your color is still set to white.

Position the mouse about 10 pixels below the orange menu bar, at about 170Y on the info panel and aligned with the cyan guide at 155X.

To draw a straight line, press and hold the shift key on your keyboard as you drag the line across to the vertical guide at 1045X; Release the mouse button before you release the shift key.

Rename the new layer Tagline Top.

Instead of creating a second line with the line tool, let’s use a different technique. When you use the move tool to drag an object, holding the Alt key will create a copy, and holding the shift key will keep the copy aligned with the original.

On the tools panel, select the move tool.

To help you see the screen better we’ll suppress the display of those pesky cyan guides; Either select the View menu > Show > Guides command or press Ctrl+; on the keyboard.

Point the tip of the mouse cursor over the edge of the line, press and hold both the Alt and Shift keys. You should note that your cursor changes from a single black triangle to two overlapping triangles, one black one white. Click and drag down to about the 215Y pixel mark (don’t worry about exact positioning yet). Remember that to make the copy you must first release the mouse button, before you release the Alt+Shift keys, otherwise you’ll just move the original line.

Copying the line created a new shape layer. On the layers panel, rename the Tagline Top Copy layer to Tagline Bottom.

Layer Groups. Photoshop CS4 allows you to group your layers into folders to keep the layers panel organized. At the bottom of the layer panel, click once on the new layer group button.

On the layers panel, double click the new Group 1 folder to rename it Colored Shapes

To move all the layers except the locked background layer into the new Colored Shapes folder, click once on the topmost layer (Tagline Bottom) to select it.

Scroll down the layers panel to the bottom and while holding the Shift key, click on the bottom layer (Black). Shift clicking a range of layers selects multiple layers.

Scroll back to the top of the layers panel show the Colored Shapes folder is visible. Point the mouse over any of the selected layers. Click and drag the selection into the Colored Shapes folder. You’ll know the selection is inside the folder when you see a black rectangle around the Colored Shapes Layer, then release the mouse button. To verify the layers were moved into the Colored Shapes folder click the collapse button to hide the layers.

The last portion of the tutorial covers adding text (Most, if not all, text should be done with Dreamweaver, we put text in Photoshop to determine if our shapes are the right size to properly fit the message).

When working with the Text (Type) tool in Photoshop the first concept to understand is point versus paragraph text.

The Type Tool:

To create point text, point to the document and click once. Point text does not text wrap when you reach the right edge of the document window so you have to manually press the Enter key or Shift+Enter (for a line break without a new paragraph). Point text is best suited to small amounts of text, like the logo text, menu text, or tagline text.

To create paragraph text, point to the document and click, hold the mouse, and drag a rectangle shape. Paragraph text will automatically word wrap when you reach the right edge of the document window. Paragraph text is best suited to larger blocks of text, like the copy in the white rectangular region.

We’ll start by adding the logo text NY SEO Expert

Select the Type tool. Point and click once in the upper left corner of the page to create point text.

Before typing any text, on the options bar, set the text options as:

Font: Tahoma or Helvetica

Style: Bold

Size: 32 point

Alignment: Left

Color: CC6600

On the keyboard type NY SEO EXPERT

To reposition your text to appear as indicated in the diagram below, select the move tool and tap the arrow keys to move the text (the arrow key is often easier to use than the mouse). To move the text faster, hold the shift key while you tap the arrow key to multiple the 1 pixel move by 10. If the move tool doesn’t move the text make sure to click the NY SEO EXPERT text layer to activate it.

Note that if your logo text were more characters (wider) you could shrink the font size to squeeze it, or perhaps you’d redesign the page at this stage to allow more room in the left column and less room for the banner and content, or you might increase the width of the page. You could increase the width of all the shapes at once by selecting the entire Colored Shapes layer folder, pressing Ctrl+t to free-transform, and alt-dragging either of the side handles to size equally from the center point out.

To add the text Be Seen – Be Found click the type tool. On the options bar, change the font to Courier New, the style to Bold, the size to 16 pixels and the color to white (FFFFFF). Point below the NY SEO EXPERT text, click once, and type Be Seen – Be Found. Each time you add point text Photoshop creates a new text layer (which I don’t bother to rename).

Next we’ll add the paragraph text that appears in the big white background layer region.

Download a text file here, or copy the text from http://www.nyseoexpert.com

Select the type tool. Point to the upper left of the white rectangle, click and hold the mouse button, and drag a rectangle shape to create paragraph text. Then paste the copied text into the text box and note how the text will automatically wrap when it reaches the end of a line. To force a line break you might click in front of a word and press Ctrl+Enter. To format the character and paragraph formatting you could show the character or paragraph panels (window menu).

Create another layer group for the text layers and move the text layers into the layer group.

After adding all the text to complete the page many designers would incorrectly opt to use Photoshop’s slice tool to create a web page with hyperlinks. I personally find that an offensive way to design a webpage and thoroughly discourage its use. Slicing a webpage creates dozens of jpg images that search engines cannot read, and are difficult to update should you need to make revisions.

If you have any questions, comments, or tips that would enhance this tutorial we encourage you to submit your commentary. We’ve posted a summary of the tutorial here

In our upcoming level ii tutorial we’ll look at painting, clipping masks, and layer effects to enhance your basic design.

Learn Dreamweaver in NYC