Страницы

вторник, 30 апреля 2013 г.

UI Developer. Тестовое решение.

На днях мне предложили попробовать свои силы в качестве разработчика интерфейсов. По правилам боя для начала необходимо было выполнить тестовое задание. Ограничений по времени нет. После первого знакомства с заданием у меня сложилось впечатление, что я решу вопрос за 4-5 часов. Плюс ефрейторский зазор итого максимум день, о чем я торжественно сообщил рекрутеру. Epic fail #1...


Текст инструкции к заданию:

UI Test Requirements
--------------------
- Markup and style the page design located in (\exercise\)
- '\page\' contains a predefined folder structure with HTML file and images
- '\exercise\' contains useful JPGs and Photoshop file representing the page to build
- '\exercise\page-text.css contains the text content to save you typing

Our expectations
-----------------
- Semantic Code
- Web Accessibility
- Text and site scalablity
- Good content usage and Layout
- Cross Browser Support (graceful degradation acceptable for older browser versions)
- Up to candidate whether to use HTML5 or not
- Add JavaScript validation to search box
- Expand/Collapse sub menu using JavaScript

Page to build:


Верстка. Для меня гораздо проще написать сотню-другую строчек скриптового кода, чем верстать HTML/CSS.
Но что делать - назвался груздем...

Приступим. Начнем с классических трех колонок. Временно зададим цвет колонок и высоту.
Вычислим ширину зазора средней колонки: (960 - 517 - 172 - 217 - 15 - 15) / 2 = 12px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style1.css" />
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header"></div>
   <div id="col_left"></div>
   <div id="col_center"></div>    
   <div id="col_right"></div>   
   <div id="footer"></div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px; background-color: #20b2aa; height: 90px;}

#col_left, #col_center, #col_right{float:left; overflow: hidden; background-color: #20b2aa; height: 350px;}
#col_left {width: 172px; margin-left: 15px;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px;} 

#footer {
 height: 45px; clear: both; margin: 0 4px; background-color: #20b2aa;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}

index1.html

Добавим в заголовок изображения.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style2.css" />
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <img src="images/site_logo.jpg" />
    <img src="images/site_header_ad.jpg" />
   </div>
   <div id="col_left"></div>
   <div id="col_center"></div>    
   <div id="col_right"></div>   
   <div id="footer"></div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px;}
#header img{float: left;}

#col_left, #col_center, #col_right{float:left; overflow: hidden; background-color: #20b2aa; height: 350px;}
#col_left {width: 172px; margin-left: 15px;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px;} 

#footer {
 height: 45px; clear: both; margin: 0 4px; background-color: #20b2aa;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}

index2.html

Попробуем обернуть изображения в ссылки.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style3.css" />
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <a href="http://www.wiley.ru/" target = "_blank"><img src="images/site_logo.jpg" /></a>
    <a href="http://www.wiley.ru/" target = "_blank"><img src="images/site_header_ad.jpg" /></a>
   </div>
   <div id="col_left"></div>
   <div id="col_center"></div>    
   <div id="col_right"></div>   
   <div id="footer"></div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px;}
#header img{float: left;}

#col_left, #col_center, #col_right{float:left; overflow: hidden; background-color: #20b2aa; height: 350px;}
#col_left {width: 172px; margin-left: 15px;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px;} 

#footer {
 height: 45px; clear: both; margin: 0 4px; background-color: #20b2aa;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}

index3.html

Откроем страницу в IE...

На самом деле я заметил косяк с IE уже после отправки тестового задания.
Последнее время больше всего хлопот мне доставлял Firefox, на счет IE я не сомневался. Epic fail #2...

Забудем про ссылки в заголовке. В условиях задачи о них речи не было. Займемся подвалом.
Рассчитаем ширину элемента, содержащего ссылки: 172 + 517 + 12 = 701px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style4.css" />
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <img src="images/site_logo.jpg" />
    <img src="images/site_header_ad.jpg" />
   </div>
   <div id="col_left"></div>
   <div id="col_center"></div>    
   <div id="col_right"></div>   
   <div id="footer">
    <div id="footer_href">
     <a href="http://www.wiley.ru/" target = "_blank">Privacy Policy</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Terms of Service</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Copyright</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Wiley.com</a>     
    </div>
    <div id="footer_logo">
     <a href="http://www.wiley.ru/" target = "_blank"><img src="images/wiley_logo.gif" /></a>
    </div>
   </div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px;}
#header img{float: left;}

#col_left, #col_center, #col_right{float:left; overflow: hidden; background-color: #20b2aa; height: 350px;}
#col_left {width: 172px; margin-left: 15px;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px;} 

/* footer */
#footer {
 height: 45px; clear: both; margin: 0 4px; padding: 10px 11px 0 11px;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}
#footer_href, #footer_logo{float: left;}
#footer_href{width: 701px; padding-top: 10px;}
#footer_logo{margin-left: 12px; width: 217px; text-align: right;}
hr{display: inline; margin: 0 3px 0 7px;}
/*----------*/

