Design Your Site

Look! It's a big, blank page!

Time to design. Let's start with the layout. How do you want your page to look? What websites have you seen (regardless of content) that you thought "made sense" as far as the way things were laid out on the screen?

Remember: Title, Content, and Navigation. These are the three things that your reader must be able to figure out quickly and intuitively. Because of this, many web pages are designed like one of the following examples (or some combination thereof):

Sketch out your approximate layout. You will need a place for your page title, your content, and your navigation. You may also want to allocate a space for contacting you, the author, or for the site title. Remember, this is simply the general design for every page of your site (so your reader can focus on your content, not the concern of how he or she can find the home page or email you!).

Once you've figured out your design, it's time to layout the actual page. FrontPage uses a concept called "shared borders" to allow you to allow common elements to be on every page of your site. Yes, these are "borders"-- these fit in the "frame" of your page, you can't have a "shared border" smack dab in the middle of your page.

• Go to Format > Shared Borders
• Click on "Apply to All Pages"
• Select the common "borders" you want (note how the picture changes!)
• Click Ok.

Yikes! Look what's happened to your page! Let's place the "stuff" in the borders.

• Click in your title area and go to Insert > Page Banner. For "Properties," for now, allow it to be "picture" (you'll see why when you choose a theme).
  At present, the title will just look like regular type, but it will be whatever title you specified for the page. This is one reason why uniquely and accurately titling your pages is necessary.
• Click in your menu/navigation area and go to Insert > Navigation.
  • Click on "Link Bars" on the left (if it's not already selected) and on the right, select "Bar based on navigation structure."
  • Click on next.
  • For now, just select "use page's theme" (you can always change later).
  • Choose the orientation (horizontal or vertical) by clicking on the picture.
  • Click "finish."
  • Now you'll need to figure out what structure you'll need. Let's try "Child Level" (which means the level "under" the current page-- think of your flow chart), and under Additional Pages select "Home Page" and "Parent Page." By doing this, your navigation menu will always link to the page above the current page (if there is one) and will also link to the home page (index.html).
  • Click "OK."
• Click on the area where you want your contact (such as email) and publication information to go. You may want to have something like
  Copyright 2005 My Name. Want to contact me? Email me at xyzpdq@southernct.edu
  • You're about to create your first hyperlink. This is a "mailto:" link. To do this, select the text you want your reader to click on to email you (like "Email me at xyzpdq@southernct.edu").
  • With the text still highlighted, right click and select "Hyperlink."
  • Under "Link to" click on "E-mail Address." The dialog box will probably change slightly.
  • In the text area under E-mail address, enter the email address you wish to use. Notice that as you enter the address, FrontPage appends "mailto:" to the front of the address. This is code that specifies the address is email, not, for example, a URL (which would have "http://" in front of it).
  • You can also specify the Subject of emails sent to you from the website (for instance, "MyWeb response."
  • Click "Ok."
  • See how the link is now underlined? That's a visual cue for your reader to click there.

Remember... if you change something on one of the borders, it's changed on every page on which that border appears (which is probably your whole website!).

Ok. You have a layout, but let's face it. It's bland. Let's do something with it. One easy way to do this is through using FrontPage's themes.

• Go to Format > Theme
• For now, let's give the whole site a uniform look. Under "Apply Theme to" select "All pages." (You can change individual pages later)
• Select a theme that suits you and your web's purpose, and click "ok."
• Wow. What a difference. Now, you can add images or other goodies to complete "dressing up," but let's get to the reason people are coming to your site: CONTENT.