МУЛТИМЕДИЯ и ОСНОВИ НА WEB ДИЗАЙНА

УПРАЖНЕНИЕ 1

2. Създаване на заглавна web страницата

  • Задаване на стилова дефиниция на елемент
    • HTML CSS
    < body >< /body > body {
    margin: 0;
    padding: 0;
    background: #01152b url(images/img03.jpg) repeat-x left top;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #837669;
    }
  • Създаване на блоковия елемент wrapper
    • HTML CSS
    < div id="wrapper ">< /div > #wrapper {
    background: url(images/img06.jpg) repeat-x left bottom;
    }
  • Създаване на блоковия елемент header-wrapper
    • HTML CSS
    < div id="header-wrapper ">< /div > #header-wrapper {
    width: 880px;
    margin: 0 auto;
    border-left: 10px solid #FFFFFF;
    border-right: 10px solid #FFFFFF;
    border-top: 10px solid #FFFFFF;
    }
  • Създаване на блоковия елемент header-wrapper
    • HTML CSS
    < div id="logo ">< /div > #logo {
    height: 250px;
    background: url(images/img01.jpg) no-repeat left top;
    }
  • Създаване на блоковия елемент header
    • HTML CSS
    < div id="logo ">< /div > #header {
    width: 880px;
    height: 76px;
    margin: 0 auto;
    background: #608F30 url(images/img02.jpg) no-repeat left top;
    }
  • Създаване на блоковия елемент menu
    • HTML CSS
    < div id="menu" >
    < ul >
    < li class="current_page_item" >< a href="#" >Начало< /a >< /li >
    < li >< a href="#" >За мен< /a >< /li >
    < li >< a href="#" >Снимки< /a >< /li >
    < li >< a href="#" >Интереси< /a >< /li >
    < li >< a href="#" >Контакти< /a >< /li >
    < /ul >
    < /div >
  • Създаване на блоковия елемент search
    • HTML CSS
  • Създаване на блоковия елемент page
    • HTML CSS
    < div id="page ">< /div > #page {
    width: 840px;
    margin: 0 auto;
    padding: 30px 20px 0px 20px;
    background: #FFFFFF;
    border-left: 10px solid #FFFFFF;
    border-right: 10px solid #FFFFFF;
    border-bottom: 10px solid #FFFFFF;
    }
  • Създаване на лява колона content
    • HTML CSS
    < div id="page ">< /div > #content {
    float: left;
    width: 570px;
    }
  • Създаване на дясна колона sidebar
    • HTML CSS
  • Създаване на дясна колона footer
    • HTML CSS