PDA

View Full Version : dreamweaver problems


seedism
01-16-2011, 12:34 PM
Hi people.

Ive just started learning to use dreamweaver, i am a complete noob when it comes to HTML etc.

I have managed to make my first website (www.sativasister.com) which is not finished but running ok.

On my second site design i ran into problems.
Suddenly dreamweaver decides to run very slow, taking more than 10 seconds to react to me clicking on any image or div.

This makes it impossible to work and i dont know how or why, the other site still runs fine on dreamweaver it is just this new design.

Has anyone ever had this same problem?

DWcourse
01-16-2011, 03:25 PM
It's hard to imaging why it would run slowly on one site and OK on another. I must be something with the page - perhaps very large file size images???

seedism
01-17-2011, 07:24 AM
Hi
Thanks for your reply, unfortunately there are no large files to create this problem.
I have tried to recreate the page over and over again and it runs smooth untill i add a semi-transparent png. as a background image in some div's.
Now it seems that the issues start as soon as i add these png files which are crucial to the design of the page.

http://i51.tinypic.com/2j46ptd.jpg

I am afraid that i will have to bin my design and make a site without transparant div's and go to the more boring pre-chewed templates if i cant get it to work soon.

seedism
01-17-2011, 07:28 AM
Sorry for the big image.

gentleone
01-17-2011, 08:49 AM
How big in file size is that background image you're using? And those transparent png's did you use a 10px by 10 px png and used the background-repeat property in your CSS or are they just individual fixed sized background images?

domedia
01-17-2011, 01:00 PM
seedism, any chance you can get this temporarily on the web and give a link?

My guess is also that the files are enormous.
With a link it would be so much easier to investigate and give advice.

seedism
01-18-2011, 10:14 PM
Hi, just uploading to a server, link is
www.sativasister.com/cheesewreck (http://www.sativasister.com/cheesewreck)

it is large files and quite a lot of them, but it works fine online, it also worked in dreamweavers browser preview, only the design view and split view are slowed down to a halt.

It is my second site ever after buying a few books which helped me learning the basics of dreamweaver, the first one is the sativasister.com site which i am still working on as well.

It is weird because that site runs smooth in dreamweaver, and it is almost the same size KB-wise.

Any help would be appreciated, thanxs for the replys, they give this beginner a lot of hope.

pete

seedism
01-18-2011, 10:15 PM
http://www.sativasister.com/cheesewreck.html

sorry, forgot the html.

seedism
01-18-2011, 10:21 PM
In the attached seedism.CSS file are the divs with the backgrounds, this is one of them.
The png file is made in photoshop, it is a 1px black block, with an 50% alpha/transparancy, then saved as a PNG24 file.
As you can see that by repeating this 1px image i create a semi transparant div.

I would like to start using html5's alpha channel code but dont know how to use this in the semi-transparant header divs with diagonal header.

#Seeds_Content_ISMadd_WRAP {
height: 180px;
width: 980px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(../images/Background/black%20block.png);
background-repeat: repeat;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}

seedism
01-18-2011, 10:35 PM
It runs smooth online as well as in code view, it goes wrong as soon as i go into design or split view.

gentleone
01-18-2011, 10:52 PM
No... it doesn't run smooth... sorry.

That background image is huge... 300Kb is way too much. If you want a background image then there is a better way.

http://buildinternet.com/project/supersized/3/core.html

The image on that demo is 640 x 480 pixels and 45Kb, but sizes with the screen resolution.

http://buildinternet.s3.amazonaws.com/projects/supersized/slides/fence.jpg

Another big issue is all these (rollover) images in the HTML markup.... I didn't count them, but if I say 100, I'm pretty close. That are 100 calls to the server to get those images, while you in the first place must use CSS for rollovers and not that build in shitty javascript extension and even better use css sprites (http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials) for your buttons and icons.

And your markup could is also be optimized... you wrap everything in a div where you should use other tags..

seedism
01-18-2011, 11:34 PM
Thanks man, i will look into that first thing 2morrow, since i am very new with this (read my first book on html about five months ago and been fiddling with dreamweaver eversince), i have not yet tried other tags than divs and the same for sprites.

I also been looking for a way of using text instead of images in my navigation system, but cant figure out how to have the two seperate words in one link have two colors, like in the female seeds link, well i did manage to get the two different colored words but they behaved weird during their hover status with both words reacting seperate instead of as a single link/word.

Thanks for your suggestions, although the pages run smooth with all pics and rollovers in place, only when i add the few transparant divs.
I will invest some time in using more css and sprites, as well as minimizing my file size.

Thanks again.

seedism
01-19-2011, 10:31 AM
thanks, that supersize me is great, just checked it out, this will help me a lot

seedism
01-19-2011, 03:07 PM
Aha, just learned the sprite technique, wonderfull stuff.

