<
My Publications » » Customizing Your iWeb Sites » Set-up, Page Layout, & Links

Website Set-Up, Page Layout, & Navigation

Although this tutorial is aimed at the person wanting to create their own custom site, it is also useful for someone strictly using the existing Templates. In this section, we will set up the upload process, customize a basic page to use as a template for the entire site, and create the navigation. We're getting closer to the part where you get to have fun…

Ideally, you have created the graphics for your basic page…it'll make this step much quicker.

  1. Start by opening up iWeb and clicking File > New Site
  2. This will open the iWeb Templates
  3. Choose Blank of either the White or Black

Setting Up Your Site

Prep for Publishing to MobileMe

Cloud icon which delineates between sites

Figure 37. In creating a new site, iWeb inserts a red cloud icon which indicates the start of a new site along with a blank page. Double-click Site to add the settings that enable you to publish your new site.
  1. Double-click Site in the left panel to pen the Site Publishing Settings box, Figure 37
    1. If publishing to MobileMe, leave the Publish to setting at MobileMe, Figure 38, below

Figure 38. After selecting the Site Name, the Site Publishing Settings box opens; name your site and provide an email address.

Return to top

Create & Name a New Page

Assuming you already have iWeb open:


Figure 39. Choose All, then White (or Black if you prefer a black background), and, finally, choose Blank.
  1. On the toolbar:
    1. Click File > New
    2. Click the double-headed arrow
    3. Choose All
    4. As you are using your own design, choose White
      1. Choose Black if you plan to use a black background
      2. If you are using one of the already-created templates, skip this step
    5. Choose Blank, Figure 39
    6. Select Page Inspector (the first icon in Inspector)
    7. Select the Page tab
    8. Under Page Name, type in the name you want for this web page
    9. Verify that both Include page in navigation menu and Display navigation menu are NOT checked, Figure 40…otherwise, your page could look like the one in Figure 41—eek
    10. Select the Text box and delete it

      11. Figure 40. Page Inspector's Page tab enables you to name each web page.

      Figure 41. The black arrow shows the page content that must be deleted. The red line (thickened & added for emphasis) is a line added by iWeb to separate the menu from the navigation.
    11. Lastly, select the thin black line barely visible at the top (after deleting the Text box) and delete it, Figure 41; I've highlit it in red to make it more visible)

Return to top

Set the Basic Layout

The basic layout consists of deciding upon a size for your page and the basic colors and backgrounds for your website.

Page Size

Top and Bottom Padding pushes the actual page away from the edges of the browser; play with it, experiment.

Content Width ranges, ideally, between 700-pixels and 1,000-pixels

  • Some viewers are still using small screens while few of the current monitors in use can handle more than 1,000-pixels comfortably

Content Height will vary according to how much content is added; start with 480-pixels as it will fill the vertical of a viewer's monitor.

Header Height includes the menu and any company header; use a minimum of 60-pixels to handle a single-line menu.

Footer Height should be a minimum of 40-pixels to hold Page last updated…' information and your copyright notice. Add more pixels if you choose to include a second line for a navigation bar. The blessing of using a Footer Height is that iWeb automatically pushes its contents down as your page length increases, otherwise, you end up dragging it all down manually…a real pain…

Return to top

Page Background


Figure 42. Displays the array of measurements and background fills available under the Layout tab.

Page Background refers to the actual web page area. iWeb enables you to choose four different ways to pretty up your page: Color Fill, Gradient Fill, Image Fill, and Tinted Image fill.

  • Choose the type of fill desired:
    • Click the white square
      • None indicates that you do not choose to have any type of fill in the page area
      • Color Fill opens the Colors box
      • Gradient Fill opens those choices: choice of two colors, angle of the fill, and the ability to flip the colors back and forth
      • Image Fill opens the Finder window; browse to find the desired image file
      • Tinted Image Fill allows you to choose a color tint to overlay on the image

Return to top

Browser Background


Figure 43. Demonstrates the difference between Page Background (the cream page area) and Browser Background (the darker brown surrounding the page area).

Browser Background refers to the area surrounding the page, which works as a buffer zone. It is set up to automatically center your page within a browser window while allowing you to maintain control of your design. iWeb enables you to choose two different ways to perpetuate your design style for your web page: Color Fill and Image Fill.

  • Choose the type of fill desired:
    • Click the white square
    • Color Fill opens the Colors box
    • Image Fill opens the Finder window; browse to the desired file

Return to top

Set the Graphic Layout

In this section, you will create the style of your page—the colors and images of your block elements. A critical (and minute) detail which reflects on how professional your site appears is that every element within your site is positioned in exactly the same place on every page. As your viewer moves from page to page, the navigation, logo, header, content area should all appear to remain in the same place. Use Metrics to guarantee and place each page element on each page.

Graphic layout refers to the blocks which make up your page: header, navigation bars, content area, and your logo. Any web page graphic elements are, ideally, created in chunks. Solid-color or gradient blocks can be created in iWeb using Shapes (primary toolbar and the Inspector); images must be created outside of iWeb.

