I know you hate GoLive but . . .

[Soccer37]

It is the only thing I have available to me. I have read a recent post about how most people who do web loath golive. What programs do you use? I am trying to build a portfolio online to use for job hunting. I don't want anything really fancy, but it does need to look nice. Here is what I am trying to achieve for my portfolio page. The logo in the header will link back to the home page and the links below will change color when hovered over as well as having the splotch move next to them. The rounded mass of boxes to the left will contain thumbs of my work which will appear in the window to the right. right below on the left will scroll through the pieces in a numerical format. Under the window on the right there will be a small area with text about the piece. At the bottom will be some text that will also have links to the rest of my site.

What should I be researching in order to complete this site? I know very basic html, but CSS is something I know very little about. Is this something I could complete with CSS, or would Tables be ok. Know any good resources that relate to what I am doing? Anyone who wants to give me advice would be greatly appreciated.!!!!! This is something I would like to get into a little more within the next few years so I would like to start off on the right foot. Thanks!!

[Ned]

It is the only thing I have available to me. I have read a recent post about how most people who do web loath golive. What programs do you use?

Those who don't write code in a text editor (ie, notepad, etc.) use Dreamweaver.


What should I be researching in order to complete this site? I know very basic html, but CSS is something I know very little about. Is this something I could complete with CSS, or would Tables be ok.

Forget tables. Cut your code to a small fraction of HTML, and give yourself the ease of global editing, by using CSS.

Your layout looks great... Clean, fashionable, easy to navigate. Good luck!

[urstwile]

You'll find that most of the heavy hitters on here in terms of web design and programming loath not only GoLive, but also look in askance at Dreamweaver. It's all about the hand coding.

That being said, I'm learning too, and I use Dreamweaver, although I'm also trying to up my hand coding skills so that I can really know what I'm doing. I've never used GoLive, but the web design area of my agency doesn't use it, they use Dreamweaver too, when they're going to use a program of that nature. Most of them hand code, however.

[Ned]

I hand code, myself. I never trust programs to do the work for me. Just takes more time to correct the program's mistakes. :)

[urstwile]

So Ned, you create your own algorithms for Photoshop retouching, then? :p

That being said, I completely see the advantage of hand coding for web sites, a lot more control, I agree, but as a novice to web stuff, in terms of creating pages, I'm glad there are both. I don't like slacking, I like being expert, but sometimes, well, a little help ain't all that bad either. :)

[tZ]

If you don't have a clue about mark-up then just use dreamweaver.

[Emmanize]

Again as I point out – you can still hand code in DW! It isn’t just for people who can’t hand code. Its for both, unlike notepad. If you can afford it, and you are very busy why not get something like DW? It’s very helpful, and alot of very exsperienced hand coders use it.



Have no clue about GoLive though….can’t say I have used it. But if you’re comfortable with it then use it. Using software doesn’t mean your not pro….if that was the case then nearly every organisation out there isn’t professional.

[Jackimalyn]

Im with Emmanize. Dreamweaver isnt for those who cant or dont want to hand code. Its a nice helping hand. But you have to remember that thats all it is is a helping hand. You can't always stay in design mode, you will spend most of your time in the code view.

As per your question, I would definately learn CSS and it would be good to know javascript. Programs like Golive and dreamweaver can help you BS your way and write CSS and JS for you- and they'll work. But the code will look like jibberish. By learning these languages you will also be able to manipulate them easier. I recommend looking into Dreamweaver, but Golive will work. I used golive for a while before I got dreamweaver and it was fine, but DW is more of an industry standard.

Good luck

[Patrick Shannon]

Yeah, Dreamweaver is a great code editor and I like features like the file browser, etc. I've barely even seen the design/WYSIWYG view since first starting the program and changing my options.

I hate GoLive because I absolutely hate the interface. It's fine for a graphics program like Illustrator, Photoshop, etc, but it's a pain in the butt when translated into a code editing program.

[Soccer37]

