PDA

View Full Version : Image problem,



lclark
03-25-2006, 07:12 PM
what is the best way to set up folders when you have a muli page web site made with photoshop. Would it be best to have a folder for each page (all pages have the same template) the heading and the links will have the same slices, but the body will differ in the slice #.

i had it working great and then i moved a folder because i thought it would create problems later but i ended up creating more problems. now the images that are supposed to be in the center are on the sides. im thinking that they have the same slice # as another page.

thanks

wildjokerdesign
03-25-2006, 08:47 PM
Hey Lisa I see you have come along quite a bit. Sorry I did not get back to you with that simple template. Been swamped lately.

I don't use slices very often but if memory serves me they refrence the actual file so the numbers should not be a problem. By haveing a directory or folder for each page "that is basicly the same" I would think this would eat up space on the server that is not needed that is if you are sliceing the image the same way for each. I would have to look at your HTML to be sure.

wildjokerdesign
03-25-2006, 08:56 PM
Oh dear me I just looked at your HTML. I did not realize that was what you where doing. Your entire page is a group of images set into tables. This is not ideal. Granted it gives you control over the look but the Search Engins will have not actual text to read on your site so it will not get listed. Also if for some reason a person is on a slow internet connection is is going to make the page load very slow.

lclark
03-25-2006, 08:57 PM
Oh dear me I just looked at your HTML. I did not realize that was what you where doing. Your entire page is a group of images set into tables. This is not ideal. Granted it gives you control over the look but the Search Engins will have not actual text to read on your site so it will not get listed. Also if for some reason a person is on a slow internet connection is is going to make the page load very slow.



i guess i should start all over again?? :mad: :mad: at least im learning

lclark
03-25-2006, 09:00 PM
i didnt think of that, it is all images. hmmm. i tried putting just the template i made in DW and then adding tables to enter the text but i just ran into the same problem we did with the other template, the nav boxes moved

wildjokerdesign
03-25-2006, 09:17 PM
Well I like your images in this layout and the look much better. I think you could use the images and just not splice them as much. The top logo/box could actually be one image in a single table. You would have to do a splice on the overlay the is right below that. Then the light blue column box for you site links would end up being two images. It would be a splice of the orginal useing just a section of the middle of it as a table background and then a bit of the bottom of that box inserted into a <td> at the end to finnish it off. The white shadowed box you have your text in could be done but would take some time to figure out. I think top of it would be part of the overlay and then you would have a left, right, left bottom, bottom, and right bottom image set as backgrounds to <td> tags. You could then set images and text inside of that. The grey bars down left and right side could be created pretty easy with an image that is a grey strip about 5X12 it looks to me that was set as a background to repeat. The bottom blue bar would be one image.

lclark
03-26-2006, 01:56 PM
im really confused. i took out everything except the blue graphics. i sliced across the top, the light blue angle and the blue on the side. put it into DW but when i add tables it moves everything. i could probably do the link names in PS but that still dosnt stop the movement of the main content area when i put small tables on the left margin for some adds, it moves the content box down. i thought this would be easy. what am i not doing right? do i not know enough. :mad: :mad: :mad: :mad:

wildjokerdesign
03-26-2006, 07:50 PM
Maybe this image will help some. (it is attached at the bottom of post) The green color is to show the background of the page which would really be white and also to help seperate the different images you would need. The black lines are your table divisions. I think I have them right but was figureing this as an image and not in HTML.

Your top image is the header and the way you have your images now it would be about 820 wide or something like that. You should really narrow this down to under 800 wide since that would make your page compliant with resolutions on smaller screens. There is a way to make that dynamic but let's start easy. :) Next you have two images on the left. The top one is your buttons (each seperate images) and the the one below that comes last to close of the box. Then just to the right of that you see a very narrow column with an image you can barely see. This would be a small sliver of the grey of the left of your main content box. You would set this as a repeating background of the <td> tag. The next pink that you see is not an image but to show where you could type text. Then you see the image for the right of your content box and it is also a repeating background image. Dropping down below that you have a small little column that may need a single sliver image to create the bottom left corner of your content box. (sorry forgot to put an example image there). Next to that is the bottom image of your content box and is a repeateing background image. Then to the right is the bottom right image of your content box. To end it off you have your blue bar image.

I droped the grey bars on left and right of the entire page but you could add them in if needed useing repeating sliver images as backgrounds.

The repeating images are what lets the whole thing be dynamic in a way. That would be controlled by CSS.

Horizontial repeat

.classname {
background-image: url(/path/to/image);
background-repeat: repeat-x;
}

Virtical repeat

.classname {
background-image: url(/path/to/image);
background-repeat: repeat-y;
}

Now in some of your <td> tags you would need to use rowspan="" and colspan="" with correct values. You will also want to set the valign="top" to some of them to keep images from moveing down the page at times. You can also set that on a class in CSS with:

.classname {
vertical-align: top;
}

Of course there are other values you can use in vertical-align like bottom, middle ect but don't think you would need them on this.

I was going to type out the HTML here but thought maybe it would be better if I tried to explain it and see if it helped you to figure it out. That way you will have full control over your design and others in the future.

The above is a pretty quick and dirty runthrough but might just do the job to get you started on the right track. The important thing here is to figure out what you can set inside a <td> tag or in the CSS in order to control it. Useing the technique above the actual <table> tag would look like this:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
You might have to play with width on the <td> tags some. Again either via CSS or in-line.

Useing tables to do this is the "old fashion" way and many designers now would use <div> tags but it can be a lot harder and I still fall back on useing tables quite often.

lclark
03-28-2006, 03:54 AM
read it a bunch of times yesterday but didnt have much of a chance to do it. ill hopefully get to it today. thanks so much for taking the time. ill get back to you later.

lclark
03-28-2006, 04:24 AM
explain to me this..... there are thousands of templates out there or make our own. how are they done so that each piece can be edited with out moving the other pieces. is it all done with CSS?

lclark
03-28-2006, 07:57 AM
i cant quite get it, i hope im notthat stupid. im working with not much sleep over thepast few days. why does this seem so hard?? why do i see other people who are newbies too make nice pages that work the way i want mine to work. UGH im so frustrated :mad:

wildjokerdesign
03-28-2006, 07:59 AM
It depends on the the template. I would say there are about a thousand different ways. :) Ok maybe not but it can depend on what needs to be dynamic in the template. CSS can do just about anything that is done via adding things to a tag in HTML. Give me a couple minutes to figure out a good example of this. I'll do somethihng simple in both HTML and and CSS.

wildjokerdesign
03-28-2006, 08:01 AM
Opps just saw you had added anouther post on the second page. :) I think there is just a few basic ideals that I have not been able to get across to you and once I can clearly explain them you will be good to go. I really think the reason you are haveing problems is because you are like me a very picky about the way things look. Not everyone is as picky.

wildjokerdesign
03-28-2006, 08:54 AM
Sorry it took me longer then I thought to get this put together Lisa.

Ok first you could use basic HTML to make sure say a left column kept the text at the top like this:


<table cellpadding="0" cellspaceing="0" width="100%">
<tr>
<td valign="top" width="100">
SIDE CONTENT
</td>
<td valign="top" width="100%">
<p>MAIN CONTENT</p>
<p>MAIN CONTENT</p>
<p>MAIN CONTENT</p>
<p>MAIN CONTENT</p>
</td>
</tr>
</table>

You will see that I added valign="top" to both the <td> tags in the table. I have also set the width="" on each of them. The left column is set to a static width of 100px and then the right or main content is set to 100%. I have also set the width for the <table> to 100%. This makes the whole thing dynamic so that no matter what resolution the viewer is using on thier computer the content fills the screen.

The valign value makes sure that no matter which column has the most text in it the one next to it will display the text at the top of the column. By default the browser would place it vertically in the middle of the column.

Ok here is the same basic thing useing CSS:


<style type="text/css">
table {
width: 100%;
padding: 0;
margin: 0;
}

td {
vertical-align: top;
}

.sidecontent {
width: 100px;
}

.maincontent {
width: 100%;
}
</style>

<table>
<tr>
<td class="sidecontent">
SIDE CONTENT
</td>
<td class="maincontent">
<p>MAIN CONTENT</p>
<p>MAIN CONTENT</p>
<p>MAIN CONTENT</p>
<p>MAIN CONTENT</p>
</td>
</tr>
</table>


The things in the style area that start with a dot (.) are classes the ones that do not and are the same as tags in the body of your HTML affect all tags like that in page. In order to assign different widths I set the class="" to each <td> I wanted to control in a different way.

Can you see the pattern? I tried to keep it really simple and there are others things that can be invloved in setting up a design but I think this is part of the basics that I have not been able to get across to you.

lclark
03-28-2006, 09:16 AM
Opps just saw you had added anouther post on the second page. :) I think there is just a few basic ideals that I have not been able to get across to you and once I can clearly explain them you will be good to go. I really think the reason you are haveing problems is because you are like me a very picky about the way things look. Not everyone is as picky.


i think that is part of the problem. i am not simple, i am very artistic and not being able to reproduce what i have in mind it frustratin. i can probably make a very simple page and have it work but. i wont be happy with it and dwell on making it better ( like i am doing now :D )

wildjokerdesign
03-28-2006, 09:29 AM
Does my last post help any? If you keep at it things will get easier. I had some trouble at first but I just kept trying different things and reading up on both CSS and refrenceing what the basic controls over HTML tags where. I also still spend time looking at the source code of sites I find interesting to see if I can figure out how they work.

lclark
03-28-2006, 09:34 AM
okay, i understant that example you gave me. and i see how using percents instead of pixels makes it dynamic.

