CSS image replacement technique.

Link to the website: http://www.gavingough.com/

屏幕快照 2013-09-24 1.03.47 AM
This is a photographer’s portfolio site, and on the upper left corner there is a logo with the photographer’s signature that guide viewers to the main page.
屏幕快照 2013-09-24 1.06.07 AM
Image replacement is one of the most basic techniques I would want to include in my future web design. Besides the benefits of having a logo to represent myself or my “brand,” I think image replacement technique helps make the website more customized and improve viewers’ impression on the overall design. According to some of my research, image replacement technique also makes the site search engine friendly. In this case, although the logo is an image, but the search engine could still detect the photographer’s name because it was included in the coding.
And it’s quite simple to accomplish this design.
First, we need to let the search engine know the logo is an important item in the site by putting real text into our HTML. We need to link the logo to the home page too, so the HTML for this logo looks like this:
<h1 class=”site-title”>
<a href=”http://www.gavingough.com/&#8221; title=”Gavin Gough” rel=”home”>
</a>

</h1>

Then in the CSS stylesheet, we use CSS to replace the text with an image with the width and height of the image:
h1.site-title {
color: #3D3D3D;
border-bottom: 7px solid #2D2D2D;
border-bottom-width: 7px;
border-bottom-style: solid;
border-bottom-color: #2D2D2D;
}
h1.site-title{
font-size:4em;
margin-bottom:0px;
line-height:1em;
float:left;
}
With this technique, we are not only able to replace text with image, but also allow search engine to detect the information implied by the image/logo/brand.
Advertisements

2 responses to “CSS image replacement technique.

  1. you are always the first student finish your blog positing.

  2. We will learn this skill late in Javascript.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s