Презентация на тему "Разработка и создание веб сайтов"

Пример

• Unordered information
• Ordered information
• Terms and definitions

Сортированные списки

Сортированные списки обозначаются элементом ol, и они должны включать в себя один или несколько пунктов (элементов li). Как и все прочие списки, сортированные списки и их пункты представляют собой блочные элементы. ol

..,

1. Встать с кровати
2. Принять душ
3. Погулять с собакой

Списки определений

Используйте список определений для тех списков, которые состоят из пар термин - оп­ределение. Списки определений обозначаются элементами dl. Содержимое элемента dl пред­ставляет собой некоторое количество терминов (обозначенных элементом dt) и опре­делений (обозначенных элементом dd). Элемент dt (термин) может содержать только внутристрочные материалы, но элемент dd может включать блочные или внутристроч-ные элементы. Все три элемента, используемые в списках определений, представляют собой блочные элементы, и они по умолчанию начинаются с новой строки. dl

.

СТИЛИ CSS

Стиль – всё то, что определяет внешний вид Web-документа при его отображении в окне браузера. Главная идея каскадных таблиц стилей – разделить содержимое документа и его физическое представление.Таблицы стилей (так называемые Cascading Style Sheets – CSS) содержат описание формата части или всего текста, координаты расположения элементов и другие параметры.

Преимущества CSS

Больший контроль над шрифтовым оформлением и раскладкой страницы Потенциальное уменьшение размера документов Потенциальное увеличение доступности документа Стилевой HTML выходит из употребления CSS хорошо поддерживается

История CSS и разработка стандартов

Никогда не предполагалось, что HTMLбудет языком представления, так что мысль об отделении таблиц стилей от HTML-документов существует с 1990 года, когда Web была лишь идеей в голове Тима Бернерса-Ли . В 1995 г., когда начал свою работу консорциум World Wide Web Consortium (W3C), была создана официальная рабочая группа, занимающаяся CSS. К этому моменту из названия таблиц стилей исчезло слово «HTML», поскольку сразу стало понятно, что другим языкам разметки также требуется язык для представления.

Первой официальной рекомендацией CSS стала Рекомендация CSS Level 1, выпущенная в 1996 году, которая содержит все основные механизмы применения инструкций, связанных со шрифтами, цветами и интервалами к элементам страницы. Рекомендация CSS Level 2 была выпущена в 1998 году. Наиболее заметными нововведениями в ней стали свойства для позиционирования элементов на странице (которые исходно были выпущены под названием CSS-P, позже превратившееся в CSS Level 2), но, кроме того, среди прочего были предложены типы данных, свойства для табличных раскладок, акустические таблицы стилей и более сложные методы выбора элементов.

В разработке находятся еще две рекомендации. CSS Level 2,Revision 1, который добавляет небольшие корректировки к CSS2 на основе опыта, полученного за период с 1998-го по 2004 год. Исправлены ошибки, были удалены свойства, не принятые CSS-сообществом, а некоторые неподдерживаемые свойства перенесены в будущую спецификацию CSS 3. В модульной Рекомендация CSS Level 3 добавляется поддержка вертикального потока текста, усовершенствованная обработка таблиц, поддержка разных языков и более совершенная интеграция с другими XML-технологиями, такими, как SVG (Scalable Vector Graphics), MathML и SMIL (Synchronized Multimedia Inter­change Language). Чтобы познакомиться с самой последней информацией о деятельности W3C в области CSS, обращайтесь на сайт www.w3.org/Style/CSS/.

задание правила состоит из 2-х частей: селектора и определения. Селектор – имя любого тега HTML, класса, или идентификатор. Определение – задают свойства селектора. Внешний вид списка стиля: Селектор {свойство: значение; свойство: значение;}

Это – обычный стиль по умолчанию

Способы добавления таблиц стилей на Web-страницы

Встраивание стилей (внутрь тега)

Включение стилей (заголовочные стили). В область заголовка добавить стиль STYLE

Связывание

Таблицу стилей создают в виде отдельного текстового файла с расширением .css. Документ таблицы стилей – это текстовый документ, который содержит как минимум одно стилевое правило. Он не может содержать тегов HTML. Этот стиль можно применить к нескольким документам. Пример. В файле C1.CSS пишем следующий текст: P {color: green; font-size: 30 pt} body {background-color: pink} вдокументе:

Импортирование

