Графический дизайн
Для того, чтобы сделать свой, индивидуальный дизайн страницы, необходимо поработать в любом доступном графическом редакторе. Для начала можно попробовать в программе «Paint».
Сначала делаем большую картинку
потом разрезаем ее на три маленьких картинки
Затем создаем папку для графики, например, images, помещаем в нее картинки.
Потом открываем блокнот и пишем html. теги, в смысле код, который мы будем использовать для создания простой странички, вы можете копировать и сохранять в виде 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" lang="ru" xml:lang="ru">
<head>
<title>Веб дизайн</title>
<link rel="stylesheet" href="light-style.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="header">
В этом блоке будет логотип или слоган
</div>
<div id="content">
В этом блоке будет основной контент
</div>
<div id="left_content">
В этом блоке будет меню и дополнительный контент
</div>
<div id="footer">
В этом блоке можно разместить копирайт и счетчики
</div>
</div>
</body>
</html>
Затем создаем файл CSS в котором пишем:
body{
margin:0;
padding:0;
background-color:#fff
}
#page{
width:900px;
background: url(images/body-page.png) repeat-y;
padding : 0;margin: 0 auto;
}
#header{
position:relative;
width:100%;
margin:0;
padding:30px 0 0 0;
width:900px;
height:100px;
background: #fff url(images/body-header.png) no-repeat;
}
span.c1 {
display:none;
}
h1.c0 {
background: url(images/logo.png) no-repeat;
height:52px;
margin:0 0 0 30px;
padding: 0;
}
h2 {
font:18px verdana, arial, helvetica, sans-serif;
color:#3E8282;font-weight:900;
padding: 0 0 0 30px;
margin:0;
}
#left_content{
width:200px;
float:left;
position:relative;
}
#left_content p{
padding: 0 10px 0 30px;
font:11px verdana, arial, helvetica, sans-serif;
color:#666;line-height:1.5;
}
#content{
float: right;
display:inline;
position: relative;
width:700px;
padding: 0;
margin: 0;
}
#content p{
padding: 0 30px 0 24px;
}
#footer{
clear:both;margin:0;padding:50px 0 0 0;
text-align:center;
width:900px;
height:77px;
background: url(images/body-footer.png) no-repeat;
}
a.auto,a.auto:hover,a.auto:visited {
font:10px verdana, arial, helvetica, sans-serif;
color:#469999;padding:0;margin: 0 20px 0 0;
}
#footer p {
font:10px verdana, arial, helvetica, sans-serif;
color:#469999;
}
.menu {
list-style-type:none;
padding:0;
margin: 0 0 0 24px;
}
.menu li a {
color:#4D9F9F;
font:12px verdana, arial, helvetica, sans-serif;
font-weight:900;
display:block;
width:86%;
margin-left:5px;
border-bottom:dotted 1px #B8DEDE;
text-decoration:none;
padding:3px;
}
.menu li a:visited {
color:#4D9F9F;
font:12px verdana, arial, helvetica, sans-serif;
font-weight:900;
}
.menu li a:hover,.menu li a:active {
color:#3E7D7D;
font:12px verdana, arial, helvetica, sans-serif;
font-weight:900;
background-color:#E3F2F2;
}
Разъяснения по таблицам CSS
#page
width:900px; - ширина блока
background: url(images/body-page.png) repeat-y; - фоновый рисунок, повторяющийся по вертикали.
padding : 0;
margin: 0 auto; - выравнивание блока по центру
#header
position:relative; - элемент устанавливается относительно его исходного места.
margin:0;
padding:30px 0 0 0; - отступ сверху, чтобы логотип или заголовок установить не наезжая на фоновый рисунок
width:900px;
height:100px; - высота фон. рисунка этого блока 130px, но учитывая отступ сверху, пишем минусуя 30px
background: #fff url(images/body-header.png) no-repeat; - фоновый рисунок без повторений
span.c1
display:none; - прячем содержимое тега <span class="c1">
для установки логотипа я использую
<h1 class="c0">
<span class="c1">Простой графический дизайн</span>
</h1>
текст между тегами span не будет виден на странице, но поисковые системы будут его учитывать при индексации страниц сайта
h1.c0
background: url(images/logo.png) no-repeat; - картинка вместо текста заголовка
height:52px; - высота картинки
margin:0 0 0 30px; - отступ слева
padding: 0;
#left_content
width:200px; - ширина блока
float:left; - выравнивание блока по левому краю
position:relative;
#left_content p
padding: 0 10px 0 30px; - отступ справа 10 слева 30
font:11px verdana, arial, helvetica, sans-serif;
color:#666;
line-height:1.5; - межстрочный интервал
#content
float: right; - выравнивание блока по правому краю
display:inline; - Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
position: relative;
width:700px; - ширина блока
padding: 0;
margin: 0;
#footer
clear:both; отмена обтекания блока одновременно с правого и левого края
margin:0;padding:50px 0 0 0;
text-align:center; - выравнивание текста по центру
width:900px;
height:77px; - - высота фон. рисунка этого блока 127px, но учитывая отступ сверху, пишем минусуя 50px
background: url(images/body-footer.png) no-repeat;
Меню и повторящиеся элементы не описываю, потому как менюшки бывают разными и CSS для каждого пишется по разному, а с повторами и так вроде все понятно.
Результат смотрите здесь
