🗊Презентация HTML Язык описания Web-страниц

Лекция 3 HTML Язык описания Web-страниц Основы верстки

Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Задания для лабораторной

Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Задания для лабораторной

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

Алгоритм верстки По задумке дизайнера серая и белая полоса заголовка должны занимать всю ширину веб-страницы, а набор пиктограмм с заголовком сайта выравнивается по центру окна браузера. Положение рисунков относительно друг друга меняться не должно и каждый из них является ссылкой на определенный раздел сайта. С учетом указанных особенностей возможны следующие варианты.

Алгоритм верстки (продолжение) Варианты создания меню: Сделать один рисунок и применить к нему карту-изображение. Разрезать изображение на фрагменты и объединить их воедино с помощью таблицы, при этом отдельные фрагменты будут служить ссылкой. Воспользоваться позиционированием элементов.

Алгоритм верстки (продолжение) Далее предстоит продумать: цвет фона веб-страницы; тип разметки – табличная/блочная? гарнитуру основного шрифта, его размер и цвет; размер текста отдельных модулей (новостей, например); цвет, размер и гарнитуру шрифта заголовков; параметры горизонтальных линий и рамок; создать CSS файл.

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

Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Задания для лабораторной

Виды макетов Существует два вида макетов - фиксированный и «резиновый»

Виды макетов (продолжение) Этот вид макета основывается на том, что в качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера — 100%, и колонки макета в сумме не должны ее превышать, поэтому для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину.

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

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

Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Задания для лабораторной

Изображения Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align="center".

Изображения (продолжение) 1. Растягивание рисунка до 100% (не самый эффективный способ, используется редко).

Изображения (продолжение) Высота блока задается с помощью свойства height, она совпадает с высотой рисунка, а его ширина по умолчанию равна auto, иными словами, занимает всю доступную ширину. Повторение фона происходит только по горизонтали, это обеспечивает значение repeat-x свойства background.

Изображения (продолжение)

Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Варианты дизайна персональной страницы Задания для лабораторной

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

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

Скорость загрузки таблицы Скорость загрузки таблицы Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу. Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы.

При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта: При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта: ширина всех ячеек задана в процентах; сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td>, допустимо устанавливать несколько видов положений элементов относительно друг друга. За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td>, допустимо устанавливать несколько видов положений элементов относительно друг друга.

В данном примере характеристики ячеек управляются с помощью параметров тега <td>, но их удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами CSS vertical-align и text-align: В данном примере характеристики ячеек управляются с помощью параметров тега <td>, но их удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами CSS vertical-align и text-align:

Разрезание и склейка изображений Разрезание и склейка изображений

Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Варианты дизайна персональной страницы Задания для лабораторной

Блочная верстка Слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление. Благодаря этому тегу HTML-код распадается на ряд четких наглядных блоков, за счет чего верстка слоями называется также блочной версткой. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют.

Блочная верстка Ориентируясь на новые стандарты HTML5, лучше сразу брать курс на правильную разметку, т.е. называть блоки именами, принятыми в стандартах HTML5:

Блочная верстка Ориентируясь на новые стандарты HTML5, лучше сразу брать курс на правильную разметку, т.е. называть блоки именами, принятыми в стандартах HTML5:

Блочная верстка (продолжение) Разберем пример блочной верстки, который дан вам в качестве шаблона студенческого сайта.

Блочная верстка (продолжение)

Блочная верстка (продолжение)

Блочная верстка (продолжение)

Блочная верстка (продолжение)

Блочная верстка (Секреты)

Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Варианты дизайна персональной страницы Задания для лабораторной

Блочная верстка (Секреты)

Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Задания для лабораторной

Задания для лабораторной

Вопросы?