a{color: #0073a1;}
a:visited {color: #76a1b2;}

index4.html

Переходим к средней колонке. Добавим верхнюю часть (по имени journal), что осталось поделим пополам (назовем этот участок boxes).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style5.css" />
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <img src="images/site_logo.jpg" />
    <img src="images/site_header_ad.jpg" />
   </div>
   <div id="col_left"></div>
   <div id="col_center">
    <div id="journal">     
     <img id = "journal_image" src="images/BJOG_cover.jpg"/>     
     <div id="journal_text">
      <div id="journal_text_header">BJOG: An International Journal of Obstetrics and Gynaecology</div>      
      <div id="journal_text_copyright">Copyright © 2009</div>      
      <div id="journal_text_published">Published on behalf of the 
       <a href="http://www.wiley.ru/" target = "_blank">Royal College of Obstetricians and Gynaecologists</a>
      </div>      
      <div id="journal_text_edited">
       <span>Edited by:</span> Philip Steer      
      </div>
      <div id="journal_text_rank">
       <span>ISI Journal Citation Reports® Ranking:2007:</span> 11/60 (Obstetrics & Gynecology)
      </div>
      <div id="journal_text_impact">
       <span>Impact Factor:</span> 2.666
      </div>
     </div>
    </div>
    <div id="boxes">
     <div id="boxes_left"></div>
     <div id="boxes_right"></div>
    </div>
   </div>    
   <div id="col_right"></div>   
   <div id="footer">
    <div id="footer_href">
     <a href="http://www.wiley.ru/" target = "_blank">Privacy Policy</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Terms of Service</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Copyright</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Wiley.com</a>     
    </div>
    <div id="footer_logo">
     <a href="http://www.wiley.ru/" target = "_blank"><img src="images/wiley_logo.gif" /></a>
    </div>
   </div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px;}
#header img{float: left;}

#col_left, #col_center, #col_right{float:left; overflow: hidden;}
#col_left {width: 172px; margin-left: 15px; background-color: #20b2aa; height: 490px;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px; background-color: #20b2aa; height: 490px;} 

/* footer */
#footer {
 height: 45px; clear: both; margin: 0 4px; padding: 10px 11px 0 11px;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}
#footer_href, #footer_logo{float: left;}
#footer_href{width: 701px; padding-top: 10px;}
#footer_logo{margin-left: 12px; width: 217px; text-align: right;}
hr{display: inline; margin: 0 3px 0 7px;}
/*----------*/

a{color: #0073a1;}
a:visited {color: #76a1b2;}

/* journal */
#journal{
 color: #535353; font-family: Verdana, sans-serif; padding: 10px 0;
 background-image: url('../images/journal-bg.png');
 background-position: left bottom;
 background-repeat: no-repeat; 
 overflow: hidden;
}
#journal_image{float: left; width: 95px; margin-left: 20px;}   
#journal_text{float: left; margin: 0 5px 0 15px; width: 382px; font-size: 12px;}
#journal_text_header{font-weight: bold; font-size: 18px; color: #0073A1;}
#journal_text_copyright{font-size: 8px;}
#journal_text_published{font-weight: bold; color: #3f3f3f; margin: 10px 0;}
#journal_text span{font-weight: bold;}
/*----------*/

/* boxes */
#boxes{
 margin-top: 12px;
 font: normal 12px Verdana, sans-serif; 
 color: #3f3f3f;
}
#boxes_left, #boxes_right{float:left; width: 254px; height: 300px; background-color: #20b2aa;}
#boxes_right{margin-left: 9px;}

index5.html

