Мы уже можем сделать простенький сайт, применив HTML+CSS.
В этой статье я представлю Вам код блочного шаблона сайта, и подробно расскажу, и покажу, что и как в нём изменить, чтоб сделать из него свой сайт, и выложить его в интернет.
Итак, давайте посмотрим, как выглядит код (и что в нём можно менять), такого вот сайта.
Тему грузоперевозок я взял для примера потому, что чаще всего именно люди работающие в этой сфере, обращаются ко мне за помощью.
Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта.
Времени это займёт столько, сколько потребуется на внимательное прочтение статьи, и материалов по ссылкам, и последовательное выполнение моих инструкций.
Код блочного сайта
/* Стилевое оформление */
http://trueimages.ru/img/81/90/b1718f15.png
">
Наша работа
Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать?
За те 3 месяца, пока
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание.
А мне, учитывая
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
http://trueimages.ru/img/0d/64/07a18f15.png
">
Здесь
«разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте, для
меня нет «глупых» вопросов.
Читайе и создавайте свой сайт самостоятельно, каким
бы ни был Ваш возраст и стаж работы на компьютере.
Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.
Это код статичного сайта, а это значит, что на экранах с разным расширением, он будет оставаться в неизменных размерах.
То есть на мобилах у него появится полоса горизонтальной прокрутки, которой придётся пользоваться, чтоб просмотреть сайт целиком.
А теперь вернёмся к нашему коду.
Прежде чем начать работать с кодом, нужно создать место где будет располагаться сайт до вывода его в интернет.
Для редактирования этого кода, потребуется HTML редактор. У кого он есть, очень хорошо, у кого нет, предлагаю .
Как начать в нём работу, то есть создать файл, прочитайте .
Когда редактор будет установлен, откройте его, скопируйте из представленного выше кода строки 1 — 6, и вставьте в поле редактора, а затем строки 118 — 153, и так же вставьте в редактор.
Таким образом мы выбрали HTML часть кода, из которой создадим HTML файл. Удалите мою нумерацию строк, создайте файл, назовите его index.html, и сохраните в директорию сайта.
Директория должна приобрести такой вид:
Следующим шагом создаём файл style.css, в котором будет расположена таблица стилей.
Вот тут внимание! Файл style.css, в дальнейшем, будет подключаться ко всем страницам сайта, поэтому в нём нужно собрать стили, формирующие основу страницы.
А это все стили из выше приведённого кода, кроме селекторов .left
и .right
, относящихся непосредственно к тексту статьи.
В дальнейшем, если Вам захочется внести какие-то изменения в конструкцию сайта, достаточно будет внести их в файл style.css, и они отобразятся на всех страницах.
Итак, в директории сайта создаём ещё одну папку, и называем её css.
Затем возвращаемся в редактор, открываем новый документ (первая иконка панели), копируем и вставляем в него строки 8 — 80 и 90 — 116.
Пропускаем только стили оформляющие картинки в тексте, так как они предназначены только для одной страницы.
Убираем мою нумерацию, и сохраняем этот новый документ во вновь созданную папку css, под названием style.css.
Делается это следующим образом: в теге
, можно между тегами
и
, вставляется тег <link>, с атрибутами определяющими местоположение и назначение css.</p>
<p><link
href
="css/style.css
" type
="text/css
" rel
="stylesheet
"></p>
<p>После тега <link>, подключим стили, оформляющие картинки расположенные в тексте статьи. (строки 81 — 88). Убираем мою нумерацию и комментарии, так как в файле html комментарии css не работают, и даже наоборот, могут всё испортить.</p>
<p><style
"><br>.left
{<br>float
: left
;<br>margin
: 30px 7px 7px 7px
;<br>
}<br>.right
{<br>float
: right
;<br>margin
: 7px 0 7px 7px
;<br>
}<br>
</style
></p>
<p>После каждой манипуляции с кодом в редакторе, не забывайте сохранить изменения (третья иконка слева). При этом иконка файла должна из красной стать синей.</p>
<p>Вид в редакторе:</p>
<p><img src='https://i1.wp.com/starper55plys.ru/wp-content/uploads/2013/08/4.png' align="center" width="100%" loading=lazy></p>
<p>Следующим шагом разберёмся с изображениями. У меня картинки загружены через сервис trueimages, только для того, чтоб страница открылась у Вас в браузере.</p>
<p>Вам же нужны будут свои изображения, и их нужно сделать, или найти в интернете.</p>
<p>Можно посмотреть в одноимённой статье. Если-же у Вас есть фотошоп, то все изображения лучше делать в нём.</p>
<p>Все сделанные, или найденные изображения, нужно поместить в папку images директории сайта.</p>
<p>Первым делом поменяем шапку сайта. Для этого в файле index.html удалим тег <img> c моей картинкой (строка 124)</p>
<p><img src='https://i2.wp.com/starper55plys.ru/wp-content/uploads/2013/08/5.png' align="center" width="100%" loading=lazy></p>
<p>Затем в файле style.css удалим селектор img.</p>
<p>background-image
: url(../images/schapka.png)
;<br></p>
<p>В редакторе это будет смотреться так</p>
<p><img src='https://i0.wp.com/starper55plys.ru/wp-content/uploads/2013/08/6.png' align="center" width="100%" loading=lazy></p>
<p>Двоеточие в начале адреса изображения ставиться тогда, когда селектор находится в в отдельном css файле. Если стили подключены в html файле, двоеточие в начале адреса не ставится.</p>
<p>Обратите внимание, что размер картинки не должен превышать размер блока header. Определяется он так: щёлкните по файлу картинки правой клавишей, в появившемся меню выбираете "Свойства", и затем, "Подробно", там и будут показаны размеры.</p>
<p>Теперь, если пройти в меню "Запуск", и открыть index.html, то откроется страница с Вашим изображением в шапке сайта.</p>
<p>Меняем остальные картинки (строки 128,129,130,135,141) В отличие от предыдущей, в них нужно изменить только адреса. Удалить адреса моих изображений, и вставить адреса Ваших.</p>
<p>После чего они приобретут примерно такой вид. Название картинки у меня i2.png, а у Вас будет своё.</p>
<p><p
><img src='/audio/html-makety-html-makety-gaid-dlya-veb-dizainerov-po-podgotovke-maketov.html' loading=lazy>Наши сотрудники</p
></p>
<p>Ну вот, осталось написать свои заголовки, оформить и подвинуть их туда куда Вам нужно(как это сделать сказано в комментариях к коду), написать свой текст, и главная страница Вашего сайта готова!</p>
<p>Если Вам захочется изменить положение сайдбара, или сделать два сайдбара, то код таких шаблонов представлен в статье . Просмотрев их, можно сделать небольшие изменения в коде, представленном в этой статье, и получить желаемый результат.</p>
<p>Итак главная страница сайта готова, можно приступать к созданию рубрик и страниц. Я покажу, как создаётся одна рубрика, и в ней одна страница, а уж остальные Вы, точно так же, сделаете самостоятельно.</p>
<p>В директории сайта у нас есть папка content. Открываем её и создаём ещё одну папку — rubrica1(у Вас конечно будет своё название). В этой папке создаём ещё две папки — css и images.</p>
<p>Мы научимся верстать шаблон сайта на основании psd файла, сделанного в фотошопе. Сначала мы создадим папку с необходимыми для шаблона изображениями. Потом создадим файл index. Потом мы создадим базовую HTML структуру шаблона и затем постепенно будем ее наполнять управляющими блоками для различных частей и элементов сайта. После этого мы создадим файл style. А уже после этого мы с помощью этого файла будем редактировать внешний вид сайта, до тех пока он не будет выглядеть в точности, как и задумывалось изначально.</p>
<p>Макет сайта в фотошопе
</span><br>В предыдущем уроке из этого цикла мы шаг за шагом уже . Для того, чтобы посмотреть изображение макета сайта в большем размере, щелкните по картинке снизу.</p>
<p>Изображение логотипа
</span><br>Прежде всего нам надо сохранить отдельным файлом изображение логотипа. Отключаем все лишние слои, оставляем картинку логотипа и, используя команду « » (Save for Web…), сохраняем изображение лого.<br><img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/02.jpg' width="100%" loading=lazy></p>
<p>Файлы изображений
</span><br>Помимо логотипа нам нужно сохранить еще несколько изображений. В основном это иконки, фоны, а также две картинки-предпросмотра для поста. Все изображения должны находиться в папке <i>images
</i>.<img src='https://i0.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/03.jpg' height="556" width="500" loading=lazy></p>
<p>Кстати, что касается изображений, то файлы <i>logo.png
</i>, <i>temp-post-thumbnails1.png
</i> и <i>temp-post-thumbnails2.png
</i> можно сохранить прямо с demo шаблона . Файлы <i>back-top-icon.png
</i>, <i>credits.png
</i>, <i>rss-icon.png
</i>, <i>search-icon.png
</i>, <i>star.png
</i> и <i>twitter-icon.png
</i> можно сделать со скриншота макета. О том, как сделать файл <i>bg.png
</i>, рассказано в . А файл <i>faux.png
</i> представляет собой протяжку фона с зоной сайдбара, выделенной цветом. Это прямоугольник размером 958х22 пикселей. Первая часть, шириной 650 пикселей — закрашена белым, вторая часть, шириной 295 пикселя — закрашена цветом #f8f8f8 и третья часть шириной 15 пикселей снова белая.</p>
<p>Базовая HTML структура
</span><br>В том же месте, где лежит папка <i>images
</i> с файлами изображений макета, создаем простой текстовый документ. Для этого щелкаем правой кнопкой мыши по пустому полю и выбираем пункт «Создать» > «Текстовый документ». Открываем документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем <i>index.htm
</i>. В строке «Кодировка» выбираем <i>UTF-8
</i> и нажимаем «Сохранить». У нас появится файл <i>index
</i>, в который мы и будем вписывать все HTML коды.</p>
<p>Теперь копируем код, приведенный ниже, и вставляем в файл <i>index
</i>. Важно! Открывать этот файл нужно с помощью специального редактора. Я обычно пользуюсь «Блокнотом.» Для этого щелкаем правой кнопкой мыши по файлу <i>index
</i> и выбираем пункт «Открыть с помощью…» > «Блокнот». Есть и другие специальные редакторы с подсветкой разметки. Кому как удобнее.</p>
<p>Базовый HTML код содержит в себе описание типа документа, ссылку на файл стилей и глобальный контейнер <i>div
</i>, для управления содержимым веб-страницы. Все наши локальные блоки (контейнеры) мы будем вставлять между основными тегами div id=»container«> и /div>.</p><p>Ticket Stub
</p><p>HTML: шапка сайта
<br>Сначала вставляем HTML код для шапки сайта div id=»header»>. В тег h1> мы заключаем заголовок сайта в виде логотипа. Далее запись с тегами ul> и li> управляет блоком подписки через Твиттер и RSS.</p>
<p>HTML: две колонки
<br>Поскольку у нас тема двухколоночная, то мы задаем два дива. Первый — это основной контент, который состоит из анонсов постов и навигации сайта и второй- это сайдбар. В эти контейнеры мы будем вставлять соответствующие блоки, представленные в следующих пунктах.</p>
<h2>Captain America Kicks Ass!</h2>
<p>Lorizzle ipsum dolor sizzle ghetto, consectetuer fizzle elit. Sheezy doggy velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit cool, own yo" vizzle, arcu. Pellentesque eget phat. My shizz erizzle. For sure izzle dolizzle for sure turpis tempizzle sizzle. Maurizzle i saw beyonces tizzles and my pizzle went crizzle nibh et turpizzle. Bizzle izzle i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eleifend pot nisi. In hac habitasse platea dictumst. Pimpin" dapibizzle. Cool tellus owned, pretizzle eu, mattis uhuh ... yih!, eleifend dang, nunc. Ma nizzle suscipizzle. Integizzle shizzlin dizzle away sizzle purus. Mammasay mammasa mamma oo sa at dope. Yo mamma erizzle. condimentizzle, turpizzle nizzle congue consectetuer, brizzle libero bling bling fizzle, sizzle ullamcorper sure for sure nizzle sizzle.</p>
<p>HTML: навигация
<br>После кода анонса поста вставляем код навигации шаблона, представленный ниже.</p>
<p>HTML: сайдбар
<br>Сайдбар у нас состоит из основного меню (pages), нескольких категорий (categories), блока поиска (search) и текстового блока (About). Заголовок текстового блока заключен в тег h3>. Ранее в пункте этого урока «HTML: две колонки» мы уже заготовили место для дива сайдбара. Поэтому копируем код ниже и заменяем див с надписью!—Sidebar—> на этот код.</p>
<p>HTML: футер
<br>Футер содержит ссылку на сайт wordpress.org, ссылку на сайт автора шаблона и кнопку Back to top. Копируем код и вставляем в основной HTML документ.</p>
<p>HTML код шаблона
<br>После того, как мы скопировали все коды, весь HTML код шаблона будет выглядеть так. Щелкните по картинке, чтобы посмотреть изображение в большом размере.<img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/04.gif' height="759" width="500" loading=lazy></p>
<p>Если на этой стадии два раза щелкнуть по файлу <i>index
</i>, то в браузере откроется шаблон нашего сайта, который будет выглядеть так. Пока шаблон отдаленно напоминает то, что мы хотим увидеть. Поэтому следующие наши действия будут состоять в том, чтобы с помощью стилей css настроить внешний вид шаблона.<img src='https://i0.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/17.jpg' height="801" width="500" loading=lazy></p>
<p>Базовый CSS
<br>Сначала создадим сам файл стилей. Для этого в той же папке, где у нас находится папка <i>images
</i> и файл <i>index
</i>, создаем текстовый документ. Щелкаем правой кнопкой мыши по пустому полю и выбираем пункт «Создать» > «Текстовый документ». Открываем документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем style.css. В строке «Кодировка» выбираем UTF-8 и нажимаем «Сохранить». У нас появится файл <i>style
</i>, в который мы и будем вписывать все стили. Этот файл также нужно редактировать с помощью какого-нибудь текстового редактора. Подойдет и «Блокнот», в общем, кому что нравится.</p>
<p>Копируем код ниже и вставляем в созданный нами файл стилей. С помощью этого кода мы зададим некоторые общие установки, а также цвет, размер и тип основного шрифта (font), цвет заднего фона (background), цвет для ссылок (a) и общую ширину сайта (#container).</p><p>Body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
font: 14px/24px Helvetica, Sans-Serif; color: #7e7e7e;
background: #f5f5f5 url(images/bg.png);
}
a {
color: #9f3a3a; text-decoration: none;
}
a:hover {
color: #792323;
}
#container {
width: 960px; margin: 0 auto;
}
</p><p><br><img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/06.jpg' width="100%" loading=lazy></p>
<p>CSS: шапка сайта
<br>Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы поставили на место логотип (#logo), иконки Твиттера и RSS и соответствующие текстовые надписи (#subscribe).</p><p>
#header {
overflow: hidden;
}
#header #logo {
margin: 20px 0 10px 15px; float: left;
}
#header #subscribe {
list-style: none; float: right; margin: 35px 30px 0 0;
font-size: 16px;
}
#header #subscribe li.rss {
background: url(images/rss-icon.png) left no-repeat;
padding: 5px 0 5px 40px; margin: 0 0 10px 0;
}
#header #subscribe li.twitter {
background: url(images/twitter-icon.png) left no-repeat;
padding: 5px 0 5px 40px;
}
</p><p>На этой стадии шаблон выглядит так.<br><img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/07.jpg' width="100%" loading=lazy></p>
<p>CSS: две колонки
<br>Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы задаем стиль контейнеру <i>main
</i>, в частности бэкграунд колонок и обводку.</p><p>
#main {
background: url(images/faux.png);
border: 1px solid #e6e6e6;
overflow: hidden;
box-shadow: 0px 0px 5px #d8d8d8;
-moz-box-shadow: 0px 0px 5px #d8d8d8;
-webkit-box-shadow: 0px 0px 5px #d8d8d8;
border-bottom: 15px solid #fff;
}
</p><p>На этой стадии шаблон выглядит так.<br><img src='https://i1.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/08.jpg' width="100%" loading=lazy></p>
<p>CSS: основной контент
</span><br>Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы задаем ширину и расположение блоков с основным контентом (анонсами поста).</p><p>
#main #content {
width: 590px; float: left; padding: 35px 30px 60px 30px;
}
#main #content h2 {
font-size: 24px; font-weight: normal; text-transform: uppercase;
margin: 0 0 15px 0;
}
#main p {
margin: 0 0 24px 0;
}
#main #content .post-thumbnail {
float: left; margin: 4px 30px 10px 0;
}
#main #content .post-thumbnail img {
padding: 1px; border: 1px solid #eaeaea;
}
</p><p>На этой стадии шаблон выглядит так.<br><img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/09.jpg' width="100%" loading=lazy></p>
<p>
#main #content .post-info {
padding: 1px; border: 1px solid #e9e9e9; margin: 0 0 60px 0;
}
#main #content .post-info ul {
background: #e9e9e9; list-style: none; text-transform: uppercase;
padding: 15px 20px 10px 20px; overflow: hidden;
}
#main #content .post-info ul li.date {
float: left;
}
#main #content .post-info ul li.category {
float: left; margin: 0 0 0 20px;
background: url(images/star.png) left no-repeat; padding: 0 0 0 35px;
}
#main #content .post-info ul li.read-more {
float: right;
}
</p><p>На этой стадии шаблон выглядит так.<br><img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/10.jpg' width="100%" loading=lazy></p>
<p>CSS: навигация
<br>Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы настраиваем кнопки навигации.</p><p>
#main #content .pagination {
overflow: hidden; margin: 0 0 60px 0;
}
#main #content .pagination p {
width: 180px; border: 1px solid #e9e9e9; padding: 1px;
text-align: center;
}
#main #content .pagination p.prev { float: left; }
#main #content .pagination p.next { float: right; }
#main #content .pagination p a {
display: block; background: #e9e9e9; padding: 15px 0px 10px 0px;
text-transform: uppercase;
}
</p><p>На этой стадии шаблон выглядит так.<br><img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/11.jpg' width="100%" loading=lazy></p>
<p>CSS: сайдбар
<br>Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы настраиваем внешний вид сайдбара.</p><p>
#main #side {
width: 263px; float: left; padding: 15px 30px 15px 15px;
border-top: 15px solid white;
}
#main #side ul#pages, #main #side ul#categories {
list-style: none; margin: 0 0 30px 0;
}
#main #side ul#pages li, #main #side ul#categories li {
border: 1px solid #e9e9e9; padding: 1px;
margin: 0 0 10px 0; text-align: right;
}
#main #side ul#pages li a, #main #side ul#categories li a {
display: block; background: #e9e9e9; padding: 15px 20px 10px 20px;
text-transform: uppercase;
}
</p><p>На этой стадии шаблон выглядит так.<br><img src='https://i1.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/12.jpg' width="100%" loading=lazy></p>
<p>CSS: строка поиска
</span><br>Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы настраиваем как будет выглядеть строка поиска.</p><p>
#main #side h3 {
font-size: 20px; font-weight: normal; text-transform: uppercase;
margin: 0 0 10px 0; text-align: center;
}
#main #side form {
overflow: hidden; margin: 0 0 30px 0;
}
#main #side input.searchbar {
float: left; width: 193px; height: 25px; padding: 8px 13px 6px 13px;
background: #fff; border: 1px solid #e9e9e9;
font: 14px Helvetica, Sans-Serif; color: #7e7e7e;
}
#main #side input.searchbutton {
width: 34px; height: 34px; float: left; margin: 3px 0 0 8px;
background: url(images/search-icon.png); text-indent: -9999px;
cursor: pointer;
padding: 0 0 0 34px; /*IE Fix*/
}
</p><p>На этой стадии шаблон выглядит так.<br><img src='https://i1.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/13.jpg' width="100%" loading=lazy></p>
<p>CSS: футер
<br>Копируем код снизу и вставляем в файл стилей. С помощью этого кода мы настраиваем внешний вид футера.</p><p>
#footer {
overflow: hidden; margin: 0 0 60px 0;
}
#footer #credits {
list-style: none; margin: 20px 0 0 30px;
}
#footer #credits li {
float: left; margin: 0 6px 0 0;
}
#footer #credits li.wordpress a {
display: block; width: 20px; height: 20px;
background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
}
#footer #credits li.spoongraphics a {
display: block; width: 25px; height: 20px;
background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
}
#footer p#back-top {
float: right; margin: 0 30px 0 0;
}
#footer p#back-top a {
display: block; padding: 0 0 0 26px;
background: url(images/back-top-icon.png) left no-repeat;
}
</p><p>На этой стадии футер выглядит так.<br><img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/14.jpg' width="100%" loading=lazy></p>
<p>Финальный результат
</span><br>Ну вот мы и закончили верстать наш шаблон. Для того, чтобы посмотреть, как он выглядит в сверстанном виде, щелкните по картинке ниже.<br><img src='https://i2.wp.com/designonstop.com/wp-content/uploads/images/2011/10/webdesign/25pra_code/16.jpg' width="100%" loading=lazy></p>
<h2>Элементы Макета HTML</h2>
<p>Сайты часто отображает контент в несколько колонок (подобно журналу или газете).</p>
<p>Спецификация HTML5 предлагает новые семантические элементы, которые определяют разные части веб-страницы:</p>
<h2>Макеты Компоновки HTML</h2>
<p>Есть четыре различных способа для создания макетов из нескольких столбцов. Каждый способ имеет свои плюсы и минусы:</p>
<ul><li>Модель table HTML</li>
<li>Модель float CSS</li>
<li>Модель framework CSS</li>
<li>Модель flexbox CSS</li>
</ul><h2>Какой выбрать?</h2>
<h3>Модель table HTML</h3>
<p>Элемент <table> не был разработан, для инструмента макет! Задача элемента <table> отображать табличные данные. Так что лучше, не нужно использовать таблицы для разметки макета! Они внесут беспорядок в коде. И представьте, как трудно будет перестроить свой сайт через пару месяцев.</p>
<p><b>Совет:
</b> Не используйте таблицы для разметки макета!</p>
<h3>Модель framework CSS</h3>
<p>Если вы хотите создать свой макет быстро, вы можете использовать фреймворк, как W3.CSS или <a href="">Bootstrap</a> .</p>
<h3>Модель float CSS</h3>
<p>Он является общим, чтобы сделать весь веб-макетов, используя CSS свойства float.</p>
<p>Поплавок легко изучить - нужно просто вспомнить, как работают свойства float и clear. Недостатки: Плавающие элементы привязаны к документообороту, который может нанести вред гибкости.</p>
<h3>Пример Макета Float</h3>
<h1>Городская Галерея</h1>
<h1>Лондон</h1>
<p>Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.</p>
<p>Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.</p>
<p>В этом подразделе описаны популярные макеты сайтов, которые чаще всего используются в верстке, а также несколько приемов, придающих им более привлекательный вид. Макеты сделаны с помощью , поэтому от вас потребуется знание этих языков, чтобы в полной мере понимать принцип верстки. Если же вы их знаете, то значит вам известно, что в HTML и CSS одного и того же результата можно добиться совершенно разными путями. Здесь показаны только некоторые возможные способы.</p>
<p>Макеты делятся на три основных типа:</p>
<ol><li><b>Фиксированные
</b> - это макеты с фиксированной шириной (CSS ), оптимизированной под размер большинства современных мониторов пользователей или с «плавающей» шириной, которая имеет ограничения по максимальной (CSS ) и минимальной (CSS ) ширине страницы. Обычно содержимое в таких случаях располагается по центру, однако некоторые вебмастеры предпочитают прижимать страницы сайтов к одной из сторон окна браузера.</li>
<li><b>Резиновые
</b> - макеты, которые имеют изменяемые размеры, подстраиваясь под окно браузера и занимая всю его доступную ширину. Однако им, как и фиксированным, также часто дополнительно задают максимальную и/или минимальную ширину. Одним из вариантов для достижения этого эффекта может быть обрамление блоков HTML-страницы в дополнительный оберточный блок (если он еще отсутствует в макете), на манер фиксированных макетов, к которому затем и применяются свойства регулировки ширины. Это необходимо, чтобы при уменьшении окна браузера колонки не накладывались друг на друга или не сползали вниз.</li>
<li><b>С контентом впереди
</b> - это резиновые или фиксированные макеты, у которых колонка с основным содержимым страницы (контентом) идет выше в HTML-коде, чем большинство других элементов. Это делается для того, чтобы в браузерах с отключенным CSS пользователи могли видеть сначала то, за чем пришли, а уже потом навигацию и остальные второстепенные элементы HTML-страницы. Однако верстка подобных макетов несколько сложнее в реализации и требует от верстальщика определенного уровня навыков и знаний, необходимых для одинакового отображения сайта в разных браузерах.</li>
</ol><p>Кроме колонок в макетах присутствует верхняя часть (хедер) и нижняя (футер), так как они уже давно являются привычной и неотъемлемой частью практически всех сайтов в интернете. По этой же причине здесь вы найдете примеры, позволяющие <i>прижать футер
</i> к низу страницы и сделать <i>колонки одинаковой высоты
</i>.</p>
<p>Обратите внимание, что практически во всех макетах вы можете поменять некоторые колонки местами, не изменяя HTML-код страниц. Поэтому, во-первых, на основе этих макетов вы можете создать какие-то свои варианты, а во-вторых, если получится так, что вы уже</p>
<p>С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе Adobe Photoshop, поэтому вы, как верстальщик, должны уметь пользоваться этой программой, а именно уметь вырезать изображения из макета, измерять отступы между элементами, вычислять размеры и параметры различных компонентов будущей веб-страницы и т.д. Первым делом давайте произведем настройку рабочего пространства в программе Adobe Photoshop для удобства работы.</p>
<h2></h2>
<p>Все примеры будут показаны в программе <b>Adobe Photoshop CS5
</b>, с интерфейсом на английском языке.</p>
<p>Открыв программу Adobe Photoshop, вы увидите примерно следующее:</p>
<ol><li>Строка главного меню;</li>
<li>Панель параметров;</li>
<li>Панель инструментов;</li>
<li>Дополнительные панели.</li>
</ol><p>Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню <b>Window
</b> – <b>New Workspace
</b>:</p>
<p><img src='https://i1.wp.com/psd-html-css.ru/sites/default/files/public/old/cssless/css2-2.jpg' width="100%" loading=lazy></p>
<p>Введите имя для нового рабочего пространства, например, <i>my workspace
</i>, и нажмите <b>Save
</b>. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив <b>History
</b>, <b>Info
</b>, <b>Layers
</b>, <b>Navigator
</b>, <b>Options
</b>, <b>Tools
</b>. С остальных панелей можете снять галочки, если они установлены.</p>
<p>Теперь нам нужно эти панели закрепить. Для этого кликнете по верхней части панели, и перетащите ее в нужное место, чтобы в итоге ваше рабочее пространство выглядело таким образом:</p>
<p><img src='https://i2.wp.com/psd-html-css.ru/sites/default/files/public/old/cssless/css2-3.jpg' height="555" width="270" loading=lazy></p>
<p>При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:</p>
<p><img src='https://i0.wp.com/psd-html-css.ru/sites/default/files/public/old/cssless/css2-16.jpg' height="145" width="245" loading=lazy></p>
<p>Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт <b>Close
</b>:</p>
<p><img src='https://i1.wp.com/psd-html-css.ru/sites/default/files/public/old/cssless/css2-4.jpg' height="311" width="177" loading=lazy></p>
<p>Первый макет, который мы будем с вами верстать называется <b>simple_text.psd
</b>, находится он в папке <b>templates
</b>. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши <b>Ctrl+O
</b> (или через меню <b>File
</b> – <b>Open
</b>), и выберите файл.</p>
<p>Включите линейку при помощи горячих клавиш <b>Ctrl+R
</b> или через меню <b>View
</b> – <b>Rulers
</b>:</p>
<p><img src='https://i1.wp.com/psd-html-css.ru/sites/default/files/public/old/cssless/css2-5.jpg' height="231" width="381" loading=lazy></p>
<p>Теперь кликните два раза по линейке и откройте вкладку <b>Units & Rulers
</b>, чтобы настроить единицы измерения. Выберите в блоке <b>Units
</b> для <i>Rulers
</i> и <i>Type
</i> единицы измерения пиксели:</p>
<p><img src='https://i0.wp.com/psd-html-css.ru/sites/default/files/public/old/cssless/css2-6.jpg' width="100%" loading=lazy></p>
<p>Теперь все готово, можно начинать верстать макет.</p>
<h2>Создание структуры веб-страницы</h2>
<p>Создайте на рабочем столе папку и назовите ее <b>simple text
</b>. В этой папке создайте два файла <b>index.html
</b> и <b>style.css
</b>.</p>
<p>Как вы помните структуру веб-страницы мы создаем на языке HTML. Поэтому сначала открываем файл <b>index.html
</b>, и записываем в нем первоначальный код:</p><p>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple text
