Как сохранить свои сбережения? В чем лучше хранить деньги? Тайное, неизвестное, мистическое Юрий Болдырев-нам нужен порядочный и умный президент Как  удалить вирус с компьютера? Учимся удалять вирусы и очищать компьютер

Быстро строим сайт

Сайт в интернет

Ремонт ПК

Denver на WordPress

Почтовая рассылка

Ответы на вопросы

Строим сайт на Div-верстке и подключаем стили CSS


Если вы уже освоились в строительстве сайта табличным методом а значит более менее владеете приемами HTML, знаете как подключать отдельный файл style.CSS может быть, еще не совсем но уже начинаете понимать как формируют стили CSS для основного блока вам можно потренироваться в создание сайта на DIV-верстке. Разберем div-верстку трехколоночного сайта.


< !DOCTYPE html>
< html>

< head>
< meta charset="utf-8" />
< title>< /title>
< meta name="keywords" content="" />
< meta name="description" content="" />
< link href="style.css" rel="stylesheet">
< /head>

< body>

< div class="wrapper">
< br>< header class="header">
< strong>Header:< /strong> Для того, чтобы собрать двигатель нужен хороший и разнообразный инструмент. Tак вот, для создания сайта таким инструментом является HTML.Сдесь будет находится шапка нашего сайта
< /header>

< div class="middle">

< div class="container">
< main class="content">
< strong>Content:< /strong> HTML это не язык программирования а всего лишь документ, в котором мы будем собирать свою информацию. Нам нужно только правильно расположить и оформить наш текст и некоторые изображения и для этого нет никакой необходимости специально изучать HTML. Свободное время для всех проблема и мы не можем позволить себе днями напролет сидеть возле компьютера забыв про более важные дела:учеба, работа, отдых и т.д. Посидев вечером и поборовшись, пару часов, с инструментами HTML или как их еще называют в сайтостроение- "ТЕГАМИ", на утро мы уже большую часть того, что изучали просто забудем. А если между занятиями прошло несколько дней то тогда сливай воду, начинай все сначала.
< /main>
< /div>

< aside class="left-sidebar">
< strong>Left Sidebar:< /strong> Мой опыт пригодиться тем кто не хочет надолго и серьезно углубляться в изучение каких-то непонятных символов, но у него назрела необходимость быстро понять, создать, и запустить сайт в интернет. При этом, естественно, получить тот минимальный запас знаний, который позволит в дальнейшем находить ошибки, вносить изменения, добавлять новую информацию и т.д.
< /aside>

< aside class="right-sidebar">
< strong>Right Sidebar:< /strong> Если начать изучать HTML непосредственно с основ, то на все это уйдет слишком много времени и нет никакой гарантии, что будет освоено именно то что Вам пригодится при построении своего сайта. Я предлагаю сразу, взять быка за рога, строить сайт а в процессе построения сайта знания HTML сами по себе отложатся в нашей памяти, без всякого для этого принуждения. Построить сайт за 30-минут, как предлагают многие я не обещаю, так как мы все-таки хотим не копировать а осмысленно строить сайт.
< /aside>

< /div>

< /div>

< footer class="footer">
< strong>Footer:< /strong>Для начала давайте разберемся, что такое HTML в общем плане а в конкретику будем углубляться по мере построения сайта. Сам по себе HTML предназначен для создания структуры расположения WEB-элементов на страничках нашего сайта. Под WEB-элементами мы подразумеваем: тест, таблицы, различные графические элементы, ссылки. Проще говоря HTML дает браузеру понять, что это за элемент а браузер, в свою очередь, отображает заданный нами элемент на WEB-страничке таким каким показал ему HTML.
< /footer>

< /body>
< /html>


Скопируем этот код в блокнот и сохраним его как:"index.html"

P/S Обратите внимание, что между скобкой "< и тегом" не должно быть расстояния,я этот пробел делаю для того, чтобы браузер не отобразил написанное как код.
Должно быть так <td>
А не так < td>

Теперь пропишем стили для этого HTML-кода.



* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}

{
display: block;
}
body {
font: 12px/18px Arial, sans-serif;
width: 100%;
height: 100%;
}
.wrapper {
width: 750px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

/* Header -----------------------------------------------------------------------------*/

.header {
height: 120px;
background: #FFE680;
}

/* Middle -----------------------------------------------------------------------------*/

.middle {
width: 100%;
padding: 0 0 80px;
position: relative;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {

width: 100%; float: left;
overflow: hidden;
}
.content {
padding: 0 150px 0 150px;
}

/* Left Sidebar -----------------------------------------------------------------------------*/

.left-sidebar {
float: left;
width: 130px;
margin-left: -100%;
position: relative;
background: #B5E3FF;
}

/* Right Sidebar -----------------------------------------------------------------------------*/

.right-sidebar {
float: left;
width: 130px;
margin-left: -130px;
position: relative;
background: #FFACAA;
}

/* Footer -----------------------------------------------------------------------------*/

.footer {
width: 750px;
margin: -80px auto 0;
height: 80px;
background: #BFF08E;
position: relative;
}


Можете сразу скопировать его в блокнот и сохранить как "style.css" в ту папку, где у вас находится index.html.

Скопировав по отдельности оба файла в заранее приготовленную папочку . У нас должно получится вот так:

Готовое меню на сайте сгенерированное в программе CSS Tab Designer

Открываем файл "index" в любом браузере и перед нами открывается готовый шаблон сайт.

Готовое меню на сайте сгенерированное в программе CSS Tab Designer

Заполняем полученный сайт текстом, изображениями, ссылками и теми готовыми решениями, которые мы с вами разобрали на пример :Как легче сгенерировать меню в CSS



Стиль —
понятие относительное
и безвременное.

"inpropart"

Как заработать

Графики цен на нефть-золото-нефть-валюта Графики котировок на нефть-золото-серебро-валюту
Радио онлайн

Mультимедиа

Делаем сайт в CSS

Переводим сайт на PHP

Перевал Дятлова



Как повстречать партнера для интимных отношений. Секс знакомства. Как создать свой сайт бесплатно?  Как вылечить насморк? Как заработать в Интернете? Как быть здоровым? Как создать свой сайт бесплатно? Все ответы на вопросы КАК...? Как заработать в Интернете? Создание сайтов на заказ. <Буду писать про мелких предпринимателей.Обсуждать законы которые касаются малого бизнеса в России.