Helpp!

Hi Guys,

First off, I have read through a bit and this seems like a awesome site, so big thumbs up (and my first post ^_^)

I am new to web design, and am learning Dreamweaver and want to become a web designed after hours as a second job/hobby.

I am currently (unsuccessfully) working on getting a “coming soon” page up and running.

I would like the image to be scalable - however then all my text goes everywhere. I cant have it as a image as then Google doesn’t index it, as well as i need to have a hyperlink in the body of the text.

If someone could point me into the right direction, I would be forever thankful!

I have attached the code:

<html>
<head>
<title>coming soon page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	background-image: url(background.jpg);
	background-repeat: no-repeat;
}
#content {
	position: absolute;
	left: 70px;
	top: 468px;
	width: 912px;
	height: 120px;
	z-index: 1;
	font-family: calibri;
	font-size: 30px;
	color: rgba(255,255,255,1);
}
a:link {
	color: rgba(255,255,255,1);
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: rgba(255,255,255,1);
}
a:hover {
	text-decoration: none;
	color: rgba(255,255,255,1);
}
a:active {
	text-decoration: none;
	color: rgba(255,255,255,1);
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (coming soon page.psd) -->
<div id="content">The webstie for Hurstar Investments is currently under construction and will be live shortly. If you have any enquiries in the interim, please email us at <a href="mailto: info@mysite.com">info@mysite.com</a>. We look forward to hearing from you.</div>
<table id="Table_01" width="1025" height="768" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="1024" height="29" colspan="5">
			<img src="images/spacer.gif" width="1024" height="29" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td width="708" height="339" colspan="3" rowspan="2">
			<img src="images/spacer.gif" width="708" height="339" alt=""></td>
		<td>
			<img src="images/logo.jpg" width="274" height="229" alt=""></td>
		<td width="42" height="739" rowspan="8">
			<img src="images/spacer.gif" width="42" height="739" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="229" alt=""></td>
	</tr>
	<tr>
		<td width="274" height="211" rowspan="3">
			<img src="images/spacer.gif" width="274" height="211" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="110" alt=""></td>
	</tr>
	<tr>
		<td width="70" height="400" rowspan="6">
			<img src="images/spacer.gif" width="70" height="400" alt=""></td>
		<td>
			<img src="images/header.jpg" width="414" height="79" alt=""></td>
		<td width="224" height="101" rowspan="2">
			<img src="images/spacer.gif" width="224" height="101" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="79" alt=""></td>
	</tr>
	<tr>
		<td width="414" height="22">
			<img src="images/spacer.gif" width="414" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="121" alt=""></td>
	</tr>
	<tr>
		<td width="912" height="35" colspan="3">
			<img src="images/spacer.gif" width="912" height="35" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="35" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/footer.jpg" width="912" height="59" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="59" alt=""></td>
	</tr>
	<tr>
		<td width="912" height="84" colspan="3">
			<img src="images/spacer.gif" width="912" height="84" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="84" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

PS: Using Dreamweaver CS6 if that makes any difference.

Again, thank you sooo much!

SiD24:)

Welcome to Sitepoint, Sid

am learning Dreamweaver
… DONT
Learn HTML/CSS instead. Same effort (overall, even if it may seem more difficult the first few weeks) , and you will write better code.

also, dreamweaver or not, don’t used TABLES for layout.

ok, those basics aside,
what do you mean by ‘scalable images’ ? if you mean 'sharp text ’ when you zoom , this is just plain not possible (unless you use flash… and you don’t wanna do that either) Images are a fixed amount of data, if you zoom, the seams begin to show… more importantly they may be bad for the SEO and accessibility of your site. Case in point since I cant see the images you are using, I cant tell anything about the code you have provided ( tho providing the code was the right thing to do ::gold star::slight_smile:

would you be able to provide a link to your actual site?