Figure 44. I selected all my graphic elements in iPhoto and dragged them onto the page background of my webpage (above). Then, select the individual elements and place them (below).

If you have not yet created the graphics, play with the page. Drag-and-drop square shapes onto the page and adjust the sizes to suit the page elements you want. If you are creating the block elements in an image-editing program, make note of the size of each block element (Inspector > Metric will give you width and height). When you create each element in the external program, you can build it to the exact size required—just makes it easier. Be sure to include a text box for the main content area (the white square in the bottom part of Figure 44).

Once the elements are created, drag them into iPhoto and then use Show Media > Photos to access your graphic elements and drag-and-drop them onto your new page.


Figure 45. Once the fill square is selected, the Colors palette pops open (the palette showing is the RC Web Color Picker).

Add a Text Box for the content area of your page by:

  1. Clicking Shapes (bottom toolbar) > desired shape, Figure 45.
    1. Drag it to the preferred size
    2. Choose its background fill by clicking:
      1. Shapes palette (Inspector)
      2. Click the Fill square (so it knows your intentions!)
        1. Choose a fill
          1. Solids are easiest for viewers to read
          2. Gradients or image fills should be translucent enough that the text can be read easily

Return to top

Set Up the Navigation

As you are creating a custom look for your website, each additional new page is blank—no layout graphics, no navigation and, very irritatingly, iWeb pages are independent. If you decide to change one of your block elements or some aspect of the navigation, you must change it on each and every page individually. To avoid some of the agony, we'll set up your basic navigation now and then we will apply it to every page along with the custom graphics.

Create All the Web Pages

Ideally, you will create all your desired webpages. Snicker…since that NEVER happens, at the least you will want the following pages: home, about me/us, contact me/us, site map, legal page, and as many of your product / information / services pages as you can imagine. Your homepage should be at the very top in the left column just under the name of your site; iWeb interprets this first page as your index page and browsers believe the index page is your homepage.

  1. Click Add Page > Blank
  2. Name that page
    1. Start each page name with a small letter and don't include any spaces, for example, home, aboutUs, listOfArticles… Each page name will be the address (for that page) by which people will find you.
  3. In Layout, set up the page sizes, page background, and browser background (see Set the Basic Layout).

Repeat this step until you have added every page you intend to have in your website, or as near as.

You must have a page created for each navigation link so you can create the link to the page.

Return to top

Build the Navigation Bar(s)

Navigation bars can be horizontal or vertical and located at left, top, right, or bottom. This is your design, you have to decide. Create the bar by inserting a Text Box, position the box where you wanmt it, and resize it to the desired horizontal/vertical. Click inside the text box and type in the names of your pages. Apply the font, font size, and a disabled colorThe color this link will be when it is not a link—choose a color that obviously stands out while continuing your color scheme. (see Link Up the Navigation Bar(s) for further information).

Return to top

Footer/Bottom Nav Bar

Be sure to create a navigation bar, a.k.a., footer, for the bottom of the webpage. Usually found at the bottom of any webpage, any website should include at least a:

  • Page last updated…, Figure 46

Figure 46. The easy way to add JavaScript that automatically updates your update date each time you save your page(s).
  • Copyright information: © name year (or range of years)
  • Pages that I think of as housekeeping or back-end: Site Map, Legal, Contact Me/Us, Figure 47

Figure 47. An example of a footer navigation bar.
  • Take real advantage of the footer by holding down the alt/option key while dragging the footer background or text box into the footer area. You can't simply drag anything in. You must use the option key. It usually leaves a copy behind. Just delete it. Now, the footer will automatically rise and fall with your content.

Return to top

Link Up the Navigation Bar(s)

Select ONLY the text for a particular page:


Figure 48. Shows the Enable as a hyperlink box checked, the Link To choices, and a partial list of my pages—note the Home page at the very top.
  1. Click Inspector > Link Inspector > Hyperlink tab
  2. Check the box, Enable as a hyperlink, Figure 48
  3. In Link To, click the double-headed arrow to view the link choices (Figure 48):
    1. One of My Pages - is one your webpages
    2. An External Page - someone else's website
    3. A File - a file on your computer's hard drive
    4. An Email Message - when the viewer clicks on this it creates a new email message with the address you designate

Figure 49. Shows a completed hyperlink to One of My Pages.

  1. Choose One of My Pages 'cause—it is one of your pages, Figure 49
    1. This opens a drop-down box listing all your pages
    2. Choose the page that matches the selected text
  2. Verify that Make hyperlinks active is NOT checked
    1. If this box is checked, it will be well nigh impossible to select your hyperlinks to make changes of any kind
    2. Check this box only if you want to test your links in iWeb and not on the Internet


