Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 11 – Transfer Existing HTML Code

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to transfer existing HTML code to different places on the site. In order to start moving the flash over, we need to have access to the HTML file that creates it. We also show how to download images, add them to the media library and reference the correct locations for these images.

Video Transcript

Rick: And so one of the interesting things about this project is transferring some… well, is transferring the Flash, that is this whole infographic or… not even infographic, this whole graphic with you know, links to different places on the site. This whole thing is a combination of Flash and images that was constructed in HTML and that is relatively easy for us to move from this site into WordPress as long as we acknowledge that what we’re doing is we’re moving HTML. And so what that means then is we’re going to have to pick up these images and download these images and get those things into our Media Library. And then when we move the HTML over, what we’re going to have to do is reference you know, the correct locations for these images.

But having said that, the process of actually moving all this stuff is actually fairly simple. We also are going to be moving over this MLS stuff or Multiple Listing Service stuff. And so this is probably even a little bit easier to move because it’s simply an iframe that we’ll copy and paste. Although it does have this sort of pre-loaded list of parameters that when you click on it you know, it starts a search based on location and price. And so that does offer us a litle bit of interesting challenge… well, a little bit of interest in the process of moving this stuff over.

So we’re going to start that whole process off by moving over the Flash. And movingn over the Flash really means what we need to do is have access to the HTML file that creates this. And so there’s a little bit of sleuthing we have to go through here. Right now, if you look up at the browser window, we’re working on default.aspx. That’s the name of the file so that’s where we’re going to start looking for this code.

Okay so then let’s open up… start opening up some of the files that we have from the original site. And I’ve got those saved here, Biltmore Old Site. And then we’re looking for default aspx, there it is. So we’ll start by opening this file. And as this is an aspx file, not an HTML file, the Netbeans is not going to show this well. I could use a Microsoft product for a code editor here and then we’ll be able to see this code highlighted. But I think we could probably do this without it.

What we really have here is this whole thing starts off with really, right here, include file. And what it’s doing is this is actually aspx code telling this HTML page to include the file at the location includes/menucode.html. And this is actually the menu and not what we’re really looking for. And then we come down into the body, we pick up the div and the main div is at page container and interior div is a title container. I’m going to scroll down here a little further and this is actually the include file that we want, include file = includes/menu top HTML. Actually, we don’t want that either, my mistake. These are our little things. What we want is this. So the div id flash float and it’s got an embed with a location and some embed code and we can go ahead and grab that. Although this location is not going to be accurate for us.

And then it also has this map and the map is an unordered list with special styling applied to each of these classes, class Scottsdale, Paradise Valley, Phoenix, Arcadia, Biltmore, and Fashion Square. And then inside that list are these images.

So we’re going to start off by just grabbing this whole thing, copying it, coming over to the site we’re working on and opening it up. And then we’re going to go to that page which is our homepage and edit it and make sure that we’re in the HTML view. We have all this dummy text that we put in last time just to give it some content and we’re just going to paste that HTML code there. Now it’s not going to work for us properly yet but that doesn’t really need to worry us too much. If we hit update, let’s see, the way this code works is it’s got a link and that link is actually to another aspx.file. So what we’re doing… what we’re going to do is take the local equivalent of this or our equivalent of this page and put it in this href. And then we’re going to put this image and put it here and then we need to get the CSS to be able to make each one of these pieces work properly.

Okay so let’s start off by figuring out what these hrefs are. So this is scottsdale.aspx and that’s this thing here, right? So if we just click off this Scottsdale… oh, that’s not going to help us actually. I’m going to bet it’s this one right here, Scottsdale Properties for Sale… it is. So our equivalent of Scottsdale Properties for Sale is this one which is Purchase Scottsdale Properties for Sale. So we’ll copy that, bring it over here and now our href is going to reference that file instead of the aspx file. And let’s see, let’s just give us a new outline for that list item.

So we’ve got that list item taken care of and we’re going to have to come in and fix this image as well. And I think the way we’re going to fix that image is we’re going to upload those images to our Media Library so we may as well do that right now. And select the files and I’ve got that on my server. Okay, images.

And so let’s see, we’ve got… well, we know Scottsdale was one of them, right? Scottsdale overlay gif, okay so that’s one of them. We may as well just collect them all at the same time. So let’s see, that means that so we’ve got Scottsdale ovelay gif and then Paradise Valley overlay gif and then Phoenix overlay, Arcadia overlay. Okay so let’s just look for the overlays then. So Paradise Valley overlay, Phoenix overlay and they’re all gifs, aren’t they? Foursquare overlay, Biltmore overlay, Arcadia overlay. Okay so we’re going to put all of those in there and now they’re being opened or uploaded. We’re going to save the change.

And then so Scottsdale overlay is the one we want for that first list item so we’ll copy Scottsdale overlay. And under src, we’ll replace that location with this. Okay so next we have Paradise Valley. We’ve got the Paradise Valley aspx. We need to find our equivalent of Paradise Valley which is undoubtedly this one so we’ll put that one in. Replace the aspx file with our WordPress page and we’ll replace the images in the Paradise Valley overlay.

It’s not difficult work but it is detail work. Okay so there’s the closing LI. So now we have Phoenix to do… okay, Fashion Square overlay gif. Now if we hit update and we view the page, press the change out, it’s not going to look the way we want it to look. See how everything… I got one of our images, the Central East Phoenix image is not right. But what we’re missing here is the CSS that will align these things all up in the right location. And which one was it? It was the second one, below Paradise Valley. So it’s you know, which one was it? East Phoenix, Central East Phoenix or… so Phoenix href equals for… that’s the a. Image src equals… I had an i in there, can’t have extra letters in these things.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment