Author Topic: Web Design. (Read 42671 times)

#1 • May 16, 2007

Ok, well as you know I made that side rpgcraze. well I posted the site at Creation Asylum under website creation section for some feedback on what to fix for next time I make a site. What I got:

Quote

Instead of using images for your title/buttons/headings, you should use CSS as you can have more control over things from within your page rather than relying on external image editing software.

and:

Quote

Plus, try using PHP to include other pages rather than iFrames, which make it sucky :p

well I would have wished for some links to go along with the replys but no dice. so I post here on a question. What exactually do they mean? also does anyone have links to what they are talking about or feedback of their own on web design...pretty much anything to help me out would be great!

#2 • May 16, 2007

Using CSS for common images like a header is the much preferred way.

Going the "old school" way, on each and every page, you'd have it in your HTML,

Code: [Select]

<img src="http://mysite.com/myheader.gif" alt="Site header" />

Then say later on, you wanted to use a different image with a different URL. You'd have to go through every page and edit that snippet of HTML to use the new image. With CSS, it'd be alot easier.

CSS:

Code: [Select]

.header_image {
background: url(http://mysite.com/header_image.jpg)
width: 750px;
height: 300px;
}

Then in your HTML for your site's pages, you could simply display the header by going:

Code: [Select]

<div class="header_image"></div>

To include a .css file in your pages, you'd need this in the <head> section:

Code: [Select]

<link rel="stylesheet" type="text/css" href="http://mysite.com/css.css" />

Using CSS for boxes / general layout is also what that guy is probably talking about also. That current RPG craze site's layout shape is made by the images being stacked together. Resize any of them and the entire layout is broken. With CSS / DIV code you could make a layout that's shaped by the CSS and then has it's images controlled by the CSS. An advantage to that is that ifyou ever want to make a new layout of your site, you'd just have to update images and the css and you could change the entire look.

PHP is great for lots of common content. Say you have a menu that stays the same for each and every page. Instead of writing it into each and every page, you can just write it once and then include it in the pages. Then if you ever wanted to update the layout you could just change that one file. I have to go to bed now ;_; but if you want me to show you examples and stuff, just ask me =o

This site has some great guides and easy to understand tutorials: http://www.tizag.com/

#3 • May 16, 2007

what do you use to make a web page silver? I got confused with the way you showed the html site header set up.
Maybe it's because I am using the "easy" way and just using dreamweaver. In DW it sets up the header I used like this:

Quote from: Silverline on May 16, 2007, 04:04:35 AM

Using CSS for common images like a header is the much preferred way.
Going the "old school" way, on each and every page, you'd have it in your HTML,
Code: [Select]
<img src="http://mysite.com/myheader.gif" alt="Site header" />

Code: [Select]

</style></head>
<body bgcolor="#FFFFFF">
<!-- ImageReady Slices (rpgcraze.psd) -->
<table id="Table_01" width="900" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="10">
			<img src="images/rpgcraze_01.gif" width="900" height="225" alt=""border="0"></td>
	</tr>

I do remember you saying (a long time ago) something about how toxic films .net would not get on google (or a web search) because it was made using splicing. I used the same method when I made this site.

pretty much made the site in photoshop, cut it up sent it to image ready, saved it, and opened the HTML file in dreamweaver. on my site everything is an image, on sylph they are backround images. (and the buttons are made some other way w/o am image)

Quote from: Silverline on May 16, 2007, 04:04:35 AM

Using CSS for boxes / general layout is also what that guy is probably talking about also. That current RPG craze site's layout shape is made by the images being stacked together. Resize any of them and the entire layout is broken. With CSS / DIV code you could make a layout that's shaped by the CSS and then has it's images controlled by the CSS. An advantage to that is that ifyou ever want to make a new layout of your site, you'd just have to update images and the css and you could change the entire look.

I noticed that when went to go fix a button. I enlarged it by 1 px, and bam the whole right side is shifted over.

Quote from: Silverline on May 16, 2007, 04:04:35 AM

PHP is great for lots of common content. Say you have a menu that stays the same for each and every page. Instead of writing it into each and every page, you can just write it once and then include it in the pages. Then if you ever wanted to update the layout you could just change that one file. I have to go to bed now ;_; but if you want me to show you examples and stuff, just ask me =o

This site has some great guides and easy to understand tutorials: http://www.tizag.com/

thanks for the link. What I don't get is why would I need to have the same menu on each and every page? I am pretty lost on this part since I can put the menu on the layout and then I normally just have the new pages open in iframes. I noticed at slyph, when I click an option on the drop down menu, the page re-loads. I take it to a whole new page (since it shows in the web url bar). so why did you use that way? I would guess because on each new page the place where text is written is more of less then the last place so an iframe would look ugle. (as I know believe after seeing your site iframes look ugly.)
if you have time examples would be awsome if not I will try my best to learn by using that link.

thanks

(sorry for being so basic xD I really want to learn this type of stuff.)

#4 • May 16, 2007

silverline's site uses a sort of sandwich template there the header which goes ontop then the content in the middle and then the footer.

only the bit in the middle changes.

i myself use dreamweaver to but in code view (i like the syntax hilighting) but also because i can quickely switch to design view and check out the progress.

as for iframes there generally not used although ive forgotten why ill look it up for you.

examples:

ill get back to you

#5 • May 16, 2007

Cascading Style Sheets or template can help... Or setting say your hearder area in a frame so it doesn't update etc...

Even using Flash it's fairly simple, if you save your hedrer image as say TEST, then when you want to update it, if you import new image with the same name TEST, it will replace all the old ones...

There are many little tricks when doing WEB design...

Here's one of my site:- www.equita.co.uk

It's made in frames, I done pretty much all of this (Some images got brought in by a photographer, but the rest is all me)...

#6 • May 17, 2007

that looks good landofshadows

#7 • May 18, 2007

thanks so far. Ok so to understand this I guess the best was would be too start a new project out, and then maybe you guys can walk me through or something.

First step I guess, I went and made how I want the site to look in paint:

Spoiler for:

(the left is just a side navy bar for w/e

so next step?

#8 • May 18, 2007

isolate the header image and navigation buttons as well as the bar to the left. save them as seperate images. seeing as your using rounded corners youll need to save each corner aswell

#9 • May 18, 2007

ahref, I'm not to sure on what you mean, so I went and I divided the site pieces as I normally would have. If it is wrong tell me so and I can try again.

but, thanks for helping!

#10 • May 18, 2007

you divided the images fine yes

are you planning on using php in the site at all?

#11 • May 18, 2007

I'm not sure what to do to be correct. Or even what to use and what not to use. I want to do it the "correct professional way".

the reply's I had on a different site for my website I finished said:

Quote

Instead of using images for your title/buttons/headings, you should use CSS as you can have more control over things from within your page rather than relying on external image editing software.

and:

Quote

Plus, try using PHP to include other pages rather than iFrames, which make it sucky :p

#12 • May 19, 2007

ahh i see well it would be a good idea to install php on your computer then so you can have a go at writing a php site

i use http://www.wampserver.com/en/ but there are many others. see silverlines topic on free alternatives.

ive also made a small template for you using CSS with instructions included within the files:)

#13 • May 19, 2007

I have adobe dreamweaver cs3.
under new doc's it shows create new: "PHP Document"
if you still want me to get what you use just say so and I will

ok I have attached everything I have this far. I still don't get how to do it but I am trying to understand now.
what I THINK:
- Layout is split into divs.
- Style sheet gives the div it's properties.
- php magically flys in xD

Take a look at the attachment I tried to enlarge the header div size to the image size and then insert the image as a backround image in the css page. no luck.

#14 • May 19, 2007

dreamweaver is a php editor yes but your machine needs to have the psp applications and files to actually interpret the language.

that link i sent will install apache,php and mysql onto your computer them working together will enable you to test php pages aswell as mysql functions within the php(dont worry about mysql for now)
ill take a look at the files

okies

underneath #header place this:

Code: [Select]

background-image:url(images/Mysite_01.gif);

instead of the other background line(it wont repeat because you have the div's size set

#15 • May 19, 2007

I use EasyPHP as a local server (just get version 1.8 for now). =o The only other one I tried was XAMPP but that was way overkill; easyPHP is basically just an install and that's it, it works kinda thing.

#16 • May 19, 2007

yeah dont ask why i use wamp my routers a little girl anyway.( i dont have the password and port 80 is stealth well so are all the others)

#17 • May 19, 2007

alright, I am starting to understand it now. Not 100% but starting.
I downloaded and installed the stuff, and left it alone for now.
I went back and replaced the code with yours, and WALAH works.

I did the same to the content div and the sidebar. I am now stuck.
I don't know how to do the navy bar, since I had split the images in it. also everything does not line up (but I guess it's because i'm not finished with it yet)
And should I go ahead and make a footer div as well?

(every time I will be attaching my css and html files only from now on so it will make it easier for you.)

EDIT: EasyPHP, should I switch over?

#18 • May 19, 2007

use whichever you find easier. I cant look at your new code now as im at a different pc but ill look tomoz

#19 • May 19, 2007

cool. Take a look and tell me what to fix and such as you have been doing.

#20 • May 19, 2007

Quote from: Nouman on May 19, 2007, 04:27:31 PM

cool. Take a look when you can and tell me what to fix and such as you have been doing.

#21 • May 19, 2007

Lol.

I have nothing else to do, so I'm making a div/css layout based from your image

[edit] http://rmrk.net/staff/silverline/html/nouman/silver.html online =o

#22 • May 19, 2007

I was gonna do that but realised i should work on my own site first

#23 • May 19, 2007

thanks tons! I will look into the files carefully when i can.

<3

#24 • May 21, 2007

alright, i'm starting to get a pretty good view on how to do the css style sheets for a page. I am look very closely to what silverline did and he did everything very clean and noticeable.

www.havok.esmartdesign.com

its not final or anything I just wanted to fool around.

now to the PHP part of it?

also I put eveything on one page because when i linked a new page to the css it was still the same LONG ass body height, am I supposed to name each body of each page it's div name?

but yeah we can move on

(I will be going over some of my other designs and attempting to make a css style sheet for them.)

#25 • May 22, 2007

bump?