I agree about hating GoLive. I did a website for my last employer (for a favor, they were actually paying someone to build them a website in frontpage...) The code is horribly ugly, but it at least worked, and it was built in dreamweaver. I have been mostly using the split screen view, but realized right off it was better to just try and view it in a browser, as it is usually different. I think this is why it is taking me so long to do this is that I am not just plopping stuff in there, I am trying to make it "right".

Would the CSS be very advanced for this kind of layout? Here is my site address (so far I have only managed to center an image in the body of the page... haha, go me! It only took me half an hour... ) www.jmldesignstudio.com

[chris_bcn]

DW is a good program, used in code view anyway. However it's really expensive for an HTML editor. Topstyle Pro - $80, fantastic (X)HTML and CSS editor, as opposed to $400 for DW.

[tZ]

The thing about the web is unlike print you need to think relative.

That is why mark-up is your best bet.

Learning mark-up forces you to think relative rather then absolute.

If your thinking relative things will maintain much more consistency throughout different browsers and screen sizes. Where as, if your thinking absolute things may overlap in one and not in the other becasue you not addressing the promblem in the most basic of sense.

To ********, not relative or absolute in regards to mark-up but, relative in a basic sense. Casue theretically, all measurements on the web are relative of the browser,screen and settings per user.

I'm talking about relative of the objects that make up a design.

[Emmanize]

Hmmm. What a coincidence measurements was brought up :rolleyes: . You are going to have browser issues at times anyway...its not "always" the code. I get a feeling IE uses more padding then FF.

[Soccer37]

This has been a large problem overall . . . I would really like to learn this stuff, but I just cant find a good place to start. ( I really need to get this site up too) I can find lots of info about making three columns and adding a header and text and background but much beyond that I am having trouble finding. Like my Heading. How would I put that up there and make the logo clickable with Css. There is soo much info out there my head is starting to spin!!

[style]

i learnt hand coding in my graphic design course, but never really went futher then it.
i dont really design sites for clients, only very very basic ones, more complicated ones i send to an experienced web designer, but go live is fine for basic sites.
nothing more unless you know how to use it well i gues..

[chris_bcn]

Hmmm. What a coincidence measurements was brought up :rolleyes: . You are going to have browser issues at times anyway...its not "always" the code. I get a feeling IE uses more padding then FF.

Actually it is coding - you need to code your way around the peculiarities of browsers. the universal whitespce reset for example (*{margin:0;padding:0})

[tZ]

you use psuedo class anchors to assign behviors in CSS.

For instance:


<body>
<p><a href="">this is a link</a></p>
</body>


Then using CSS you would attach your behvior to the hover state like so:

first target the DIV that the item resides. This will help in regard to specificity later. So lets add a div just so I can show you what I mean.


<body>
<div id="linke">
<p>< a href="">This is a link</a></p>
</div>
</body


So we would select the link like so:


#linke p a:hover {
color: blue;
}


That bit of code placed in your stylesheet would make the link blue.

Now, you might be asking yourself why I wouldn't just do something like this:


a:hover {
color: blue;
}


The reason is that if we have any other links on the page now the same will hapen to them and the cascade will take effect when we might not want it to. So the best thing to do is be specific.

For instance a more viable option is using a list like so to create a nav:


<body>
<div id="navigation">
<ul>
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">portfolio</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
</body>


This will create a list with our links.

that simple!

Now to select the link we would go in order relative of the div which the links are placed. So first we would select the div, second the unorderlist element, third the list element, fourth the a element then attach the behavior.

So the CSS to select the links and attach a rollover behavior for the above would become somthing like this:


#navigation ul li a:hover {
color: blue;
}


There are four states in all that you can attach to an element. The link, visited, hover, active.

You must apply them in the order they appear for them to work. So if you declare a hover before a link then the hover won't work. This goes along with sort order and the arrangment of styles in the document. So you would specify a link style before a hover in your stylesheet.

The method I described above using descendent selectors is the best way to avoid promblems with the cascade(woss)- weight, orgin, specificity, sort order later on. It will also avoid the assignment of thousands of ids or class's which are not needed.

There are some shortcuts but, just stick with that rule for now and you'll be good to go.

