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

A placeholder page is exactly what it sounds like: It’s the default home page that visitors see at a particular web address — your domain name — when you (or your client) have both registered the domain and set up a hosting plan, but have not yet published the new website or any of your own pages there.

To create your own custom placeholder page, you need access to the following things:

  • A text, HTML, or WYSIWYG code editor to build the placeholder page such as Dreamweaver, CoffeeCup, Amaya, Kompozer, TextWrangler, or even TextEdit or Notepad

  • The site owner’s company name/logo in GIF, PNG, or JPG format

  • The descriptive statement about the site that will be included on the placeholder page

  • The site owner’s e-mail address, which should use the new domain name such as info@mysite.com rather than a personal e-mail address from AOL, Gmail, AT&T, or Yahoo!

Here is how to create a simple customized placeholder page styled with internal CSS. By leaving the CSS inside the page, you only have to upload a single file rather than the HTML and the CSS.

Follow these steps to create the placeholder page:

  1. Create a new folder on your computer desktop called Placeholder, and inside that folder, create another folder called images.

    The placeholder page and image you’re about to create will be saved to this folder structure.

  2. Save the company logo with the .jpg, .gif, or .png file extension and place it into your new images folder inside the Placeholder folder on your desktop.

    To save a copy of the graphic, right-click (Windows) or Control+click (Mac) the image and choose Save (This) Image As. Choose the images folder inside the Placeholder folder on your desktop as the save-to location.

  3. Using your preferred code editor, or your computer’s text editing program, open a new blank document.

    To use your computer’s default text editing program, choose Start→All Programs→Accessories→Notepad if you’re using a PC, or on a Mac, launch your Applications folder and double-click the TextEdit icon.

    image0.jpg

    A new untitled document should open automatically. If that doesn’t happen, choose File→New to open a new file.

  4. If you’re using a text editor, type the following basic HTML5 page structure, including the HTML5 DTD and charset meta tag:

    <!doctype html>
    <html>
     <head>
     <meta charset="utf-8">
     <title></title>
     </head>
     <body>
     </body>
    </html>

    Otherwise, if you’re using an HTML code editor, which automatically drops in the structural code for you, skip ahead to Step 5.

  5. Between the opening and closing </span> tags, type a title for the page (for example, Luau-a-go-go).</p> <p class="child-para">Your code should now look like this:</p> <pre class="code"><!doctype html><html> <head> <meta charset="utf-8"> <title><b>Luau-a-go-go</b></title> </head> <body> </body> </html></pre> <p class="child-para">This code sets the title for the page, which appears in the browser’s title bar.</p> </li> <li><p class="first-para">Between the opening and closing <span class="code"><body></span> tags, type the company name, a descriptive statement or tag line, and an e-mail address (which you convert into an encrypted e-mail address in Step 10).</p> <p class="child-para">For example, type the following bold text, making sure to add the paragraph <span class="code"><p></span> and break <span class="code"><br></span> tags where indicated:</p> <pre class="code"><!doctype html><html> <head> <meta charset="utf-8"> <title>Luau-a-go-go</title> </head> <body> <p>Luau-a-go-go</p> <br> <h1>Hawaiian Themed Catering</h1><br> <p>Luaus * Special Events * Birthdays * Anniversaries *Celebrations<br> Santa Monica, CA<br> For further information contact<br> info@luauagogo.com</p> </body> </html></pre> <p class="child-para">The <span class="code"><body></span> tags hold the text and other content that appear in the browser window.</p> </li> <li><p class="first-para">Choose File→Save to open the Save As dialog box.</p> <p class="child-para">You need to save the document to your new Placeholder folder.</p> </li> <li><p class="first-para">In the File Name field, type index.html; in the Save In field, select the Placeholder folder; and in the Save as Type field, select the All Files option. Then click the Save button.</p> <p class="child-para">This document does not include any logo graphic yet, so you’ll need to modify the code.</p> <p class="child-para">If you’re using TextEdit, choose the Make Plain Text option from the Format menu. You also want to make sure that you include the <span class="code">.html</span> file extension before saving so your document doesn’t accidentally save as an <span class="code">.rtf</span> or <span class="code">.txt</span> file.</p> </li> <li><p class="first-para">Delete the line of code that says <span class="code"><p>Luau-a-go-go</p></span> and replace it with the following line of code, which inserts the logo graphic onto the page:</p> <pre class="code"><img src="images/<i>luauagogo.gif</i>" alt="<i>Luau-a-go-go</i>" width="208" height="76"></pre> <p class="child-para">Replace the text in italics if you’re using your client’s logo.</p> </li> <li><p class="first-para">Convert the e-mail address into a working hyperlink using an e-mail encryption service (instead of the regular <span class="code">mailto:</span> e-mail link, which is vulnerable to spambots), like the one found at <a href="http://www.dynamicdrive.com/emailriddler"><b>Dynamic Drive</b></a>.</p> <p class="child-para">Your page code should now look something like this:</p> <pre class="code"><!doctype html><html> <head> <meta charset="utf-8"> <title>Luau-a-go-go</title> </head> <body> <img src="images/luauagogo.gif" alt="Luau-a-go-go" width="208" height="76"> <br> <h1>Hawaiian Themed Catering</h1><br> <p>Luaus * Special Events * Birthdays * Anniversaries *Celebrations<br> Santa Monica, CA<br> For further information contact<br> <script type="text/javascript"> /*<![CDATA[*/ /*********************************************** * Encrypt Email script- Please keep notice intact * Tool URL: http://www.dynamicdrive.com/emailriddler/ * **********************************************/ <!-- Encrypted version of: info [at] *********.*** //→ var emailriddlerarray=[105,110,102,111,64,108,117,97,117,97,103,111,103,111,46,99,111,109] var encryptedemail_id62='' //variable to contain encrypted email for (var i=0; i<emailriddlerarray.length; i++) encryptedemail_id62+=String.fromCharCode(emailriddlerarray[i]) document.write('<a href="mailto: '+encryptedemail_id62+'">'+encryptedemail_id62+'</a>') /*]]>*/ </script></p> </body> </html></pre> </li> <li><p class="first-para">Save the changes to your file and preview the page in a browser window.</p> <p class="child-para">To preview the page in a browser, drag and drop the icon of your new <span class="code">index.html</span> page into any open browser window. No Internet connection is required to preview the page locally.</p> <img loading="lazy" src="https://www.dummies.com/wp-content/uploads/376241.image1.jpg" width="460" height="400" alt="image1.jpg"/> </li> </ol>

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: