Adblock breaks this site

TDD's Web Design Series - Part 2, Thought behind it

Discussion in 'Guides' started by TDD, Apr 23, 2008.

Thread Tools

Thread Tools

  • Thread ID:
  1. TDD

    TDD Web Design Expert
    Do Not Trade

    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0
    TDD's Web Design Series - Part 2, Thought behind it
    Alright, i've got some time and i don't feel like designing so i'll do part 2 right now.

    Let's learn some things we need to always keep in mind when it comes to web design:

    -Logical Order
    -Commenting
    -CSS intro

    Logical Order
    tags
    When designing it's best to use logical order, it makes more sense to have your headings in heading tags, and your content in paragraph tags, versus putting headings in div tags, and content in heading1 tags.

    So when designing, always think about the logical order of things, put information in the relative tags, don't put them in the illogical tags.

    information position
    When sorting your information in the HTML document it makes sense to show it in the HTML as it is shown to the user, have it flow from top down in the HTML and have it flow from top down on the page.

    Commenting
    Comment your work, this is extremely vital, it will definately help you in your work, commenting in xHTML is
    HTML:
    <!-- comment goes inside here -->
    use comments for things like the closing of div tags, if you have a div tag open, comment where it closes, for example, you've got:
    HTML:
    <div id="hello">
</div><!-- end of hello -->
    you now know that that close tag is for that specific div "hello".

    when commenting in CSS, you comment like this:
    HTML:
    /* Comment goes here */
    it's also useful to use comments to explain things you might forget later, a html comment can be as long as you want, just remmember to close it, and to not put tags inside of it, they will be ignored by the browser.

    _________________________________________________________________________________________________________________________________________

    CSS Introduction

    CSS - Cascading Style Sheet
    The point of CSS is to seperate the styling (look) from the content in a xHTML document, it is a valuable tool and allows us to make some very beautiful designs.

    How to declare CSS in xHTML
    First of all, we have to tell the xHTML document that we'll be using an external css document, so we put the following code inside the <head> area:
    HTML:
    <link rel="stylesheet" href="style.css" media="screen, projection" />
    Basically, it says it's a stylesheet, it's location (href) is the same place as the document, but it's called 'style.css' and the media it is to be shown for is a monitor and projections.

    so now we've done that, we'll make a new document, called style.css, in the place of the HTML document. You can do this by just renaming a notepad text file to "style.css" instead of "whatever.txt", from this file we can control the layout of the HTML document.

    CSS Basics
    in your CSS is a completely different markup style from the xHTML document, we not longer have TAGs but RULES, which go as follows:

    identifier {
    style: value;
    }

    so if we want to style every single <p> tag in a xHTML document to have the text color white, we could use this:
    p {
    color: #ffffff; /* #ffffff is the hex color for white */
    }

    that would set all the <p> tags to have white text, but what if we want to have ONLY the <p> tags inside a <div id="hi"> to have that color text? well we can use hierarchy inside the css:

    #hi p {
    color: #ffffff;
    }

    only the <p> that are INSIDE a <div id="hi"> will be affected by that CSS rule. also note the # in the front of the hi, this is the CSS way to declare an id, <div id="hi"> is div#hi in the CSS, or just #hi. the same is for <div class="hello"> the css would be div.hello or .hello

    next lesson will be an explanation of css styling options, and how CSS and Divs work together.
     
    TDD, Apr 23, 2008
    #1
  2. Byrdman--1-7

    Byrdman--1-7 Member
    Banned

    Joined:
    May 1, 2008
    Posts:
    59
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design Series - Part 2, Thought behind it
    thanks man your guides help a lot
     
    Byrdman--1-7, May 1, 2008
    #2
  3. joking

    joking Apprentice
    Do Not Trade

    Joined:
    Nov 9, 2007
    Posts:
    736
    Referrals:
    3
    Sythe Gold:
    0
    TDD's Web Design Series - Part 2, Thought behind it
    nicely put together and very helpful guide.
     
    joking, Aug 30, 2008
    #3
  4. mcbreezy

    mcbreezy Guest

    Referrals:
    0
    TDD's Web Design Series - Part 2, Thought behind it
    wowzers
     
    mcbreezy, Sep 12, 2008
    #4
  5. Noob!

    Noob! Forum Addict
    Banned

    Joined:
    Aug 29, 2008
    Posts:
    322
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design Series - Part 2, Thought behind it
    you guides just make somthing sooo complicated sound easy
     
    Noob!, Nov 3, 2008
    #5
< Deacon's WD Tutorials: Guide 1 | >


 
 
Adblock breaks this site