I NEED advice on how to correctly build a website. Any links or pointers?

by asc
22 replies
  • WEB DESIGN
  • |
I have been 'learning' web design for some time now..i say web design, we covered a lot in a recent college course, javascript, flash and actionscript, image manipulation and creation and a lot of other things.

What we did not cover, or skirted over very quickly was positioning. I have been trying to find something to follow to understand it a bit more. I have been advised to look at box models, 960 grids and some other things. 960 looks a bit daunting to be honest. I cannot get my head around basic things like putting an element in a certain place, keeping the footer to the bottom of a page without it spreading all over other elements...just basically lost. I was advised to use a wrapper div to place elements in, but looking at some HTML5 basic tuts they seem to just use semantic mark up and arrange with css.

Any basic tuts or advice? I think it is HTML structure i need. Very confused with all of this and any pointers would be really appreciated

Alan
#advice #build #correctly #links #pointers #website
  • Profile picture of the author Istvan Horvath
    Without knowing HTML... the rest of the knowledge is almost useless. (Flash, definitely, is a dead end.)

    Yes, you need to learn and understand the basics of HTML divs styled by css.
    Free > W3Schools Online Web Tutorials
    Signature

    {{ DiscussionBoard.errors[6994178].message }}
    • Profile picture of the author ronc0011
      Yes what Istvan said. HTML and CSS Learn about the HTML element <div>Here is a good tutorial on positioning...

      Learn CSS Positioning in Ten Steps: position static relative absolute float

      it demonstrates the behavior of the different "position " values i.e. absolute, relative etc. You might also want to look at some tutorials on the CSS "float" attribute . I think after you spend a little time playing around with these you should start to get a good handle on positioning.
      {{ DiscussionBoard.errors[6994449].message }}
  • Profile picture of the author asc
    Thanks for the replies

    Istvan - yes i agree it is all not of much use without a good understanding of HTML - i sort of have a 'grasp'..using external css files and styling elements, but positioning has become quite a headache for me. And Flash and Actionscript..i equate it to learning Latin..quite difficult and quite pointless..

    Ronc0011 - thanks for the link, looks like exactly what i have been trying to learn...i will check it out right now! Many thanks
    {{ DiscussionBoard.errors[6995227].message }}
  • Profile picture of the author Istvan Horvath
    Use a piece of paper and draw the different divs - as "boxes" - as they are contained by each other and/or placed next to each other.

    I almost never need to use the "position" thing in my stylesheet and I still can accomplish placing different elements exactly where I want them.

    Look at this forum page where you read this

    Imagine,
    the 'body' is the whole width that shows up in your browser;
    a 'wrapper' div would contain everything that is inside of the two grey borders on the side - open it here and we will close it later... ;
    inside the wrapper you start adding divs inside of the that div:
    - header (same width, defined height)
    - content (same width, auto height/length) etc.
    -- this can again contain 2 or more divs: their width together should be exactly the width of the parent div, otherwise they fall down - e.g content=600px > sidebar=200 + post=400 sum = 600! ;
    -- the box model is about learning the idiotic IE that interprets the borders, margins and padding differently than other browsers
    -- the post and sidebar can/should be floated left next to each other (and learn how the floated elements behave) ; and close the content div
    - finally, still in the content div, add a footer div...
    - and now you can close the wrapper

    Width, background, borders, margins, padding etc. should be defined in the stylesheet.

    Where in the above (very basic) layout do you need to place an an HTML element that gives you difficulties? Everything should be just a new div with dimension or without (depending on the required behaviour) and its position inside the parent element (div) can simply be defined by margins...)
    Signature

    {{ DiscussionBoard.errors[6995340].message }}
  • Profile picture of the author RK Corbes
    Istvan was right. Draw everything in a paper, make a draft of what you want to achieve with your website. Use the body as the main box and create boxes within the body and you will achieve boxes, 2 or 3 columns can be easily done. If your point about learning positioning is to create clickable images/links or playable videos using absolute position, then you need to use z-index code as well. I always using this on my html designs, it all depends on how you want to code your website. The positioning is not necessary.
    {{ DiscussionBoard.errors[6995406].message }}
  • Profile picture of the author asc
    Thanks again for the replies

    @Istvan...I am going to make a site today from scratch and will do as you say, putting everything in a wrapper except the body, and see if I have any problems positioning...seems to make sense what you have said so I will try asap. Many thanks!
    {{ DiscussionBoard.errors[6996351].message }}
  • Profile picture of the author asc
    One question...would I define the wrapper height?

    Alan
    {{ DiscussionBoard.errors[6996367].message }}
    • Profile picture of the author Istvan Horvath
      Originally Posted by asc View Post

      One question...would I define the wrapper height?

      Alan
      I wouldn't because in most cases (like this forum or a blog, for example) the height should be as 'long' as it takes to display whatever content is there.

      Except header and footer there isn't really need to define height... unless it's an "inserted" div, as it would be in this forum page the big ad banner - between the red menu line and the black top "separator".
      Signature

      {{ DiscussionBoard.errors[6997173].message }}
      • Profile picture of the author asc
        Originally Posted by Istvan Horvath View Post

        I wouldn't because in most cases (like this forum or a blog, for example) the height should be as 'long' as it takes to display whatever content is there.

        Except header and footer there isn't really need to define height... unless it's an "inserted" div, as it would be in this forum page the big ad banner - between the red menu line and the black top "separator".
        Ok, how about for a page with very little content...maybe a header,a short paragraph with contact details for example...possible that is about it. If the height was at auto..then would the footer not just appear halfway up the screen, at the end of the content (if that makes sense)?

        Sorry for all the questions but these are some of the specific problems i have been encountering!

        Many thanks

        Alan
        {{ DiscussionBoard.errors[6998674].message }}
        • Profile picture of the author Istvan Horvath
          Originally Posted by asc View Post

          how about for a page with very little content...maybe a header,a short paragraph with contact details for example...
          If there is no content, it is not worth to build a webpage... Period.

          Get a working template for your CONTENT pages and in the meantime you will learn enough to be able to handle a 'contact page' height. Otherwise you will start to sound as a arguing for the sake of argument.
          Signature

          {{ DiscussionBoard.errors[7000386].message }}
          • Profile picture of the author asc
            Originally Posted by Istvan Horvath View Post

            If there is no content, it is not worth to build a webpage... Period.

            Get a working template for your CONTENT pages and in the meantime you will learn enough to be able to handle a 'contact page' height. Otherwise you will start to sound as a arguing for the sake of argument.
            Sorry didnt understand the last bit?

            And there is content but very little..basically it is a site for a local karate club. The rest of the site has content on the pages, training times, bit about the club etc...but one page simply has a line to contact them on

            I (think I) have attached a screenshot to give you an idea of how the elements are sitting at present - content isnt centred or placed yet but it hopefully gives you an idea of what I mean about the footer..
            ..in this case should I make a contact area div and for this page define height?
            {{ DiscussionBoard.errors[7000984].message }}
            • Profile picture of the author ronc0011
              I too generally never use the "position' element But instead I use {"float for almost everything by using float you place an element either top -left or top-right and additional elements flow across the page and onto the next line or row, if you will. So in a typical scenario I place a div using float:left; and the next div without even applying a float will automatically line up to the right of the first div if there is room for it though I typically give it a float:left; anyway. Frome here you can start tweaking /adjusting widths so everything fits.

              Another trick I will sometimes use if something isn't behaving as I would expect is to give all my containers /divs a background color and a border so I can see what everything is doing. Sometimes certain elements or types of elements will push things around and cause unexpected results. This is where the background / border trick can be useful.


              I will also sometimes use a min-height on a div in order to make things work out at the bottom. Thought it is preferable to let the content of one or another columns in the body of your page dictate overall page height.
              {{ DiscussionBoard.errors[7001174].message }}
              • Profile picture of the author asc
                Originally Posted by ronc0011 View Post

                I too generally never use the "position' element But instead I use {"float for almost everything by using float you place an element either top -left or top-right and additional elements flow across the page and onto the next line or row, if you will. So in a typical scenario I place a div using float:left; and the next div without even applying a float will automatically line up to the right of the first div if there is room for it though I typically give it a float:left; anyway. Frome here you can start tweaking /adjusting widths so everything fits.

                Another trick I will sometimes use if something isn't behaving as I would expect is to give all my containers /divs a background color and a border so I can see what everything is doing. Sometimes certain elements or types of elements will push things around and cause unexpected results. This is where the background / border trick can be useful.


                I will also sometimes use a min-height on a div in order to make things work out at the bottom. Thought it is preferable to let the content of one or another columns in the body of your page dictate overall page height.
                Thanks for the response. I shall try that, floating everything to the left and working from there.

                The suggestion about colouring everything...i was doing just this yesterday, well just made empty divs and styled them to get an idea of why things are moving around and how...i will try with borders.

                And yes I think that is what i am needing, a min height for the more empty pages.

                Great replies thanks
                {{ DiscussionBoard.errors[7001848].message }}
  • Profile picture of the author david87
    There are many online tutorials which can help you to understand how to start website building.The very first thing which you need to learn in HTML.So w3schools is best source to learn as well as practicing.
    It needs lot of practice and dedication to need web designing work.

    Gud Luck!
    {{ DiscussionBoard.errors[6999260].message }}
  • Profile picture of the author locke815
    [DELETED]
    {{ DiscussionBoard.errors[6999365].message }}
    • Profile picture of the author samward
      [DELETED]
      {{ DiscussionBoard.errors[6999833].message }}
  • Profile picture of the author energetic88
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[7000464].message }}
    • Profile picture of the author asc
      Originally Posted by energetic88 View Post

      use wordpress will be help
      Thanks for the pointer...but i am fairly comfortable with wordpress, it is more HTML structure i am struggling with to be honest
      {{ DiscussionBoard.errors[7000702].message }}
  • Profile picture of the author shantanu
    basic should be there and i hope Tstan Horvath Sir showed you a path for success that how to make your website perfectly..............
    {{ DiscussionBoard.errors[7001430].message }}
  • Profile picture of the author Istvan Horvath
    1. Any image to be shown here MUST be hosted somewhere on the net - e.g. on your site.

    2. That "last bit" means that most people talk back endlessly without ever trying to apply what is offered in help replies... and my willingness to help those people is equal to zero.

    3. Even if you are working with hand-made HTML files - you should have a basic template for the site (consistency in design is a must). Which means you should not mess with the basic layout when you need something different - but with the specific div/element in that page: in your case an inside div with the contact info.

    4. Lots of good advice above by Ronco, especially, 2nd paragraph!
    Signature

    {{ DiscussionBoard.errors[7001464].message }}
    • Profile picture of the author asc
      Originally Posted by Istvan Horvath View Post

      1. Any image to be shown here MUST be hosted somewhere on the net - e.g. on your site.

      2. That "last bit" means that most people talk back endlessly without ever trying to apply what is offered in help replies... and my willingness to help those people is equal to zero.

      3. Even if you are working with hand-made HTML files - you should have a basic template for the site (consistency in design is a must). Which means you should not mess with the basic layout when you need something different - but with the specific div/element in that page: in your case an inside div with the contact info.

      4. Lots of good advice above by Ronco, especially, 2nd paragraph!
      Hi, thanks for the reply again.

      1. I did not know this! Does that mean you could not view the attachment? I have the domain and did have content on there..i basically made this site for a college project, and botched it together and now am trying to remake it with 'proper' coding and with more understanding. I can put my site online if that would be more useful for feedback? Just didnt do that as it looks messy and clear that i am still a bit lost..

      2.All the feedback you have gave me so far has been acted on, and fully appreciated! If you like once completed i can send you a link for the site to see changes? Just to show you it is appreciated more than just given lip service

      3. Thanks, yes i think this is how i will approach this next time from scratch...i have already copied the structure from the others to one another now, although the css could be more generic..something i will look at too.

      4.Ronco and you have been very helpful, one milllion thanks!!

      Alan
      {{ DiscussionBoard.errors[7001894].message }}
  • Profile picture of the author TheDudeAbides
    I believe codeacademy.com has a course on web design. I'd highly recommend you check the out. They make learning interactive and fun, and I've really enjoyed their programming courses.
    {{ DiscussionBoard.errors[7004589].message }}
    • Profile picture of the author asc
      Originally Posted by TheDudeAbides View Post

      I believe codeacademy.com has a course on web design. I'd highly recommend you check the out. They make learning interactive and fun, and I've really enjoyed their programming courses.
      Never heard of this before...initial impression is it looks ace! Kudos for the link!
      {{ DiscussionBoard.errors[7005574].message }}
  • Profile picture of the author gillederman
    If you are in initial stage then visit w3school.This website will teach you the basic techniques to create a website.And if you are asking about the software for developing a website then use dreamweaver.
    Signature
    {{ DiscussionBoard.errors[7004999].message }}
    • Profile picture of the author asc
      Originally Posted by gillederman View Post

      If you are in initial stage then visit w3school.This website will teach you the basic techniques to create a website.And if you are asking about the software for developing a website then use dreamweaver.
      No not asking about software..i am familiar with dreamweaver and a few of the other adobe products, although i cant justify the price tag that comes with them so i am working on far lower level software than the newest, cs3..but with text editors i dont think the version overly matters?? I am a bit more comfortable now with notepad or notepad ++ to be honest. Thanks for the input though
      {{ DiscussionBoard.errors[7005583].message }}

Trending Topics