Занятие 3. Верстка сайтов. Frame, FORM, CSS. Тег FRAME Разбивает экран на различные страницы. Помогает делать дублирующие части. - презентация

1 Занятие 3. Верстка сайтов. Frame, FORM, CSS

2 Тег FRAME Разбивает экран на различные страницы. Помогает делать дублирующие части.

3 Тег FRAME. Применение. Простой документ с фреймами В этом документе содержится: Миленький текстик Еще славный текстик

4

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

6 Тег FORM Даёт возможность взять с пользователя информацию. Да, анкеты, формы обратной связи, авторизации и т.д. сделаны с помощью тега и элементов управления

7 Тег FORM. Применение. Синтаксис... Параметры actionaction Адрес программы или документа, которые обрабатывает данные формы. enctypeenctype MIME-тип информации формы. methodmethod Метод протокола HTTP. namename Имя формы. targettarget Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

8 Тег FORM. INPUT. Основной параметр тега, определяющий вид элемента type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image).

9 Текстовое поле Параметры: –name - имя элемента, –type - тип элемента (в данном случае - text), –size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться, –maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным, –value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым. Возможны еще два параметра: –disabled - блокирует поле от любых изменений, –readonly - делает поле доступным только для чтения.

10 Флажки Параметры: –type - тип элемента (в данном случае - checkbox), –name - имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь, –value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english", –checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

11 Переключатели В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type="radio", все остальные такие же, как у флажков. Пример: Укажите ваш пол: мужской женский

12 Многострочное текстовое поле Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами и имеет следующие параметры: name - имя поля, cols - ширина поля в символах, rows - количество строк текста, видимых на экране, wrap - способ переноса слов: –off - переноса не происходит, –virtual - перенос отображается, но на сервер поступает неделимая строка, –physical - перенос и на экране и при поступлении на сервер. disabled - неактивное поле, readonly - разрешено только чтение.

13 Раскрывающиеся списки Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задаются и те, и другие с помощью тегов, внутри которых располагаются элементы значений, заданных тегом. Рассмотрим параметры этих тегов: : –name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option. –size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки. –multiple - разрешает выбор нескольких элементов списка. : –selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов. –value - значение, которое будет отправлено серверу, если пункт выбран.

14 Кнопки submit - кнопка отправки содержимого формы web-серверу. Ее параметры: –type="submit" - тип кнопки, –name - имя кнопки, –value - надпись на кнопке. image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры: –type="image" - тип графической кнопки, –name - имя кнопки, –src - адрес картинки для кнопки. reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет.

15 Пример в окне браузера

16 Тег FORM. Правда. Тег, без которого не возможно сделать связь с клиентом сайта. Наиболее распространен. Имеет множество вариантов использования. - единственный тег, который делается не

17 Каскадные таблицы стилей (CSS) Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид.

18 История CSS одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web»[1]. В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.W3C[1]веб-дизайнерыHTMLXHTML

19 Уровень 1 (CSS1) Рекомендация W3C, принята 17 декабря 1996 года, откорректирована 11 января 1999 года[2]. Среди возможностей, предоставляемых этой рекомендацией:17 декабря1996 года11 января 1999 года[2] Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля обычного, курсивного или полужирного. Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы. Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы) Выравнивание для текста, изображений, таблиц и других элементов. Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

20 Уровень 2 (CSS2) Рекомендация W3C, принята 12 мая 1998 года[3]. Построена на CSS1 с сохранением обратной совместимости. Добавление к функциональности:12 мая1998 года[3] Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.табличной вёрстки Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).мониторпринтерКПК Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта). Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати. Расширенный механизм селекторов. Указатели. Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

21 Способы подключения CSS Связанные стили Глобальные стили H1 { font-size: 120%; … } Внутренние стили Заголовок 1

22 Базовый синтаксис Селектор это некоторое имя стиля, для которого добавляются параметры форматирования Селектор { свойство1: значение; свойство2: значение; } … h1 { color: #a6780a; font-weight: normal; } h2 { color: olive; border-bottom: 2px solid black; } … Заголовок 1 Заголовок 2 …

23 Правила применения стилей Расширенная форма записи td { background: olive; } td { color: white; } td { border: 1px solid black; } Компактная форма записи td { background: olive; color: white; border: 1px solid black; } Комментарии div { width: 200px; /* Ширина блока */ margin: 10px; /* Поля вокруг элемента */ float: left; /* Обтекание по правому краю */ }

24 Классы Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. Тег.Имя класса { свойство1: значение; свойство2: значение;... }

25 Классы P.cite { /* Абзац с классом cite */ color: navy; /* Синий цвет текста */ margin-left: 20px; /* Отступ слева */ border-left: 1px solid navy; /* Граница слева от текста */ padding-left: 15px; /* Расстояние от линии до текста */ } текст…

26 Идентификаторы Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. #Имя идентификатора { свойство1: значение; свойство2: значение;... }

27 Идентификаторы #help { position: absolute; /* Абсолютное позиционирование */ left: 160px; /* Положение элемента от левого края */ top: 50px; /* Положение от верхнего края */ width: 225px; /* Ширина блока */ padding: 5px; /* Поля вокруг текста */ background: #f0f0f0; /* Цвет фона */ } Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.

28 Группирование Селектор 1, Селектор 2,... Селектор N { Описание правил стиля } H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; } H2 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; } H3 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; }

29 Группирование H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; } H1 { font-size: 160%; color: #003; } H2 { font-size: 135%; color: #333; } H3 { font-size: 120%; color: #900; }

30 Псевдоклассы Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Селектор:Псевдокласс { Описание правил стиля } Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши.

31 Псевдоклассы active link focus hover Пример INPUT:focus { color: red; /* Красный цвет текста */ }

32 Псевдоэлементы Псевдоэлементы позволяют задать стиль элементов не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Селектор:Псевдоэлемент { Описание правил стиля }

33 Псевдоэлементы after P.new:after { content: " - Новьё!"; /* Добавляем после текста абзаца */ } before UL { padding-left: 0; /* Убираем отступ слева */ list-style-type: none; /* Прячем маркеры списка */ } LI:before { content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */ } first-letter P:first-letter { font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */ font-size: 200%; /* Размер шрифта первого символа */ color: red; /* Красный цвет текста */ }