5 replies [Last post]
Alucard2487
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT-4
Joined: 2011-09-30
Posts: 3
Points: 4

I'm taking a Design 101 class. We were tasked with creating our first webpage. We did a mockup of it in Photoshop and then we were to build it using Dreamweaver. I feel like some of my code is off and that there is a better way to do some of the things I did. I attached a jpg of the page. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nathan Graddick's Webpage</title>
<style type="text/css" media="screen">
 
body{
	background-color:#CCC;
	margin: 0;
	padding:0;
	}
body,td,th,q,blockquote{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11pt;
}
 
#page{
 
}
 
 
h1{
	color:#FFFFFF;
}
 
#header{
	position:absolute;
	left:300px;
}
#header h1{
	position:absolute;
	left:20px;
	top:-15px;
}
 
 
#space{
	position:relative;
	top:41px;
	left:300px;
}
 
 
#home{
	position:relative;
	top:1px;
	left:560px;
}
 
#AboutMe{
	position:absolute;
	top:41px;
	left:737px;
}
 
#trophies{
	position:absolute;
	top:41px;
	left:884px;
}
 
#frameLeft{
		position:relative;
		top:0px;
		left:300px;
}
 
#rightSide{
	position:absolute;
	top:81px;
	left:1020px;
 
}
 
 
#laser1{
	position:absolute;
	top:81px;
	left:340px;
}
 
#laser2{
	position:absolute;
	top:81px;
	left:792px;
}
 
#me{
	position:relative;
	top:-918px;
	left:566px;
}
 
 
#text{
	position:absolute;
	left:343px;
	top:541px;
 
}
 
</style>
</head>
 
<body>
<div id="page">
 
  <div id= "header">  <img src="images/NathanGraddick_WebPage_01.jpg"  width="760px" height="41px" /> <h1>Nathan Graddick</h1> 
  </div>
 
  <div id= "space">  <img src="images/NathanGraddick_WebPage_02.jpg" width="266px" height="40px" /> </div>
 
  <div id= "home"> <img src="images/NathanGraddick_WebPage_03.jpg" width="178px" height="40px" alt="Home Page Link"/>  </div>
 
  <div id ="AboutMe"> <img src="images/NathanGraddick_WebPage_04.jpg" width="150px" height="40px" alt="About Me Link"/> </div>
 
  <div id= "trophies"> <img src="images/NathanGraddick_WebPage_05.jpg" width="176px" height="40px" alt="Trophies Link" /> </div>
 
  <div id="frameLeft"> <img src="images/NathanGraddick_WebPage_06.jpg" width="40px" height="919px" /> </div>
 
  <div id="rightSide">  <img src="images/NathanGraddick_WebPage_06.jpg" width="40px" height="919px" /> </div>   
 
  <div id="laser1">   <img src="images/NathanGraddick_WebPage_07.jpg" width="227px" height="460px" alt="Trophy from Clash"/> </div> 
 
  <div id="laser2">  <img src="images/NathanGraddick_WebPage_09.jpg" width="227px" height="460px"  alt="Trophy from Clash" />  </div>
 
  <div id="me">  <img src="images/NathanGraddick_WebPage_08.jpg" width="226px" height="460px" alt="Me" /> </div>
 
 <div id="text"> <img src="images/NathanGraddick_WebPageFInal_03.jpg" width="678px" height="459px" alt="Block of text" /> </div>
</div>
</body>
</html>

AttachmentSize
Mywebpage.jpg15.59 KB
Alucard2487
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT-4
Joined: 2011-09-30
Posts: 3
Points: 4

Sorry

Just noticed the picture I attached didn't work how I intended. Why can't we upload zips?

AttachmentSize
Mypage.jpg 155.48 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 3 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Absolute positioning is

Absolute positioning is generally a bad thing.

Mind you, so is letting Dreamweaver code your pages for you Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Alucard2487
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT-4
Joined: 2011-09-30
Posts: 3
Points: 4

What had happen was

I sliced everything using photoshop and didn't know that I could save the slices as a html and an image. So I coded everything to make it look how I wanted it to. That's why I feel like I did something wrong. Every time I used relative, I had to go thousands of pixels over to get it to show on the screen. I felt like that was wrong.

Any tips? I reattached a picture of my webpage(it actually shows it). I couldn't get the black bars on the side to go all the way to the bottom of the page.(Doesn't show it in the pic)

My last problem was that in Photoshop; we made the page 760x1000. However, unless I set my browser to this side, my browser is bigger, so it looks strange. How do I get the image to fit on any browser, regardless of size. (Using CSS).

g.m.b.s.
g.m.b.s.'s picture
Offline
newbie
Upstate New York
Last seen: 9 years 36 weeks ago
Upstate New York
Timezone: GMT-4
Joined: 2011-03-23
Posts: 5
Points: 6

If you really want to learn

If you really want to learn how to write code and create web pages you should start at the beginning and learn html. Stay away from Dreamweaver until after you know what you are doing and can understand the code that Dreamweaver spits out.

There are a few good places to start...

http://www.w3schools.com/html/default.asp

http://htmldog.com/guides/htmlbeginner/

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 3 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Alucard2487 wrote: I sliced

Alucard2487 wrote:

I sliced everything using photoshop

That's even worse Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies