Web Hosting Forums

Page 1 of 4 1 2 ... LastLast
Results 1 to 15 of 55

This is a discussion on I need a new layout! in the Hosting Talk & Chit-chat forum
I would like to re-design my website. I don't have a deadline in mind, because I would like to do a really good job with ...

  1. #1
    Aletia Customer
    Join Date
    Oct 2001
    Posts
    611

    I need a new layout!

    I would like to re-design my website. I don't have a deadline in mind, because I would like to do a really good job with it, and I have no idea how long it will take to complete. Over a year ago, when I was about to launch my last re-design, someone suggested that I add a constant navigational system. Someone else created a template for how it might look. I really liked the template. The problem was that my current design was almost complete, and I needed to get the site up and running quickly, because at that point, the site was almost unviewable, and doing what she suggested would have taken too long. So now I would like to start thinking about how to re-design the site and create a constant navigational system for it. Take a look at my current site, and then the template.

    I noticed that the template used tables in it's design, so I tried playing around with it, adding the approprite URL's, but that only opened up the resulting page into a new window. What I need to do is to find out how to integrate my existing site into that layout, or start from scratch and create a similar layout using other technologies. I don't want to use someone else's layout. I need to learn how to do it myself.

    Now, my question is, what is the best way go about this? I know there are several new ways to control the layout of a site that have been introduced in the last few years. Some terms that I have heard are CSS, DHTML, XTML and others. I don't really know what each of these do, but I would like to learn. I also know that it's possible to do layout with frames, tables and SSI. I use frames for another site, and I use tables for lists and things like that. I have also used SSI before on another site, and that worked fairly well. I do use CSS on my current site, but only to control font sizes, colors, and backgrounds.

    So, what do you think would be the best way to program my site to make it look similar to the template shown above. I have a feeling that the easiest would be to use SSI and to create a left and right html page, and to add the includes to the top and bottom of each of my pages. I know that there is not one right way to do it, so I am interested in hearing from any of you who can offer advice, or can tell me about your experiance using a particular technology. Anyone who has a web site can tell me what they use on their site.
    Last edited by Joshua Clinard; 01-19-2003 at 06:32 PM.

  2. #2
    Histerical, absolute
    Join Date
    Aug 2002
    Posts
    1,233
    Hi Joshua
    Well most (If not all) sites use tables to lay out there site and use CSS to format textual elements in the design

    For CSS i recommend getting a good book on the subject there are many to be had that will teach you the ins and outs of CSS and are easy to use (I cant really command one book because i have a book thats only sold in australia and isn't available outside of australia).

    Now i notice you have a blog style site.. (Blogger.com <- have a look at it they can take the work out of posting info on your site)
    YOu might want to try making a site in photoshop if you have it

    You can use DHTML for animation effects and other such stuff and i would recommend a good book again

    Yeah you can use SSI for any info you want to use SSI with place the information in a text file and call that
    All opinions are the result of being uninformed, unintelligent and uninterested!

  3. #3
    Community Leader jason's Avatar
    Join Date
    Sep 2001
    Location
    Rochester, NY
    Posts
    5,884
    I would caution you against using frames, as a lot of designers consider them to be bad design. I prefer to avoid them, although they do sometimes have thier place. I've done a couple sites with frames, but all-in-all, I don't care for them. The biggest problem with them is bookmarking--in some browsers if you try to bookmark a page in a framed site you will bookmark the frameset only (the page that defines the frames) instead of the current state. What that means is that every time someone bookmarks your site they'll bookmark your home page and not the page they are trying to bookmark.

    A lot of designers also say not to use tables for layout. The table tag was created for organizing data in spreadsheet form, not for laying out your design. The "new" way to do it is to use layers, but they can be a pain to use if you don't know how to use DHTML very well. Tables are still the easiest way to go, and I haven't had any major problems using them, especially if your site isn't very graphics intensive.

    CSS will allow you to set a lot of the look of your site outside of the html. It is useful for setting up colors, fonts, and a whole lot of other things. If you don't embed the css in the html file, but instead link the html to an external css file, then you can just update that file to change the look of your entire site. It can be very helpful if you want to change fonts or colors.

    Finally, with SSI you can create your site in parts. Sections that are the same on every page (like your navigation) can be put into a separate file, so again, when you want to make a change, you only have to do it once and the entire site is updated.

    The best way to go about leaning all of this stuff is just as Zacrifice said, find a good book (or books) on the subject. You can also search around on the web for tutorials to get you started. Of course, you can also ask here if you have specific questions you want answered and someone will be sure to help you out.

    Good luck with the site.

    --Jason
    Jason Pitoniak
    Interbrite Communications
    www.interbrite.com www.kodiakskorner.com

  4. #4
    Aletia Customer
    Join Date
    Oct 2001
    Posts
    611
    Thanks. I still would like some more imput about what to use. So I should cross out tables, and frames, eh? Ok. I don't know what a lot of those things I mentioned do, so I really need a primer about what they do, first of all, and their advantages and disadvantages, before I can decide which to use.

  5. #5
    Community Leader jason's Avatar
    Join Date
    Sep 2001
    Location
    Rochester, NY
    Posts
    5,884
    Well, I'd try and stay away from frames, but tables are OK to use in my opinion. But that's just my opinion. I'm redesigning my site right now, and I'm using tables for my layout, although I am considering making the change to layers. I haven't decided yet.

    Since you aren't sure of what you are doing, its probably best to just start off simple and build from there. If you jum into using DHTML, SSI, or advanced CSS and you aren't really sure of yourself, you'll quickly become overwhelmed and you'll get nowhere. Start off slow with basic HTML, and when you're comfortable with that, start looking at more advanced options. (Tables are the most basic way to control the layout on your site, so they may be the best way to go for you.)

    --Jason
    Jason Pitoniak
    Interbrite Communications
    www.interbrite.com www.kodiakskorner.com

  6. #6
    Aletia Customer
    Join Date
    Oct 2001
    Posts
    611
    Ok. I have no idea how to use tables to control layout. Can you point me to a site that will show me how. I already have three books on HTML, and none of them get into that, so if there is not a site that describes it, can you tell me the name of a specific book that would describe that.

    Any other's opinions are still welcome. Like I said, I will most likely not even start this project for a few months. I just want to decide what I'm going to use, and then start learning it.

  7. #7
    was loyal client until...
    Join Date
    Mar 2002
    Posts
    161
    If you are interested in laying out your page without relying on tables, see the links on the right at http://webstandards.org/act/campaign/buc/tips.html

    A couple of good places to get started learning CSS:
    http://www.westciv.com/ and
    http://www.richinstyle.com/

    There is some easy-to-implement dhtml at http://www.dyn-web.com/

  8. #8
    was loyal client until...
    Join Date
    Mar 2002
    Posts
    161
    (I meant to include these comments earlier.)

    If you are just learning html, css and web design in general, I would recommend against using tables for layout. Even though a lot of people still use tables for layout it is no longer the recommended way of doing things. Separating content from presentation is the way to go, I think. Using tables requires much more code and makes it more difficult to change your layout and design in the future.

    See http://www.alistapart.com/stories/practicalcss/ and the links on the right there for more on avoiding tables.

    If you design using basic html tags (paragraphs, headings, lists, etc) and combine that with CSS, your documents will be much smaller and much easier to modify.

    One good reason for using tables is that it's much easier to layout your documents so that they look exactly the same in all browsers. With CSS that is much more difficult since older browsers have limited support for style sheets. Many people recommend designing for standards-compliant browsers (recent versions of both Internet Explorer and Netscape, as well as Opera and a few others) and degrading gracefully in older browsers.

    I take a sort of middle-of-the-road approach on my site. ( http://www.dyn-web.com/ ). I separate content from presentation but try to make it all look almost the same in all browsers. Not easy, but possible, up to a point. (Since mine is a dhtml site, quite a few people come with older browsers checking for code compatibility.)

  9. #9
    Aletia Customer
    Join Date
    Oct 2001
    Posts
    611
    I noticed you use the DIV tag in your page. Am I correct in understanding that this tag can control layout? I think I'd like to take that approach. The thing is, My HTML book only tells how to format the stye of what appears in the DIV area, such as background color, and font size. Not placement on a page and size, which is what I want to use it for. Can you tell me if I am correct in my understanding of this tag, and how to use it to do what I want.
    Last edited by Joshua Clinard; 01-20-2003 at 07:40 PM.

  10. #10
    Histerical, absolute
    Join Date
    Aug 2002
    Posts
    1,233
    Get a good book on HTML first.. (Altho i personally have never read it you might want to try HTML bible)
    It seems you only know the pure basics and now you wanna learn more so read books.. learn HTML first and formost

    Learn how to use things to your advantage once you understand HTML and you are confident in using it get a good book on CSS learn CSS untill your confident with that.. then get a good book on something else and learn that!

    I learnt from a really really good HTML tutuorial online it went through everything that you needed including frames and tables.. I'll have a look for it and see if its still online!
    All opinions are the result of being uninformed, unintelligent and uninterested!

  11. #11
    Histerical, absolute
    Join Date
    Aug 2002
    Posts
    1,233
    K i found it

    http://www.pagetutor.com/tack/toc.html

    to to (and click on) "So, you want to make a Web Page!"
    http://www.pagetutor.com/pagetutor/makapage/index.html

    (READ IT YOU WILL LEARN.. I DID)
    They used to have a downloadable format which is what i used I learnt HTML Tables Forms Frames in about two hours when i learnt that.. never forgotten it either! Very easy too i think everyone wanting to learn HTML should use this tutorial!
    All opinions are the result of being uninformed, unintelligent and uninterested!

  12. #12
    Aletia Customer
    Join Date
    Oct 2001
    Posts
    611
    I have two HTML books. Actually I had 3 but I gave HTML for dummies to a friend. Now I have HTML 4 Bible 2nd edition, and Using HTML 4. Neither of them explained the DIV tag very effectively.

    I played around with that template a little more and came up with this

    By the way, I don't use blogger, I use b2 a much better script in my opinion. I used Blogger about a year ago for several months, but I never could get it integrated with my layout. I had to link to the page from the main page.
    Last edited by Joshua Clinard; 01-20-2003 at 08:11 PM.

  13. #13
    Histerical, absolute
    Join Date
    Aug 2002
    Posts
    1,233
    Oh kewl you can download it now.. do that

    http://www.pagetutor.com/download.html
    much easyer to learn while offline (Nothing to distract you)
    All opinions are the result of being uninformed, unintelligent and uninterested!

  14. #14
    Histerical, absolute
    Join Date
    Aug 2002
    Posts
    1,233
    Forget the DIV tag for now getting ahead of yourself learn HTML completly so that you can use tables and all that confidently!
    All opinions are the result of being uninformed, unintelligent and uninterested!

  15. #15
    was loyal client until...
    Join Date
    Mar 2002
    Posts
    161
    About the div tag. Yes, div tags are used to control the position of blocks of document content.

    Here are the style specifications for the main sections in my site template, all contained in divs.

    #content {
    position:absolute;
    left:156px; top:68px;
    width:660px;
    z-index:1
    }
    #navs { /* left sidebar site nav links */
    position:absolute;
    left:16px; top:68px;
    width:125px;
    z-index:2;
    }
    #logo {
    position:absolute;
    left:142px; top:0px;
    width:660px;
    z-index:3;
    background-color:#ececec; layer-background-color:#ececec;
    padding:8px 0 0 14px
    }


    Generally, if one is coding for standards-compliant browsers, one would use margins instead of absolute positioning. But since I am still trying to get Netscape 4 cooperation (at least I was when I most recently changed the layout), absolute positioning is what I chose. (layer-background-color is for ns4)

    Take a look at http://www.scottandrew.com/ . His layout looks similar to your template, but he uses divs, no tables, and margins instead of absolute positioning. He uses @import in the style sheet, which older browsers can't read, so their layout would be very plain.
    Last edited by shwn; 01-20-2003 at 08:29 PM.

Page 1 of 4 1 2 ... LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •