How to Cheat in Photoshop

» Forum Index » Problems and solutions » Topic: Website test

Posted on 20/11/08 06:12:17 AM

tank172
ThreeDee Thriller
Posts: 692

Reply

Re: Website test

Well, I've pretty much finished the site. Thanks everyone for the help. I still have a few things I need to modify on the back-end such as the hidden title you mentioned, Dave. I may change the signup page some more, but it's all now approved to go live since they have a presentation today.

David, I forgot to add the screengrab I mentioned a few replies back. Here it is. It's really the only way I could keep myself organized, since there's so many layers involved in the overall site. Hope it helps if you use the plugin for HTCIE site.

Posted on 21/11/08 11:25:56 AM

Paul 2007 thru 2010
Lego Legend
Posts: 361

Reply

Re: Website test

dave.cox wrote:
Yeah, I took a quick look at the code for your site. The CSS that is being generated has seperate code with a seperate Div tag for each little thing on the site. A real nightmare to update manually, and a ton of extra CSS code that probably could be done without. Not a good thing for a large complicated site.

I looked at that code too and it does look very bloated. I can't see the point of all those named empty divs. Unless they get filled using innerhtml later on, but I doubt that in this case. The extra (wasted) size isn't going to win any SEO fans

I am leaning web design with CSS and an going through the route of using nothing more than a text editor and Firefox. I want to understand what is going on rather than relying on Dreamweaver. I've already found that the live view in DW CS4 is not to be trusted.

Relying on plugins without knowing fully what's going on can be very dangerous. I remember the first time I learnt how to do slices in Image Ready. I was amazed how it took my photoshop image and created the layout with tables. I replaced parts with flash and added PHP and hyperlinks. For a while it all worked fine until I accidentally "broke" the alignment and hadn't got a clue how to fix it without going back and slicing it again and then redoing all the rest.

Posted on 21/11/08 2:10:00 PM

dave.cox
Marquee Master
Posts: 518

Reply

Re: Website test

Paul maybe this will help to answer some of your thoughts.

I can't see the point of all those named empty divs. Unless they get filled using innerhtml later on, but I doubt that in this case.

You have to be careful to look at what is in the CSS as well as the HTML page to see if those empty Divs do anything. I will somtimes add a graphic using CSS where there is nothing on the html page but the div tags.

You can learn web design using Dreamweaver or Notepad, or whatever you prefer. Dreamweaver is nothing but a tool to make the editing process easier. You can easily switch to code view at anytime to check of modify your code to do what you want, inluding the CSS code. (Just right click in the CSS code window, and select "go to code." Even though I started coding web pages in notepad, I would not cherish going back to it.

The WYSIWYG view in Dreamweaver is only meant to be a quick representation. To see what the code is acutally doing, you do need to check it in the browser. Dreamweaver make it easy to do that. Select the globe icon at the top of the page, and select the browser that you want to preview in. Dreamweaver will display a list of all of the browsers that are on your machine. I recommend checking all of the browsers, since they all work differently, and most are not truly compliant to the standard. (Or press F12 for the default browser.)

For a while it all worked fine until I accidentally "broke" the alignment and hadn't got a clue how to fix it without going back and slicing it again and then redoing all the rest.

It doesn't matter what tool that you use for development in web sites, if you are using slices, or anything that requires alignments on image elements, this is going to happen sometimes. Web site requirments change, and pages must be recreated, aligned, etc.

If you really want to learn to use CSS well, and also learn editing techniques, I would recommend you take a look at lynda.com and take the Dreamwever courses. It also covers some CSS.

Another place to get some good basics on CSS is w3schools. This site offeres the course material for free, and only charges if you want to get the certification. (Yes, I have taken both the courses that I recommended above, and I am also certified.)

For those that want some of the code markup abilities that Dreamweaver provides, without the expense, you might try the Crimson Editor. The Crimson Editor is a shareware text editing tools that will provide code hilighting for HTML, XML, Javascript, and many others. You can google for it, and download it at no cost.

Posted on 21/11/08 4:53:04 PM

David Asch
Tech Support
Posts: 1913

Reply

Re: Website test

Sitepoint.com are offering one of their CSS eBooks free for the next few days. All you have to do is supply your email address and they'll send you the link. I've had a quick skim through it and it looks good, especially for the price!

_________________
If you hold on to the past, sooner or later you'll lose your grip.

Posted on 21/11/08 4:58:33 PM

David Asch
Tech Support
Posts: 1913

Reply

Re: Website test

Also, thanks Chris, I'm still not quite done, but it's getting there. I'm going to compare the results with Photoshop's own output.

_________________
A happy-go-lucky chap, always dressed in black

Posted on 21/11/08 8:36:52 PM

Paul 2007 thru 2010
Lego Legend
Posts: 361

Reply

Re: Website test

dave.cox wrote:

1) You have to be careful to look at what is in the CSS as well as the HTML page to see if those empty Divs do anything.

2) Dreamweaver is nothing but a tool to make the editing process easier.

3) The WYSIWYG view in Dreamweaver is only meant to be a quick representation.

4) It doesn't matter what tool that you use for development in web sites, if you are using slices, or anything that requires alignments on image elements, this is going to happen sometimes. Web site requirments change, and pages must be recreated, aligned, etc.

5) If you really want to learn to use CSS well, and also learn editing techniques, I would recommend you take a look at lynda.com and take the Dreamwever courses. It also covers some CSS.

6) Another place to get some good basics on CSS is w3schools. This site offeres the course material for free, and only charges if you want to get the certification. (Yes, I have taken both the courses that I recommended above, and I am also certified.)

Thanks Dave for taking the time to reply.

1) I never looked at the CSS just the html. I will download it and look through it just for interest.

2) I like Dreamweaver as an editor. I love the syntax colouring and prompts, but I wanted to avoid that as I was becoming lazy and not thinking about what I was choosing from drop down lists. If you start typing a CSS attribute DW will suggest some that look like what you have started typing. I found I was just choosing one and it wasn't going into my brain. I think typing things out longhand is a good way to remember stuff

3) I know what you mean about the WYSISWG but I was hoping the new Live View mode on CS4 was going to be better. Well it is better but I think like any "browser" it still has it's own peculiarities. I have 5 different browsers installed now and will use those. My preference is Firefox.

4) Which is why I want to learn the coding side as much as I can rather than rely on a plugin. If I need to change a page, it would be very hard if I had relied on a some automated process.

5) I am a frequent visitor to Lynda.com. I have been going through their CSS for website design tutorials. I find it very easy to follow.

6) I have been to w3schools before but I found it hard going as regards CSS. I like it as a reference source. Now I have a better grounding of CSS I think I will go back there and things should make more sense now.

@ David Asch. I have just downloaded that ebook too. A brief look through the contents looks promising.

page: 1 2 last

Back

[ To post a reply, please Log In or Register ]