Как сверстать веб страницу. Часть 1 Хабрахабр. Уважаемый читатель, этой статьей я открываю цикл статей, посвященных врстке. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS. Часть 1. Верстка стандартными средствами. Готовые Html Страницы' title='Готовые Html Страницы' />В нашем случае это будет светлосерый фон страницы, фон заголовка, пустое изображение, два. И вот, наконец, мы можем попрактиковаться в написании HTML кода. Готовый проект можно скачать здесь. Большое разнообразие готовых сайтов от несложных html шаблонов до. Особенно это актуально для сайтов визиток в несколько страниц, где. Всем привет Однажды я подумал для чего постоянно прописывать один и тот же код для создания какихлибо сайтов, если можно. Подборка совершенно бесплатных CSS и HTML шаблонов и с адаптивным дизайном middot 12 бесплатных и современных. Преимущество данной верстки состоит в том, что код получается более чистым, а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков. Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory. Структура файлов. Первым шагом давайте создадим простую структуру файлов для наших файлов. Создаем папку с названием нашего проекта, например Whitesquare. В ней создаем пустой файл index. В папке проекта создаем папку css с пустым файлом styles. В папке проекта создаем пустую папку images. Предварительный осмотр. После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи Как будут нарезаться изображения Какими будут основные стили Какой макет у нас получится Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Готовые Html Страницы' title='Готовые Html Страницы' />Давайте рассмотрим эти вопросы по порядку. Общие изображения. На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей. Сохраним логотипы следующим образом imageslogo. В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимостиimages sample. Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали. Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http ru. В итоге получится два файла imagessocial. Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS. На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега. Основной цвет фона примерно соответствует цвету f. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body. Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshopе и посмотреть свойства шрифта. В данном случае это Tahoma 1. Так же в этом макете параграфы имеют увеличенные отступы. Прописываем все эти стили в styles. Запишем в index. html следующее lt Также подключаем наш файл стилей и внешний файл со стилями шрифтов. В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html. Internet Explorer меньше 9 версии. Мета тег X UA Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом. Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет. Макет. В данном случае, мы видим, что сайт состоит из двух колонок основного контента и сайдбара. Над ними находится шапка header, в которой располагаются три горизонтальных блока логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера footer. Опишем это в теге body lt body. Также добавили отступ у контента снизу. Подменю. Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее lt aside. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого. Контент сайдбара. В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов. В html это выглядит так lt h. OUR OFFICESlt h. Добавим код цитаты в раздел sectionlt section. QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT. John Doe, Lorem Ipsumlt cite. И применим для него стили blockquote. Поэтому остается добавить только три параграфа с самим текстом после. Lorem ipsum dolor sit amet. Делается это с помощью тега lt figure. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section. Блок Our teamПри верстке этого блока добавим сначала заголовок lt h. OUR TEAMlt h. 2. Со стилем section h. Карточки будут иметь следующие стили figure figcaption. Также этот div задает обоим блокам высоту 9. Лента Твиттера. Верстаем содержимое ленты Твиттера lt div id. Aenean aug. Стили footer h. Все ссылки разделились на большие иконки. Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение. Копирайт. Блок с копирайтом и логотипом это картинка со ссылкой и параграф с текстом под ним. Готовый проект можно скачать здесь. Вяжем Оригинальный Коврик На Табурет.