позволяет встраивать в документ таблицу стилей, расположенную на сервере. Для этого в область заголовка добавляют следующий код: @ import url (http://www.myserver.ru/CSS/line.CSS) Команды @import должны идти перед всеми остальными элементами (за исключением @charset). Импортирование позволяет применить несколько таблиц стилей к одному документу. Если в элемент style добавляются дополнительные функции @import, то информация из файла, прочитанного последним, имеет преимущество перед предыдущими. Директива @import может также использоваться в самой таблице стилей для ссылки на информацию во внешних CSS-файлах.

Единицы измерения, используемые в каскадных таблицах стилей

in – дюйм = 2, 54 см cm – сантиметры mm – миллиметры px – пиксели pt – пункты = 1/72 дюйма ~ 0,375 мм pc = пика = 12 pt % – процент еm – относительная единица измерения, которая обычно равна ширине заглавной буквы «М» в текущем шрифте. В CSS эта единица равна размеру шрифта в пунктах (т. е. ширина em в шрифте 24pt равна 24 пунктам) и используется для указания размера как по горизонтали, так и по вертикали ex – Относительная единица измерения, равная высоте буквы «х» в нижнем регистре для текущего шрифта (приблизительно половина em)

Свойства CSS для управления цветом

Цвет можно задать: названием; (red, blue, ...) кодом: #RRGGBB кодом #RGB В данном методе используется трехзначный синтаксис, который преобразуется в шестизначную форму путем повторения каждой цифры (следовательно, #00F аналогично #0000FF). с помощью функции: rgb (R, G, B), например color:rgb (0, 255, 0); rgb (R%; G%; B%) color:rgb(0%; 0%; 100%)

Конфликтующие правила стилей: каскад

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

Правый внутренний край Правый интервал Правая сторона рамки Правое поле Правый наружный край Верхний наружный край Верхнее поле Верх рамки Верхний интервал Верхний внутренний край Нижний внутренний край Нижний интервал Низ рамки Нижнее поле Нижний наружный край

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

height width max-height max-width min-height min-width border-top-width padding-bottom padding-left padding padding-top padding-right border-top-style border-right-style border-bottom-style border-left-style border-style border-right-width border-top border-right border-bottom border-left border border-bottom-width border-left-width border-width margin-left margin-top margin-bottom margin-right margin border-top-color border-right-color border-bottom-color border-left-color border-color

Свободное размещение и позиционирование

Спецификации CSS не сводятся лишь к «украшательству» элементов, образующих документ. Их также можно использовать для задания базовой структуры страницы. Познакомимся с двумя принятыми в CSS методами упорядочения элементов: свободным размещением (float-ing) и позиционированием (positioning). Перечислим свойства, управляющие положением элементов в CSS 2.1: float bottom overflow сlear top clip position left visibility bottom right z-index

Нормальный поток

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

Свободное размещение

В CSS можно свободно расположить любой мыслимый элемент (абзац, список, элемент div и т. д.), а не только изображение. Свободным размещением элементов пользуются для построения документов с несколькими колонками; панелей навигации из ненумерованных списков; выравнивания, напоминающего таблицу, но не являющуюся таковой, и т.д. Для размещения элемента у левой или правой границы и обеспечения обтекания текста вокруг него используется свойство float. Значения: left right none inherit. Начальное значение: none Применимо: Ко всем элементам. В этом простом примере свойство float используется, чтобы прижать изображение вправо img {float:right; margin: 20px;}

Пропуск размещаемых элементов

Бывает, что область сбоку от свободно размещенного элемента хочется оставить незанятой, а следующий элемент начать в «нормальной» позиции. В этих случаях, чтобы помешать появлению элемента рядом со свободно размещенным объектом, используйте свойство clear со значениями left, right, both, none, inherit. Начальное значение: none. Данное свойство применимо к элементам уровня блока. img {float: left; margin-right: 10рх; } h1 {clear: left; top-margin: 2em; }

Аналогично работает и значение right, предотвращающее появление элемента рядом с размещенными справа. Значение both смещает элемент вниз, пока не будут пропущены свободно размещенные элементы справа и слева.

Позиционирование: основы

Существует четыре типа позиционирования, каждый из которых задается свойством position со значениями static, relative, absolute, fixed, inherit. Начальное значение: static Свойство position указывает, что положение элемента должно быть подобрано специально.

static Обычная схема позиционирования, в которой прямоугольники элементов отображаются на экран в порядке их появления в документе. relative Относительное позиционирование перемещает прямоугольник, где содержится элемент, однако исходное пространство под него в документе сохраняется за самим элементом. absolute Объекты с абсолютной позицией изымаются из потока содержимого документа и размещаются относительно охватывающего блока. В силу удаления из потока элемент больше не влияет на размещение окружающих элементов. fixed Выбор фиксированной позиции подобен выбору абсолютной (элемент удаляется из потока содержимого документа), однако положение элемента определяется относительно порта просмотра (в большинстве случаев окна браузера), а не того элемента, который содержит данный.

Методики CSS

Центрирование страницы 1 способ #page { width:500px; margin-left:auto; margin-right:auto; } 2 способ body {text-align:center;} body * {text-align:left} #page { width:500px; margin:0 auto; } 3 способ #page { position:absolute; left:50%; width:500px; margin-left: -250px;

Раскладка в 2 столбца

Использование плавающих элементов

Использование абсолютного позиционирования

body {margin:0; /* убираем пространство по умолчанию вокруг страницы*/ padding:0; } .masthead {background:#ccc; height:70px; } .main { margin-right:30%;/* место для бокового столбца*/ margin-left:5%; } } .links{ position:absolute; top:70px; right:0px; width:25%; background:#eee;} .footer { padding:15px; background:#777; margin-right:30%; margin-left:5%;

Предлагаю посмотреть работы слушателей Детской компьютерной школы!

Спасибо за внимание!