Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Templates????

Status
Not open for further replies.
mike314

mike314

Programmer
Joined
Jun 24, 2003
Messages
143
Location
US
Hey, I've got a quick question, how can I create some HTML templates, you know the basically ready to use HTML pages that are very graphical and have nice designs. How do you draw or create individual sections and boarders that have different colors and things like that

here is a sample of what I'm talking about:


how would I create something like this but on a smaller scale to practice on. I have Dreamweaver but not photoshop

thanks for all the help
 
Sort by date Sort by votes
or something like this CSS Zen Garden?

look up some the HTML and CSS tutorials there are around

W3 Schools Elated or A list apart

photoshop is not a requirement you can use any decent graphics package (I don't include MSPaint in that category though)



Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
what kind of graphics packages???

ok lets say a quick example is that I want to draw 4 simple squares on an HTML page and color them each differently (Text would go in each). How would I go about that

thanks
 
Upvote 0 Downvote
mike314,

ok lets say a quick example is that I want to draw 4 simple squares on an HTML page and color them each differently (Text would go in each). How would I go about that
Click to expand...

You could do that in simple HTML. Create 4 tables, give them each a different background color (and text color if you want) and then put some text in them.

You could, of course, create graphics and position them, but positioning text and an image in the same space is trickier than using a table with a colored background.

Wishdiak
 
Upvote 0 Downvote
what kind of graphics packages???
Click to expand...
If you don't want to shell out for Photoshop you can download GIMP. I've never used it myself, but I've read some very good reviews about it (+ it's free!).

GIMP INFO:

You'll need to download the installer from a partner site, but they're all linked to from the above site.
 
Upvote 0 Downvote
Paint Shop Pro from Jasc Software is reasonably priced and is ideal for most users needs. Gimp is very good but takes a bit of getting used to.

Using tables for layout is not really an ideal way to be designing now. CSS can make things much easier in the long run.
simple basic layout with boxes and CSS
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	color:blue;
	margin:10px 0px 0px 5px;
}
.box_center {
	margin:auto;
	width:300px;
	height:300px;
	border:3px solid orange;
	clear:both;
}	
.box_1 {
	color:red;
	background-color:#FFFFCC;
	float:left;
	width:100px;
	height:150px;
	border:3px solid blue;
	text-align:left;
	margin:10px 10px 0px 0px;
	padding:0px 0px 0px 5px;
}
.box_2 {
	color:#00FF00;
	background-color:#99CCCC;
	float:left;
	width:100px;
	height:150px;
	border:3px solid gray;
	text-align:center;
	margin:10px 10px 0px 0px;
	padding:0px 0px 0px 5px;
}
.box_3 {
	color:#FFFFCC;
	background-color:#99CC33;
	float:left;
	width:100px;
	height:150px;
	border:3px solid black;
	text-align:right;
	margin:10px 10px 0px 0px;
	padding:0px 5px 0px 0px;
}
.box_4 {
	color:red;
	background-color:yellow;
	float:left;
	width:100px;
	height:150px;
	border:3px solid red;
	text-align:center;
	margin:10px 10px 0px 0px;
	font-weight: bold;
	font-variant: small-caps;
	padding:0px 0px 0px 0px;
}
.centered {
	text-align:center;
}
</style>
</head>

<body>
this is text on the page
<div class="box_center">
text in div
<div class="centered">
Centered text in a div
</div>
</div>
<div class="box_1">
This is Box 1
</div>
<div class="box_2">
This is Box 2
</div>
<div class="box_3">
This is Box 3
</div>
<div class="box_4">
This is Box 4
</div>

</body>
</html>


Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
ChrisHirst,

I didn't say it was the best way, I just said it was one way to do it, no graphics program required.

Your suggestion to use CSS is better, of course...

Wishdiak
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ca8msm
  • Locked
  • Question Question
CSS Templates
Replies
1
Views
199
ca8msm
ca8msm
Keyth
  • Locked
  • Question Question
ASP Master Page Templates
Replies
1
Views
122
ca8msm
ca8msm
foxymorons
  • Locked
  • Question Question
Dreamweaver Templates
Replies
1
Views
63
ChrisHunt
ChrisHunt
sthbodyjewelry
  • Locked
  • Question Question
Question About Editing Downloadable Templates.
Replies
2
Views
52
sthbodyjewelry
sthbodyjewelry
jbento
  • Locked
  • Question Question
Free Templates
Replies
3
Views
181
jbento
jbento

Part and Inventory Search

Sponsor

Back
Top