Header

Path, from the left navigation menu: ['Customization' section] > Skin Setup > Header

The Header is what gives your site it's 'branded feel' - and it appears throughout the whole of your site. A website header panel usually incorporates a site logo and the key color / typeface elements that the remainder of your site's elements pick up on throughout the site's pages. Hopefully you will be working through your Tutorial Workbook at this time (shipped as part of your Welcome Pack) and so will have already had your header graphic designed by now - if not it is highly recommended you get this process underway as soon as possible so as not to impede your progress when customizing your site.

You can access this customization section by clicking the link labeled 'Header' within the Skin Setup menu. Selecting this option will load the Header customization screen, above the Skin Setup navigation menu:

Firstly, we need to clarify the specific area within the page template that these modifications affect. The header panel is the horizontal, rectangular section at the top of every page. It contains graphics and a navigation menu to some special pages within your site. It is the graphical element of this header panel that we are customizing in this section. The header panel is shown in the diagram below:

Knowing the specific part of the website page template that is affected by your customizations within the 'Header Panel' section, we can now take a look at the type of customization open to us:

First of all, to specify the alignment of your header image, just select the appropriate radio button:

Then, you can specify the header image you would like to use on your site by following the three simple steps below:

Browse to the graphic file you have chosen for your Header Image. Please note: this image file should be of proportions suitable to the positioning of the header within the Header Panel. Overly large graphics will distort the panel and cause layout problems. Make use of the "Preview" facility to check your layout before you commit your changes to the 'live'' site.

3.	Select the file and click the "Open" button (or simply double-click the chosen graphic file). This will display the full path to your graphic file in the box.

The path to your selected graphic file will be displayed in the image upload field. In the box below this you can also enter the alt text for the header image.

Note: The dimensions of your header graphic must be exactly: 750 pixels wide x 150 pixels high

If you click the "Preview" button at the bottom of the preview screen, the screen will refresh and your chosen graphic file will be displayed immediately on your website. Note, the graphic will only become a public-facing (or 'live') modification to your site once you have clicked the "Apply Changes" button.

Please note that once you add a header image to your website, you cannot remove it completely. Because your partner website needs to have a header, you can only change the current image to another one. In other words, your website must have a header image, be it the one you just added or a different one.

It is important to note that the four buttons at the bottom of the preview screen are the same for every other option within the 'Skin Setup' menu. Their functions are as follows:

"Preview" Button: This button allows you to load your website in the preview screen. This is a great way to visualize how different colors, fonts and layouts will work together coherently on the page (or not, if you've chosen a poor mix of styles!). This button does NOT make changes to your 'live' site - it is only for use as a visual 'proof' of your proposed changes. Please note that all changes made to your site - even those in other customization sections - will be previewed on pressing this button.

"Full Screen Preview" Button: This button allows you to load a new pop-up window illustrating, in full preview mode, exactly how the changes you have just made will look when your page is made live.

"Close" Button: This button will close the "Skin Setup" page without saving any changes you may have just made. If, for example, you change your mind, you can simply abandon your proposed changes by clicking the "Close" button. Only clicking the "Apply Changes" button (details of which are below) will you commit your changes.

"Apply Changes" Button: This button saves any changes you might have made to any of the skin setup sections. When you click on the button, you will be presented two options/buttons, "Cancel" and "Generate Site", as seen below:

Fig. 2.5.1.2.3: The "Cancel" and "Generate Site" options that appear after clicking on the "Apply Changes" button:

If you click on the "Cancel" button, the system will reload the previous version of your website in preview mode, without making any changes to the website.

Instead, if you click on the "Generate Site" button, the system will save your proposed changes and then will display the website in full screen preview mode. For clarity, this button will make live all the changes you have made since you last pressed the "Generate Site" button. Your customers will see all of the changes you have made immediately.

It is highly recommended that you make full use of the "Preview" and "Full Screen Preview" buttons to ensure that the changes you have proposed appear exactly as you want, BEFORE committing the changes to the 'live' site (although you can of course edit the site again, and recommit additional changes, should you need to correct an error).