Login

ElephantShoe · 10-11-2010, 06:52 PM

Sorry if the title sounds a little confusing.

Alright, say that I just made a theme (or template) in Photoshop for a website. In what way would I begin to code this theme? I'm completely ignorant on CSS and I'm trying to learn.

And I've heard some things about Adobe Dreamweaver. Should I use it?

DAMINK™ · 10-11-2010, 11:33 PM

First YES use Dreamweaver. Its a great tool.
To integrate CSS into your webpage is quite simple really.
All you need to do is to edit your index page.
Adding something like below to your header and editing to suit your location and name of your .css file.
<link href="/style.css" rel="stylesheet" type="text/css" />

Next you would need to create the file in question and put all your CSS in there.
Really though. If you are serious about creating a nice webpage then you really should use CSS and something like Dreamweaver.
Now here is a really good start point for learning CSS. http://www.cssbasics.com/
IT may appear quite difficult but once you get used to it, its really not that hard.
Dreamweaver is the same. Difficult at first, but becomes quite simple to use.
I LOVE DREAMWEAVER. I really do.

PurpleHaze · 10-12-2010, 04:26 AM

You just need to refrence it from your page you want it to be used one.
I don't use Dreamweaver because I hate it. I prefer Notepad++ but if you are a beginner then definitely use Dreamweaver.

Fragma · 10-12-2010, 08:31 AM

Notepad++ is good but Dreamweaver is better if you're wanting to code HTML, CSS etc.. Because you can see how it looks as you go along..

Sam · (This post was last modified: 10-12-2010, 08:44 AM by Sam.)

/agreed the 'design' or 'split' view is outstanding. However using these programs without HTML and CSS knowledge means you'll not understand the coding behind it all.

ElephantShoe · (This post was last modified: 10-12-2010, 11:18 AM by ElephantShoe.)

Thanks a lot guys.

Also, what resolution should I make the theme. Most people say 1024x768, but isn't that rather small?

dareknyght · 10-13-2010, 04:33 AM

I suggest you learn CSS instead of using Dreamweaver...
And use Dreamweaver when you have a little knowledge of the language you are coding in it! Smile

Pineapple · (This post was last modified: 10-19-2010, 06:45 PM by Pineapple.)

What I did was I sliced the seperate images and integrated them using CSS.
For example, With a background image

Code:
body

{

background-image:url('http://wwwurltobackground.png');

background-repeat:repeat x,y;

Then just use

Code:
position:absolute; 

 left: ;

 top: ;

  width: ;

  height: ;

For alignment purposes.
Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.
Width is explanatory, as is height.

now for the HTML.

Code:
<div id="insert section name">Content</div>

The <div></div> tags define the part of the website you are going to call in the CSS.

For example

Code:
#insert section name{

background-image:url('http://www.contentimage.com/contentbackground.png');

 position:absolute; 

 left: 350;

 top: 130;

  width: 676;

  height: 458;

What we did was call the section using #name of div. And then aligned it using the Left, Top, Width, and Height attributes. You can find a list and examples of attributes
Here

Now, combining.

main.css (Click to View)

index.html (Click to View)

What we did here was use CSS to align the content box, and to make the text italicized. We also called a background using CSS.

Login
Username:
Password:	Lost Password?
	Remember me

Possibly Related Threads…
Thread		Author	Replies	Views	Last Post
	Free Worker HTML, CSS, Javascript	ImFocuzz	2	1,286	04-05-2014, 10:01 PM Last Post: VHPanda
	Forum CSS code problem.	inferno.lion	0	824	06-10-2013, 02:48 AM Last Post: inferno.lion
	MyBB CSS Postbit Buttons	Peter L	1	1,446	07-14-2012, 05:52 PM Last Post: 'Snorlax
	inline css question	andrewjs18	1	1,017	03-24-2012, 10:11 AM Last Post: Haxalot
	Need a CSS Teacher!	ImFocuzz	2	1,092	03-08-2012, 06:01 PM Last Post: BreShiE