First, stop using Dreamweaver. This is terrible terrible generated code. Tables are very outdated hacky style elements and should NEVER be used for layouts. There is also Search Engine Optimization that says using tables for layouts is bad, but I’ve heard both ways so I don’t want to say much about that.

Secondly, you’re using depreciated table styles like

width=xxx

. These can potentially cause a lot of headaches when you start using CSS to style your pages the right way.

If you’re really serious, take the time to do some tutorials and learn how to do things the right way. The fact that Dreamweaver CS6, which was released in in 2012, is still generating this deprecated and extremely bad practice tables just confirms to me how bad it really is. I always knew, but wow… just wow. HTML is for putting things on the page, CSS is for making it look pretty. spacer.gif has been dead for a while as well.

Code Academy - This site will take you through interactive tutorials in HTML, CSS, as well as javascript and a few other server-side languages.

If you like videos there are lots on Youtube, but I’ve recently discovered paid tutorials are most of the time very much worth the price. Udemy is a good site that I’ve used for some more advanced topics, I haven’t tried any of the introductory courses.

That’s all I really know off the top of my head to get you started, and to stay away from w3schools.com for initial learning.

This is also my first post here, so I’m not sure if I broke any rules by saying Dreamweaver or suggesting these sites. :wink:

If you want to be a web designer you should start by staying away from dreamweaver

I got this from validator.w3.org - Validation Output: 6 Errors

Thank you so much for your replies.

My initial post was pretty rubbish at explaining (was 4am in the morning) so after a little bit of sleep, lets try explain this one again.

My GF is a graphics designer as thus she currently uses a web designer for the web pages that she needs to upload. She sends him a PSD so that the developer knows what the site must look like.

What i did:

I look the PSD, and sliced it - and saved it as HTML and Images.
I then took out out the text and “made” a background image (1024x786) and saved it as a JPG

So the goals that I want the site to achieve:

It needs to fit across all screens on different resolutions and not have white anywhere - Preferable I wouldn’t like to even scroll down if the picture is to long, so it just fits in the browsing window perfectly.
In the body of my content there is a web address that needs to be able to link to write them a mail and send it off.

Other than that, its a pretty static site (i think that’s what they call it).

So just to recap from my side:

Learn HTML and CSS (NOT DREAMWEAVER lol)
Look at Code Academy as a teaching tool
What is the best way to learn web development, given that I will mostly be designing a website based off a PSD.
Is there a better way to take a PSD and convert it to HTML that what i currently did.

I hope this is a better mail, and you can understand it more.

PS: The web development bug has bitten!

What you’re describing is (or is at least a part of) responsive design, and it will be (nearly) impossible to achieve with your current methods. Removing the text from a PSD and then saving the whole thing as one large image is a very, very bad idea. Not only is making it responsive incredibly difficult as the majority of your site is comprised of a fixed image which can’t scale in size without losing quality, but it will make your site unnecessarily slow, will be a pain to maintain as well as other things. Either way, you shouldn’t be worrying about responsive design at this point, stick to the basics.

Unless your site is very intensive on the amount of graphics it has, don’t think of it as converting your PSD to HTML. Simply, re-create the site from the ground up using HTML and CSS whilst using the PSD as a visual guide of what you want the outcome to be. Only slice out parts of a PSD when it is something that can’t be realistically created in HTML/CSS. When simple things like rounded corners weren’t possible without images, a lot of sites were doing what you were doing since there was no other way. Now, we can accomplish those things in CSS, so there’s no need to waste bandwidth in using images.

UPDATE:

So after many of your wise words of wisdom, I have moved away from Dreamweaver, and started using Sublime Text :slight_smile:

Here is my new code - It should be a lot “cleaner”

