co.ador Posted August 27, 2009 Share Posted August 27, 2009 Guys help me to improve this website code and design as well for a website. I am not that good a html and xhtml and i want to know what's more functional in terms of building websites.. i want the code to look more like in the picture sample I have give you below plus your outputs guys give some ideas on how this design could be more appealing and look more standard and unique as well, " pretty" sample: http://img31.imageshack.us/img31/886/shoereviewpagedesign1.gif Code: <table width="100%" border="0" cellspacing="0" cellpadding="0" class="reviewdetails"><td colspan="3" class="reviewdetails"><table><td height="133" rowspan="4" colspan="2"><table width="470" height="29"><td width="281" height="23">Suggestions, Rating and Review:</td> <td width="177" style="font-size:12px;">Nike air Jordan</td> </table></td><td height="3"></td><tr><td height="3"></td></tr> <tr><td width="165" height="15" style="padding-left:6px;">Rating:</td> <td style="padding-left:6px; position:relative; top:23px;" colspan="4"> ----- </td> </tr> <tr><td height="21" style="padding-left:6px;">Price:</td> <td style="padding-left:2px;" colspan="4">$70.90</td> </tr><td width="227" height="21" colspan="1"> </td> <td colspan="4"><tr><td style="border:2px solid;" colspan="2">Healthy suggestions</td> <td colspan="4" style="border:2px solid;"><table width="64%"><td width="5%" style="padding-left:6px;">Rate:</td> <td width="40%" style="font-size:12px;"> Nike air Jordan</td></table></td> </tr> <td height="48" rowspan="2"> </td> <td height="48" rowspan="2"> </td><td height="23"> </td><td height="23"> </td><td height="23"> </td> <tr><td width="165"> </td> <td width="144"> </td> <td width="44"> </td> </tr> <tr> <td rowspan="4">Description of Comfort level:</td><td width="241" colspan="1" rowspan="4"> <form id="form1" name="form1" method="post" action=""> <textarea name="strength level" id="strength level" cols="25" rows="5"></textarea> </form> </td> <td width="165" height="66">Rate:</td> <td width="144">-------</td> <td width="44"> </td> </tr> <td height="49" colspan="3" style="border:2px solid ;">Seasoning Suggestions:</td><tr><td width="165" height="26"> </td> <td width="144"> </td> </tr> <tr> <td width="165" height="50">Describre your like about the shoe:</td><td rowspan="2"><form id="form3" name="form3" method="post" action=""> <label for="taste averal"></label> <textarea name="taste averal" id="taste averal" cols="20" rows="5"></textarea> </form> </td><td> </td></tr> <tr><td height="21" rowspan="2">Description of energy level:</td> <td rowspan="2"> <form id="form2" name="form2" method="post" action=""> <textarea name="energy level" id="energy level" cols="25" rows="5"></textarea> </form> </td><td rowspan="1"> </td><td height="45"> </td> <td width="68" height="45"> </tr> <tr> <td>Shoes Resistance:</td> <td rowspan="2"><form id="form4" name="form4" method="post" action=""> <label for="level of satl"></label> <textarea name="level of satl" id="level of satl" cols="20" rows="5"></textarea> </form> </td> <tr><td width="227"> </td> <td width="241"> </td> <td width="165"> </td> </tr><td colspan="6"> </td> <tr> <td width="227" height="45">How does it make you feel:</td> <td width="241"><table><td width="97"><form id="form5" name="form5" method="post" action=""> <input name="textfield" type="text" id="textfield" size="10" /> </form> </td> <td width="91"><form id="form6" name="form6" method="post" action=""> <label for="time"></label> <input name="time" type="text" id="time" size="12" /> </form> </td></table></td> <td width="165">Do you regret buying the shoes:</td> <td width="144"><form id="form9" name="form9" method="post" action=""> <label for="Vinager level"></label> <input type="text" name="Vinager level" id="Vinager level" /> </form> </td> <td width="44"> </td> </tr> <tr><td width="227"> </td> <td width="241"> </td> <td width="165"> </td> <td width="144"> </td> </tr> <tr> <td width="227">What's the purpose you use it for:</td> <td width="241"><form id="form7" name="form7" method="post" action=""> <label for="time"></label> <input name="time" type="text" id="time" size="12" /> </form></td> <td width="165">Describe shoes materials:</td> <td width="144"><form id="form11" name="form11" method="post" action=""> <label for="appearance"></label> <input type="text" name="appearance" id="appearance" /> </form> </td> </tr> <tr><td width="227"> </td> <td width="241"> </td> <td width="165"> </td> <td width="144"> </td> </tr> <td width="227" height="81">How long have you used:</td> <td width="241"><table><td width="97"><form id="form8" name="form8" method="post" action=""> <input name="textfield" type="text" id="textfield" size="10" /> </form> </td> <td width="91"><form id="form10" name="form10" method="post" action=""> <label for="time"></label> <input name="time" type="text" id="time" size="12" /> </form> </td></table></td> <td width="165">Appearance:</td> <td width="144"><textarea name="seasoning level" cols="20" rows="4"></textarea></td> <td width="44"> </td> </tr> <tr><td width="227"> </td> <td width="241"> </td> <td width="165"> </td> <td width="144"> </td> </tr> <tr><td width="227"> </td> <td width="241"> </td> <td width="165">Critic Shape and Form:</td> <td width="144"><form id="form12" name="form12" method="post" action=""> <label for="flavor"></label> <textarea name="flavor" id="flavor" cols="20" rows="5"></textarea> </form> </td> </tr> <tr><td width="227" style="border:2px solid ;">Cons and Pros Reviews:</td> <td width="241"> </td> <td width="165"> </td> <td width="144"> </td> </tr> <td colspan="4"> </td> <tr> </tr> <td height="35" colspan="4"> </td> <tr> <td height="171"><table width="228" height="61"><td width="161" height="21" > </td> <td width="32">Pros:</td> <td width="19"> </td> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> </table></td> <td colspan="3"><textarea name="Pros" cols="65" rows="7"></textarea></td></tr> <tr> <td><table width="228" height="61"><td width="161" height="21" > </td> <td width="32">Cons:</td> <td width="19"> </td> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> </table></td> <td colspan="3"><textarea name="Cons" cols="65" rows="7"></textarea></td></tr> </table> Thank you guys Quote Link to comment Share on other sites More sharing options...
sawade Posted August 27, 2009 Share Posted August 27, 2009 OKay wow. No offense, but I got way confused trying to read your code. Try comment tags to make it easier to read not just for other people but for yourself as well. Also, one word. CSS. I have your code, and am sifting through it. I'll let you know when I have something for you. Quote Link to comment Share on other sites More sharing options...
sawade Posted August 27, 2009 Share Posted August 27, 2009 Guys help me to improve this website code and design as well for a website. I am not that good a HTML and HTML and i want to know what's more functional in terms of building websites.. Okay, here is the code. Use CSS to make it pretty (IE: add borders, changes font size, colors etc.) Everyone has their own preference in reference to HTML or XHTML. I personally use XHTML since sooner or later HTML will be completely a thing of the past and I'd rather not have to relearn anything when it does happen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { width: 800px; margin-left: auto; margin-right: auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; } table { width: 100%; } th { vertical-align: top; } #column { float: right; width: 40%; padding: 5px; margin: 5px; } #content { width: 40%; padding: 5px; } #reviews { width: inherit; } </style> </head> <body> <div id="body"> <!--Overview--> <table id="overview" summary=""> <tr> <th rowspan="2">Suggestions, Rating and Review: </th> <td rowspan="2">Nike air Jordan </td> <th>Rating: </th> <td>---- </td> </tr> <tr> <th>Price: </th> <td>$70.90 </td> </tr> </table> <!--Summary--> <div id="column"> <table id="" summary=""> <tr> <th>Rate: </th> <td>Nike Air Jordan </td> </tr> <tr> <th>Rate: </th> <td>Insert image/script for rating </td> </tr> <tr> <th colspan="2">Seasoning Suggestions </th> </tr> <tr> <th>Describe your like about the shoe: </th> <td><textarea name="positive" rows="10"></textarea> </td> </tr> <tr> <th>Shoe resistance: </th> <td><textarea name="resistance" rows="10"></textarea> </td> </tr> <tr> <th>Do you regret: </th> <td><textarea name="regret" rows="5"></textarea> </td> </tr> <tr> <th>Describe show materials: </th> <td><textarea name="materials" rows="5"></textarea> </td> </tr> <tr> <th>Appearance: </th> <td><textarea name="appearance" rows="5"></textarea> </td> </tr> <tr> <th>Critic Shape and Form: </th> <td><textarea name="critic" rows="5"></textarea> </td> </tr> </table> </div> <div id="content"> <table id="" summary=""> <tr> <th colspan="2">Healthy Suggestions </th> </tr> <tr> <th>Description of Comfort level: </th> <td><textarea name="comfort" rows="10"></textarea> </td> </tr> <tr> <th>Description of energy level: </th> <td><textarea name="energy" rows="10"></textarea> </td> </tr> <tr> <th>How does it make you feel: </th> <td><textarea name="feel" rows="5"></textarea> </td> </tr> <tr> <th>What was the purpose: </th> <td><textarea name="purpose" rows="5"></textarea> </td> </tr> <tr> <th>How long have you used: </th> <td><input name="used" type="text" size="25" /> </td> </tr> </table> </div> <!--Reviews--> <div id="reviews"> <table id="" summary=""> <tr> <th colspan="2">Pros and Cons Reviews </th> </tr> <tr> <th>Pros: </th> <td><textarea name="pros" rows="20" cols="80"></textarea> </td> </tr> <tr> <th>Cons: </th> <td><textarea name="cons" rows="20" cols="80"></textarea></td> </tr> </table> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
webdevelopment Posted September 3, 2009 Share Posted September 3, 2009 Hello, I have the following block of code that changes an image when a link is rolled over. I just call each function with onMouseOver and onMouseOut. I am sure there is a better way to do this, what do you suggest? Code: //this function find the particular image within the document and swaps an //image function swapImage1() { var newImage =... Read more.... Web Development, Web Design, Web Application Development Quote Link to comment Share on other sites More sharing options...
sawade Posted September 3, 2009 Share Posted September 3, 2009 Hello, I have the following block of code that changes an image when a link is rolled over. I just call each function with onMouseOver and onMouseOut. I am sure there is a better way to do this, what do you suggest? Code: //this function find the particular image within the document and swaps an //image function swapImage1() { var newImage =... Read more.... Web Development, Web Design, Web Application Development Okay, I don't know if this question was directed to me or not... One thing, I see that can limit your accessibility to your clients. You are using a javascript navi menu. If the user does not have javascript enabled they will not see it. Second thing, validating your code you have 57 errors as XHTML Transitional. Which brings up a question, why are you using transitional? You can say 'because I want to butt out' that's fine. Third thing, think of a webpage as a building. You first need to construct a foundation and internal structure. This is what (x)html is for. With (x)html you should have a completely blank and rather ugly site when you are done. Think of when you first walk into a finished building, it has walls and order, but it's all concrete floors and white walls. Boring right. This is were CSS comes in. Anything that you would hire a designer to come do at the building is what you would use CSS for in a webpage. If you want purple carpets and green wallpaper, bring in the CSS. Do not use the construction crew to do, since they will probably get it wrong. PS: The mouseover thing you were talking about, can be handled easily with CSS. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.