Found all the info i needed to do this on this link:
http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/

did take me three hours to figure out but did it.
Thanks so much for your help

gentleone
01-19-2011, 03:57 PM
Aha, just learned the sprite technique, wonderfull stuff.

Found all the info i needed to do this on this link:
http://stylemeltdown.com/2007/10/22/...tion-with-css/ (http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/)
Really great, man! Did you do it in code view? Let me know when you've put the new menu online, because the tutorial is a bit old and can still be improved, but I'll explain that when you're done. And we can also do the the side bar menu. Lets get rid of that ancient JavaScript rollover ;)

did take me three hours to figure out but did itThat's the learning curve... it takes time to improve your skills and this will never stop, so be prepared :)

seedism
01-22-2011, 09:48 PM
Hi, ive managed to make my top navigation with the sprite technique but am stuck on getting a vertical navigation for my side nav.

http://www.sativasister.com/topnav.html

Hopefully you (gentleone) or anyone else can help me on converting this css script horizontal to vertical

gentleone
01-22-2011, 09:54 PM
Hopefully you (gentleone) or anyone else can help me on converting this css script horizontal to vertical
Before I help you with the vertical, I want to make some little adjustments to your horizontal sprite. It's already a much better improvement, but it can be even leaner. I'll show you in a bit the changes I'd recommend.

gentleone
01-22-2011, 11:08 PM
First the unordered list in your HTML. We're going to get rid of those span tags. The reason they're there is that the author of the tutorial used them to make the text invisible (display: none) in the CSS for the browsers, but not for search engines and screen readers. We don't need actually those extra markup to achieve the same result. Delete them so that we have a list like this:

<ul id="nav-example">
<li id="nav-01"><a href="ism/homepage.html">home</a></li>
<li id="nav-02"><a href="ism/female seeds.html">female seeds</a></li>
<li id="nav-03"><a href="ism/classic seeds.html">classic seeds</a></li>
<li id="nav-04"><a href="ism/gallery">picture gallery</a></li>
<li id="nav-05"><a href="ism/about ISM">about seedism</a></li>
<li id="nav-06"><a href="ism/contact ISM">Contact</a></li>
<li id="nav-07"><a href="ism/world of ISM">world of ism</a></li>
<li id="nav-08"><a href="ism/where to buy">where to buy</a></li>
<li id="nav-09"><a href="ism/events">events</a></li>
</ul>
Okay now your CSS. I'll show you with comments what to do.

@charset "utf-8";
/* CSS Document */

#nav-example {
background:url("../images/nav/navsprite.jpg") no-repeat; /* DELETE THIS LINE... NOT NEEDED */
width:980px;
height:30px;
margin:0;
padding:0;
}

#nav {
margin-right: auto;
margin-left: auto;
width: 980px;
}

/* WE GOT RID OF THE SPAN TAGS IN THE HTML, SO DELETE THIS WHOLE CSS DECLERATION */
#nav-example span {
display: none;
}

/* DELETE #nav example li, ALSO THE COMMA... NOT NECESSARY HERE */
#nav-example li, #nav-example a {
height:30px;
display:block;
text-indent: -9999px; /* ADD THIS LINE. THIS IS HOW WE MAKE THE TEXT INVISIBLE FOR BROWSERS, BUT NOT FOR SEARCH ENGINES AND SCREEN READERS. WE JUST WIPE THE TEXT 9999 PIXELS TO THE LEFT OFF THE SCREEN */
background:url("../images/nav/navsprite.jpg") no-repeat; /* ADD THIS LINE HERE */
}

#nav-example li {
float:left;
list-style:none;
display:inline; /* THIS LINE CAN ALSO GO, BECAUSE THE FLOAT LEFT ALREADY LINE UP THE IMAGES IN A LINE */
}

/* ONE OF THE BIGGEST ADVANTAGES FROM CSS SPRITES IS THAT
YOU ONLY HAVE TO CALL ONE TIME FOR YOUR SPRITE IMAGE IN YOUR
#nav-example a SO WE DELETE THE URL'S TO THE IMAGES AND THE
NO-REPEAT IN THE HOVER LINK STATES AND REPLACE THEM WITH
BACKGROUND-POSITION.... BUT WE NEED TO DECLARE THEN ALSO
BACKGROUND POSITIONS FOR THE NORMAL LINK STATE. */

/* I'LL CHANGE THE FOLLOWING RULES MYSELF. I'VE ADDED a TO THE
RULES SO THAT WE CAN ADD BACKGROUND-POSITIONS TO THEM. */
#nav-01 a {width: 80px; background-position: 0 0;}
#nav-02 a {width: 126px; background-position: -80px 0;}
#nav-03 a {width: 126px; background-position: -206px 0;}
#nav-04 a {width: 132px; background-position: -332px 0;}
#nav-05 a {width: 103px; background-position: -464px 0;}
#nav-06 a {width: 84px; background-position: -567px 0;}
#nav-07 a {width: 122px; background-position: -651px 0;}
#nav-08 a {width: 122px; background-position: -773px 0;}
#nav-09 a {width: 85px; background-position: -895px 0;}

