- •Другие элементы:
- •Кликабельные карты
- •Формы и элементы управления формы
- •Табличная верстка
- •Способ интеграции css в страницу
- •Группы стилей
- •Правила задания селекторов:
- •Стили стандарта css2
- •1.Стили шрифта
- •2.Стили текста
- •4.Отступы и позиционирование
- •Габариты объекта
- •Позиционирование
- •Плавающая модель
- •Видимость
- •Способ верстки с помощью абсолютного позиционирования
- •Псевдоклассы
- •1.Строки
- •3.Массивы
- •5.Работа с датой и временем
- •Объектная модель браузера
- •Таймеры
- •Структура заголовка ответа
- •Параметры запросов/ответов
- •Передача параметров:
- •2.Переменнтые окружения cgi
- •1.Архитектура вызова
- •Преобразование типов
- •Массивы
Оглавление
13.01.14 2
20.01.14 5
Списки 5
Другие элементы: 5
Кликабельные карты 5
Формы и элементы управления формы 6
Табличная верстка 6
CSS 6
Способ интеграции css в страницу 6
Группы стилей 6
27.01.14 7
Правила задания селекторов: 7
Стили стандарта css2 7
1.Стили шрифта 7
2.Стили текста 8
3.Фон 8
4.Отступы и позиционирование 8
30.01.14 8
03.02.14 9
Габариты объекта 9
Позиционирование 9
Плавающая модель 9
Видимость 10
Способ верстки с помощью абсолютного позиционирования 10
Псевдоклассы 10
10.02.14 11
Javascript 11
17.02.14 12
1.Строки 12
2. Math 12
3.Массивы 13
5.Работа с датой и временем 13
Объектная модель браузера 13
Object Window 13
Таймеры 14
17.03.14 18
Протокол HTTP 18
HTTP – Hyper Text Transfer Protocol (rfc 2068) 18
Структура запроса и ответа 18
Структура заголовка запроса 18
Методы: 18
Структура заголовка ответа 19
Параметры запросов/ответов 19
CGI 19
24.03.14 20
Передача параметров: 20
2.Переменнтые окружения CGI 20
PHP 22
1.Архитектура вызова 22
2.Операторы включения 22
3.Переменные PHP 22
Скрытые типы данных 22
Строки 23
Конструкция $$имя_переменной, обращается к переменной, имя которой содержится в переменной $имя_переменной. 23
Преобразование типов 23
Массивы 23
13.01.14
1.Браузеры:
IE - 10-15%,
Chrome – 30%, FireFox – 25%,
Opera – 25%,
Safari…
1)
Модель
Прикладной HTTP, POP3
IP
Транспортный TCP/UDP
Физический Internet, Wi-Fi
2.HTML 3.2, 4.01-> xhtml 1.0, 5
3.CSS 1.0, 2.0, 3.0
4.JS
w3c.org – спецификации
1.HTML (Hyper Text M Language)
оператор – тег
тег – одинарный(<…>) или двойной(парный <…>…</…>)
комментарии - <!-- … -->
<!DOCTYPE HTML PUBLIC “//w3c/DTD HTML 4.01 EN” “http://w3c.org/html/4/strict.dtd”>
strict dtd – минимальный набор тегов (использовать для лаб!)
loose dtd – полный набор всех тегов
frameset dtd – не использовать
Базовая структура HTML страницы
<!doctype…>
<HTML>
<HEAD>
<title> Название страницы (уникальное)</title>
<meta name= “keywords” value=”…”>
<meta name= “description” value=”…”>
<meta name= “content-type” value=”cVowset UTF-8”
<link type=”text/css” vel=”stylesheet” href=”style.css”>
<script>…</script>
</HEAD>
<BODY>
</BODY>
</HTML>
Требования к синтаксису HTML (не обязательные)
Эти правила позволят написать код максимально совместимый с xhtml:
1.Названия тегов в нижнем регистре
2.Названия параметров тегов в нижнем регистре
3.Значения параметров обязательно внутри двойных кавычек
4.Для открывающегося тега должна быть закрывающаяся часть
5.Порядок вложенности тегов должен соблюдаться на 100%
Специальные символы в HTML
пробел, который не будет игнорироваться при нескольких подряд
" двойные кавычки
< символ меньше
> символ больше
© символ копирайт
&tm символ тм
Теги, доступные в HTML
1.Вывод текста
h1-h6 – заголовки (h1-самый крупный, h6-самый мелкий)
p
sup –нижний индекс, sub – верхний
b, strong, u, i – стиль текста
2.Контейнеры
Блочный и строчный
<div>…</div>
<span>…</span>
3.Таблицы
Таблица – всегда прямоугольная матрица с одинаковым набором ячеек в каждой строке или столбце
<table border=”4” cellspacing=”2”(между ячейками) cellpadding=”5”(внутри ячейки до контента)>
<tr> - строка
<td> - ячейка
<td colspan=”2”> - объединить со следующей ячейкой
<th>
Графические форматы для Web
Бывают:
-Векторные
-Растровые
Векторные:
картинка представляется в виде набора элементов, представленным математически.
Преимущества:
-масштабируется без потери качества, что идеально для типографской печати.
Пакеты: Corel Draw, Adobe Illustrator, Flash.
Растровые:
картинка представляется в виде матрицы точек (пикселей).
Классификация растровых форматов:
1.Структура
-однослойные
-многослойные
2.Поддержка прозрачности
-с поддержкой
-без поддержки
3.Качество
-с потерей качества
-без потери качества
4.По количеству цветов
-с палитрой
-полноцветные
5.Сжатие
-с сжатием
-без сжатия
Для Web используютя jpeg gif png
jpeg (joing photo expert group) предназначен для хранения полноцветных картинок с плавным переходом цветов.
однослойный
с жатием
с потерей качества
полноцветный
без прозрачности
Gif
однослойный
с прозрачностью (булевской)
с применением палитры до 256 цветов
потеря качества происходит только для картинок, в которых больше 256 цветов
применяеться для маленьких картинок и с небольшим колвом цветов
PNG
png8 – почти полных аналог gif
png24 – для полноцветных картинок. поддерживает прозрачность.
для либо маленьких картинок
либо картинки с прозрачностью
картинки с плавными градиентами
Вариант на лабу №1К - 5 Д-1 Arial, Tahoma, Verdana, Times New Roman
1.Проверяеться в 3 браузерах
ехлорер
опера
хром или мазила
2.Должны быть гипессылки
3.Заголовок не ссылка
4.Верстка на основе таблиц
№2 К-1 Д-3
20.01.14
Списки
Маркированный <ul><li></li></ul>
Нумерованный <ol><li></li></ol>
Другие элементы:
Ссылки <a href=”url”></a>
относительный путь – относительно текущей страницы
абсолютный путь – полный путь к странице. Можно указать без домена с корня ресурса: /docs/…
Для задания местоположения на ссылке надо сделать <a name=”target1”></a>. Когда надо перескочить туда, для этой же страницы <a href=”#target1”></a> или для другой страницы <a href=”/docs/index.html|#target1”></a>.
Для создания подсказки надо указать <a title=””>
Картинки <img src=”” width=”” height=”” alt=””></img>
alt – описание для поисковой системы. Обязательно надо указать!
Для картинок, которые являются элементами дизайна обязательно указывать ширину и высоту.
Кликабельные карты
для выделения нескольких областей на картинке
<area> - задает область на карте
<map> - задает карту
<img svc=”world.jpg” usemap=”worldmap”>
<map id=”worldmap”>
<area shape=”rect” coords=”x1,y1,x2,y2” ></area>левый верхний и правый нижний угол прямоугольника
<area shape=”curcle” coords=”x1,y1,x2,y2” href=”url”></area> левый верхний и правый нижний угол прямоугольника, в который вписан эллипс
<area shape=”poly” coords=”x1,y1,x2,y2,x3,y3,x4,y4”></area>
</map>
Формы и элементы управления формы
<form action=””>
<input type=”” name=”” id=””
type:
-text (текст внутри поля ввода), radio (для создания группы надо указать одинаковое name, но разное value), checkbox, submit, reset, button (текст на кнопке) – есть параметр value
-file
<textarea cols=””, rows=””></textarea>
<select multiple> - выпадающий список, multiple – множественный выбор
<option value=””></option>
</select>
<label for=”указать id элемента”></label>
</form> задает границы. от всех элементов управления внутри этих границ одним запросом можно отправить данные на сервер.
action – адрес скрипта, которому будет направлен запрос
Табличная верстка
Суть табличной верстки сводится к следующему:
самым внешним тегом будет таблица, ячейки которой зададут функциональные области на странице (хедер, футер, контент). Содержимое каждой ячейки верстается индивидуально. Проблема табличной верстки состоит в том: в некоторых браузерах таблица отображается только после загрузки всей страницы, что для пользователя выглядит как торможение сайта, что приводит к потере посетителей.
CSS
Cascading Style Sheets
Способ интеграции css в страницу
1.Подключение из внешнего файла в head <link type=”text/css” vel=””
2.Подключение глобально в документе с помощью тега
<style type=”text/css”></style>
3.локально для каждого тега
<teg style=”…css”>
Каскадирование стилей указываются в указанном порядке: локальные, глобальные, из внешнего файла.
Группы стилей
CSS могут применятся для изменения:
1.стиля шрифта
2.стиля абзаца
3.фона для объекта (картинка или текст)
4.стиля списка
5.корриктировка блочной модели (отступы, позиционирования)
6.цвет для текста
27.01.14
При глобальном пдключении и подключении из внешнего файла таблици стилей чтоб определить к каким тегам относится стиль вводится понятие селектора
Селектор задает перечень тегов в которых будет применен ниже указанный стиль.
селектор{
стиль 1;
стиль 2; …
}
Правила задания селекторов:
1.В качестве селектора указывается название тега div {стиль;}. Означает что для всех тегов с указанным именем этот тег применяется.
2.<div id=”mydiv”></div>
#mydiv{стиль}
Для любого тега на странице можно задать уникальный идентификатор id. При задании стиля через # стиль привяжется к конкретному тегу.
3. <p class=” clsclass”></p>
.clsclass{стиль}
Для объединения стиля в группу используется класс.
4.Селектор с применением правил вложенности: селектор1 селектор 2 … селектор N {}
Можно css задать селектор который будет учитывать вложенность расположения элементов. Порядок вложенности указывается от внешнего элемента к внутреннему слева на право, селекторы разделяются пробелами.
5.Также можно определять класс и идентификатор с учетом тега в котором он применяется. p.clsclass span{}
6.сел1, сел2, сел3 {стиль}. Если для разных селекторов нужно прописать один и от же набор стилей, то можно все эти селекторы указать через запятую, после чего в фигурных скобках указать общие для них стили.
При описании селекторов может получится так, что разные селекторы будут направлены на применение стиля к одному и тому же элементу на странице.