PDA

View Full Version : How transfer HTML site into new Dreamweaver format?


Skylark
08-14-2012, 02:40 PM
I have a framed HTML website which was originally made using a simple, but wonderful, WYSIWYG web-design program which unfortunately isn't compatible with Windows 7. So, in Windows 7, the site has been imported into Dreamweaver CS6, the site is now on the web, and the content is just as is wanted.

However, it would be better if the content were centred on all monitors, so it would be good to move all of the pages into one of Dreamweaver's own formats. Is there a fairly straightforward way of doing this?

I've opened a Dreamweaver template and pasted all the elements of one of the pages into it, but, although their relative positions have been preserved, the whole collection of elements isn't placed exactly where it's wanted and I don't know if it's possible to move them as a group.

Is there a way to transfer an HTML site into Dreamweaver easily? Or is it necessary to build a new website, from scratch, using Dreamweaver's methods?

Thanks.

(If it'll help seeing the site in question, it's at http://www.davidcade.net)

Corrosive
08-14-2012, 03:27 PM
Or is it necessary to build a new website, from scratch, using Dreamweaver's methods?

Dreamweaver uses HTML like any other website design software. It doesn't have 'methods' as such, it is just a glorified code editor.

Skylark
08-14-2012, 06:23 PM
Hello, Corrosive.

Yes, I understand that Dreamweaver is, as you've said, "just a glorified code editor". So I'm wondering if there's a simple way of "plonking" my current html pages into one of its "glorified" templates.

I've tried by selecting all the elements on a page, copying them, and then pasting them "in place", but they don't arrive where they're wanted. Is there some "special" way of importing an html page into one of dreamweaver html templates so that the page appears as it was originally?

Corrosive
08-14-2012, 07:00 PM
Yes, just create a new, blank HTML page and paste your content. Don't worry about templates for the time being. Just a new page :)

Skylark
08-14-2012, 07:57 PM
Yes, just create a new, blank HTML page and paste your content. Don't worry about templates for the time being. Just a new page :)

Hmm. Will pasting in each page's content lead to a significant improvement? Already each page from the other program has been opened in Dreamweaver and saved in Dreamweaver. Doesn't that achieve much the same thing as pasting in each new page?

Where I'ld like to get to is having the site load centre-screen as in the CS6 "html template" "1 column fixed, centred, header and footer". So the question is how to get the site into that format with the least amount of time and trouble, i.e., without having to compose from scratch.

If there are any practical steps to achieving this, it would be great to hear what they are.

Ricky55
08-14-2012, 09:53 PM
The only way to use a Dreamweaver template or one of its prebaked pages is to create a new document like Corrosive says and then copy and paste your content into the page.

Can't you just use CSS to style what you already have though?

If all you want to do is centre your content thats just one CSS rule.

Your site link is broken, fix this so we can tell you want you need to do.

Corrosive
08-15-2012, 08:08 AM
And here is a quick run down of centring content on a page; http://www.dreamweaverclub.com/css-center-content.php

Corrosive
08-15-2012, 11:35 AM
Sorry, I think I may have just spotted the fundamental flaw with what you are trying to do! Your existing site is created with frames. so it's not going to be as simple as copy and paste! My apologies, I didn't ever look at your code. My honest advice would be to start again from scratch. Frames are just a nightmare.

Skylark
08-15-2012, 11:43 AM
Ricky55, thanks very much for your reply.

The only way to use a Dreamweaver template or one of its prebaked pages is to create a new document like Corrosive says and then copy and paste your content into the page.

The problem I encountered was that when I pasted in my elements, they were reproduced as in the original html page and in their positions relative to each other, but the central area of the Dreamweaver template was ignored - with the elements all being slapped against the left-hand edge of the monitor. In other words, the code filled that blank or padded area to the left of the centre where there should be nothing. I suspect that some of the html code that was copied over over-rode the code of the template?

Can't you just use CSS to style what you already have though?The site was created with html only and I have no knowledge of CSS - although late last night I began to suspect that some knowledge of CSS would help! The little I read about CSS last night combined with your comment above, does now suggest that "just using CSS" to style what I already have is probably the answer. I can only hope that "just using a little CSS" will be easy to do!

If all you want to do is centre your content thats just one CSS rule.Please forgive my complete ignorance, but does that mean creating one separate page, *.css, with just one rule in it, and then putting a reference to that css page in all the html pages?

If so, would I remove the left (blank) frame from the frameset, reducing the site to a frameset of two frames (the top banner/buttons frame, and the lower content frame) and then put the same centring CSS rule into the banner/buttons html and all the content hmtl pages?

Your site link is broken, fix this so we can tell you want you need to do.Have just checked on http://www.davidcade.net and it's accessible at this moment. The administrator did warn last week that there would be a bit of downtime this week for essential maintenance.

Skylark
08-15-2012, 11:56 AM
Hi, Corrosive. Have been looking at the page you recommended and was just about to reply to your previous message.

Sorry, I think I may have just spotted the fundamental flaw with what you are trying to do! Your existing site is created with frames. so it's not going to be as simple as copy and paste! My apologies, I didn't ever look at your code. My honest advice would be to start again from scratch. Frames are just a nightmare.

This is what I hoped would not be true - a long learning curve through the long dark evenings of winter! However, when I ran the site through Dreamweaver several weeks ago, I accepted that what you've suggested is what I would most probably have to do eventually, in order to centre it.

But is there a halfway house, perhaps? The only things that displease me at the moment are: 1. the three-frame site does not allow the content to always be viewed in the centre of the screen, unless I add a blank fourth panel to the right - and allow a scroll bar to right of centre; and 2. when a new page is opened there is a momentary flash of white before the new page loads.

If I reduced the 3-frame site (the blank left; the banner/buttons top; and the main content panel) to a 2-frame site (by removing the blank left frame), could a simple bit of CSS code be popped into the top and lower frame pages so that they are both centred?

Thanks for your help.

d a v e
08-15-2012, 12:24 PM
i would think about using something like wordpress http://wordpress.org/ and completely lose the frames whatever solution you choose.

Corrosive
08-15-2012, 12:26 PM
To be honest I have never tackled frames but I'd thoroughly recommend those long winter nights learning HTML and CSS based layouts.

Your site structure is messed up anyway. For instance your home button takes you to products and your contact button goes to a page about Shropshire... Now, I like Shropshire (beautiful countryside) but it wasn't entirely what I'd expected! If you had a more 'traditional' site structure i.e. each page as a page in its entirety then you'd soon iron out the bugs and misdirections.

d a v e
08-15-2012, 01:18 PM
couldn't edit the above any more so posting more:

the typography could do with a real tidy up too!
1. text is too small
2. there is only one space after a full-stop (period) unless your using a typewriter
3. don't underline text if it's not a link
4. don't use full-justified text - it just doesn't work on the web, and it's a bit harder to read too
5. i'm not sure about the legibility and pleasurability of custard yellow text on a raspberry background - because the site is centred around the printed word (or the spoken version of it;)) i would go for using the red in the header and background (and as a link colour) and almost black for the main copy (say #333) OR stick with the red background but aim for a paler creamy -old paper style, er cream, lighter and less saturated than you have
6. not typography but consider movinh the photos into their own page as a gallery
7. logo should be an 8-bit png (it's a bit blurry too) because it's not a photo (photos and complex gradients = jpeg, everything else png)
8. images of cds could be pngs too, and they are too small to be of any use (the clicked on size is much better): let's see the product!
9. resize the book cover (athens) to the correct dimensions in an image editor

hopefully some useful tips ;)

is this a site you're making and getting paid for - are you just a hired hand - or do you have some personal connection with it?

have a look in the dreamweaver help too and when you make a new page there is a choice of css/html templates (basic ones e.g. 2 column ones) that you can start with

d a v e
08-15-2012, 02:25 PM
something a bit like this 2 column mockup
http://pp.kpnet.fi/prescott/stuff/orpheus.jpg
using the free Gentium Book
http://www.fontsquirrel.com/fonts/Gentium-Basic

Skylark
08-15-2012, 05:50 PM
something a bit like this 2 column mockup
http://pp.kpnet.fi/prescott/stuff/orpheus.jpg

Dave, you've got it! You've been listening! Well done! That's exactly where I want to get to!

Great to see the page shrink right down as I moved the right edge of the browser window over to the left! Even though the text becomes unreadable when the browser window is only, let's say, one inch wide, I understand people using mobile phones, iPhones, and suchlike can zoom in, can't they?

But now the big question: is there a fairly simple way of transferring my html pages into that format that you have shown in your mock-up (minus the footer)? Or is it really going to have to be a case of me rebuilding the site from scratch inside "Fluid Grid Layout" or one of the other templates?

using the free Gentium Book
http://www.fontsquirrel.com/fonts/Gentium-Basic

Thanks for telling me about Font Squirrel.

To answer your earlier question about my relationship with the website, Dave, I'm David . . . as in the website.

Again, many thanks for showing you understand what I'm after.

d a v e
08-15-2012, 07:35 PM
my mock up - which is all it is - is just one big image so the browser resize it automatically (and is why it becomes unreadable at smaller sizes )

if you feel your coding skills are up to it then have a look at http://www.getskeleton.com/ (and also http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-starting-out/ )

with the content you have you could do it all as one column but you will have to beware of making the line length too long (i.e the with of paragraphs becomes uncomfortably long to read) lots of padding or a max width on the content maybe.

whichever way you decide to go there's going to be quite some learning curve, unless you have the money to hire someone ;)