Selecting the Web Site Layout and Theme

The first step of the Web Site Wizard, you will set the Site Layout and Site Theme for your eWeb site.

Note: The Web Site Wizard creates Div-Based eWeb sites by default. Use the Web Site Editor to change a Div-Based eWeb site to a Table-Based or Responsive Design eWeb site.

Setting the Web Site Layout

The Web Site layout includes setting the header, footer, and navigation bar.

To add a Web Site Header, Footer, and Site Navigation Bar:

  1. Click the  Site Header check box located in the Site Layout section of the Select Site Layout & Site Theme page.
    After you click the Site Header check box, the Layout Preview section will update to show a mock-up of your web page with the header in place.

    2. The Web Site Header will display on every page of your Web site. You can use the header to display your company logo or other information (that can be repeated on every page).

  1. Click the Site Footer checkbox located in the Site Layout section of the Select Site Layout & Site Theme page.
    After you click the Site Footer check box, the Layout Preview section will update to show a mock-up of your web page with the footer in place.

    2. The Web Site Footer will appear on the bottom of every page of your Web site.

  1. Click the Site Navigation Bar check box located in the Site Layout section of the Select Site Layout & Site Theme page.
    • Expand the Site Navigation Bar - Default Position drop-down menu and select the Default Position for the navigation bar (Left or Top.)
    • To position the navigation bar on the left side of the Web page, select Left from the Site Navigation Bar - Default Position drop-down list.

  • To position the navigation bar on the top of the Web page, select Top from the Site Navigation Bar - Default Position drop-down list.

The Web Site Navigation Bar contains the links to your Web pages, including your Online Store, Upcoming Events, Login page, and more.

Tip: You can choose to have some of the navigation links on the top and some of the links on the left during third step of the wizard, however this will overwrite the navigation position selected above. In addition, selecting custom positions for site links using the Web Site Editor (after your site is created) will also overwrite the layout selected in this step.

Selecting the Site Theme

The pre-defined visual theme provides the Web page background color, font style, and font color.

Or you can create your own Web Site Visual Theme by selecting the background color, font style, and font color. Using advanced options, you may even adjust Header and Footer properties if desired.

Using the Pre-Defined Visual Theme

To select a visual theme style sheet:

  1. Go to the Select Site Layout & Site Theme page of the Web Site Wizard.
  2. Scroll to the Site Theme section of the Site Layout & Site Theme page.
  3. Select the Use a pre-defined visual theme radio button.
  4. Expand the Use a pre-defined visual theme drop-down menu and select the style you would like to use for your eWeb site. As you make selections in this drop-down  menu, the Theme Preview section of the page will update to provide a preview of that style.

If you do not find any of the pre-defined visual themes suitable for your eWeb site, you may create your own visual theme.

Tip: Click the Next button at the bottom of the Select Site Layout & Site Theme page to progress to the next step in the wizard. If you wish to stop building your site, click the Cancel button.

Creating Your Own Visual Theme

To create your own visual theme:

  1. Go to the Select Site Layout & Site Theme page of the Web Site Wizard.
  2. Select the Use my visual theme radio button. Note that there is no preview function for your own visual theme as when you select a pre-defined theme.

  1. To change the background color of your Web Site, click the white square next to the Background Color field to open the color chart and select a color. The number for the background color selected will display in the Background Color field and the white square will fill with the color selected.

  1. To change the font of your Web Site, select the font from the Font Name drop-down list .

  1. To change the font color, click the white square next to Font Color to open the color chart and select a color. The number for the font color selected will display in the Font Color field and the white square will fill with the color selected.  Keep in mind that you should choose a color that complements your selected Background Color and that will be easily seen.

  1. To further customize the header, footer, content, or navigation bar text colors and sizes, click the Advanced button to open the Advanced Options window. You may modify the text color, width, height, and alignment of each area for these page elements if desired.

Tip: You must click the Next button at the bottom of the Select Site Layout & Site Theme page to progress to the next step in the wizard. If you wish to stop building your site, click the Cancel button.