Как сверстать веб- страницу. Часть 1 / Хабрахабр. Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке. В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS. Часть 1. Верстка стандартными средствами. Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды.
- Здесь выложены цифровые книги по теме HTML и CSS. Скачать самоучитель CSS (формат CHM, 674 Кб, последнее обновление 14.11. 2013).
- В html хорошо понимаю. Подскажите учебник по верстке страниц с примером, к примеру взяли шаблон и начали верстать, где все хотя бы чуть чуть подробно расписана суть верстки..
- Сообщений: 33. 09.01. 2013, 16:22 Учебник по HTML 5 и CSS и CSS или новые HTML 5 и CSS 3? Учебник по html /css/ или верстке в целом HTML, CSS.
- Учебник HTML для начинающих. Блочная верстка.
Оно не претендует на роль полноценного учебника. Его главная задача - дать читателю основные понятия о HTML, CSS и блочной верстке. - Урок 10 CSS & HTML - Первичная HTML5 вёрс.
Dmitry Roitman 4 год. iForum 2013, Юрий Артюх. Доклад: 'HTML5/. Добавлено: 3 год. iforum ua 3 год. Урок верстки полноценной книги в Indesign. - Блочная вёрстка. В довершение главы акцентирую Ваше внимание на еще одном способе верстки сайта, ранее в учебнике HTML я приводил примеры верстки страницы при помощи таблиц и фреймов, теперь имея накопленный багаж знаний.
- Книга, в которой рассматриваются основы CSS (каскадных таблиц стилей) и динамического HTML.
Небольшой учебник, в котором излагаются основы блочной вёрстки веб-страниц. - 18 ноября 2013 в 07:03 Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем.
Книги Веб технологии HTML. 11.07.2013 Ташков П. А. - Веб-мастеринг. HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка.
Так что эту нишу восполняет моя новая электронная книга «Вёрстка веб-страниц», которая будет полезна и новичкам и опытным пользователям.
Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков. Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory. Структура файлов.
Первым шагом давайте создадим простую структуру файлов для наших файлов. Создаем папку с названием нашего проекта, например Whitesquare. В ней создаем пустой файл index. В папке проекта создаем папку css с пустым файлом styles.
В папке проекта создаем пустую папку images. Предварительный осмотр. После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его.
Нам нужно понять следующие вещи: Как будут нарезаться изображения? Какими будут основные стили? Какой макет у нас получится? Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода.
Давайте рассмотрим эти вопросы по- порядку. Общие изображения.
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло- серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей. Сохраним логотипы следующим образом: /images/logo. В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости/images/ sample.
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали./images/bg. Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http: //ru. В итоге получится два файла: /images/social. Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.
Как быстро и эффективно научиться верстке веб-страниц Верстка сайта: учебник HTML 5, CSS 3 Published on Mar 28, 2013.
Основные стили. И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS. На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f. Он будет показан в случае, если фоновая картинка не загрузится.
Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 1. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в styles. Tahoma, sans- serif. Oswald', sans- serif. В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили». Каркас HTML. И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index. html следующее: < ! Content- type" content="text/html; charset=utf- 8">.
X- UA- Compatible" content="IE=Edge">. Whitesquare< /title>. Oswald: 4. 00,3. 00" type="text/css">. IE 9]>. < script src="http: //html. Здесь мы указываем, что используем разметку HTML5, кодировку utf- 8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html. Internet Explorer меньше 9 версии. Мета- тег X- UA- Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом. Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет. Макет. В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы.
В самом низу под колонками располагается серый горизонтальный блок футера (footer). Опишем это в теге body: < body>. Wrapper используется для объединения блоков и их выравнивания по центру страницы. Затем укажем стили блоков: #wrapper {.
Логотип. Вставляем логотип в тег header: < header>. Whitesquare logo"> < /a>. Дополнительных стилей не требуется.
Поиск. Вставляем форму поиска в тег header: < header>. Search"> < button type="submit"> GO< /button>. И стили выравнивания по правому краю для нее: form[name="search"] {. Меню. Для отображения меню необходимо создать список со ссылками внутри тега nav: < nav>. HOME< /a> < /li>.
ABOUT US< /li>. SERVICES< /a> < /li>. PARTNERS< /a> < /li>. CUSTOMERS< /a> < /li>.
PROJECTS< /a> < /li>. CAREERS< /a> < /li>.
CONTACT< /a> < /li>. CSS стили для него будут следующие: nav a {. Oswald', sans- serif. Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт. Заголовок страницы. Заголовок страницы помещается в div с идентификатором heading< div id="heading">. ABOUT US< /h. 1>.
Заголовок имеет следующие стили: #heading {. Oswald', sans- serif. Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h. Колонки. Для того, чтобы создать колонки страницы нужно прописать следующие стили: aside {. Здесь мы задали фиксированную ширину 2. Также добавили отступ у контента снизу.
Подменю. Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее: < aside>. LOREM IPSUM< /li>. DONEC TINCIDUNT LAOREET< /a> < /li>. VESTIBULUM ELIT< /a> < /li>. ETIAM PHARETRA< /a> < /li>.
PHASELLUS PLACERAT< /a> < /li>. CRAS ET NISI VITAE ODIO< /a> < /li>. И применяем к подменю следующие стили. Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого. Контент сайдбара. В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
В html это выглядит так: < h. OUR OFFICES< /h. Our offices"> < /p>.
В стилях укажем шрифты, цвета и отступы: aside > h. Oswald', sans- serif.
Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже. Цитата. Вёрстку контента начнём с добавления цитаты. Добавим код цитаты в раздел section< 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 Ipsum< /cite>. И применим для него стили: blockquote {.
Oswald', sans- serif. Здесь нет ничего нового, так же — шрифты, фоны и отступы.
Контент. Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после .< p> Lorem ipsum dolor sit amet…< /p>. Donec vel nisl nibh…< /p>. Donec vel nisl nibh…< /p>. Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега : < figure>.
Oswald', sans- serif. Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css- свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
Блок «Our team»При верстке этого блока добавим сначала заголовок: < h. OUR TEAM< /h. 2>. Со стилем: section > h. Oswald', sans- serif.
А затем два блока- строки с карточками сотрудников< div class="team- row">. John Doe< span> ceo< /span> < /figcaption>. Saundra Pittsley< span> team leader< /span> < /figcaption>. Ericka Nobriga< span> art director< /span> < /figcaption>. Cody Rousselle< span> senior ui designer< /span> < /figcaption>. Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили: figure figcaption {.
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева. Футер. Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом. Для начала создадим контейнер футера с этим блоками: < footer>. И применим к нему оформление: footer {.
Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 9. Также этот div задает обоим блокам высоту 9. Лента Твиттера. Верстаем содержимое ленты Твиттера: < div id="twitter">.
TWITTER FEED< /h. In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla.
In eget mi dui, sit amet scelerisque nunc. Aenean aug. Стили: footer h. Oswald', sans- serif.
Поплавки. Блочная верстка. Учебник CSS. Эх рыбалка. Ладно, будем считать, что отдохнули перед очередной порцией информации. Итак, свойство float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем "поплавок". А элемент с таким свойством называют "всплывающим" Теперь побольше конкретики и примеров.
Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон. Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера. Значения свойства float: left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа. Выравнивает элемент по правому краю, остальные элементы обтекают его слева.
Выравнивание элемента не задается. Небольшой пример: заставим текст обтекать фотографию по правому краю при этом сам блок с фотографией "всплывёт" с левой стороны.< ! DOCTYPE HTML PUBLIC "- //W3.
C//DTD HTML 4. 0. Transitional//EN" "http: //www. TR/html. 4/loose.
Текст в этом блоке обтекает рисунок помещённый в контейнер div с правой стороны, так как сам блок с рисунком, с помощью свойства float с значением left, "всплывает" слева. А вот в примере ниже показано как могут располагаться элементы относительно друг друга, если свойство float присвоено нескольким элементам. Пример: < ! DOCTYPE HTML PUBLIC "- //W3. C//DTD HTML 4. 0. Transitional//EN" "http: //www. TR/html. 4/loose.
Свойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон. Значения: both - Запрещает обтекание элемента с левой и правой стороны. Запрещает обтекание элемента с левой стороны. Запрещает обтекание элемента с правой стороны. Запрет на обтекание элемента не задается.(по умолчанию). Вот пример где clear отменяет действие float< !
DOCTYPE HTML PUBLIC "- //W3. C//DTD HTML 4. 0. Transitional//EN" "http: //www. TR/html. 4/loose.
Этот блок всплывает слева.< /div> < div style="background: #c. И этот блок всплывает слева.< /div> < div style="background: #0c. А этот блок отменяет обтекание с левой стороны.< /div> < /body> < /html> В довершение главы акцентирую Ваше внимание на еще одном способе верстки сайта, ранее в учебнике HTML я приводил примеры верстки страницы при помощи таблиц и фреймов, теперь имея накопленный багаж знаний, настало время познакомить Вас с блочной версткой сайта, используя блоки div и свойства CSS. Разберём классический макет верстки сайта из трёх колонок, а так же "шапки" и "подвала". Взгляните на пример: < !
DOCTYPE HTML PUBLIC "- //W3. C//DTD HTML 4. 0. Transitional//EN" "http: //www. TR/html. 4/loose. Блочная вёрстка< /title> < /head> < body style="background: #cc.
Логотип< /div> < div style="float: left; background: #c. Меню< /div> < div style="float: right; background: #c. Реклама< /div> < div style="margin: 0 1. Основное содержание< br> < br> < br> < br> < br> И ещё куча текста.< /div> < div style="clear: both; background: #0c. Подвал< /div> < /body> < /html> Что было понятно "расшифрую" каждую строчку из примера выше. DOCTYPE HTML PUBLIC "- //W3.
C//DTD HTML 4. 0. Transitional//EN" "http: //www. TR/html. 4/loose. Блочная вёрстка< /title> < /head>. Думаю понятно.: ) стандартное начало любой страницы.< body style="background: #cc.
Используем margin: 0 для того чтобы обнулить поля в окне браузера.< div style="clear: both; background: #0c. Логотип< /div> - Создаём контейнер с будущим логотипом и запрещаем его обтекание с обеих сторон, используя clear: both, теперь что бы не случилось, последующие блоки будут идти снизу, а шапка сайта как ей и положено будет располагаться сверху.< div style="float: left; background: #c. Меню< /div> - Левая колонка с "Меню" выровнена по левому краю свойством float: left и имеет фиксированный размер в 1. Реклама< /div> - Правая колонка с рекламой выровнена по правому краю свойством float: right; и тоже имеет фиксированный размер 1. Основное содержание< /div> - Центральная колонка никак не выравнивается, но занимает своё место по центру, так как имеет широкие поля слева и справа margin: 0 1.
Почему поля 1. 80 пикселей, а не 1. Меню" и "Реклама"? Отвечаю: потому что кроме ширины width: 1. Подвал< /div> - Ну и "подвал" блок, в котором, как правило, располагаются контактные данные и авторские права, так же как логотип запрещает на всякий случай обтекание слева и справа clear: both и тем самым устремляется вниз страницы.
Это нужно "расшифровывать"? В данном примере стилевое описание блоков div происходит с помощью атрибута style - на самом деле это глупо. Глава 6 Классы и идентификаторы.)и всё это дело с остальными потрохами выносят в отдельный css файл. Верстка блоками div стремительно набирает популярность, и позволяет сверстать сайт практически любой сложности, однако не всегда стоит полностью отказываться от табличного способа верстки. Зачастую верным решением является комбинированный способ верстки, где грубым "каркасом" сайта является таблица, наполненная блоками div которые выполняют более тонкие задачи верстки сложного по структуре сайта.