- •Министерство образования украины донбасская государственная машиностроительная академия конспект лекции
- •Тема 1.1. История развития технологий Всемирной Сети и ее основные компоненты.
- •Основные компоненты технологии World Wide Web
- •Архитектура построения системы
- •Язык гипертекстовой разметки html
- •Принципы построения и интерпретации html
- •Тема 1.2. Введение в технологию создания web-сайтов Классификация сайтов
- •Этапы разработки web-сайта
- •Регистрация доменного имени.
- •Разработка структуры сайта.
- •Разработка дизайна главной страницы сайта.
- •Html-верстка страниц.
- •Подключение сайта к системе управления.
- •Корректировка и написание текстовых материалов (по необходимости).
- •Ввод информации (до 100 страниц).
- •Первичная seo-оптимизация.
- •Размещение сайта на сервере.
- •Создание e-mail адресов.
- •Установка счетчиков статистики.
- •Регистрация пользователей клиента в системе управления сайтом.
- •Редакторы веб-страниц
- •Тема 1.3. Основы web-дизайна.
- •Модульные сетки
- •Одноколонная сетка
- •Двухколонная сетка
- •Трехколонная сетка
- •Акценты в шрифтовых композициях
- •Виды акцентов
- •Цвета в web-дизайне: Выбор правильного сочетания для вашего сайта Цветовая теория: основные принципы. Умение сочетать цвета
- •Красный
- •Тема 1.4. Технология css.
- •Способы применения css
- •Переопределение стиля
- •Элемент style
- •Ссылка на внешнее описание
- •Импорт описания стилей
- •Поддержка свойств css различными браузерами
- •Модуль 2. Основи роботи з html-редактором Adobe Dreamweaver cs3
- •Тема 2.2. Html-редактор Adobe Dreamweaver cs3. Реализация структуры сайта.
- •Тема 2.3. Html-редактор Adobe Dreamweaver cs3. Форматирование html-страниц: логическое и визуальное.
- •Тема 2.4. Html-редактор Adobe Dreamweaver cs3. Изображения и другие элементы.
- •Тема 2.5. Html-редактор Adobe Dreamweaver cs3. Создание текстових заданий с использованием интерактивных элементов CourseBuilder
- •Литература
Импорт описания стилей
Импорт описателей стилей в некотором смысле составляет конкуренцию представленному выше указанию на внешний описатель стиля.
Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:
<STYLE>
@import:url(http://intuit.ru/style.css)
A { color:cyan;text-decoration:underline; }
</STYLE>
Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента STYLE.
Поддержка свойств css различными браузерами
Свойства CSS |
ПРИМЕЧАНИЯ |
Internet Explorer |
Opera7.5 |
Mozilla Firefox |
Свойства шрифта элементов сайта |
||||
Цвет шрифта [color] |
|
+ |
+ |
+ |
Размер шрифта [font-size] |
|
+ |
+ |
+ |
Толщина символов [font-weight] |
|
|
|
|
Начертание [font-family] |
Если указать URL(file), то шрифт автоматически установится на компьютер пользователя |
+ |
+ |
+ |
Наклон [font-style] |
|
+ |
+ |
+ |
Подчеркивание [text-decoration] |
Значение "blink" работает по- разному в различных браузерах |
+ |
+ |
+ |
Расстояние между буквами [letter-spacing] |
Доступны отрицательные значения |
+ |
+ |
+ |
Межстрочный интервал |
|
+ |
+ |
+ |
Заглавные буквы [font-variant] |
По-разному отображаются в различных браузерах |
+ |
+ |
+ |
Преобразование шрифта |
|
+ |
+ |
+ |
Свойства фона и цвет элементов сайта |
||||
Цвет фона [background-color] |
|
+ |
+ |
+ |
Фоновое изображение [background-image] |
|
+ |
+ |
+ |
Прокручивание фона [background-attachment] |
Значение "fixed;" работает только с тегом <body> |
+ |
+ |
+ |
Положение фонового изображения [background-position] |
|
+ |
+ |
+ |
Повторение фонового изображения [background-repeat] |
|
+ |
+ |
+ |
Положение фонового изображение по X |
|
+ |
- |
- |
Положение фонового изображение по Y |
|
+ |
- |
- |
Границы элементов сайта |
||||
Общее обрамление [border] |
(Задает ширину, стиль и цвет всех четырех границ элемента одновременно) |
+ |
+ |
- |
Толщина обрамления [border-width] |
|
+ |
+ |
+ |
Цвет обрамления [border-color] |
|
+ |
+ |
+ |
Стиль обрамления [border-style] |
|
+ |
+ |
+ |
Верхняя граница [border-top] |
|
+ |
+ |
- |
Нижняя граница [border-bottom] |
|
+ |
+ |
- |
Правая граница [border-right] |
|
+ |
+ |
- |
Левая граница [border-left]: |
|
+ |
+ |
- |
Позиционирование блоков (элементов) сайта |
||||
Внешние отступы [margin] |
Доступны отрицательные значения |
+ |
+ |
+ |
Тип контейнера [display] |
|
+ |
+ |
+ |
Общая ширина [width] |
|
+ |
+ |
+ |
Общая высота [height] |
|
+ |
+ |
+ |
Метод позиционирования [position] |
|
+ |
+ |
+ |
Выравнивание [float] |
|
+ |
+ |
+ |
Смещения |
Доступны отрицательные значения |
+ |
+ |
+ |
Расположение [clear] |
|
+ |
+ |
+ |
Координаты прямоугольника, в котором выводится содержимое элемента |
Обычно применяется в области програм-мирования на Java Scripts |
+ |
+ |
+ |
Поведение |
|
+ |
+ |
+ |
Порядок вывода (наложения) элементов друг на друга [z-index] |
Чем больше значение z-index, тем ближе к наблюдателю находится слой. |
+ |
- |
+ |
Расположение текста внутри элементов (блоков) сайта |
||||
Внутренний отступ [padding] |
Значение работает в различных браузерах - по разному |
+ |
+ |
+ |
Горизонтальное выравнивание текста [text-align] |
|
+ |
+ |
+ |
Вертикальное выравнивание текста [vertical-align] |
Обычно используется для вертикального выравнивания текста внутри столбцов и ячеек таблиц, также работает для вертикального расположения маркеров (list-item) внутри блока |
|
|
|
Смещение текста |
|
+ |
+ |
+ |
Другие настройки элементов сайта |
||||
Маркер списка [list-style-type] |
|
+ |
+ |
+ |
Маркер списка (изображение) [list-style-image] |
|
+ |
+ |
+ |
Расположение маркеров |
|
+ |
+ |
+ |
Обработка пробелов в элементах сайта |
|
+ |
+ |
+ |
Вид курсора |
Если указать URL(file), то возможно использовать любой Ваш курсор |
+ |
+ |
- |
Фильтры |
Чтобы работало, бывает необходимо указать ширину и высоту объекта |
+ |
- |
- |
Полосы прокрутки элементов сайта |
||||
Полосы прокрутки |
Для того чтобы придать цвета основному скролу, установите соответствующие значения для тега <body> |
+ |
- |
- |