Итак, макет:
Прежде всего определим в html что за элементы нам даны и в какой последовательности они будут отображаться.
Подчёркиванием выделены основные моменты - комментарии, чтобы легче было понять, откуда что берётся. Сделано это исключительно для читателя. В своём коде комментируйте моменты, где что-то может быть неясно, какой-то нестандартный приём.
Код:
<!DOCTYPE HTML>
<html>
<head>
/*Прописываем мета-теги для поисковых систем, указываем кодировку*/
<meta charset="UTF-8" />
<meta name="author" content="Irina Shefer" />
<meta name="keywords" content="городское такси, такси 3-55" />
<meta name="description" content="Лучшее такси города, доставим куда угодно" />
<link rel="stylesheet" type="text/css" href="style.css"/>
/*Заголовок страницы*/
<title>Служба такси</title>
</head>
<body>
/*Теперь выделяем блоки для элементов страницы, <div id="название"></div>*/
<div id="wrapper">
<div id="line"></div>
<div id="small-ball"></div>
<div id="menu">
/*Список для главного меню. Пока с заглушками вместо реальных url страниц*/
<ul>
<li><a href="#company">О компании</a></li>
<li><a href="#money">Тарифы</a></li>
<li><a href="#auto">Автопарк</a></li>
<li><a href="#comments">Отзывы</a></li>
<li><a href="#vacansy">Вакансии</a></li>
</ul>
</div>
<div id="logo"><a href="#home" title="Такси три пятьдесят пять"><img src="images/logo.png" alt="такси"/></a></div>
<div class="text">
<h1>Вакансии</h1>
<p> </p>
<p>Сильными сторонами служб такси является доставка в любую часть<br />
города в любое время в кратчайшие сроки и круглосуточный график работы. </p>
<p>Но наряду из этим существует ряд слабых сторон: <br />
1) высокая стоимость услуг; 2) низкая пассажировместимость; 3) возможность отказа в обслуживании в связи с отсутствием свободных машин; 4) нечеткое время подачи; 5) большая численность «нелегалов» (около 85% по данным 2010 года), а это часто предопределяет низкий уровень обслуживания: опоздание, приезд, по другому адресу, попытки водителя получить больше заявленного тарифа </p>
<p> </p>
<h1>Приглашаем на работу!</h1>
<p> </p>
<h3>Водителей на автомобили автопарка «ТРИ ПЯТЬДЕСЯТ ПЯТЬ»</h3>
<p> </p>
<p>Требования: — возраст не старше 50; — стаж по водительскому<br />
удостоверению не меньше 5 лет; — опыт работы в такси. </p>
<p> </p>
<h3>Водителей с личным автотранспротом</h3>
<p> </p>
<p>Требования: — автомобиль без кузовных повреждений — стаж<br />
по водительскому удостоверению не меньше 3 лет. </p>
<p> </p>
<h3>Диспетчеров </h3>
<p> </p>
<p>Оплата достойная. Телефон для справок: (343) 3-55-55-55 </p>
</div>
<div id="three-right"></div>
<div id="big-ball">
</div>
<div id="three-left"></div>
<div id="car"></div>
</div>
</body>
</html>
style.css - название css-файла, расположен в том же каталоге, что и html-страница. <div id=""></> - обозначение блоков наших элементов страницы. Именно им будет придаваться размер и расположение в css-файле.
Код css:
/*clean default margin*/ /*Сбрасываем отступы по умолчанию*/
*{ margin:0;
padding:0;
}
/*general*/
/*Назначаем цвет тела страницы*/
body {
background-color:#FFFFFF;
}
/*Устанавливаем позицию расположения нашей страницы в браузере. Относительно этих параметров будет указано расположение всех остальных элементов*/
#wrapper {
width:960px;
margin:0 auto;
position:relative;
}
/*navigation*/
/*Указываем расположение нашего меню на странице*/
#menu {
position: absolute;
left:30px;
top:41px;
width:486px;
height:32px;
background-image:url(images/menu.png);
}
/*Меню будет горизонтальным, текст - подчёркнутым*/
ul, li {
font-weight:bold;
margin: 4px 10px;
font-family: arial, sans-serif;
font-size:14px;
display:inline;
}
a{
text-decoration:underline;
color:#FFF;
}
a:hover { text-decoration:none;
}
/*other element*/
/*Расположение блока с логотипом, его размеры*/
#logo {
position:absolute;
left:30px;
top:100px;
width:313px;
height:126px;
}
/*Расположение блока с деревом справа, его размеры*/
#three-right {
position: absolute;
left:786px;
top:197px;
width:199px;
height:357px;
background-image:url(images/three_right.png);
}
/*Расположение блока маленьким шаром, его размеры*/
#small-ball {
position: absolute;
left:490px;
top:28px;
width:323px;
height:327px;
background-image:url(images/small_ball.png);
}
/*Расположение блока с большим шаром, его размеры*/
#big-ball {
position: absolute;
left:532px;
top:554px;
width:415px;
height:387px;
background-image:url(images/big_ball.png);
text-align:left;
font-family:Verdana, Geneva, sans-serif;
font-size:32px;
color:#FFF;
}
/*Расположение блока с деревом слева, его размеры*/
#three-left {
position: absolute;
left:0px;
top:872px;
width:105px;
height:267px;
background-image:url(images/three_left.png);
}
/*Расположение блока с авто, его размеры*/
#car {
position: absolute;
left:380px;
top:1053px;
width:165px;
height:267px;
background-image:url(images/car.png);
}
/*Расположение блока с линией, его размеры*/
#line {
position: absolute;
left:200px;
top:0px;
width:607px;
height:1395px;
background-image:url(images/line.png);
}
/*Расположение текстового блока, его размеры*/
.text {
position: absolute;
left: 60px;
top: 250px;
right: 280px;
}
/*-text style-*//*Стиль заголовков и текста, параграфов*/
h1, h2, h3 {
font-family:arial, sans-serif;
color:#000000;
}
p {
font-family:arial, sans-serif;
color:#777777;
font-size:1em;
}
/**/
Итог:
Примечание: вместо картинок можно было сделать элементы на css3, но, увы, как обычно дорожайший Internet Explorer доставит нам немало хлопот, криво отобразив всё,что можно.
Немного о стандартах.
На случай, если вам придётся сдавать работу клиенту. На что равняться и чему соответствовать?
1. Кроссбраузерность
2. Кодировка в utf-8: <meta charset="UTF-8" />
3. Валидность. Валидатор в помощь: validator.w3.org
4. Дабы соответствовать духу времени вёрстка в HTML 5 и CSS 3
5. Работоспособность при выключенных JavaScript и Flash
6. Наличие шрифтов, отображающихся в любой ОС
7. Скорость загрузки
3 коммент.: (+add yours?)
Слышалось мне что строку
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
можно упростить до
<meta charset="utf-8" /> т.к. удаленные значения всеравно игнорируются браузером.
Верно ли данное утверждение?
Если не ошибаюсь, это новый стандарт для HTML5. То есть получится так:
<meta charset="utf-8"/>
Обновлю этот момент в посте, но нужно также иметь ввиду, что при использовании HTML5 желательно и тело документа "разбить" иначе, поскольку появились новые теги:
<article> --- для внешнего содержимого
<aside> --- для текста, находящегося в стороне от основного (правый блок, например)
<nav> под навигацию
В общем, лучше скачать справочник по HTML5 и время от времени обращаться к нему.
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.