www.webdeveloper.com
Results 1 to 10 of 10

Thread: Help with the HTML code

  1. #1
    Join Date
    May 2012
    Posts
    6

    Help with the HTML code

    Hello,

    I am a noob at coding and developing websites. I have created a website template for a client and want to transfer the PSD template into HTML/CSS. I want to know what <div> class/ids I need and how to do it. I know HTML pretty well and learning CSS. I'd appreciate the tips that you can give me.

    Here is a JPEG version of the PSD.

  2. #2
    Join Date
    May 2012
    Posts
    6
    Edit: With the PSD, I'd also like to know what I need to slice.

  3. #3
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383

    divs

    i would recommend looking at the website in pieces. just by quickly looking i would say DIV-wise you'd want:

    #container

    #header-wrap
    .header

    #nav-wrap
    .nav

    #content-wrap
    .content

    #footer-wrap
    .footer

    i like to make sure i leave all options open which is why im using a wrapper for each ID and putting a class inside of it.

    for the navigation, i would use an inline UL, it will probably be easiest. you can find simple tutorials for it online.


    edit...you really don't need to slice anything except pulling out the images and header if you'd like. just use background colors.
    "Problems cannot be solved by the same level of thinking that created them.

  4. #4
    Join Date
    May 2012
    Posts
    6
    Thanks. Once I make the naked layout, how do I get background and the other stuff that I have on the webpage that I want (see JPEG for details)?

  5. #5
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    css would be your best bet if you don't mind the shade of red being slightly different per browser, not real noticeably though. CSS: background-color:#COLOR;, grab the hex color using the eyedropper in photoshop.

    if your nav has a shadow (seems like it but the jps is very low quality on the img hosting site) i would slice that out.


    heres a quick template i threw together:
    HTML Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
    a{}
    a:hover{}
    p{line-height:14px;margin:10px 0}
    #container{width:950px;height:auto;position:relative}
    #header-wrap{width:950px;height:200px}
    .header-img{float:left;width:300px;height:200px}
    .header-txt{float:left;width:6px;height:200px}
    #nav-wrap{width:950px;height:50px}
    #content-wrap{width:950px;height:auto}
    #footer-wrap{width:950px;height:100px}
    .header,.nav,.content,.footer{width:950px}
    </style>
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="header-wrap">
    	<div class="header"><div class="header-img"></div><div class="header-txt"></div></div>
    </div>
    
    <div id="nav-wrap">
    	<div class="nav">
    	<ul>
    	<li>Home</li>
    	<li>About</li>
    	<li>Contact</li>
    	</ul>
    	</div>
    </div>
    
    <div id="content-wrap">
    	<div class="content"><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p></div>
    </div>
    
    <div id="footer-wrap">
    	<div class="footer">asdasdasd</div>
    </div>
    
    </div>
    
    </body>
    </html>
    "Problems cannot be solved by the same level of thinking that created them.

  6. #6
    Join Date
    May 2012
    Posts
    6
    What parts of the PSD do I need to slice?

  7. #7
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    i would say slice out the images themselves(logo and church), then slice only about 2px wide of the navigation sliver with no text, then set it as a background image in the nav, then use the UL to create the navigation.. do you have firefox + firebug? if not i would suggest getting it. then you can look at code from other sites and see how they do it.

    the rest can be done with background colors and borders


    edit... youll have to adjust the dimensions of the DIV as necessary. i just chose random height and widths
    Last edited by absolutmgd13; 05-31-2012 at 01:32 PM.
    "Problems cannot be solved by the same level of thinking that created them.

  8. #8
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Online PSD to HTML Converters (Some Free):

    http://jadii.com/ (May be free)

    40 Options for Converting PSD to HTML - http://vandelaydesign.com/blog/desig...html-services/

    From PSD to HTML: Building a Set of Website Designs Step by Step: http://nettuts.com/site-builds/from-...-step-by-step/

  9. #9
    Join Date
    Jun 2012
    Posts
    1
    how can i set the frequency of the server sent events in html 5?

  10. #10
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    "Problems cannot be solved by the same level of thinking that created them.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles