Which is BEST Method to Upload Website, Please Help

Hello,

I know this sounds like a really dumb, dumb, newbie question so please don't skip over this thread. I really could use the help understanding, how this should work. I read thru a few books on how-to build websites and thought I knew how the process works. I don't have a problem with coding, or meta tags. The problem has to do with all the images that come together to create the overall look of the site.

How I create websites...I start with a website template and open it up in Adobe ImageReady. Using ImageReady, I'll adjust the look of the template, by taking out certain images, and adding new ones, etc. Once I have everything placed where I want, then I select the 'slice tool'. Starting with the header, I drag the slice around it, then move to the menu and drag the slice around each button and work my way thru the website, slicing any other images.

Then I open the 'Optimize Menu' window and use the 'slice select tool' to click on each slice that I want to adjust the image size/look. After that, I select all slices, and goto 'file-save optimized as' and save it. Next, I start Dreamweaver MX and open the website I just saved. I add the meta tags and etc, then start to click on each of the menu buttons that I sliced, and direct them to their correct page. Followed by adding the content and save it.

Lastly, I'll upload the index.html file and the rest of the html files, along with all the images.


NOW FOR THE REASON WHY I ASK:

After uploading ALL the files, I then goto the 'url' but sometimes, it doesn't display the website in one quick motion. Instead it loads the site, an image at a time...meaning sometimes before the image is displayed, a small icon shows up in the corner, and then it goes away and the image appears. After visiting lots of other websites and not seeing the same issue, I started to question if I was doing something wrong...or not as good as is could be. The only way I can think to explain what the small icon looks like, is if you have ever visited a website that does not load completely and because the image is missing a small icon is displayed.

I know there are many different ways to building a website. Please, if anyone can take a few moments and try to help me figure this out. It would be extremely appreciated. I apologize for writing a step by step process, but I was not sure if you might need that info, to figure out what I'm doing wrong.

Here are some of the sites I made, that when you visit for the first time, will do that thing I mentioned about.

http://www.wastenotwantnotusa.org
http://www.hillerexport.com/
http://www.frontstreettrading.com/vintage_leather_and_more_s.html
(Some of the pages for frontstreettrading are down, I only posted it so can see example).

Also, if anyone is not sure what I'm trying to explain or has any questions, please let me know, so I can try a different way to express the problem. Its really very important and would be doing me a great deal of help.


Thanks in advance,

Jon K

I understand exactly. Well written question btw.

The reason simply has to do with load time not uploading. You have several large images that take a while to load, especially on a slow connection.

There are several ways to optimize your load time...

- Use less images. Images take up the most space on almost any website.
- Use the css image-repeat/background properties to repeat one sliver of an image instead of using a whole image.
- Use colors instead of images.

Hand coding in stead of a WYSIWYG editor such as Dreamweaver allows for more control over your images. My solutions will be given not in Dreamweaver instructions, but in css and html.

Let's analyze wastenotwantnotusa.org for things to do to optimize load time...

- Crop the dumpster picture so that only the dumpster is showing. (no sky and no ground) This can later be positioned using absolute positioning in your css.
- The menu background can be changed to a hex color code in stead of an image, and the link text can be written directly on this background color. The different items of this list can be separated by a bottom border in css.
- You may keep your logo and motto as an image, but is the recycle sign at the bottom of the content necessary?
- Make sure your text is written, not an image.

These are just a few suggestions. Check this page out.
http://www.websiteoptimization.com/s...nalyze/wso.php
This is an analysis of wastenotwantnotusa.org. It shows how many images you have and how long this page takes to load depending on your connection speed. Make sure you look at the Analysis and Recommendations section. You have warnings in total objects, total images, and images size.

Hope this helps!

Hello,

First, I would like to thank you for taking the time and efforts made to help me. I kind of understand what you wrote and have a few questions. Please if you can, try and explain. I know you cant spend all your time on me, and truly would appreciate any advice.

You mentioned, 'Use the css image-repeat/background properties to repeat one sliver of an image instead of using a whole image.'

This would only work for the background image, correct? Using the wastenotwantnotusa.org as the example, lets say instead of the white background image, to use a small square white image and have it repeat...correct?

Trying to think ahead, If you say it can also be done for all images, then I dont understand how it would work for an image that has detail to it. For example, the recycle bin on front page. I would assume this cant be done and you only were talking about doing this to the background image, however being how I dont know everthing about web design, I just want to double check.

Next, you mentioned 'Crop the dumpster picture so that only the dumpster is showing. (no sky and no ground) This can later be positioned using absolute positioning in your css.'

Are you saying that you could add the same images 'sky and ground' in the same positions and keep the same look, plus cut file size? Or are you saying to cut them out and leave them out. Because, What if the customer wants to have the dumpster with the sky and etc.

Again, I want thank you for taking out the time. I truly do appreciate the efforts made. I guess part of what I'm having a hard time with is a few of the materials I've read, discuss about slicing the website and then uploading. If you kept everything the same with WNWNUSA.ORG, could you still build it without slicing?


Thanks so very much,

JK

Hi,

If your producing a site for someone who wants ground and clouds then fine give it to them. But I think the issue here is that your site is built up using images this isn't necessary and is where you are experiencing problems.

If you want both the blue bin thing and the recycle sign then you can do this site with just two images. Any solid background colours can be applied using the background-color property in css and even the main logo/heading could be done without any images in css since it's only text with a border and background. Also you could probably further optimise the images for use on the web which would reduce their size and speed things up.

Your navigation menu should also not be an image but text. You can create the dotted divider with a

Code: Select all

border-bottom: 1px dotted #000;

You need to get away from drawing a picture in photoshop or whichever program you're using and then slicing it to make a site. I used to do it myself and it's only when you change your approach to building sites do you realise how much difference it makes.

If there is any text then it should be text not images. If you want a background color then that's what it should be. You should only use images sparingly and to good effect.

Your wastenotwantnotusa.org site has a nice clean, minimal design, easy to navigate and clear in it's purpose now then next step is to make the most of a good design and reduce the size of the site and improve it's usability and accessibility.

If you aren't familiar with CSS and table less design then check here for a list of great resources.
http://www.webforumz.com/beginner-re...how-to-use.htm

I'm really just repeating what has been said previously but I hope this helps clear things up.

Best,

Pete.

Hello again,

I understand what you are trying to say. The only reason why I asked the questions I did, was because as you can tell, I'm not experienced with CSS. I only wanted to make sure I understood what you were trying to suggest.

I will take your advice and try to re-do it. The only thing that I'm having a hard time with, is it possible to make the exact web site, in CSS without losing the graphic look of it?

Meaning, take for example the kind of web sites that Templatemonster sells. Using their template, you can create it using CSS and still keep the exact look.

There is this website I came across that looks heavy with graphics and it loaded just fine. How can this site be done with CSS, if its full of images. The site is www.cpapas.com

I really do appreciate your efforts, and helping me to make sense of this.

JK

Yes, it's possible to create the exact same site with CSS.

Have a look at the link in my sig or the sticky in the CSS forum - Resources for learning how to use CSS for layout. Grabs some of the books in there.

Have a look at site in CSS Showcases, view the source, study it, replicate it ... you'll get the hang of it.