Free Web Template Tutor

Heading and Slogan

Heading and Slogan Text
The code that adds the heading and slogan to the page is shown below.

If you don't want the heading to be a link, just remove the anchor tag code.



<div class="art-Header">
<div class="art-Header-jpeg"></div>
<div class="art-Logo">
<h1 id="name-text" class="art-Logo-name"><a href="#">Headline</a></h1>
<div id="slogan-text" class="art-Logo-text">Slogan text</div>
</div>
</div>


Using a Graphic for a Heading

If you wanted to use a graphic as your site heading, the easiest way would be to replace the the text inside the H1 tag as shown below.

<h1 id="name-text" class="art-Logo-name"><img src="images/headline.gif" border="0"></h1>

Graphic as Heading


Replacing the Heading Background Image

We created templates temp25-temp28 to show you how easy it is to replace the heading background image with one of your own. This is easily done if the heading image of the template you choose has square corners at the top. Create your background. Size it 974X175 pixels and save it in the images folder as Header.jpg. Adjust the colors of the heading and slogan text in the file style.css.