Лабораторная работа №2. Верстка сайта и каскадные таблицы стилей

Лабораторная работа №2. Верстка сайта и каскадные таблицы стилей

Верстка сайта ­ - создание структуры html-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.

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

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

1. С использованием табличной верстки
2. С использованием фреймов.
3. С использованием блочных элементов.

В настоящее время блочная структура является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

· Отделение стиля элементов от кода html;

· Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.

· Лучшая индексация поисковиками;

· Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;

· Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

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

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода. Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css.

Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы (рис. 1). Содержимым блока может быть что угодно – текст, картинки, списки, формы для заполнения, меню навигации и т.п.

Рисунок 1

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блоки всегда располагаются вертикально. Записанные подряд два блока отобразятся один под другим.

Пример:

Пусть HTML-страница имеет следующий каркас.

HEADER – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

SIDERBAR – левая или правая колонки, обычно содержат рекламу, меню, рассылку, новости и т. д.:

CONTENT – содержит основной текст страницы;

FOOTER – подвал сайта, содержащий сведения о сайте.

Пример 1:

Для создания такой верстки понадобится парный тег <style> … </style>, внутри которого будет задаваться описание каждого блока.

       Такой вариант не является лучшим решением при создании многостраничного сайта, так как встраиваемый код в html-документ занимает слишком много места и становится трудночитаемым. Для описания внешнего вида документа, созданного при помощи html-разметки была создана технология называемая каскадные таблицы стилей (Cascading Style Sheets).

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

       Рассмотрим синтаксис. С SS состоит из правил:

.имя_объекта

{

имя_стиля: значение1; значение2;

}

Правило состоит из селектора и в фигурным скобках для данного селектора задаются стили. Стили в свою очередь состоят из имени и значения. Значение стиля – это некоторая строка, которая может быть списком чисел, номером цвета, или специальными словами. В качестве значения можно задавать URL к документу. В каждом конкретном случае лучше сверяться с документацией по конкретному стилю. В языке CSS есть комментарий С-подобный: /* */. Стили должны заканчиваться точкой с запятой. К одному селектору может применяться несколько стилей.

       Подключение стилей к HTML -документу:

Кроме того, стили могут быть привязаны к конкретному элементу. Здесь синтаксис немного отличается. Если мы хотим задать стили конкретного HTML -элемента, для него задается атрибут style, значения этого атрибута – набор CSS -стилей. Селектор в данном случае не пишется вообще.

Стили применяются к набору элементов. Селектор – это способ задать этот набор элементов. В HTML есть специальные атрибуты id и class. Они могут быт указаны у совершенно любого элемента, при чем значение атрибута id должно быть уникальным в пределах одной веб-странички. Когда браузер загрузил страничку, он ожидает, что у элементов будут уникальные идентификаторы. Когда у двух тегов на одной странице совпадают идентификаторы, это ошибка. Браузер выберет один из них, но такая ситуация является нежелательной.

       Идентификатор – атрибут id это способ выделить ровно один элемент на странице, атрибут class позволяет установить связь элемента с одним или несколькими классами. Классы в отличие от идентификаторов не уникальны, соответственно, наличие классов у нескольких элементов – нормальная ситуация.

       Рассмотрим подробнее селекторы. Простейшие базовые селекторы состоят из одного слова:

1) Селектор * - выбирает все элементы на странице. Сам по себе такой селектор используется редко и в основном для того, чтобы сбросить стили браузера. Часто задается такое правило:

*{ margin: 0px; padding: 0px; border: 0px;}

Соседние селекторы

h2.s + p { margin-left:30px;}

“+” – “после”

Резиновая верстка».

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

Код страницы index.html:

Код страницы mystyle.css:

4. «Комбинированная блочная верстка».  Создать макет:

Код страницы index.html:

Код страницы mystyle.css:

Задания на самостоятельную работу:

1. Создать верстку следующей страницы:

2. В соответствии с разработанной структурой сайта на прошлом занятии, создать верстку html-страниц.

Лабораторная работа №2. Верстка сайта и каскадные таблицы стилей

Верстка сайта ­ - создание структуры html-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.

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

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

1. С использованием табличной верстки
2. С использованием фреймов.
3. С использованием блочных элементов.

В настоящее время блочная структура является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

· Отделение стиля элементов от кода html;

· Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.

· Лучшая индексация поисковиками;

· Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;

· Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

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

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода. Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css.

Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы (рис. 1). Содержимым блока может быть что угодно – текст, картинки, списки, формы для заполнения, меню навигации и т.п.

Рисунок 1

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блоки всегда располагаются вертикально. Записанные подряд два блока отобразятся один под другим.

Пример:

Пусть HTML-страница имеет следующий каркас.

HEADER – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

SIDERBAR – левая или правая колонки, обычно содержат рекламу, меню, рассылку, новости и т. д.:

CONTENT – содержит основной текст страницы;

FOOTER – подвал сайта, содержащий сведения о сайте.

Пример 1:

Для создания такой верстки понадобится парный тег <style> … </style>, внутри которого будет задаваться описание каждого блока.

       Такой вариант не является лучшим решением при создании многостраничного сайта, так как встраиваемый код в html-документ занимает слишком много места и становится трудночитаемым. Для описания внешнего вида документа, созданного при помощи html-разметки была создана технология называемая каскадные таблицы стилей (Cascading Style Sheets).

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

       Рассмотрим синтаксис. С SS состоит из правил:

.имя_объекта

{

имя_стиля: значение1; значение2;

}

Правило состоит из селектора и в фигурным скобках для данного селектора задаются стили. Стили в свою очередь состоят из имени и значения. Значение стиля – это некоторая строка, которая может быть списком чисел, номером цвета, или специальными словами. В качестве значения можно задавать URL к документу. В каждом конкретном случае лучше сверяться с документацией по конкретному стилю. В языке CSS есть комментарий С-подобный: /* */. Стили должны заканчиваться точкой с запятой. К одному селектору может применяться несколько стилей.

       Подключение стилей к HTML -документу:

Познавательные статьи:



Психологические особенности спортивного соревнования

Приготовление дезинфицирующих растворов различной концентрации

Занятость населения и рынок труда

Социальный статус семьи и её типология