Personally though, if I was creating this design I would do this dynamically through javascript but, offer a alternate if javascript was inactive. The book DOM scripting by jeremy keith goes over what I am talking about with javascript.

[Soccer37]

Haha, simple sure!! It makes some sense. Thank you so much for you help!! I am going to get this . . . someday. I will try this out and see what I can do. Thanks again! I have been trying to figure this out on my own, but I realized, I just need some help!!

[EC]

This has been a large problem overall . . . I would really like to learn this stuff, but I just cant find a good place to start. ( I really need to get this site up too) I can find lots of info about making three columns and adding a header and text and background but much beyond that I am having trouble finding. Like my Heading. How would I put that up there and make the logo clickable with Css. There is soo much info out there my head is starting to spin!!

you can't. you would need to insert the image right into the html in order to make it a link. you can position that image with CSS though. (does that help?)

One of the best ways for you to begin to understand how to do something is to look at sites built with css, then view their stylesheet. I do this all the time when I stumble upon something really cool out there, "Huh, neat, how did they do that anyway?" View>source, voila.

Of course it's not nice to steal other people's code, but you can learn a lot from looking at it. CSS Zen Garden was set up just for this purpose, and in fact you are ENCOURAGED to download the html and css to play with it and study how different effects are achieved.

http://csszengarden.com/ and full archives -- http://www.mezzoblue.com/zengarden/alldesigns/

[chris_bcn]

I, like everyone I know in this industry, learned HTML by viewing source of pages we liked. Same with CSS. You can't (well shouldn't) steal other peoples work but it can help you gain an understanding. There are some many blogs out there that give you all the information you need. Check the CSS sticky in this section for some good links. And always use firefox for testing and download the developer toolbar extension

[Emmanize]

Actually it is coding - you need to code your way around the peculiarities of browsers. the universal whitespce reset for example (*{margin:0;padding:0})



I validated my site and it all came up green and fine. I am sure it is just about fiddling with the code. But all I was saying is….it doesn’t look to be an error by me. It isn’t a huge about of space, there is just more excess space in IE then in ff and that’s normally the case anyway. For some reason sites look bigger in IE.

[EC]

welcome to the box model emma, you have officially joined the ranks of the frustrated. :)

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

[chris_bcn]

It's a joyous moment in any new web designers life when the box model rears it's head.

let the dance begin!

My best piece of advice - always, always code to a strict doctype - that way IE6 will render in "standards" mode - ie correct box model. Transitional will trigger quirks mode. AS wil having the XML prolog (<?xml version="1.0" encoding="us-ascii"?>) at the top of your document - something to watch out for if you use HTML tidy!

Don't bother with box model hacks. IE5's days are numbered, but you can't discount it yet. Do the maths and then create a style sheet soley for less than IE6 and link it to your page via conditional comments - that way you're main stylesheet is valid, standards compliant and as futureproof as possible.

Also - have alook at this. I haven't tested it yet http://bitesizestandards.com/bites/using-the-universal-selector

looks like a great idea but is fraught with danger too possibly

[EC]

I do that. It's not really that big of a deal. People get so worked up about stuff sometimes! LOL

I also do IE conditionals.

[urstwile]

I love GDF. Those are some great links, now that I'm trying to get more experience with web design and programming. I do use Dreamweaver, but I also DO try to understand the code that it's putting in there, in hopes of getting better at hand coding. I also do the View Source thing. I've found that invaluable to try and understand stuff.

[Ryan8720]

This where I learned the joys of the box model: http://tantek.com/CSS/Examples/boxmodelhack.html

I don't like IE conditionals. I always use the * html trick.

[EC]

I stopped using that after reading this http://www.thinkvitamin.com/features/css/stop-css-hacking

[chris_bcn]

the * html hack is going to open a pandoras box of problems with IE 7

the only way forward is conditional statements for IE. Sorry

Your standard stylesheet should be 100% hack free. All web standards compliant browsers won't have a problem

For the browsers that di have a problem - conditional comments. Not ideal but the only solution until IE5 and IE6 fall off the map. By which time we'll all be bitching about the fact that IE7 is not CSS3 compliant