- •Макет сайта Изобразим самый стандартный макет двухколоночного сайта.
- •Итак, как же будет выглядеть html и css-код для данного макета:
- •Д.З: Наполнить этот макет объектами и текстом. Поиграйтесь с позиционированием и прозрачностью элементов. Css-шпаргалка в помощь! а также к следующему занятию (03.10) сделать трёхколоночный макет.
- •Html и css-код для данного макета:
- •Ниже, всё что выделено цветом – это еще один пример создания двухколоночного макета. Обсудим на следующем занятии. И материал, который идёт далее также для следующего занятия.
- •Перейдём к css-файлу.
- •Относительное позиционирование
- •Абсолютное позиционирование
- •Перекрывание элементов
- •Позиционирование элементов
- •Статическое позиционирование
- •Фиксированное позиционирование
- •Горизонтальное меню
- •Горизонтальное меню с выпадающим списком
Ниже, всё что выделено цветом – это еще один пример создания двухколоночного макета. Обсудим на следующем занятии. И материал, который идёт далее также для следующего занятия.
HTML |
HTML5* |
<html> <head> <title>макет</title> <meta charset=utf-8> <link rel="stylesheet" type="text/css" href="style.css"> </head>
<body> <div class="wrapper"> <div class="header"></div> <div class="mainmenu"></div> <div class="leftmenu"></div> <div class="content"></div> <div class="footer"></div> </div> </body> </html> |
<html> <head> <title>макет</title> <meta charset=utf-8> <link rel="stylesheet" type="text/css" href="style.css"> </head>
<body> <div class="wrapper"> <header></header> <nav></nav> <aside></aside> <article></article> <footer></footer> </div> </body> </html> |
*В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>.
Для нас особой разницы между тегами <div сlass="header"> и <header> нет, но для поисковых систем эти теги играют большую роль. Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов (ну на эту тему мы погорим немного позже).
Перейдём к css-файлу.
Если <div> по умолчанию является блочным элементом, то <article>, <aside>, <footer>, <header>, <nav> являются строковыми элементами и мы не можем просто так задавать им ширину и высоту, как это делаем с div, поэтому для всех строковых элементов для начала необходимо указать, что элементы являются блочными:
header, nav, aside, article, footer{
display:block;
}
CSS для HTML |
CSS для HTML5* |
*{ margin:0; padding:0; } .wrapper{ margin:0 auto; width:960px; background-color:…; } .header{ height:150px; background-color:…; } .mainmenu{ height:40px; background-color:…; } .leftmenu{ float:left; width:300px; height:500px; background-color:…; } .content{ margin-left:300px; background-color:…; min-height:500px; } .footer{ height:100px; background-color:…; }
|
*{ margin:0; padding:0; } .wrapper{ margin:0 auto; width:960px; background-color:…; } header, nav, aside, article, footer{ display:block; } header{ height:150px; background-color:…; } nav{ height:40px; background-color:…; } aside{ float:left; width:300px; height:500px; background-color:…; } article{ margin-left:300px; background-color:…; min-height:500px } footer{ height:100px; background-color:…; }
|