lclark
03-28-2006, 09:35 AM
im going to get a book on html so i can reference it as i do this

wildjokerdesign
03-28-2006, 09:43 AM
I think I gave you this before but you might also want to book mark this:
http://www.w3schools.com/default.asp
It is handy for looking things up.

Here is anouther one that is for CSS:
http://www.westciv.com/style_master/house/tutorials/index.html

P.S. The second link is actually to the learning page of a program called StyleMaster. I have never used it so have no idea how good it is but does seem to follow W3 standards wich might be helpfull to you.

lclark
03-28-2006, 09:55 AM
thanks for the links. i had the w3 on e before but thanks for the reminder,

ill look over them and find the references that you gave me and use them.
so the more complex sites( the ones i want to make ) you cant just use the DW to make them with out the in depth knowledge of HTML or CSS? thats the direction i want to go. so ibetter learn more html first. is there a preference out there to html or css, you seem to need both? or can i be able to build a nice site with jus html?

i want to send a sincere thanks to youfor all of the time you spent explaining and showing me how to do this, your giving me the direction i need to go.

i hope you dont mind if i ask more questions in the future.

wildjokerdesign
03-28-2006, 10:19 AM
I don't mind you asking questions at all. :) Yes site can be created with just HTML but I think that you are going to want to learn CSS simply because it can be easier in the long run and much more flexible. If you use an attached stylesheet you can change the entire look of your site... well almost... simply by changeing something in the one style sheet file.

Say with regular HTML you had set the background color of your pages in the body tag on each page. If you wanted to change the color on all the pages you would have to open up each and edit them. If you had a style sheet that set the background color of the pages you could change it and it would effect all of them in one simple edit.

lclark
03-28-2006, 11:13 AM
i can see how css would be good. ive started looking over the w3 site you sent me. ill apply what you sent me to my site and see if i can put it together. there are some incredible sites out there that i am just dying to try to make but i see i have a long way to go.

when you use CSS, how do you see the design that your making?

wildjokerdesign
03-28-2006, 11:36 AM
when you use CSS, how do you see the design that your making?

There are two ways I do this. One if I happen to have the html page open at the same time in EditPlus then I can click over to it and use the preview icon and it opens a preview of it in EditPlus. Normally though when I am working on a site I have a local version of it set up via EasyPhp on my computer and have that open and running. Once I make the edit to the file via EditPlus then I click over to my browser and refresh the page to see the change.

You can edit CSS in Dreamweaver and the changes should be reflected in the preview window or you could then test it via the browser preview option.

lclark
03-28-2006, 06:30 PM
what about layers in DW?

wildjokerdesign
03-29-2006, 07:52 AM
Layers in DW use the tag <div> which is a basic HTML tag. Many designers feel that this is the better way to do layout then useing tables. I must be truthfull with you that although I know the tag and understand (to point) how to use it and manipulate it I still tend to use tables to align content on the page. The reason for this is because I have found it easier to create cross browser layouts with table. Useing layers often has different results depending on the browser. I am sure that if I would just bite the bullet and start useing them more that I might move to createing layouts useing layers instead of tables. The second site I linked you to that has the StyleMaster program is created useing layers.

scubajoe
03-29-2006, 08:11 AM
I think style sheets are one of those things that are great once you've learned them well, but a pain if you haven't. I have tended to do one of two things. First, take an existing stylesheet and hack it up to fit me needs. This gets you up and running quicker, while not having to learn everyting about it. Second, I have created some VERY simple stylesheets where I just define the fonts, size, colors, etc, of tags, and am able to create a different look from the default tag properties, easier. One day I'll put the two "skills" together, and actually create my very own stylesheets. ;)

wildjokerdesign
03-29-2006, 11:57 AM
I agree with you scubajoe on your method. Stylesheets really eluded me untill I started working with phpBB and other php scripts. Just about every major one out there uses them so you are pretty lost if you don't start working with them. :) By playing around and hacking the existing styles used by these programs it helped me to understand how they work. Also a really good desinger of these templates for these programs adds comments in the stylesheet that help you to understand things. Most default templates are well done and documented.

scubajoe
03-29-2006, 01:10 PM
Yeah, hacking is about the only way I get anything done. ;) But the nice thing about style sheets is that you can start VERY simple. Like changing the default styles for <H1> tag, or any other tag. It's when you start to get into the tables and <DIV> elements, and overall formatting of columns, etc, etc, that it starts getting difficult to understand for the beginner. But even then you can get a copy of something you like, and make minor changes to change the look without having to completely understand how they do it.

lclark
03-29-2006, 03:35 PM
that makes sence joe, i just got a book with html and CSS, its all starting to come together now

scubajoe
03-29-2006, 03:38 PM
Cool! Now you can come teach Shawn and I! ;)

lclark
03-29-2006, 03:47 PM
Lol ;) ;) ;)