• 0

help turning photshop design to website in dreamweaver please


Question

Hi,

I am trying to make a very basic website. I have sliced it up in photoshop and it looks like it does below. I want text in the large box in the middle of the page. In all of the guides I've checked online it says to delete the box and then add the image as a background again so that it can be typed on. For some reason, when I try to do that it just destroys the whole layout, as you can see in the second image. I'm doing this for a class and it has to be done in dreamweaver but it's just doing my head in right now. Could anyone offer some words of advice please?

post-63802-12917558823144.jpg

post-63802-12917559011289.jpg

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Your design is easy enough that you can do the following:

 <div id="wrap">
	<div id="header">
		<h1>AJW</h1>
	</div>
	<ul id="nav">
		<li class="home"><a href="#">Home</a></li>
		<li class="blog"><a href="#">Blog</a></li>
		<li class="portfolio"><a href="#">Portfolio</a></li>
		<li class="lcc"><a href="#">LCC</a></li>
		<li class="contact"><a href="#">Contact</a></li>
	</ul>
	<div id="content">
	</div>
</div>

With that you can then look at the following resources to finish up the CSS portion for what I did in HTML:

http://css-tricks.com/css-image-replacement/

http://css-tricks.com/css-sprites/

OR since you're using Comfortaa you can try out: http://sixrevisions.com/css/font-face-guide/

Link to comment
Share on other sites

  • 0

thanks, much appreciated. I think I will try and approach this with a fresh mind tomorrow as it's gone 10pm here. The font is Caviar, I wasn't away of Comfortaa but they look practically the same and I'm sure it'll be useful to check out that link too. thumbs_up.gif

Link to comment
Share on other sites

  • 0

I think I might be far worse at this than expected. I figured out how to replace parts with images using technique 3 from the first link... but I am stuck now. I don't understand why there is a white border on the left of all the 'home', 'blog', 'portfolio' images etc, when there isn't one on the header or the content, or how to get them all in a horizontal line rather than vertical. The only way I knew how to get the content image to show was to add <li class="content"></li> to the html so that I could use li.content in the css, but I'm not sure if that's the right thing to do or not. Also, the entire div box has a boarder around it so it doesn't sit tight to the edge.... if any of that makes sense. I have no idea how I'd get everything else in there like the white lines down the sides of the content box etc...

I'm apologise for what are probably very basic questions.

post-63802-12918264570035.png

Link to comment
Share on other sites

  • 0

You didn't really get the point of the CSS Sprites. You're not supposed to be using separate images at all--did you read the article?? They even have a before (which is what you're doing now) and an example of AFTER CSS Sprites (which is what you were supposed to do.) You should have one image used for the entire navigation. To "move" the location around, you just change the background-position:'s values around to have 'home' under class="home", 'blog' under class="blog", et al.

You have also forgotten to style the parent of the list items, the unordered list itself. You will need to add ul#nav (or just #nav) to your stylesheet (which should be separate but that's just pedantic right now in the grande scheme of things.)

How about you look over this article for CSS Sprites instead, since it will go more in-depth and follow suit to the style of code you're using right now:

http://www.sohtanaka.com/web-design/active-state-in-css-navigations/

Remove the li class="content". List items can't be tossed in randomly. An "li" an only appear under an unordered list (ul) or ordered list (ol.) It should never be used separately like you have done.

What you should be doing is just applying the background image to #content and then in order to move your text around in the center some more.. add width: 725px; padding: 0 50px;. The total width will then be 825px, which will show your background for the content area off.

Link to comment
Share on other sites

  • 0

I read it but I didn't really understand it. I'll give it another read. The reason I thought that I was supposed to use different images was because they were separated in the code, my mistake.

Thanks again for the links and the info. I really appreciate it and can understand that my comments are probably pretty frustrating. I will get it done eventually though, lol.

Link to comment
Share on other sites

  • 0

okay, I ended up using a template from dreamweaver and adapting it with some of the tips you guys gave me. it actually helped me make sense of some of the methods described. I think my site is a bit of a bodge job and I'm sure coding wise it's pretty poor and there are mistakes but as it's my first I'm just glad to finally get something done to be honest. I'm yet to make the other pages and get the links working, but that will be pretty straight forward as I'm just using the same design.

One strange problem I seem to be having is that in chrome and firefox it looks fine, but in explorer there is a big gap at the bottom between the content box and the footer which is making the sidebar image is repeating itself. would someone mind taking a look and explaining why that is and how I might fix it? thanks.

http://ajwatson.com/test/masterwithbgimages.html

Link to comment
Share on other sites

  • 0

haha well there is nothing dodgy on there so i don't know why it's doing that. That url should be dead now anyway, I deleted the folder and put up an updated one.

Link to comment
Share on other sites

  • 0

to be honest exporting from photoshop is a bad way to do it, look up how to use divs and style them using css - all easy enough in dreamweaver and is the standard for web design :)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.