Добавим эти самые boxes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style6.css" />
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <img src="images/site_logo.jpg" />
    <img src="images/site_header_ad.jpg" />
   </div>
   <div id="col_left"></div>
   <div id="col_center">
    <div id="journal">     
     <img id = "journal_image" src="images/BJOG_cover.jpg"/>     
     <div id="journal_text">
      <div id="journal_text_header">BJOG: An International Journal of Obstetrics and Gynaecology</div>      
      <div id="journal_text_copyright">Copyright © 2009</div>      
      <div id="journal_text_published">Published on behalf of the 
       <a href="http://www.wiley.ru/" target = "_blank">Royal College of Obstetricians and Gynaecologists</a>
      </div>      
      <div id="journal_text_edited">
       <span>Edited by:</span> Philip Steer      
      </div>
      <div id="journal_text_rank">
       <span>ISI Journal Citation Reports® Ranking:2007:</span> 11/60 (Obstetrics & Gynecology)
      </div>
      <div id="journal_text_impact">
       <span>Impact Factor:</span> 2.666
      </div>
     </div>
    </div>
    <div id="boxes">
     <div id="boxes_left">
      <div class="box">
       <div class="box_header">HEADING 1</div>
       <div class="box_title">A Dummy Title</div>
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_more"><a href="http://www.wiley.ru/" target = "_blank">More</a></div>
       <div class="box_footer"></div>
      </div>
      <div class="box">
       <div class="box_header">HEADING 2</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_href"><a href="http://www.wiley.ru/" target = "_blank">Maecenas vulputate purus sit</a></div>
       <div class="box_footer"></div>
      </div>
     </div>
     <div id="boxes_right">
      <div class="box">
       <div class="box_header">HEADING 3</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_content">
        Morbi mollis suscipit odio sit amet pellentesque. Nunc tellus odio, commodo eu semper eu, blandit id lorem.
       </div>
       <div class="box_footer"></div>
      </div>
      <div class="box">
       <div class="box_header">HEADING 3</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_content">
        <ul>
         <li>Donec hendrerit libero 1</li>
         <li>Donec hendrerit libero 2</li>
         <li>Donec hendrerit libero 3</li>
         <li>Donec hendrerit libero 4</li>
        </ul>
       </div>
       <div class="box_footer"></div>
      </div>
     </div>
    </div>
   </div>    
   <div id="col_right"></div>   
   <div id="footer">
    <div id="footer_href">
     <a href="http://www.wiley.ru/" target = "_blank">Privacy Policy</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Terms of Service</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Copyright</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Wiley.com</a>     
    </div>
    <div id="footer_logo">
     <a href="http://www.wiley.ru/" target = "_blank"><img src="images/wiley_logo.gif" /></a>
    </div>
   </div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px;}
#header img{float: left;}

#col_left, #col_center, #col_right{float:left; overflow: hidden;}
#col_left {width: 172px; margin-left: 15px; background-color: #20b2aa; height: 700px;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px; background-color: #20b2aa; height: 700px;} 

/* footer */
#footer {
 height: 45px; clear: both; margin: 0 4px; padding: 10px 11px 0 11px;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}
#footer_href, #footer_logo{float: left;}
#footer_href{width: 701px; padding-top: 10px;}
#footer_logo{margin-left: 12px; width: 217px; text-align: right;}
hr{display: inline; margin: 0 3px 0 7px;}
/*----------*/

