Skip navigation
Stijn Jasper
Stijn Jasper Calculating status...
Currently Being Moderated

Simple webpage from scratch

Jun 13, 2012 4:19 AM

Tags: #website #mouse #css #navigation #scratch #from #over #roll

Hey peeps, thank you so much for taking a look at my question. I have started with dreamweaver this month and it is much harder then I thought. I have the idea of a website design in my head. I am wondering if anyone of you knows some good (video)tutorials to follow or give me some pointers.

 

It is a simple page with three navigation buttons wich I'd like them to move up if you hover over them with your mouse. I have a drawing of my idea uploaded as an attachment. There are three designs, but the structure stays the same.

 

Thanks again.

 

Stijn Jasper

The Netherlands

 

(For those who are wondering, I have made this drawings on my iPad with  fifty three- paper).

Screen Shot 2012-06-13 at 13.16.58.pngScreen Shot 2012-06-13 at 13.17.11.pngScreen Shot 2012-06-13 at 13.17.19.pngScreen Shot 2012-06-13 at 13.17.26.pngScreen Shot 2012-06-13 at 13.17.33.png

606 Views   5 Replies   Latest reply: Nancy O., Jun 15, 2012 2:20 PM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Jun 13, 2012 4:22 AM   in reply to Stijn Jasper
    Report

    Before you do anything you would need to work on some of the fundamentals.  If you do not know any HTML/CSS, I encourage you to spend some time at the tutorials that are offered at http://www.w3schools.com, and at the Adobe site.  The more you know about this, the easier DW will become.  Otherwise you are in for a struggle.

     
    |
    Mark as:
  • Stijn Jasper
    Currently Being Moderated
    2. Stijn Jasper,
    Jun 13, 2012 4:34 AM   in reply to MurraySummers
    Report

    Well, we have had some basics in class (this is for a school assignment) with html and css but this only allows me to create a page with a bg, a header and a spy navigation bar. It does not have to become a website that is fully functional and customisable. I would like to keep it as basic as possible.

     

    however, I will take a look at your link thank you!

     

    What is your opinion on this tutorial?
    http://tutvid.com/create-a-full-css-webpage-dreamweaver-tutorial/

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    3. MurraySummers,
    Jun 13, 2012 4:38 AM   in reply to Stijn Jasper
    Report

    I'd also recommend that you start your HTML page creation with one of the Dreamweaver Sample pages, for example the 1 column fixed, centered, header and footer page.

     

    I'll get back to you about the tutorial.

     
    |
    Mark as:
  • Stijn Jasper
    Currently Being Moderated
    4. Stijn Jasper,
    Jun 15, 2012 1:16 PM   in reply to MurraySummers
    Report

    Hello again, I have followed the tutorial and modified it to my taste. I have a problem however which is best explainable with images:

    Screen Shot 2012-06-15 at 22.09.55.png
    This is what the page looks like in dreamweaver.

     

    1.png
    This is what the page looks like in my browser.

     

    Screen Shot 2012-06-15 at 22.05.28.png

    This is what it should look like.

     

    I want the logo (portfolio) and the header (the grey part with information about me) to stick to each other and I would like to have the navigation float on top of that.

     

    Any ideas?

     

    (ps, the home menu button is purple.. is there a way to keep that white?)

     

    Thanks big time!

     

    Stijn Jasper

    The Netherlands

     


     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Jun 15, 2012 2:20 PM   in reply to Stijn Jasper
    Report

    To answer your PS:

     

    Style your links with CSS code:

     

    • a - any link
    • a:link - a normal, unvisited link
    • a:visited - a link the user has visited
    • a:hover - a link when the user mouses over it
    • a:active - a link the moment it is clicked
    • a:focus - a link reached with the tab key

     

     

    a {text-decoration:none}

     

    a:link,

    a:visited {color: #FFF}

    a:hover,

    a:active,

    a:focus {background-color:#FFF; color: #000}

     

    http://www.w3schools.com/css/css_link.asp

     

    For answers to layout questions, we must see your HTML and CSS code.  The best way to get help is to upload your page and dependant files to a web server space and post the URL here. 

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points