Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Making my page design into reality

Discussion in 'Website Coding & Programming Forum:' started by Mattdbryce, Feb 5, 2013.

  1. 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

    [​IMG]
     
  2. Corrosive

    Corrosive Moderator Staff Member

    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:
     
  3. Mattdbryce

    Mattdbryce Member

    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
     
  4. Mattdbryce

    Mattdbryce Member

    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
     
  5. Corrosive

    Corrosive Moderator Staff Member

    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.
     
  6. Corrosive

    Corrosive Moderator Staff Member

    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.

    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.
     
  7. Stationery Direct

    Stationery Direct Administrator Staff Member

    I don't see any textual content for google to index, how are you going to be found?
     
    Corrosive likes this.
  8. Mattdbryce

    Mattdbryce Member

    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:

    [​IMG]

    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
     
  9. thingstodo

    thingstodo Member

    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)
     
  10. thingstodo

    thingstodo Member

    If you want your site to do well at all in Google searches it's worth thinking about it right from the start. Otherwise you may end up with a beautiful site that no-one ever sees.
    See Webmaster Guidelines - Webmaster Tools Help
     
  11. Mattdbryce

    Mattdbryce Member

Share This Page