Website Design

Discussion in 'General Off-Topic Chat' started by H8TR, Oct 2, 2007.

  1. H8TR
    OP

    H8TR GBAtemp Advanced Fan

    Member
    796
    0
    Oct 22, 2006
    Canada
    t-Dot
    How do you make websites so that no matter how large the web browser window may be, the background adapts to it. An example is Wiikey.cn. No matter how small or large your window is, the content of the page is always centered and the background always adapts to your windows size. I prefer to work in Dreamweaver CS3 but will try anything else you suggest. Is it CSS or some next type of HTML?
     


  2. rhyguy

    rhyguy GBAtemp Maniac

    Member
    1,377
    0
    Jul 21, 2007
    Melbourne
    well, if you examined the source code, you could know, but i believe that the background is a one that repeats infinitely to the right, and the text bit is probably placed in a centered div

    edit:to do this, type in
    CODE Junk here
    iirc
     
  3. Little

    Little I r Little

    Member
    1,227
    11
    Nov 20, 2006
    England
    The best thing to do is take a look at exisiting examples so you can get your head around it [​IMG]


    Using Wiikey.cn's source we can see that theres nothing relating to the back ground in HTML but we can see that they have a CSS file (or three).
    CODE

    Quick visit to http://www.wiikey.cn/css/layout.css and we can take a peak at their CSS.

    Code:
    body
    {
    ÂÂÂÂfont-family:Verdana, Arial, Helvetica, sans-serif;
    ÂÂÂÂfont-size:13px;
    ÂÂÂÂcolor: #464646;
    ÂÂÂÂbackground-image:url(../images/background_main.png);
    ÂÂÂÂmargin: 0px;
    }
    
    #top {
    ÂÂÂÂbackground-image:url(../images/background_top.png); 
    ÂÂÂÂbackground-repeat: repeat-x; 
    ÂÂÂÂwidth:100%; 
    ÂÂÂÂheight:132px
    }
    From that we can see the technique they've used.... the whole of the background is the blue part, which is just a repeating pattern that by default is tiled...

    [​IMG]

    Then they have the orange part repeated over the X axis only [​IMG]

    [​IMG]

    There are lots of techniques for creating similar effects too.
    For the centre they just have a Div that is centered and everything else is contained within that =)
     
  4. WeaponXxX

    WeaponXxX Too F'in Blonde

    Member
    2,868
    2
    Nov 4, 2004
    United States
    Currently in Chicagoooooooo
    In dreamweaver click the main table and then right click, align, center
     
  5. XeroRestraint

    XeroRestraint GBAtemp Regular

    Member
    111
    0
    Jan 29, 2007
    United States
    Booo - bad advice.

    [​IMG] Don't use tables for layout - use DIVs!

    Tables are for tabular data - not layout. Using tables for layout results in non-standards compliance.

    Learn CSS, use CSS & DIVs for layout.

    Tables for layout is so 1995 [​IMG]
     
  6. JPH

    JPH Banned

    Banned
    6,892
    10
    Jul 11, 2006
    United States
    Yes, I was also wondering that question.

    I've got an HTML class coming up soon that could probably answer my questions and help me learn more about creating web sites...

    I figure if I start now (at the age of 14), I could be so much better when I'm older and maybe have a career in Web Design.

    Well...I'm gonna stop babbling - I know you don't care [​IMG]
     
  7. rhyguy

    rhyguy GBAtemp Maniac

    Member
    1,377
    0
    Jul 21, 2007
    Melbourne
    lol, i'm 13 now and i learnt html/css on ...neopets(lol)
    i know alot of it pretty well
     
  8. iffy525

    iffy525 not famous

    Member
    751
    2
    Jul 18, 2007
    United States
    wow [​IMG]
    maybe i should do neopets
     
  9. Switchy

    Switchy GBAtemp Fan

    Member
    369
    0
    Aug 19, 2007
    Belgium
    Meh, I studied Webdesign but I'm not getting anywhere in the professional world!
    Here, they always have something specific you should know, which I happen to not know. *grumbles* Besides, there always seems to be a bigger nerd out there than me [​IMG]

    Anyways, you can get this with frames as well.
    Three columns:
    size="*" / size="whatever floats your boat" / size="*"


    The size="*" is used to change according to the room that is left.
     
  10. Little

    Little I r Little

    Member
    1,227
    11
    Nov 20, 2006
    England
    Switchy did you know that frames are technically illegal in most countries if your website is offering a public service? They break quite a few disability laws because of their incompatibility with special browsers and text to speech programs.

    Seriously move away from tables and frames for layouts. HTML with CSS is what you need.
    You have to separate content and design as much as possible.
     
  11. rhyguy

    rhyguy GBAtemp Maniac

    Member
    1,377
    0
    Jul 21, 2007
    Melbourne
    wait, bad coding is illegal? [​IMG]

    anyway, divs are the best way to keep stuff organised
     
  12. legendofphil

    legendofphil Phil no Densetsu

    Member
    2,214
    2
    Nov 19, 2002
    Frames aren't illegal as they don't break any laws, same with flash. It is just a set of highly recommended suggestions, its unfair to those people.

    IMO frames and flash are crap anyway, any use of flash should be keep to a minimum and always backed up with a text based alternative.

    Tables are really good IMO, providing you use them right, my site is done using tables because CSS has a few major flaws when it comes to placement.
    First it wouldn't work in IE, then it would ONLY work in IE [​IMG].
     
  13. Switchy

    Switchy GBAtemp Fan

    Member
    369
    0
    Aug 19, 2007
    Belgium
    I did not know about it being "illegal" but tables are much better for people who just want to make a site for themselves, or to start.

    It's the easiest way for a beginner imo.
     
  14. superrob

    superrob H4X H4X H4X!

    Member
    2,465
    3
    Apr 4, 2007
    GBATemp factory.
    I dont like DIV's they screw op my designs [​IMG]

    I like to setup my webdesigns with tabels.
    Its easy and good [​IMG]
     
  15. Szyslak

    Szyslak Nudibranch Lover

    Member
    1,442
    1
    Oct 31, 2006
    United States
    NY
    [​IMG] Now you're just making me feel old.


    OT: learn how to do it in more than one way [​IMG]
     
  16. Little

    Little I r Little

    Member
    1,227
    11
    Nov 20, 2006
    England
    Psst as I said, because of disability laws in a lot of countries, anything that counts as a public service has to be accessible by everyone... including those with disabilities. Just like a person who can not walk may use a wheelchair and needs stair free access to buildings, a person who can not see may use a special web browser with text to speech. Just because a website is virtual doesn't mean it isn't under the same laws, in fact that is a segment of most disability laws directly relating to websites and virtual content. Frames are not compatible with any existing disability browsers and hence not providing some form of other access that is compatible for that public service, is illegal.
     
  17. Szyslak

    Szyslak Nudibranch Lover

    Member
    1,442
    1
    Oct 31, 2006
    United States
    NY
    Right, but those laws wouldn't really apply to any kind of personal website (and I would doubt there's much enforcement of it on public service websites).

    For the same reason that I don't need wheelchair access to the front door of my home, I could use frames & tables on my own website if I wanted to. I'm not saying it would be considered good practice anymore, but it wouldn't be illegal either.

    BTW, I just re-read your qualifying statement "...if your website is offering a public service", and I guess that would be the key condition. But what would qualify your website as "offering a public service", and who would decide that? Seems like a rather gray area to try to enforce a law.

    Just to examine the flip side, why isn't it against the law to provide special browsers or text to speech programs that can't handle frames? Isn't that also limiting the access of the disabled to a large amount of existing web content? Sounds silly I know, but why is the onus placed on the website designer and not the software provider?

    I would end this post with some type of smiley, but I wouldn't want to get arrested.
     
  18. XeroRestraint

    XeroRestraint GBAtemp Regular

    Member
    111
    0
    Jan 29, 2007
    United States
    Not sure what you meant by that since tables were officially added to HTML spec 3.20 in early 1996. Perhaps this should have made you feel young?
     
  19. XeroRestraint

    XeroRestraint GBAtemp Regular

    Member
    111
    0
    Jan 29, 2007
    United States
    It's not that screen readers can't "handle" frames or tables, it's that then structural markup (HTML) cannot tell them what order to "read" them other then left to right, top to bottom. This is not a problem for tabular data that is meant to be read that way but when tables are used for HTML layout they typically employ empty cells, spacer images, and an out-of-logical order data flow. Further, frames do not declare a logical order in their markup, nor is one implied at all.
     
  20. Szyslak

    Szyslak Nudibranch Lover

    Member
    1,442
    1
    Oct 31, 2006
    United States
    NY
    [​IMG] Not following you. The fact that my first websites were coded by hand and relied heavily on the use of tables for layout purposes (circa '95 - '96 or so), and that it is now over 10 years later, makes me feel old. Seeing "tables for layout" and the year "1995" makes me feel old. It also helps to illustrate how antiquated the technique is by now.

    AFAIK, in the US, the ADA laws only apply to government services. The federal and some state governments have to abide by the Section 508 laws and there are workarounds for most of it (ie making the info available through TTY or automated phone systems). There are no "laws" governing the coding techniques of the general populous. General guidelines, yes (as it should be).

    I get that, I just think it can also be viewed as a fundamental technical limitation of the interpreting software. A true reader would have a way to communicate the design of the page as rendered, not as coded.

    Look, I agree totally with you. CSS is the way to go, and no one in their right mind should be using frames in their web design. I just think it's interesting to discuss whether poor design decisions should be against the law.

    [​IMG] Cheers for providing some good info and helping me waste some time at work (which, thank god, is not web design)