Design Page Stubs

Now that you have a layout of your website, you are ready to switch from the Plan View to the Design View to "design" any of the pages.

  1. Double-click on the first page thumbnail to switch to the Design View.
  2. Click on the Browser Fill link at the top of the screen and then click on the Add image link and navigate to the folder where the Photoshop assets were created and select the background.jpg image and then click the Open button.
    3. NOTE: If you don’t have a large background image to use, you could change the background color to a neutral color or to a gradient if you wish to by first clicking on either the Solid or Gradient radio button and then selecting a color from the color picking for a solid color or assigning two colors for a gradient with a direction you want the gradient to use. Or, select your own background image.

    TIP: You could go to http://www.subtlepatterns.com/ and download a pattern that you can tile in the background of your site.

    NOTE: Browser Fill is akin to placing the image in the background of the <html> tag.

  3. Change the Fitting drop-down option to Scale to Fill instead of Tile to see the entire image.
  4. Select the appropriate Scale option based on the background image.
  5. Deselect the Scrolling checkbox so that the content instead of the background image scroll in the browser if the content is large.
  6. Change the text color if necessary to improve contrast.
  7. Click on the Website tab (CorneliusPortfolio) and click on the next thumbnail (e.g., Experience) and change the title of the page to read the same as the thumbnail name.
  8. Except the private page, repeat steps 2-7 for the other pages.