a{color: #0073a1;}
a:visited {color: #76a1b2;}

/* journal */
#journal{
 color: #535353; font-family: Verdana, sans-serif; padding: 10px 0;
 background-image: url('../images/journal-bg.png');
 background-position: left bottom;
 background-repeat: no-repeat; 
 overflow: hidden;
}
#journal_image{float: left; width: 95px; margin-left: 20px;}   
#journal_text{float: left; margin: 0 5px 0 15px; width: 382px; font-size: 12px;}
#journal_text_header{font-weight: bold; font-size: 18px; color: #0073A1;}
#journal_text_copyright{font-size: 8px;}
#journal_text_published{font-weight: bold; color: #3f3f3f; margin: 10px 0;}
#journal_text span{font-weight: bold;}
/*----------*/

/* boxes */
#boxes{
 margin-top: 12px;
 font: normal 12px Verdana, sans-serif; 
 color: #3f3f3f;
}
#boxes_left, #boxes_right{float:left;}
#boxes_right{margin-left: 9px;}
.box{margin-bottom: 10px; width: 254px;}
.box_header{
 height: 30px; padding: 20px 0 0 5px; font-weight: bold;
 background-image: url('../images/box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
.box_title{padding: 5px; font-weight: bold;}
.box_content{ line-height: 1.5; padding: 5px;}
.box_more{padding: 5px; text-align: right; font-weight: bold;}
.box_href{padding: 5px;}
.box_footer{
 height: 12px;
 background-image: url('../images/box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat;
}
.box_title, .box_content, .box_more, .box_href {
 background-image: url('../images/box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
.box_content ul{margin:0;}
/*----------*/

index6.html

Переходим к правой колонке. Добавим блок поиска по сайту.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style7.css" />
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <img src="images/site_logo.jpg" />
    <img src="images/site_header_ad.jpg" />
   </div>
   <div id="col_left"></div>
   <div id="col_center">
    <div id="journal">     
     <img id = "journal_image" src="images/BJOG_cover.jpg"/>     
     <div id="journal_text">
      <div id="journal_text_header">BJOG: An International Journal of Obstetrics and Gynaecology</div>      
      <div id="journal_text_copyright">Copyright © 2009</div>      
      <div id="journal_text_published">Published on behalf of the 
       <a href="http://www.wiley.ru/" target = "_blank">Royal College of Obstetricians and Gynaecologists</a>
      </div>      
      <div id="journal_text_edited">
       <span>Edited by:</span> Philip Steer      
      </div>
      <div id="journal_text_rank">
       <span>ISI Journal Citation Reports® Ranking:2007:</span> 11/60 (Obstetrics & Gynecology)
      </div>
      <div id="journal_text_impact">
       <span>Impact Factor:</span> 2.666
      </div>
     </div>
    </div>
    <div id="boxes">
     <div id="boxes_left">
      <div class="box">
       <div class="box_header">HEADING 1</div>
       <div class="box_title">A Dummy Title</div>
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_more"><a href="http://www.wiley.ru/" target = "_blank">More</a></div>
       <div class="box_footer"></div>
      </div>
      <div class="box">
       <div class="box_header">HEADING 2</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_href"><a href="http://www.wiley.ru/" target = "_blank">Maecenas vulputate purus sit</a></div>
       <div class="box_footer"></div>
      </div>
     </div>
     <div id="boxes_right">
      <div class="box">
       <div class="box_header">HEADING 3</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_content">
        Morbi mollis suscipit odio sit amet pellentesque. Nunc tellus odio, commodo eu semper eu, blandit id lorem.
       </div>
       <div class="box_footer"></div>
      </div>
      <div class="box">
       <div class="box_header">HEADING 3</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_content">
        <ul>
         <li>Donec hendrerit libero 1</li>
         <li>Donec hendrerit libero 2</li>
         <li>Donec hendrerit libero 3</li>
         <li>Donec hendrerit libero 4</li>
        </ul>
       </div>
       <div class="box_footer"></div>
      </div>
     </div>
    </div>
   </div>    
   <div id="col_right">
    <div id="search_box">
     <div id="search_box_header"></div>
     <div id="search_box_content">
      <div id="search_box_title">SEARCH</div>
      <input type="textbox" id="search_box_text" />
      <input type="button" id="search_box_button" value="GO" />
     </div>
     <div id="search_box_footer"></div>
    </div>
   </div>   
   <div id="footer">
    <div id="footer_href">
     <a href="http://www.wiley.ru/" target = "_blank">Privacy Policy</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Terms of Service</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Copyright</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Wiley.com</a>     
    </div>
    <div id="footer_logo">
     <a href="http://www.wiley.ru/" target = "_blank"><img src="images/wiley_logo.gif" /></a>
    </div>
   </div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px; height: 100px;}
#header img{float: left;}

#col_left, #col_center, #col_right{float:left; overflow: hidden;}
#col_left {width: 172px; margin-left: 15px; background-color: #20b2aa; height: 700px;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px; background-color: #20b2aa; height: 700px;} 

/* footer */
#footer {
 height: 45px; clear: both; margin: 0 4px; padding: 10px 11px 0 11px;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}
#footer_href, #footer_logo{float: left;}
#footer_href{width: 701px; padding-top: 10px;}
#footer_logo{margin-left: 12px; width: 217px; text-align: right;}
hr{display: inline; margin: 0 3px 0 7px;}
/*----------*/

a{color: #0073a1;}
a:visited {color: #76a1b2;}

/* journal */
#journal{
 color: #535353; font-family: Verdana, sans-serif; padding: 10px 0;
 background-image: url('../images/journal-bg.png');
 background-position: left bottom;
 background-repeat: no-repeat; 
 overflow: hidden;
}
#journal_image{float: left; width: 95px; margin-left: 20px;}   
#journal_text{float: left; margin: 0 5px 0 15px; width: 382px; font-size: 12px;}
#journal_text_header{font-weight: bold; font-size: 18px; color: #0073A1;}
#journal_text_copyright{font-size: 8px;}
#journal_text_published{font-weight: bold; color: #3f3f3f; margin: 10px 0;}
#journal_text span{font-weight: bold;}
/*----------*/

/* boxes */
#boxes{
 margin-top: 12px;
 font: normal 12px Verdana, sans-serif; 
 color: #3f3f3f;
}
#boxes_left, #boxes_right{float:left;}
#boxes_right{margin-left: 9px;}
.box{margin-bottom: 10px; width: 254px;}
.box_header{
 height: 30px; padding: 20px 0 0 5px; font-weight: bold;
 background-image: url('../images/box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
.box_title{padding: 5px; font-weight: bold;}
.box_content{ line-height: 1.5; padding: 5px;}
.box_more{padding: 5px; text-align: right; font-weight: bold;}
.box_href{padding: 5px;}
.box_footer{
 height: 12px;
 background-image: url('../images/box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat;
}
.box_title, .box_content, .box_more, .box_href {
 background-image: url('../images/box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
.box_content ul{margin:0;}
/*----------*/

/* search */
#search_box{width: 217px; font: normal 14px Verdana, sans-serif; color: #3f3f3f;}
#search_box_header{ 
 height: 10px;
 background-image: url('../images/search_box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
#search_box_footer{
 height: 8px;
 background-image: url('../images/search_box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat; 
}
#search_box_content{
 background-image: url('../images/search_box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
#search_box_title{padding-left: 5px;}
#search_box_text{margin-left: 5px; width: 155px; height: 16px;}
#search_box_button{
 background-color: #3f3f3f; 
 color: #fff; 
 cursor: pointer; 
 font: bold 14px Verdana, sans-serif; 
 border: none; 
 padding: 2px; 
 width: 40px;
}
#search_box_button:hover{background-color: #0073a1;}
/*----------*/

index7.html

Добавим блок рекламы.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style8.css" />
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <img src="images/site_logo.jpg" />
    <img src="images/site_header_ad.jpg" />
   </div>
   <div id="col_left"></div>
   <div id="col_center">
    <div id="journal">     
     <img id = "journal_image" src="images/BJOG_cover.jpg"/>     
     <div id="journal_text">
      <div id="journal_text_header">BJOG: An International Journal of Obstetrics and Gynaecology</div>      
      <div id="journal_text_copyright">Copyright © 2009</div>      
      <div id="journal_text_published">Published on behalf of the 
       <a href="http://www.wiley.ru/" target = "_blank">Royal College of Obstetricians and Gynaecologists</a>
      </div>      
      <div id="journal_text_edited">
       <span>Edited by:</span> Philip Steer      
      </div>
      <div id="journal_text_rank">
       <span>ISI Journal Citation Reports® Ranking:2007:</span> 11/60 (Obstetrics & Gynecology)
      </div>
      <div id="journal_text_impact">
       <span>Impact Factor:</span> 2.666
      </div>
     </div>
    </div>
    <div id="boxes">
     <div id="boxes_left">
      <div class="box">
       <div class="box_header">HEADING 1</div>
       <div class="box_title">A Dummy Title</div>
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_more"><a href="http://www.wiley.ru/" target = "_blank">More</a></div>
       <div class="box_footer"></div>
      </div>
      <div class="box">
       <div class="box_header">HEADING 2</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_href"><a href="http://www.wiley.ru/" target = "_blank">Maecenas vulputate purus sit</a></div>
       <div class="box_footer"></div>
      </div>
     </div>
     <div id="boxes_right">
      <div class="box">
       <div class="box_header">HEADING 3</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_content">
        Morbi mollis suscipit odio sit amet pellentesque. Nunc tellus odio, commodo eu semper eu, blandit id lorem.
       </div>
       <div class="box_footer"></div>
      </div>
      <div class="box">
       <div class="box_header">HEADING 3</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_content">
        <ul>
         <li>Donec hendrerit libero 1</li>
         <li>Donec hendrerit libero 2</li>
         <li>Donec hendrerit libero 3</li>
         <li>Donec hendrerit libero 4</li>
        </ul>
       </div>
       <div class="box_footer"></div>
      </div>
     </div>
    </div>
   </div>    
   <div id="col_right">
    <div id="search_box">
     <div id="search_box_header"></div>
     <div id="search_box_content">
      <div id="search_box_title">SEARCH</div>
      <input type="textbox" id="search_box_text" />
      <input type="button" id="search_box_button" value="GO" />
     </div>
     <div id="search_box_footer"></div>
    </div>
    <div id="adverts_box">
     <div id="adverts_box_header"></div>
     <div id="adverts_box_content">
      <a href="http://www.wiley.ru/" target = "_blank"><img src="images/advert1.jpg" class="img-right" /></a>  
      <a href="http://www.wiley.ru/" target = "_blank"><img src="images/advert2.jpg" class="img-right" /></a>    
      <a href="http://www.wiley.ru/" target = "_blank"><img src="images/advert3.jpg" class="img-right" /></a>
     </div>
     <div id="adverts_box_footer"></div>    
    </div>
   </div>   
   <div id="footer">
    <div id="footer_href">
     <a href="http://www.wiley.ru/" target = "_blank">Privacy Policy</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Terms of Service</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Copyright</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Wiley.com</a>     
    </div>
    <div id="footer_logo">
     <a href="http://www.wiley.ru/" target = "_blank"><img src="images/wiley_logo.gif" /></a>
    </div>
   </div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px; height: 100px;}
#header img{float: left;}

#col_left, #col_center, #col_right{float:left; overflow: hidden;}
#col_left {width: 172px; margin-left: 15px; background-color: #20b2aa; height: 700px;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px; background-color: #20b2aa; height: 700px;} 

/* footer */
#footer {
 height: 45px; clear: both; margin: 0 4px; padding: 10px 11px 0 11px;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}
#footer_href, #footer_logo{float: left;}
#footer_href{width: 701px; padding-top: 10px;}
#footer_logo{margin-left: 12px; width: 217px; text-align: right;}
hr{display: inline; margin: 0 3px 0 7px;}
/*----------*/

a{color: #0073a1;}
a:visited {color: #76a1b2;}

/* journal */
#journal{
 color: #535353; font-family: Verdana, sans-serif; padding: 10px 0;
 background-image: url('../images/journal-bg.png');
 background-position: left bottom;
 background-repeat: no-repeat; 
 overflow: hidden;
}
#journal_image{float: left; width: 95px; margin-left: 20px;}   
#journal_text{float: left; margin: 0 5px 0 15px; width: 382px; font-size: 12px;}
#journal_text_header{font-weight: bold; font-size: 18px; color: #0073A1;}
#journal_text_copyright{font-size: 8px;}
#journal_text_published{font-weight: bold; color: #3f3f3f; margin: 10px 0;}
#journal_text span{font-weight: bold;}
/*----------*/

/* boxes */
#boxes{
 margin-top: 12px;
 font: normal 12px Verdana, sans-serif; 
 color: #3f3f3f;
}
#boxes_left, #boxes_right{float:left;}
#boxes_right{margin-left: 9px;}
.box{margin-bottom: 10px; width: 254px;}
.box_header{
 height: 30px; padding: 20px 0 0 5px; font-weight: bold;
 background-image: url('../images/box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
.box_title{padding: 5px; font-weight: bold;}
.box_content{ line-height: 1.5; padding: 5px;}
.box_more{padding: 5px; text-align: right; font-weight: bold;}
.box_href{padding: 5px;}
.box_footer{
 height: 12px;
 background-image: url('../images/box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat;
}
.box_title, .box_content, .box_more, .box_href {
 background-image: url('../images/box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
.box_content ul{margin:0;}
/*----------*/

/* search */
#search_box{width: 217px; font: normal 14px Verdana, sans-serif; color: #3f3f3f;}
#search_box_header{ 
 height: 10px;
 background-image: url('../images/search_box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
#search_box_footer{
 height: 8px;
 background-image: url('../images/search_box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat; 
}
#search_box_content{
 background-image: url('../images/search_box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
#search_box_title{padding-left: 5px;}
#search_box_text{margin-left: 5px; width: 155px; height: 16px;}
#search_box_button{
 background-color: #3f3f3f; 
 color: #fff; 
 cursor: pointer; 
 font: bold 14px Verdana, sans-serif; 
 border: none; 
 padding: 2px; 
 width: 40px;
}
#search_box_button:hover{background-color: #0073a1;}
/*----------*/

/* adverts */
#adverts_box{width: 217px; margin: 10px 0;}
#adverts_box_header{
 height: 8px;
 background-image: url('../images/adverts_box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
#adverts_box_footer{
 height: 12px;
 background-image: url('../images/adverts_box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat;
}
#adverts_box_content{
 background-image: url('../images/adverts_box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
#adverts_box_content img{margin: 5px 0 0 8px;}
/*----------*/

index8.html


Займемся левой колонкой - меню.
По условиям задачи меню должно было раскрываться-закрываться с помощью JavaScript. Времени оставалось мало (сам загнал себя в эти временные рамки), поэтому я решил использовать jQuery - "Write Less, Do More" :).
Заодно напишем валидацию для поисковой строки (тоже согласно условию задачи).
Конечно кошернее было бы без фреймворка, но времени почти не оставалось.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Home - BJOG: An International Journal of Obstetrics &amp; Gynaecology</title>
  <meta name="description" content="BJOG An International Journal of Obstetrics and Gynaecology" />
  
  <link rel="stylesheet" type="text/css" href="css/style9.css" />
  <script src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    $('#nav_items').children('.nav_item').show();
    $('.nav_item_name').on('click', function() {
     $(this).next('.nav_item').slideToggle();     
    });
    $('#search_box_text').on('keyup', function(e) {
     var keyCode = e.which || e.keyCode;   
     if(keyCode == 13) validate();
    });
    $('#search_box_button').on('click', validate);
   });
   function validate() {
    var txt = $('#search_box_text');    
    var txtVal = $.trim(txt.val());
    if (txtVal.length < 1 || txtVal.length > 100) {
     txt.css('border-color','#ff0000');
     return;
    }
    txt.css('border-color','').val('');
    // do something
   }
  </script>
  
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <img src="images/site_logo.jpg" />
    <img src="images/site_header_ad.jpg" />
   </div>
   <div id="col_left">
   <div id="nav_header">JOURNAL MENU</div>
    <img id="nav_bar" src="images/nav_bar.gif" />
    <div id="nav_items">
     <div class="nav_item">
      <div class="nav_item_name">Navigation Item 1</div>
      <div class="nav_item">
       <div class="nav_item_name">Sub Navigation Item 1</div>
       <div class="nav_item_name">Sub Navigation Item 2</div>
       <div class="nav_item_name">Sub Navigation Item 3</div>
      </div>
     </div>
     <div class="nav_item">
      <div class="nav_item_name">Navigation Item 2</div>
      <div class="nav_item">
       <div class="nav_item_name">Sub Navigation Item 1</div>
       <div class="nav_item">
        <div class="nav_item_name">Sub Sub1 Navigation Item 1</div>
        <div class="nav_item_name">Sub Sub1 Navigation Item 2</div>
        <div class="nav_item_name">Sub Sub1 Navigation Item 3</div>
       </div>
       <div class="nav_item_name">Sub Navigation Item 2</div>
       
       <div class="nav_item_name">Sub Navigation Item 3</div>
       <div class="nav_item">
        <div class="nav_item_name">Sub Sub3 Navigation Item 1</div>
        <div class="nav_item_name">Sub Sub3 Navigation Item 2</div>
        <div class="nav_item_name">Sub Sub3 Navigation Item 3</div>
       </div>
      </div>
     </div>
     <div class="nav_item">
      <div class="nav_item_name">Navigation Item 3</div>
      <div class="nav_item">
       <div class="nav_item_name">Sub Navigation Item 1</div>       
       <div class="nav_item_name">Sub Navigation Item 2</div>       
       <div class="nav_item_name">Sub Navigation Item 3</div>
      </div>
     </div>
     <div class="nav_item">
      <div class="nav_item_name">Navigation Item 4</div>
      <div class="nav_item">
       <div class="nav_item_name">Sub Navigation Item 1</div>
       <div class="nav_item_name">Sub Navigation Item 2</div>
       <div class="nav_item_name">Sub Navigation Item 3</div>
      </div>
     </div>
    </div>
    <div id="nav_items_another">
     <div class="nav_item_name">Another Item 1</div>
     <div class="nav_item_name">Another Item 2</div>
     <div class="nav_item_name">Another Item 3</div>
    </div>
   </div>
   <div id="col_center">
    <div id="journal">     
     <img id = "journal_image" src="images/BJOG_cover.jpg"/>     
     <div id="journal_text">
      <div id="journal_text_header">BJOG: An International Journal of Obstetrics and Gynaecology</div>      
      <div id="journal_text_copyright">Copyright © 2009</div>      
      <div id="journal_text_published">Published on behalf of the 
       <a href="http://www.wiley.ru/" target = "_blank">Royal College of Obstetricians and Gynaecologists</a>
      </div>      
      <div id="journal_text_edited">
       <span>Edited by:</span> Philip Steer      
      </div>
      <div id="journal_text_rank">
       <span>ISI Journal Citation Reports® Ranking:2007:</span> 11/60 (Obstetrics & Gynecology)
      </div>
      <div id="journal_text_impact">
       <span>Impact Factor:</span> 2.666
      </div>
     </div>
    </div>
    <div id="boxes">
     <div id="boxes_left">
      <div class="box">
       <div class="box_header">HEADING 1</div>
       <div class="box_title">A Dummy Title</div>
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_more"><a href="http://www.wiley.ru/" target = "_blank">More</a></div>
       <div class="box_footer"></div>
      </div>
      <div class="box">
       <div class="box_header">HEADING 2</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_href"><a href="http://www.wiley.ru/" target = "_blank">Maecenas vulputate purus sit</a></div>
       <div class="box_footer"></div>
      </div>
     </div>
     <div id="boxes_right">
      <div class="box">
       <div class="box_header">HEADING 3</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_content">
        Morbi mollis suscipit odio sit amet pellentesque. Nunc tellus odio, commodo eu semper eu, blandit id lorem.
       </div>
       <div class="box_footer"></div>
      </div>
      <div class="box">
       <div class="box_header">HEADING 3</div>      
       <div class="box_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu risus! 
        Maecenas vulputate purus sit amet enim faucibus vitae aliquet tellus laoreet. 
        Ut lacinia gravida dui eu tempus!
       </div>
       <div class="box_content">
        <ul>
         <li>Donec hendrerit libero 1</li>
         <li>Donec hendrerit libero 2</li>
         <li>Donec hendrerit libero 3</li>
         <li>Donec hendrerit libero 4</li>
        </ul>
       </div>
       <div class="box_footer"></div>
      </div>
     </div>
    </div>
   </div>    
   <div id="col_right">
    <div id="search_box">
     <div id="search_box_header"></div>
     <div id="search_box_content">
      <div id="search_box_title">SEARCH</div>
      <input type="textbox" id="search_box_text" />
      <input type="button" id="search_box_button" value="GO" />
     </div>
     <div id="search_box_footer"></div>
    </div>
    <div id="adverts_box">
     <div id="adverts_box_header"></div>
     <div id="adverts_box_content">
      <a href="http://www.wiley.ru/" target = "_blank"><img src="images/advert1.jpg" class="img-right" /></a>  
      <a href="http://www.wiley.ru/" target = "_blank"><img src="images/advert2.jpg" class="img-right" /></a>    
      <a href="http://www.wiley.ru/" target = "_blank"><img src="images/advert3.jpg" class="img-right" /></a>
     </div>
     <div id="adverts_box_footer"></div>    
    </div>
   </div>   
   <div id="footer">
    <div id="footer_href">
     <a href="http://www.wiley.ru/" target = "_blank">Privacy Policy</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Terms of Service</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Copyright</a><hr/>
     <a href="http://www.wiley.ru/" target = "_blank">Wiley.com</a>     
    </div>
    <div id="footer_logo">
     <a href="http://www.wiley.ru/" target = "_blank"><img src="images/wiley_logo.gif" /></a>
    </div>
   </div>
  </div>
 </body>
</html>

body{background-color: #e5e5e5;}
#wrapper {
 width: 960px; margin: 0 auto;
 background-image: url('../images/site_bkgrd_left.gif'), url('../images/site_bkgrd.gif'), url('../images/site_bkgrd_right.gif');
 background-position: top left, top center, top right; 
 background-repeat: repeat-y, repeat, repeat-y;
}
#header {margin: 0 3px; height: 100px;}
#header img{float: left;}

#col_left, #col_center, #col_right{float:left; overflow: hidden;}
#col_left {width: 172px; margin-left: 15px; font: bold 12px Verdana, sans-serif;}
#col_center {width: 517px; margin: 0 12px;}
#col_right {width: 217px;} 

/* footer */
#footer {
 height: 45px; clear: both; margin: 0 4px; padding: 10px 11px 0 11px;
 background-image: url('../images/footer_bar.gif'); 
 background-position: left bottom;
 background-repeat: repeat-x;
}
#footer_href, #footer_logo{float: left;}
#footer_href{width: 701px; padding-top: 10px;}
#footer_logo{margin-left: 12px; width: 217px; text-align: right;}
hr{display: inline; margin: 0 3px 0 7px;}
/*----------*/

a{color: #0073a1;}
a:visited {color: #76a1b2;}

/* journal */
#journal{
 color: #535353; font-family: Verdana, sans-serif; padding: 10px 0;
 background-image: url('../images/journal-bg.png');
 background-position: left bottom;
 background-repeat: no-repeat; 
 overflow: hidden;
}
#journal_image{float: left; width: 95px; margin-left: 20px;}   
#journal_text{float: left; margin: 0 5px 0 15px; width: 382px; font-size: 12px;}
#journal_text_header{font-weight: bold; font-size: 18px; color: #0073A1;}
#journal_text_copyright{font-size: 8px;}
#journal_text_published{font-weight: bold; color: #3f3f3f; margin: 10px 0;}
#journal_text span{font-weight: bold;}
/*----------*/

/* boxes */
#boxes{
 margin-top: 12px;
 font: normal 12px Verdana, sans-serif; 
 color: #3f3f3f;
}
#boxes_left, #boxes_right{float:left;}
#boxes_right{margin-left: 9px;}
.box{margin-bottom: 10px; width: 254px;}
.box_header{
 height: 30px; padding: 20px 0 0 5px; font-weight: bold;
 background-image: url('../images/box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
.box_title{padding: 5px; font-weight: bold;}
.box_content{ line-height: 1.5; padding: 5px;}
.box_more{padding: 5px; text-align: right; font-weight: bold;}
.box_href{padding: 5px;}
.box_footer{
 height: 12px;
 background-image: url('../images/box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat;
}
.box_title, .box_content, .box_more, .box_href {
 background-image: url('../images/box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
.box_content ul{margin:0;}
/*----------*/

/* search */
#search_box{width: 217px; font: normal 14px Verdana, sans-serif; color: #3f3f3f;}
#search_box_header{ 
 height: 10px;
 background-image: url('../images/search_box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
#search_box_footer{
 height: 8px;
 background-image: url('../images/search_box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat; 
}
#search_box_content{
 background-image: url('../images/search_box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
#search_box_title{padding-left: 5px;}
#search_box_text{margin-left: 5px; width: 155px; height: 16px;}
#search_box_button{
 background-color: #3f3f3f; 
 color: #fff; 
 cursor: pointer; 
 font: bold 14px Verdana, sans-serif; 
 border: none; 
 padding: 2px; 
 width: 40px;
}
#search_box_button:hover{background-color: #0073a1;}
/*----------*/

/* adverts */
#adverts_box{width: 217px; margin: 10px 0;}
#adverts_box_header{
 height: 8px;
 background-image: url('../images/adverts_box_top.gif');
 background-position: top center;
 background-repeat: no-repeat;
}
#adverts_box_footer{
 height: 12px;
 background-image: url('../images/adverts_box_bottom.gif');
 background-position: bottom center;
 background-repeat: no-repeat;
}
#adverts_box_content{
 background-image: url('../images/adverts_box_bkgrd.gif');
 background-position: top center; 
 background-repeat: repeat-y;
}
#adverts_box_content img{margin: 5px 0 0 8px;}
/*----------*/

/* navigation */
#nav_header{color: #3f3f3f;}
#nav_bar{width: 172px; margin: 8px 0;}
#nav_items_another{margin-top: 10px;}
.nav_item{margin-top: 2px; display: none;}
.nav_item_name{padding: 5px 0; color: #0073a1;}
.nav_item_name:hover{background-color: #e5e5e5; cursor: pointer;}
/*----------*/

index9.html

Интерфейс готов. Я намеренно не использовал CSS3 (с помощью свойства border-radius, например, можно было бы написать более "Semantic Code"), т.к. одним из условий было "Cross Browser Support".
Автор: на
Ярлыки: , ,

Комментариев нет:

Отправить комментарий

Комментарий будет опубликован после модерации

Подписаться на: Комментарии к сообщению (Atom)