Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using Templates? Dreamweaver

    Hi I have been using dreamweaver to design websites and it has been very useful. I was wondering what is a general template outline for a website as far as positioning, margins etc. I think it would help me alot make more websites if I got the general template format. Dreamweaver gives general formats but I find them a bit useless to use and better to go from scratch. Thanks

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    *** Layouts
    http://coding.smashingmagazine.com/2...t-one-for-you/

    fixed: set the content to 960px and use margin: auto;. this technique centers your content with a width of 960px (believed to be the "worst-case" scenario where the user's screen is or slightly greater than 960px").

    fluid: using % to create a page that is "full screen". this method works on all widths and heights and adjusts accordingly. one must create gutters to stall collapsing of elements, and is quite difficult for beginning developers. http://www.maxdesign.com.au/articles/liquid/

    elastic: using a base % font, then using ems for resizability options. using ems however I believe is a bit outdated now, since most browsers can px. http://www.alistapart.com/articles/elastic/


    *** Footers
    natural: let the footer naturally fall underneath the content

    sticky: stick the footer to the bottom of the page http://ryanfait.com/resources/footer...ottom-of-page/
    Last edited by Sammy12; 07-25-2011 at 06:35 PM.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Very Interesting. Please check my other link below regarding my webpage not displaying properly in IE9. I would like to know your views on the site I designed using Dreamweaver from scratch no template. www.philipsalon.com I just launched it.

    I checked your links briefly and read the pros and cons but wanted to see what you think of the site I created. Using a fixed layout as mentioned about where in the code would I put the "960px" etc values Thanks
    Last edited by xxnonamexx; 07-26-2011 at 12:54 PM.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    your site looks great man. The background images look like you took them in your backyard though

    script wise, your site is going to run in many more severe problems than ie9. you can't use position: absolute relative to the body. its going to display very differently in different browsers as well as computers. I would suggest that you use floats to make a website rather than absolute main elements

    ---

    I would suggest making a <h1> tag also.

    Many people don't think this is worth-while, but I actually think search engines are very picky about h1.

    Code:
    h1 {
     display: none;
    }
    Code:
    <h1>
     Philip Salon
    </h1>
    Last edited by Sammy12; 07-26-2011 at 06:34 PM.

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks but look now I had to make changes per client request now he doesn't like his changes lol. I need to revert them back to the way you viewed them when I posted. Hes driving me crazy with the home page hes making it not look like a nice website home page. I told him personally I do not like his taste of having no hair models how would one know its a salon lol. The images are all taken inside the salon.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    make a <div class="page"></div> right the body that wraps all your content

    Code:
    <body>
     <div class="page">
       <div class="appDiv">
       </div>
       <!-- Rest of Content Here -->
     </div>
    </body>
    Code:
    .page {
     width: 960px;
     margin: auto;
    }
    was your content centered or full screen. I can't remember. Just heed the warning, the page will have a lot of problems in the future

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You are a wealth of information and that is what I was afraid of browsers not liking each other. How do I go about placing what you mentioned? div class page do I place that script on top of each page as well as .page? Rest of content here is that where I place all of the website data? h1 tag only goes on each side of Philip Salon on each page? Thanks

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you place .page below the body tag, wrapping everything below it. it goes on every page, as well as the h1 tag

    Code:
    <body>
    <div class="page">
     <h1 style="display: none;">Philip Salon - Best hair care products</h1>
    <div id="apDiv24"><img src="Images/header.jpg" width="1100" height="310" border="3"></div>
    <div id="apDiv33"><img src="Images/philip salon outside.jpg" width="600" height="400"></div>
    <div id="apDiv42"><link rel="stylesheet" href="mbcsmb73g0.css" type="text/css">
      <script type="text/javascript" src="mbjsmb73g0.js"></script><div id="BtnMenuContainermb73g0"></div>
    <link rel="stylesheet" href="mbcsmb73g0.css" type="text/css">
    
    
    <ul id="mb73g0ebul_table" class="mb73g0ebul_menulist" style="width: 441px; height: 35px;">
      <li class="spaced_li"><a href="http://www.philipsalon.com"><img id="mbi_mb73g0_1" src="mb_home.gif" name="mbi_mb73g0_1" width="68" height="35" style="vertical-align: bottom;" border="0" alt="Home" title=""></a></li>
      <li class="spaced_li"><a href="http://www.philipsalon.com/aboutus.html"><img id="mbi_mb73g0_2" src="mb_about_us.gif" name="mbi_mb73g0_2" width="93" height="35" style="vertical-align: bottom;" border="0" alt="About Us" title=""></a></li>
      <li class="spaced_li"><a href="http://www.philipsalon.com/services.html"><img id="mbi_mb73g0_3" src="mb_services.gif" name="mbi_mb73g0_3" width="85" height="35" style="vertical-align: bottom;" border="0" alt="Services" title=""></a></li>
      <li class="spaced_li"><a href="http://www.philipsalon.com/products.html"><img id="mbi_mb73g0_4" src="mb_products.gif" name="mbi_mb73g0_4" width="90" height="35" style="vertical-align: bottom;" border="0" alt="Products" title=""></a></li>
      <li><a href="http://www.philipsalon.com/directions.html"><img id="mbi_mb73g0_5" src="mb_directions.gif" name="mbi_mb73g0_5" width="101" height="35" style="vertical-align: bottom;" border="0" alt="Directions" title=""></a></li>
    </ul>
    <script type="text/javascript" src="mbjsmb73g0.js"></script><div id="BtnMenuContainermb73g0"></div></div>
    <div id="apDiv43"><img src="Images/waterfire.jpg" width="208" height="313"></div>
    <div id="apDiv44"><img src="Images/chair.JPG" width="225" height="338"></div>
    <div></div>
    <div id="apDiv7"></div>
    <p>&nbsp;</p>
    </div>
    </body>
    Last edited by Sammy12; 07-26-2011 at 06:53 PM.

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So <div class="page"> after body on every page and <h1> above and below philip salon on every page?

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    <h1> in this case, should go below the page. it doesn't really matter, since it doesn't display on the page "display: none;". It's just for search engines. look at the code i provided earlier, that's the correct place

    ----

    also remember about

    Code:
    <meta name="keywords" content="hair, philip, salon"/>
    <meta name="description" content="Philip Salon provides excellent hair care..."/>
    The h1, and these <meta>s provide search optimization. These belong in the <head>.
    ----

    bro, you have <link rel="stylesheet"/> inside a div, it belong in the <head>. I believe any <style type="text/css"> as well as <link> css will not function for any html that is before it. that's why it belongs in the head
    Last edited by Sammy12; 07-26-2011 at 06:59 PM.

  • #11
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I made it in dreamweaver and I think they automatically applied it or as I made it they applied it.

    Did you ever work with Flash? www.massivetemplayes.com there are free flash templates. I would like to know what program (I use dreamweaver) do you go aboout editing to my style. I always wanted to give flash a shot from a template. Thanks

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    That made me smile I think you should try to make a page that passes w3 validation http://validator.w3.org/

    before moving on to something as difficult as flash. I use pnotepad which is a light weight notepad. I have dreamweaver, but it proves to be more of an annoyance than helpful

  • #13
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I thought with the flash templates all you had to do was change images and text? I know flash from scratch is hard but I just wanted to try a basic one.

  • #14
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The client now wants his website similar to this one http://www.warrentricomi.com/ more elegant, basic everything fitting on one page without scrolling ARGHHHH lol

  • #15
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yeah, you can try integrating a free one, but you should try to make a page that is correct before even integrating a flash piece, because embedding flash wrong will be detremental to a page

    you may not even be talking about flash, is this what you had in mind?

    http://www.google.com/search?rlz=1C1...ontent+sliders

    I would highly suggest you stick with the basics before moving onto flash or even integrating a free script (including the content slider link I provided you) I hope you realize that a site that is masterful in flash
    http://www.mcdonalds.com/us/en/promo...Smoothies.html
    was first masterful in html/css
    Last edited by Sammy12; 07-26-2011 at 07:11 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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