/* HERE I'VE DELETED THE CALLS TO THE SAME IMAGE EACH TIME.
NOT NECESSARY ANYMORE */
#nav-01 a:hover {background-position: 0px -30px; }
#nav-02 a:hover {background-position: -80px -30px; }
#nav-03 a:hover {background-position: -206px -30px; }
#nav-04 a:hover {background-position: -332px -30px; }
#nav-05 a:hover {background-position: -464px -30px; }
#nav-06 a:hover {background-position: -567px -30px; }
#nav-07 a:hover {background-position: -651px -30px; }
#nav-08 a:hover {background-position: -773px -30px; }
#nav-09 a:hover {background-position: -895px -30px; }

#nav-WRAP {
background-color: #000;
margin: 0px;
float: left;
width: 100%;
height: 30px;
}


This is it. Should work like this, but I may made a mistake/typo, because I just typed it in here without testing.

seedism
01-23-2011, 11:08 AM
wow gentleone, unbelievable how helpfull you are, thanks so much for taking the time to help out us beginners.
BTW.i really like your grungy webpage, www.gentlemedia.nl (http://www.gentlemedia.nl), je bent dus ook een Nederlander, whoohoo.

Although i prefer to speak/type English these days.

I am going to reduse even more unnecessary html thanks to your help.

And if i read this correctly you also solved more issues with these adjustments.

Now i should be able to use a larger image with all my nav link states, i think that you removed some boundaries in the previous code that prevented this.

I will get back after implementing these changes.

Thanks again.

www.seedism.com (peter@eedism.com)

seedism
01-23-2011, 04:00 PM
well here is the new coded version.

http://sativasister.com/seednav.html

Almost back to where i was, but with a lot less images and url requests.

gentleone
01-23-2011, 04:47 PM
wow gentleone, unbelievable how helpfull you are, thanks so much for taking the time to help out us beginners.
BTW.i really like your grungy webpage, www.gentlemedia.nl (http://www.gentlemedia.nl), je bent dus ook een Nederlander, whoohoo.
Geen enkel probleem! ;) There are already too many bad coded websites on the net, so if I can prevent another one from joining them, I'm more then pleased to do so :) And you have a faster loading site, which was your issue in the beginning.

Now i should be able to use a larger image with all my nav link states, i think that you removed some boundaries in the previous code that prevented this.
Yes, indeed... you can have one sprite image for all your buttons, icons, etc. So that is 1 HTTP request instead of 100.
http://sativasister.com/seednav.html
I see that you've managed to do the vertical yourself. Great job! It's just a matter of getting the x and y coordinates right for the background-positions, but once you get a hang of that, you will do it faster and faster.

gentleone
01-23-2011, 04:54 PM
oh and btw... shall we get rid of that table too which you've used for all those bottom links? Those are list of links, so using an unordered list for them would be semantically right. We just have to make the list through CSS a multiple columns list, so that you get the visual result what you have now but with tables.

seedism
01-24-2011, 11:20 AM
This is the best i could manage.
http://www.sativasister.com/seednav.html

What do you think?

seedism
01-24-2011, 11:23 AM
Kinda fun removing all those extra bits of script, now there is no javascript used at all just CSS.

Corrosive
01-24-2011, 11:58 AM
Kinda fun removing all those extra bits of script, now there is no javascript used at all just CSS.

And that's by far the best way to do it. Coding is about achieving what you want, in the most logical way with minimum of server calls. Feels good huh?

gentleone
01-24-2011, 02:53 PM
Great! You've figured it out yourself... the multiple column list... I like that! As you've noticed, and of course if you're up to the task, you can learn everything online as long as you go to the right resources. Don't ever follow any YouTube tuts... they pretty much all suck. If you need to know something and don't know where to look for it, just ask and we'll point you in the right direction.

seedism
01-28-2011, 07:45 PM
So after being busy with non-computer related work the last few days i finally had a chance to sit down and continue my new site design.

After appliyng your recommended changes i finally have the site working in dreamweaver without any problems, page starts up quick in design view.

Although i am starting to get more experienced with html and css and feel more comfortable writing in code view.

Ive been able to make list with thumbnails that swap image in the gallery part of the page, i have not found a better way to do this, please tell me if this could be improved.

[/URL]
[url]www.sativasister.com/seednav.html (http://www.sativasister.com/seednav.html)

Also my next mission is to find the code that changes the cursor to a hand when hovering over the three folder links i have in the "MediaLinks" div.
(which i am trying to change to three seperate, two column, lists holding the folder images in the first column and the text part in the second column.)

Once again thanks for solving the problem that got me to join this site, i am going to be here a lot.
Already had a good browse through this forum and find a lot of helpful threads.

gentleone
01-29-2011, 09:51 AM
The thing is with all these Dreamweaver inbuild javascript behaviors is that they don't degrade well at all if visitors have JavaScript disabled in their browser.

The result of what you have now, you don't even need JavaScript to do the trick. Can be done pure with CSS... here's an example.
http://www.cssplay.co.uk/menu/gallery.html

You'll have to dive into the code to see how its done.

But if you want to use JavaScript which degrades well and has some nice transitions... google for jQuery gallery and you will find heaps of cool galleries.

seedism
01-29-2011, 03:34 PM
Hi
Ive changed the image gallery and removed my previous thumbnail images since they are no longer needed, and once again removed more code, this is how i made the image change when hover over the thumbnail.

<div id="image"><img src="images/StrainsGallery 385x250px/applejack1.jpg" name="image1" border="0" id="image1"/></div>

<a href="#" rel="images/StrainsGallery 385x250px/applejack1.jpg" class="image"><img src="images/StrainsGallery 385x250px/applejack1.jpg" width="60" border="0" class="thumb"/></a>

Seems much better this way since i loose all the body onload crap, and way less divs to use.
Thanks again.

seedism
01-29-2011, 03:51 PM
This is the jquery:

$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});

Ive tried to change the .click to .hover but that seems to create bugs, i guess due to not having the images preloaded.

One thing I could not get to figure out is to make the larger images be a link so i can use a lightbox to enlarge some pics even more when clicked.
There is an <a href=""> tag but that doesnt seem to work

seedism
02-21-2011, 07:29 PM
Hi Guys
i finally made the decision to go online with the site.

There are still a lot of changes to be made, but thanks to your help i got a long way making it a smooth running site.

Check it out.

http://www.seedism.com (http://www.seedism.com/)

phangyang
02-22-2011, 02:07 AM
How do i resize this to make it a full page, the page is just small...
here the website: www.placerwaterworks.com

Corrosive
02-22-2011, 06:26 AM
Hi Guys
i finally made the decision to go online with the site.

There are still a lot of changes to be made, but thanks to your help i got a long way making it a smooth running site.

Check it out.

http://www.seedism.com (http://www.seedism.com/)

Nice one dude. I think it looks really good. :)

Corrosive
02-22-2011, 06:29 AM
How do i resize this to make it a full page, the page is just small...
here the website: www.placerwaterworks.com

You'll have to rebuild that page and increase the dimensions of the *shudder* tables. Personally I'd start again and use divs/css.

gentleone
02-22-2011, 02:40 PM
Hi Guys
i finally made the decision to go online with the site.

There are still a lot of changes to be made, but thanks to your help i got a long way making it a smooth running site.

Check it out.

http://www.seedism.com (http://www.seedism.com/)

Cool! It runs indeed much smoother than how it was before.

gentleone
02-22-2011, 02:45 PM
How do i resize this to make it a full page, the page is just small...
here the website: www.placerwaterworks.com (http://www.placerwaterworks.com)
I'd recommend also to just do a redesign (of course with divs and CSS) and to target a bigger screen resolution. What you have now is made for a screen resolution that was widely used a lot back in 2000/2001.

seedism
02-23-2011, 07:58 AM
Hi again

This time with a cheeky question.

I am thinking of doing this more professional eventually, and have to come up with what to charge people.

This is of course when my coding is up to scratch...lol

Take for example the site I am currently working on (www.seedism.com), code is not perfect but design is all mine, no templates.
What could i charge for a site like this, disregarding the amount of time I spent on it.

I have made one site a few months ago, www.sativasister.com, I am going to re-write that site since my coding has improved much, what could/should be charged for a complete rewrite of that site.

That was actually my first site ever, but a rush job cause they needed it online quick and for as little cash as possible.
I have already charged them 3000,- (UK pounds, mainly cause i had to re-write most content for them, as well as finding all pictures for them).
We have a agreement that they pay me that amount when I have installed a shop on their site.

They have agreed to that amount so it is not as silly is I thought when invoiced, and it did cost me about three months of work collecting content for them so I sold myself quite cheap.

But feedback on this topic would be appreciated.

Thanks guys
P.

domedia
02-23-2011, 01:14 PM
What could i charge for a site like this, disregarding the amount of time I spent on it.

In a market economy it doesn't really work that way. It all depends on a lot of things, none of which people in this forum know the details of :) The bottom line is that if you want to go into business yourself, you have to learn the business aspect of your job.

If you're thinking of starting a business, I highly recommend the sitepoint web business kit http://www.sitepoint.com/kits/web-design-business-kit/

If you're going to freelance for yourself, there's also a ton of material online. Google 'flying solo', 'freelance switch' and 'freelance folder'.