Разное

Верстка страницы html: Как сверстать веб-страницу. Часть 1 / Хабр

11.08.1990

Вёрстка текстового содержимого страниц — HTML Academy

Описание навыка

Профессиональная задача:

Пул задач, включающий профессиональное оформление текстовых сайтов, оптимальное подключение сторонних шрифтов, подготовку страниц для работы с CMS, вёрстку обтекаемых элементов (изображений, буквиц, врезок), тонкую настройку типографики (переносы слов, неразрывные пробелы, интерлиньяж, трекинг).

Зачем нужен этот навык:

Тексты — самый массовый тип контента, который индексируется лучше всего и наилучшим образом передаёт информацию. Компании стараются повысить узнаваемость с помощью уникальной типографики и оригинального дизайна. Поэтому в задачах вёрстки текстов и текстовых элементов есть много тонкостей и особенностей. Кроме того, в погоне за оригинальным оформлением важно не забывать о семантичности разметки и доступности самого содержания.

Даже если текст идеально написан, его необходимо оформить: встроить на сайт так, чтобы его было удобно и приятно читать, если текст большой — структурировать, если в тексте есть акцентные мысли — правильно их выделить.

Владение этими знаниями и их применение показывает профессионализм верстальщика в работе с текстовым содержимым.

Освоив этот навык, вы научитесь корректно оформлять тексты и их отдельные декоративные элементы. Мы рассматриваем как основные технологии, применяющиеся для вёрстки текстового содержимого, так и отдельные смысловые и декоративные элементы текстов, и относящиеся к оформлению текстов принципы редакторской работы.

Расположение относительно других навыков:

Этот навык идёт после семантической разметки и работы с графическими редакторами в дереве навыков.

Минимальные требования для освоения:

  • Создание семантической разметки по макету,
  • Экспорт параметров и графики из PSD‑макетов или Экспорт параметров и графики из Figma.

Состав навыка

Подготовительный материал

Дополняет базовые знания, полученные в интерактивных курсах, всем необходимым для начала отработки кейсов.

Углублённая теория

Углублённая теория общим объёмом 15-20 страниц.

Включает следующую информацию:

  • Как правильно и эффективно подключать шрифты из разных источников.
  • Материал о веб-типографике, её законах и инструментах для правильной и красивой микроразметки текстов.
  • Информацию о методах оформления нестандартных текстовых элементов, например, перевёрнутых.

Инструкции по оформлению различных текстовых элементов

Отдельные методики по каждому элементу общим объёмом 40-50 страниц.

Включает разбор текстовых элементов с семантической, структурной и стилистической точек зрения, взгляд на эти элементы с редакторской и контентной стороны. Содержит положительные и отрицательные паттерны, наиболее распространённые подходы к оформлению, вёрстки примеров.

Демонстрационные кейсы

Четыре демонстрационных кейса: 2 лёгкого уровня, 1 среднего уровня и 1 сложного уровня.

В каждом кейсе в качестве входных данных мы получаем дизайн страниц. Затем, используя предложенную методику, пошагово верстаем страницу. На выходе получаем готовую разметку и стили. Все шаги детально описаны.

Так выглядит страница демонстрационного кейса:

Пошаговые разборы кейсов

Один разбор для каждого демо-кейса.

Разборы кейсов выполнены в виде подробных текстовых демонстраций с поясняющими иллюстрациями и премерами кода.

Так выглядит один из шагов разбора кейса сайта «Блогик»:

Тренировочный материал

Кейсы с возрастающей сложностью и эталонными решениями, на которых вы и тренируете навык.

Пять тренировочных кейсов.

В качестве входных данных вы получаете дизайны страниц, на выходе должна получиться разметка со стилями.

Для тренировочных кейсов нет подробных разборов, но есть эталонное решение от авторов, которое можно сравнить со своим.

Так выглядит страница тренировочного кейса:

Основные понятия курса HTML верстки

Статья на тему: Основные понятия курса HTML верстки Codenplay

Курс

Блог

Контакт

Обо мне

Верстка Web-страниц представляет собой процесс преобразования макета, составленного веб-дизайнером, в код, который отвечает за отображение текста и графических компонентов в окне браузера. Вместе с этим верстка не заключается только в одном преобразовании макета в веб-страницу, разработчик также должен обеспечить работу ресурса на разных устройствах (компьютер, планшет, смартфон) с максимально возможной скоростью загрузки.

Верстка – этапы изготовления шаблона

