Web Design Thread

[RR_Trials]

Well, I am just making this thread as i need some help with my design using Dreamweaver.

For a start, people like JonMac and Simon (i think)... What editors are you using to build website?

My problem is that I cant seem to get my images and text exactly were I want them on the page. I finally managed to get the '25%' picture roughly along side the other 3 images. Now from what i can see there is no way to line the top of that image up with the top of the 'men' button.

Secondly I cant get the 3 images on the left to move closer together. I used a table and managed to get the distance right but then I cant have the '25% image on the right.

I'm thinking i need some sort of WYSIWYG editor but I thought dreamweaver should at-least allow me to place images and text were i want them.

Edited October 28, 2008 by RR_Trials

[Muel]

The best way I've found is to have one main <div> for the whole page with a fixed width, which is centered, then you can put all of your other divs inside that and align them from the left, so they tend to stay in the right place across all browsers.

Are you using seperate stylesheets? I havn't used them before but I have done on the site I'm working on now, and they're a godsend, especially when you need to duplicate divs across all the pages of the website.

[RR_Trials]

oh-gosh...

Now im lost. Ok so i need to make my website one main 'div'.. What is a div.. I can see what you mean about it staying lined up and central though.

[MadManMike]

Yes, you do need to use a WYSIWYG editor if you don't know what div is

[RR_Trials]

Yes, you do need to use a WYSIWYG editor if you don't know what div is

You know of any free, ones for mac?

[JonMack]

I don't know of many WYSIWYG editors for OS X but thats because I don't use them. Give RapidWeaver a try though, you might like it.

[Webber]

Dude, do you have Fireworks?

If so, just create the look/layout you want exactly how you want it to look, then used the slice tool to define any buttons etc.

Export the file to a "HTML & Images" file.

Open it up in dreamweaver and you have it looking exactly like you did in fireworks

Hope it helps a little

James

[Muel]

A div is like a box the can contain the content of the website, and you can control the size of it, the border properties etc.

The best way to do it would be to write it out using HTML and CSS, it's tricky stuff to learn, but you can teach yourself. I just got stuck in and taught myself everything I know using Google, a big book and Notepad.

Slicing is OK to start with, but all it will be is basically a big picture on the screen, you can't have any interactive content at all.

[RR_Trials]

I don't know of many WYSIWYG editors for OS X but thats because I don't use them. Give RapidWeaver a try though, you might like it.

Cheers dude, Ill take a look at it.

Dude, do you have Fireworks?

If so, just create the look/layout you want exactly how you want it to look, then used the slice tool to define any buttons etc.

Export the file to a "HTML & Images" file.

Open it up in dreamweaver and you have it looking exactly like you did in fireworks

Hope it helps a little

James

I think my friend you have solved my problem. Before i start out in this way though. Can i just use photoshop lay it all out how i like it then put it into dreamweaver and use hotspots too add hyperlinks to buttons.

Is there any problems with doing this? Apart from people not being able to change font size

[Webber]

Slicing is OK to start with, but all it will be is basically a big picture on the screen, you can't have any interactive content at all.

There are various interactive things you can do with slicing. Using fireworks various "behaviours" can be added to each slice such as rollovers or image changes. They really are very useful.

But i do also use divs for various flash movies etc and other images.

I think my friend you have solved my problem. Before i start out in this way though. Can i just use photoshop lay it all out how i like it then put it into dreamweaver and use hotspots too add hyperlinks to buttons.

Is there any problems with doing this? Apart from people not being able to change font size

I do believe this can be done in photoshop i have just never done so myself.

The good thing about fireworks and dreamweaver is they are linked. So when in dreamweaver you can highlight the whole thing and there is an option to transfer of to fireworks, do the editing you wish, and just hit the "Done" button and you will be taken back to dreamweaver. There you will see all the changes you made in fireworks appear on the file in dreamweaver.

Fantastic bits of software

[Simon]

To fully understand stand div's, you need to fully understand the box model.

A web page is essentially a collection of boxes, positioned using CSS.

Structure, content and style should be 3 seperate elements, all independent of each other. You can take away the structure and replace it with another structure, and it'll work. With a CMS you can output content as HTML, CSS, get the server to parse it as PHP and do other stuff there after. You could remove styling and the website would still read correctly, but this is another area called 'semantics'. You could also remove the content and replace it with what ever, and hopefully, the site would adapt.

It's also about thinking logically and grouping areas.

http://www.hillandknowlton.com/press

Take H&K for example, if you look at the code, its a collection of blocks (div's). So you have header, content, footer, and inside that the navigation and other content areas. This gives much greater flexibility over the layout, and in fact design.

I could if i wanted within a day create a completely different look for that site. Have the navigation on the left, make it a set width, have the content next to the header if i so damn wanted.

If you do look, also take into account other things, like the use of heading tags, usually h1 to 4, never really found a use for 5 or 6. The use of list's for navigation, one of the main things i wish people would learn, and the fact that hopefully, there isn't any div's or block elements put in for design. If you've had to put in an extra div for spacing, or to position something in relation to the design, you've not coded it right. You'll often have to add div's in, like for rounded corners, but you can easily justify certain techniques, for example, putting an em inside a link, to get an extra rounded corner, as you could argue that the navigation needed to be emphasized.

Good luck.

[Jed]

Is there a program like RapidWeaver for PC?