My html code:

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css"> <!--this is my style sheet link.-->
		<title>Coming Soon</title>
	</head>
	<body>
		<div class="logo"><img src="logo.jpg"</logo>
		<div><img src="goldBar.jpg"</div>
		<div class="comingsoon">coming soon</div>
		<section>The website for Hurstar Investments is currently under construction and will be live shortly. If you have any enquiries in the interim, please email us at .............. We look forward to hearing from you.</section>
		<footer>Hurstar Investments (Pvt) Ltd  |  8 Fletcher Road, Mount Pleasant, Harare, Zimbabwe</footer>
	</body>
	</html>

and CSS code:

html {
  background: #FFFFFF;

}

body {

	font-family: "calibri";

}

.logo {
 	
	float: right;
}

.comingsoon {
	background-color: #007a00;
	font-size: 80px;
	color: #FFFFFF;
	margin-left: 6%;
	margin-right: 6%;
}

section {
	background-color: #007a00;
	font-size: 30px;
	color: #FFFFFF;
	margin-left: 6%;
	margin-right: 6%;
}

footer {
	background-color: #010101;
	font-size: 24px;
	color: #007a00;
	margin-left: 6%;
	margin-right: 6%;

}

What i am battling to do now is the following -

  1. I want the Green background to extend all the way to the edges of the screen, as opposed to the white spaces currently (same with the black footer).
  2. My logo wont float right.
  3. how do i set the percentages of the black and green bars.

I have a PSD that i am trying to match, how can i upload it to try and show you?

otherwise, how have i progressed, and am i heading now in the right direction :slight_smile:

i look forward to your replies! :slight_smile:

Thanks again for your help last time round, I havent opened up a new topic, as i would like to get your thoughts on how i have progressed in my coding and if I am on the right page.

I have been extremely busy with work, so working on this in my own time has recently been a tad difficult, but here are the changes

Here is what it should look like:

Am I going on the right track? :slight_smile:

I look forward to your replies and look forward to learning a lot more!!

SID24

Hi Sid, it’s great to see someone so willing to learn :slight_smile:

Looking at the code (it would be great if you could put your site up somewhere and post a link to it, that would make it so much easier to check things, using Firebug for example), I’d say that the whitespace is because of the margins you specified on the comingsoon div. You might want to use padding instead.

Check this out (I didn’t read the article, but I like the image very much) to see how things as margins, border, padding work in the box modell: http://mattryall.net/blog/2008/08/css-layout-fundamentals-box-model
See how the padding has the element’s background color, while the margin hasn’t?

P.S. Learnable has some great video tutorials as well

thank you for the feedback.

Where can i upload it too (sorry VERY new to this all)

:slight_smile:

Thanks again!!

PS: tried the padding and worked, so now just the other things :slight_smile: again thanks!

There are lots of hosts that offer free hosting, with a subdomain (yoursubdomain.host.com), but that’s good enough, because you only need it to test things (or show them to us :wink: ). Just google “free hosting” or something like that.

  1. My logo wont float right.

I noticed a couple of problems, which should fix this when taken care of.

  1. Your div with the class of ‘logo’ does not have a closing tag. There’s also a closing tag there for an element which doesn’t exist (</logo>). Change the </logo> to </div>.
  2. Neither of your image tags are closed. Img tags are self closing, so they should read like this: <img src=“logo.jpg” /> (the ‘/>’ was missing).

Hopefully that should do it.

Where can i upload it too (sorry VERY new to this all)

An easy way of sharing your code so that we can view it is using a service like Jsfiddle. You can paste in your HTML and CSS, save it, send us the link and then we can edit it, and send it back to you.

I have limited experience with free hosting, but from what little I do have, finding some that isn’t horrible that supports MySQL and PHP is incredibly hard. It might be worth it to get some very cheap Shared hosting. I’m sure there is some out there for under $5/mo and it will lead to a lot less headaches. Heck I rent a VPS for testing for about $5/mo.

I’ve got a test site for 10 euro a year. But I really got that for other reasons, and then ended up using it for testing. Before that, I used free hosting for testing.

Thanks everyone

The OP has enough information to have gotten started by now

Thread Closed