Верстку невозможно вписать в рамки простого написания кода. Поэтому этапы этого процесса начинаются еще до написания непосредственно страницы. Они выглядят так:

  1. Концепция. Исходя из цели создания ресурса и поставленных маркетинговых задач, дизайнер разрабатывает визуальную концепцию и определяет ключевые элементы оформления страницы.
  2. Макетирование. Далее с помощью специальных графических редакторов специалист создает макет будущей веб-страницы. Он создает графический файл, который по сути является отображением сайта: здесь присутствуют все элементы графики, шрифты и остальное оформление. Макет обычно создают с помощью графических редакторов из пакета Adobe: Photoshop, InDesign и Illustrator, или аналогичных программ, например, Corel Draw.
  3. Верстка. Для того чтобы сайт стал визуально точной копией макета, его условно разделяют на отдельные части – прямоугольные блоки, каждый из которых обрабатывается отдельно. Достигнув этого этапа, верстальщик начинает писать код. Сделать это он может с помощью использования языков HTML, CSS, jQuery и т.п. Каждая из используемых технологий имеет свои возможности и ограничения, выбор зависит от типа созданного макета и наполнения будущего сайта.

Разновидности дизайна верстки веб-страниц

В зависимости от того, как был разработан макет, веб-страницы можно разделить по трем видам дизайна:

  • Фиксированный – этот способ верстки является самым простым, так как размеры графических элементов прописываются в пикселях и таким образом фиксируются на странице. Будущий сайт будет иметь строго установленное разрешение, поэтому при открытии на устройствах с небольшим экраном соответственно появится горизонтальный скроллинг – лента прокрутки. Это может затруднить просмотр страницы на планшете или смартфоне, поэтому при проектировании дизайнеры стараются не использовать такой способ верстки.
    Единственным его преимуществом является относительная простота в написании кода.
  • Резиновый – здесь размер всех элементов указывается в процентном соотношении к размерам экрана того устройства, с помощью которого пользователь посещает сайт. Это обеспечивает одинаковое отображение ресурса на всех устройствах, горизонтальная прокрутка не появляется. Однако такой подход также имеет свои недостатки: на гаджетах с очень большим разрешением экрана строки текста будут выглядеть чересчур длинными, а на маленьких экранах – наоборот, а это ухудшает читабельность. Именно поэтому до недавнего времени создавались отдельные версии сайтов для мобильных телефонов.
  • Адаптивный – является наиболее приспособленным к современным пользовательским потребностям, ведь такой сайт автоматически подстраивается под разрешение экрана. Благодаря этому отпала необходимость создавать отдельные домены для мобильных версий сайта. Единственным недостатком этого метода является сложность в проектировании макета и написании кода.

Конечно, после окончания верстки разработка сайта не заканчивается. Далее проводится тестирование, производится оптимизация и вносятся коррективы.

Please enable JavaScript to view the comments powered by Disqus.

Успей получить бесплатный доступ к игровому курсу по Основам Программирования

ПОЛУЧИТЬ ДОСТУП

Научитесь создавать правильный дизайн макета страницы

TL;DR — HTML-макет представляет расположение всех элементов в документе. Это важная часть базового дизайна страницы.

Содержание
  • 1. Основные элементы макетов веб-сайтов
  • 2. Теги для использования в макете HTML
  • 3. Макет HTML: полезные советы

Основные элементы макетов веб-сайтов Хорошо сделанный HTML-макет улучшает взаимодействие с пользователем двумя важными способами:

  • Упрощает навигацию за счет разъяснения структуры
  • Делает дизайн
    более привлекательным

Есть четыре основных элемента, которые вы найдете практически в каждом макете страницы:

Часть Определение Метки
Заголовок Самая верхняя часть страницы (обычно вводный контент, например, логотипы) <заголовок>
Панель навигации HTML-контейнер для гиперссылок на разные части сайта <навигация>
Содержимое Основное содержание веб-страницы <артикул>, <раздел> и др.
Нижний колонтитул Самый низ страницы (обычно данные авторизации, например, информация об авторских правах) <нижний колонтитул>

Здесь вы можете увидеть простой пример дизайна макета страницы, который включает в себя различные HTML-контейнеры, простые стили и изображение:

Pros

  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features

Main Features

  • Nanodegree programs
  • Suitable for enterprises
  • Платные сертификаты об окончании

ЭКСКЛЮЗИВ: СКИДКА 75%

Pros

  • Удобная навигация
  • Никаких технических проблем
  • Seems to care about its users

Main Features

  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

AS LOW AS 12. 99$

Pros

  • Отличный пользовательский опыт
  • Предлагает качественный контент
  • Очень прозрачные цены

Основные характеристики

  • Бесплатные сертификаты об окончании
  • Ориентирован на навыки работы с данными
  • Гибкий график обучения

75% СКИДКА

Теги для использования в макете HTML


В этом разделе мы более подробно рассмотрим элементы HTML, необходимые для макета HTML примеры кода для их иллюстрации. Чтобы понять, как они используются для создания структуры страницы, обратитесь к таблице выше или просмотрите иллюстрацию справа.

Чтобы определить контейнер HTML для заголовка в верхней части макета используйте элемент

:

Пример 

 

  
Я заголовок

Попробуйте вживую. Учитесь на Udacity

Функция

может показаться похожей на функцию заголовков. Однако
определяет заголовок всего сайта , а не отдельной статьи. Он также может включать другую вводную информацию, например логотип.

Элемент