View Full Version : Best practice for header?

11-13-2010, 07:16 AM
I have a header image designed in photoshop, as well as header navigation icons that are supposed to be on top of the header, and I'm not sure which direction I should be going.

Direction 1: Import header and icons each separately as photoshop smart images, place navigation bar using navigation bar images tool in dreamweaver. For this I have the header and the menu in the same container div tag, and have a negative margin set on the navigation to get it to be on top of the other image.

Direction 2: Slice and import in photoshop.

I'm brand new at this so I apologize if these are silly questions- I really want to learn how to do this the right way. I am leading towards slicing and importing from photoshop, because my icons look like sh*t after I import them to dreamweaver separately.

I want the icon background to be translucent, and I have a texture as the background. I tried having the icons in a separate container, and giving them the same background texture as the header, but the seam looks horrible where the background lines up.

ALSO, this probably should be a separate question, but I decided to learn to code my own sites and do my own graphics after a mishap with wordpress led to my site crashing and me not knowing how to fix it. (I messed up some php code and didn't know what) So I imported my whole site locally to dreamweaver only to discover that wordpress had created thousands and thousands of files, that I can't make heads or tails of. I decided the best thing to do is bag everything from wordpress and start scratch in dreamweaver. Anyone have experience with this situation????? Does wordpress create code so confusing that you'll have to use wordpress forever?????

Please help!

11-13-2010, 07:34 AM
Hi there and welcome to the forum.

I would always recommend creating your individual images in Photoshop and then rebuilding your layout in DW. If you want nav icons over a header image then create a div for the header and set the banner image itself as a background through CSS. Next up create an unordered list inside the banner div in HTML and populate with your icons. Then use padding and height to adjust where the list of links sits in the banner (basic CSS box model).

As for Wordpress creating a lot of confusing files... Yeah, I'd have to agree that would be pretty daunting to start with. Learning to code from scratch in DW is a good thing to know but you might regret not using a CMS if you create lots of content.

11-13-2010, 07:49 AM
Also on the to do list is php/MySQL. I'm pretty sure this undertaking was more than I bargained for. I'm a chemical engineer and I learned html and C++ in college, but it was probably '02 when I took those courses and website design seems to have changed quite a bit since then....Is that what you meant by CMS?

By the way, when I took C++ my department had only recently approved it as a sufficient language for ChemE's to take- the recommended language was Fortran.

11-13-2010, 07:56 AM
but it was probably '02 when I took those courses and website design seems to have changed quite a bit since then....Is that what you meant by CMS?

No, a CMS is a Content Management System such as Wordpress. Where 'pages' aren't really pages at all but items stored in a database and called when a visitor hits a page. There are loads of CMS out there. I was saying that I'd recommend a CMS if your web skills are limited, you have a lot of different people contributing or you just have a lot of content to manage. Creating every new page in DW is a pain. Trust me, I wish I'd put my personal site on a CMS when I built it. Our business website uses ModX.

And, yes, web has come on a really long way since you studied in 02. You may just want to do some more background reading and experimenting to start with.