Making my page design into reality

Mattdbryce

Mattdbryce

Member
Hi guys,

I've spent the day designing my new portfolio website and i want to start working on it in dreamweaver. I have been learning dreamweaver quite intensively recently but not sure i'm quite at the right stage to follow through with my design (see below).

I'd like to ask for some advice as to how i achieve this layout if i may. Would i add each button image as an AP DIV and link them that way or is there a better way to do this?

Thanks in advance!

Matt

35lafx0.jpg
 
Well..... You've set yourself a fair task there! AP Divs is one option but make sure you use a relatively positioned 'wrapper' div to take your co-ordinates from or it'll fly all over the place at different resolutions. The next option is to use floats to basically turn each row into 3 columns to hold the text/image. Or you could leave it as one big image and use hotspots for links. That's the problem with web design, usually 3+ ways to skin a cat :nod:
 
Hi Corrosive,

Thanks for your swift response! I've started the site (see link below) and i've change position to relative on the ".content" div. I have seen the word "wrapper" in some tutorials but i'm afraid i'm not sure how to do that, could you enlighten me?

Untitled Document
 
Other things:

  • I've set the lines as a background image on the .content div.
  • And all graphics are PNG's in their own AP DIV boxes.

Is that the right way about going about this?

This might sound like a silly question, but do most web professionals use Dreamweaver? I used to work for a company who's entire site was built in WordPress so that the client could update regularly.

Matt
 
Mattdbryce said:
Hi Corrosive,

Thanks for your swift response! I've started the site (see link below) and i've change position to relative on the ".content" div. I have seen the word "wrapper" in some tutorials but i'm afraid i'm not sure how to do that, could you enlighten me?

Untitled Document
Click to expand...

Your .content div is doing the same job so that's OK. There isn't really a specific 'wrapper' bit of code. Like other elements of HTML you can give them a specific name (through a class or ID) to help target your CSS at that specific tag.
 
Mattdbryce said:
Other things:

  • I've set the lines as a background image on the .content div.
  • And all graphics are PNG's in their own AP DIV boxes.

Is that the right way about going about this?
Click to expand...

Might not be the route I would have chosen but, as I said in my earlier post, there are multiple ways to achieve a layout. If it is stable across browsers, devices and screen resolutions and you are happy with it then it's OK.

Mattdbryce said:
This might sound like a silly question, but do most web professionals use Dreamweaver? I used to work for a company who's entire site was built in WordPress so that the client could update regularly.
Click to expand...

Yes, professionals use Dreamwaver. It has loads of useful stuff to make development faster and easier. :icon_biggrin:

Don't get mixed up between an IDE and a CMS. Dreameaver is an IDE to help you get the layout you want. That code is then used to form part of a CMS template (for Wordpress or whatever) where you get the Content Management functionality.
 
Thanks again Corrosive! I'll look into wrappers another time, this process seems to be working so far.

Boss Hog: I will probably look in to that when i've finished the design process. Not too familiar with it, i know page titles are important.

I have another question, i'd like to get a floating "top" button at the bottom of the page, much like this:

io22ci.png


A bit like the one on this site: Studio of Gavin Potenza and i'd like it to start at the bottom of the buttons. Hope thats not too confusing!

Matt
 
Mattdbryce said:
io22ci.png


A bit like the one on this site: Studio of Gavin Potenza and i'd like it to start at the bottom of the buttons. Hope thats not too confusing!

Matt
Click to expand...

That's a css "fixed" menu

His code is this:

#tag_menu {
border-top: 2px solid #000000;
bottom: 25px;
font-size: 16px;
left: 50%;
margin-left: -300px;
padding-top: 10px;
position: fixed;
text-align: center;
width: 600px;
z-index: 99999999;


}





Noticed the
position: fixed;
bottom: 25px;
left: 50%;
z-index: 99999999;


Position fixed keeps it stationary, bottom keeps it 25 pixels from the bottom; left keeps it 50% from the left hand side, and z-index keeps it on top of everything else.

Tip: Press F12 find the pointy arrowand click on the thing you are interested in, it will show you the CSS code. ( works in several browsers but Firefox is my favourite)
 
You must log in or register to reply here.
Back
Top