This entry was posted on Friday, June 15th, 2007 at 5:41 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Webmaster Factor
Flash Tutorials and Web Development Blog
O.K. we all know that framed websites just do not work for the search engines, but we will all get clients who have spent way too much money on their framed web sites. This effects us in two ways…
One, the client has spent this money and has later learned that their site is crap, so they do not trust us at all.
Two, we have to completely rebuild the site. Half the time they are built in some second rate template
builder and the poor customer bought the .html when they fled their captors.
What to do…
Well, when rebuilding a framed site to be a search engine readable site, you have two options;
Tables and .CSS.
I choose .CSS because it keeps the .html very clean and easy to update; no digging through tables to
find what you are looking for ect…
But, if you are using tables, that is still ages beond using frames.
This is what I did:
Let’s say this is the page a client brought to you:
<FRAMESET ROWS="50%, *" COLS="*, 50%"> <FRAME src="framea.html"> <FRAME src="frameb.html"> <FRAME src="framec.html"> <FRAME src="framed.html"> <NOFRAMES> This would not help </NOFRAMES> </FRAMESET>
Here is a link
So what to do… we need to take all of this info and put it on one page..
First, we copy the source code of each frame in to a seperate notepad or textpad or whatever (yes, i’m a
notepad geek).
Then create a .html document with a “div” for every section, and copy the info from each frame source
in to one of the divs. Like so…
<div class="alpha"> <font color="CC99CC">DEMETER</font>
(dee-MEE-tur; Roman name <font color="CC99CC">Ceres</font>) was the goddess of agriculture. Demeter as the sister of Zeus and the mother of Persephone. Persephone was gathering flowers in a meadow one day when a huge crack opened up in the earth and Hades, King of the Dead, emerged from the Underworld. He seized Persephone and carried her off in his chariot, back down to his his realm below, where she became his queen. Demeter was heartbroken. She wandered the length and breadth of the earth in search of her daughter, during which time the crops withered and it became perpetual winter. At length Hades was persuaded to surrender Persephone for one half of every year, the spring and summer seasons when flowers bloom and the earth bears fruit once more. The half year that Persephone spends in the Underworld as Hades' queen coincides with the barren season.
</div>
<div class="beta"> <center><b>The Early Years</b></center> <P align=left>
Jason was the son of the lawful king of Iolcus, but his uncle Pelias had usurped the throne. Pelias lived in constant fear of losing what he had taken so unjustly. He kept Jason's father a prisoner and would certainly have murdered Jason at birth. But Jason's mother deceived Pelias by mourning as if Jason had died. Meanwhile the infant was bundled off to the wilderness cave of Chiron the Centaur. Chiron tutored Jason in the lore of plants, the hunt and the civilized arts. When he had come of age, Jason set out like a proper hero to claim his rightful throne.</P>
</div>
<div class="gamma"> <CENTER><b>The Oracle</b></CENTER> <P>
King Acrisius of Argos was warned by an oracle that he would be killed in time by a son born to his daughter Danae. So he promptly locked Danae up in a tower. But the god Zeus got in, disguised as a shower of gold, with the result that Perseus was born. So Acrisius straightaway stuck daughter and infant into a chest and pushed it out to sea. Perhaps he expected it to sink like a stone, but instead it floated quite nicely, fetching up on a beach on the island of Seriphos. </p>
</div>
<div class="delta"> <b>Background</b> <P> In the tenth year of the Trojan War, the Greeks tricked the enemy into bringing a colossal wooden horse within the walls of Troy. The Trojans had no idea that Greek soldiers were hidden inside, under the command of Odysseus. That night they emerged and opened the city gates to the Greek army. Troy was destroyed. Now it was time for Odysseus and the other Greeks to return to their kingdoms across the sea. Here begins the tale of the Odyssey, as sung by the blind minstrel Homer.</p> </div> <div class="linea">
</div>
here is a link
and here is the .CSS:
.alpha {
position:absolute;
display:block;
margin: 5px 5px;
border-bottom:6px solid lightblue;
width:500px;
height:50%;
left:35px;
top:15px;
}
.beta {
position:absolute;
display:block;
margin: 5px 5px;
border-bottom:6px solid lightblue;
width:500px;
height:50%;
left:50%;
top:15px;
}
.gamma {
position:absolute;
display:block;
margin: 5px 5px;
width:500px;
height:42%;
left:35px;
top:57%;
}
.delta {
position:absolute;
display:block;
margin: 5px 5px;
width:500px;
height:42%;
left:50%;
top:57%;
}
.linea {
position:absolute;
display:block;
background-color:lightblue;
width:6px;
height:100%;
margin-left:-3px;
left:47%;
top:0;
}
This is not a .CSS tutorial, if you need one, please go to TIZAG.COM
they got your back.
That’s how I do it, there are many ways, and if you have questions, please contact me.
Leave a Reply
You must be logged in to post a comment.