Figure 50. Shows the color choices I made for my navigation links. Notice that none of the U-boxes are checked as I did not want underlines on any of my navigation links—strictly a personal choice.
  1. Choose the Format tab, Figure 50
    1. Format applies the four colors for your link:
      1. Normal is the active or initial link color; the default is a shade of blue
      2. Rollover is the hover color—it changes when the mouse rolls over it; there is no default
      3. Visited indicates a link the viewer has already clicked; the default is a shade of red ranging from pink to purple
      4. Disabled is a you are here indicator; it's a courtesy to your viewer and there is no default color. Choose a color that will stand out from its surroundings.
    2. Each stage (of the link color choices) can be underlined or not; click the U box at the end of each choice


Figure 51. You can drag a chosen color into the white squares at the bottom of the Colors palette and have access to it in any of the palettes.

  1. If you have a lot of links to create, click the Use for New Links on Page button—it'll save your having to choose each set of colors for each link you create, Figure 51
  2. Repeat for each navigation link
  3. As you choose each link color, drag it down into one of the small empty squares at the bottom of the Colors palette, Figure 51. This helps maintain color integrity throughout your website and saves your having to guess.

Return to top


Figure 52. The curving white arrow at the bottom right of the image indicates that the image is functioning as a hyperlink.

Many websites create a hyperlink of their logo using it as a quick connection to the Home page.

Image Link

  1. Select the desired image
  2. Click Inspector > Link Inspector > Hyperlink tab
  3. Check the box, Enable as a hyperlink
  4. In Link To, choose One of My Pages
  5. Select Home

Naturally, any image can be turned into a hyperlink opening it up to the four choices mentioned above.

Return to top

Email Link

Email links are magic. When a viewer clicks an email link, a new email message box pops open with the designated email address inserted into the To box and a subject (if you want).

  1. Select the text (in the body or the navigation bar) that you want to use as an email link—Email Me, Your Name, Ask me, etc.
  2. Click Inspector > Link Inspector > Hyperlink tab

Figure 53. In the bottom right, the desired email text is selected while the appropriate blanks have been filled in to create the link.

  1. Check the box, Enable as a hyperlink, Figure 53
  2. In Link To, choose An Email Message
  3. The choices change to reflect this purpose:
    1. In To, replace the no_reply@apple.com with your email address
      1. You can use a custom email ONLY if you set up a New Account in your Mail Preferences that specifies that email address
    2. Subject is optional. If the context has a subject, I add it as a memory aid for the viewer

Figure 54. This is what happens after you click an email link.

Return to top

Place the Navigation (Nav) Bar

Since you do not want to have to repeat the above steps for every page:

  1. Position the navigation text box(es) where you want them
    1. Option-click-drag the footer nav bar below the line which indicates the footer area of the page
      1. Putting the footer bar INSIDE the footer forces iWeb to automatically keep it below your page content
      2. Sometimes using the Option key causes a copy to be made. Just select and delete it
    2. Click to select the navigation bar—if you have more than one bar, hold down the CMD key as you select each bar
      1. If there are any graphic elements on the page, select those as well
      2. If you have more than one item to select, press CMD + A to select everything
    3. Click CMD + C to copy
    4. Click the next page in the left column
    5. Click CMD + V to paste the bars/graphics into that page
      1. Happily, iWeb pastes the copy(ies) in place
      2. You will have to redo some of your navigation along the way. You can repeat the select-copy-paste routine to make all the navigation changes. Although, you may have to reposition a bottom or footer navigation bar depending on the length of the page.

    2. Return to top

    Duplicate the home Page

  2. Rename home 2 as Blank (I use initial caps for pages which will not be seen by the public)
    1. Blank serves as a template. You will end up creating more pages and Blank just makes this easier.
    2. When you need to redo a navigation bar or change one of the graphic elements, redo the Blank page first
    3. Then select, copy, and paste the change into all your other pages

The next section, Content, is all about the information you want to put out on the Internet. Images, videos, text, audio, and using the widgets.

Return to top

« Previous     Continue »

Questions about some of the terminology used in this tutorial? Get more information (definitions and links) on key computer terms by going to our Glossary of Terms Relating to Art, Computer, Therapy ++.

Hire a pro!
KD Did It will work with you.

Kathy Davie is an artist, educator, and author of the arts marketing series, Your Portfolio & You, aimed at helping artists survive (and thrive) at the business of being an artist.

As a self-taught artist, Kathy was frustrated by the lack of information on taking her career to a more professional level while meeting legal guidelines and learning about legal hiccups. Her drive for information fueled her to interview numerous professionals and compiled the information into a monthly news column. She now leads workshops and is converting the news columns into this continuing series of how-to books.

Kathy has a BS in Technical Writing & Editing with minors in Digital Media and History from Metropolitan State College, Denver, CO and is the author of Accounting for the SMALL Businessperson, How Copyright Applies to the Artist, the Buyer, the Employer/e, the Sold Artwork, Dealing with Photographs, Slides, Digital Images, and Surviving the Outdoor Arts Festival.

Visit her writing or arts websites or reach her by email.