Приветствую немногочисленных читателей блога. Походу я пишу плохие не актуальные статьи, потому что никто из читателей их не комментирует. Ну да ладно, по-прежнему буду писать статьи в том же духе. В этот раз я, наконец, нашел время и собственный простой шаблончик сайта. Обещал рассказать, как все это делается и верстается. Для начала представлю вам, что должно получиться, если вы пройдете мой простенький курс по комплексной верстке. Для своего шаблона я использовал знания по HTML, CSS и немного фантазии. Собственно ниже скриншот странички.
Как видите шаблончик простенький, но не лишен дизайнерской задумки в стиле инь-янь. Я не пичкал его супер графикой и скриптами. Цель этого шаблона на примере показать и объяснить, что так сможет каждый. Вся прелесть в том, что он очень легкий и содержит всего один баннер (шапку сайта), который сделан с минимальными знаниями в фотошопе. Думаю рассказывать про слои нет смысла, потому что я освещал этот вопрос в предыдущей статье. А о некоторых особенностях меню сайта можно посвятить свое время. Слои в HTML коде я называл доступно, что можно без труда отследить их в CSS файле. Теперь глянем на CSS.
@charset "windows-1251";
/* CSS Document */
.banner { margin:auto; width:800px; padding:0;}
.menu {
width:798px;
margin:auto;
text-align:center;
border-left:#f8f8f8 solid 1px;
border-bottom:#f8f8f8 solid 2px;
border-right:#f8f8f8 solid 1px;
padding:0;}
.menu a {
display: inline;
padding:4px;
margin:0;
text-decoration:none;
color:#FFFFFF;
font-family:"Tahoma", Arial, sans-serif;
font-size:12px;
font-weight:normal;}
.menu a:hover {
background-color:#f8f8f8;
color:#000000;}
.text {
width:792px;
padding:5px;
margin:auto;
color: #F5F5F5;
font-family:"Tahoma", Arial, sans-serif;
font-size:13px;
text-align:center;}
.footer {
width:794px;
padding:5px;
background-color: #FFFFFF;
font-size:10px;
font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
margin:auto;}
body {
margin:auto;
padding-top:5px;
background:#000000; }
Глядя, на код можно без труда понять, что сайт состоит из четырех частей: верхнего баннера, меню, текста страницы и футера. Это ясно видно из названий элементов. Каждый слой выровнен по центру (margin:auto;) и имеет фиксированную ширину в пикселях (width:…px;). Параметр border задает вид границ определенного слоя. Думаю, стоит рассмотреть класс menu, как наиболее интересный из всех.
Класс «.Menu»
Меню этого шаблона представляет собой набор ссылок, помещенный в слой с классом menu. Сначала определяем внешний вид и положение слоя с данным классом. Делаем границы с помощью параметра border. В данном случае левой, павой и нижней границе задаем отдельные аргументы. Строчка “border-left:#f8f8f8 solid 1px;” определяет для левой границы слоя цвет, тип линии (сплошная) и ширину в один пиксель. Ниже определяем вид ссылки помещенный в данный слой “.menu a { }”. Параметр display:inline; определяет выстраивание всех ссылок в одну линию (горизонтальное меню). Убираем подчеркивание – “text-decoration:none;”. Так же задаем отступы в 4 пикселя и белый цвет.
Далее задаем отображение для ссылки на которую наведен курсор “.menu a:hover { }”. Здесь мы лишь меняем цвет ссылки на черный «color:#000000;” и цвет фона на белый “background-color:#f8f8f8;”. Вот и все. Простенькое, но приятное меню для сайта готово.
Пример
Для того, чтобы у вас все точно получилось я предоставлю вам пример в исходниках.
Спасибо за потраченное на прочтение время и не стесняемся комментировать. Всегда буду рад ответить на возникающие вопросы и выслушать критику.
_________________
А Вы что думаете по-поводу интернет рекламы? Есть мнения, предложения, опыт размещения? Тогда заходим и обсуждаем статью: Быть или не быть рекламе на сайте?
Как Вы знаете мой блог посвящен заработку в интернете. Но у него есть один минус — я не рассматриваю заработок в ЖЖ, для тех же, кто хочет знать как заработать в ЖЖ — прошу перейти на этот блог, в ктором Вы найдете ответы на все свои вопросы по заработку!
Еще интересные записи:
Спасибо за статью, было бы неплохо, еслиб ты написал пару уроков по java
Скачал пример — вместо русского текста знаки вопроса. Примеры с других сайтов отображаются нормально. И да, у меня линукс.
Вроде доходчиво и ясно объяснил,ждем продолжения новых тем.