Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

The best custom placeholders for websites are simple HTML web pages that identify the site (logo, company/owner name, tag line, and other branding) and offer a means of contacting the site owner by both snail mail and e-mail. Anything else on the page, like a blurb about the company or some recent news items, is gravy.

Follow these steps to add CSS styling to the placeholder page:

  1. Above the closing tag in your code, type the internal CSS markup you want to use on your page.

    If you’re following along with the example, type the following markup:

    <style type="text/css">
    <!--
    #luauagogo {
     height: 250px;
     width: 500px;
     margin-right: auto;
     margin-left: auto;
     margin-top: 15%;
     margin-bottom: auto;
     text-align: center;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 12px;
     color: #F60;
     padding-top: 20px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     background-color: #FFF;
     border: 1px dashed #0CC;
    }
    a:link {
     color: #0CC;
    }
    →
    </style>

    This CSS markup contains instructions that tell the browser how to style the content. These styles center the content in the browser window, style the text in the Georgia font in 12px and an orange color with the hexadecimal color of #ff6600 to match the logo, add a blue dashed border around everything, and use blue as the link color to match the border.

    Before this CSS markup can work, however, you must apply this ID style to the page’s content.

  2. Wrap a pair of DIV tags around the page content. Put the opening

    tag directly after the opening tag and the closing
    tag directly above the closing tag.

    DIV tags are container tags for layers that can be styled and positioned with CSS when you include the id or class attribute in the opening tag that matches the name of the style in the CSS markup.

  3. Add the attribute id= " uniqueid " (for example, id= "luauagogo") to the opening

    tag.

    Replace uniqueid with the ID of your choice.

    The body part of your code should now look like this:

    <body>
    <div id="luauagogo">
     <img src=<b>"</b>images/luauagogo.gif<b>"</b> alt=<b>"</b>Luau-a-go-go<b>"</b> width=<b>"</b>208<b>"</b> height=<b>"</b>76<b>"</b>>
     <br>
     <h1>Hawaiian Themed Catering</h1><br>
     <p>Luaus * Special Events * Birthdays * Anniversaries * Celebrations<br>
     Santa Monica, CA<br>
     For further information contact<br>
     <!-- encrypted email address code here →</p>
    </div>
    </body>
  4. Save the file again to save the changes you just made and preview the page in a browser window.

    image0.jpg

When creating your own placeholder page, feel free to generate as many graphics and other CSS styles as needed to make the page look exactly as you’d like it to.

If you’ve already created a mock-up for the website, you may even want to use some of the same design features within the placeholder page. When the page is finished, you need to upload the page and any graphics or other supporting files to the host server so that the placeholder page can brand and identify the domain until the new site is ready to publish.

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: