- •Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
- •Тема 10. Карта сайта. 41
- •Тема 11. Таблицы стилей. 45
- •Введение.
- •Тема 1. СтруктураHtml-документов.
- •1.1. Границы документа.
- •1.2. Заголовок документа.
- •1.3. Тело документа.
- •Тема 2. ФорматированиеHtml-документов.
- •2.4. Предварительно отформатированный текст.
- •Тема 3. Форматирование текстаHtml-документов.
- •3.1. Логическое форматирование.
- •3.2. Физическое форматирование.
- •Тема 4. Использование графики вHtml-документах.
- •4.1. Выбор формата графического файла.
- •4.2. Вставка изображения в документ.
- •Тема 5. Ссылки вHtml-документах.
- •5.1. Гипертекст и гипермедиа.
- •5.2. Создание ссылок на документы и файлы.
- •5.3. Ссылки внутри документа.
- •Тема 6. Списки в html-документах.
- •6.6. Дополнительные возможности форматирования списков.
- •Тема 7. Таблицы вHtml-документах.
- •7.1. Основы построения таблиц.
- •7.2. Создание сложной таблицы.
- •7.3. Альтернативные способы представления табличных данных.
- •Тема 8. Кадры (фреймы) вHtml-документах.
- •8.1.Основы создания кадров.
- •8.2. Модификация внешнего вида кадров.
- •8.3. Организация ссылок в кадрах.
- •Тема 9. Формы вHtml-документах.
- •9.1. Что такое формы.
- •9.1.1. Типы управляющих элементов
- •9.2. Работа с формами.
- •9.3. Разработка форм.
- •9.3.1. Элемент input.
- •9.3.2. ЭлементButton.
- •9.3.3. Элементы select, optgroup и option
- •9.3.4. Заранее выбранные варианты
- •9.3.5. ЭлементTextarea
- •9.3.6. Метки.
- •9.3.6.1. Элемент label.
- •9.3.7. Переход фокуса на элемент.
- •9.3.7.1.Переход с помощью клавиши Tab.
- •9.3.7.2. Клавиши доступа.
- •9.3.8.Отправка формы.
- •9.3.8.1. Метод отправки формы.
- •9.3.8.2. Успешные управляющие элементы.
- •9.3.9.Обработка данных формы.
- •Тема 10. Карта сайта.
- •Тема 11. Таблицы стилей.
- •11.1. Псевдоклассы и псевдоэлементы:
- •11.2. Краткое описание языка css.
- •11.3. Некоторые хитрости управления стилями.
- •Приложение 1.Цвета.
Тема 10. Карта сайта.
Под картой сайта обычно понимается отдельная страница сайта, состоящая из ссылок (своеобразный "каталог" сайта) на различные ресурсы сайта, ранжированные по темам и иерархии (наподобие режима структуры документа в текстовом процессоре MicrosoftWord).
Смысл создания подобной структуры заключается в том, что часто на сложных сайтах часто очень трудно бывает найти нужный раздел, "спрятанный" за другими, стоящими выше по иерархии. В таком случае и используют раздел "карта сайта", который в данном случае и будет являться своеобразным каталогом (или "содержанием") сайта.
Пример карты сайта.
АДМИНИСТРАЦИЯ ИНСТИТУТА
• Краткая история и характеристика деятельности ИФРАН
Полная структура подразделений ИФРАН
ОТДЕЛ ЭПИСТЕМОЛОГИИ И ЛОГИКИ
• Сектор теории познания
• Исследовательская группа философии самосознания
• Сектор логики
• Сектор эволюционной эпистемологии
ОТДЕЛ ФИЛОСОФИИ НАУКИ И ТЕХНИКИ
• Сектор философских проблем истории науки
• Сектор философских проблем междисциплинарных исследований
• Исследовательская группа философии техники
• Сектор философии естествознания
• Центр методологии и этики науки
• Центр био- и экофилософии
ОТДЕЛ СОЦИАЛЬНОЙ И ПОЛИТИЧЕСКОЙ ФИЛОСОФИИ
• Сектор социальной философии
• Сектор философских проблем политики
• Сектор истории политической философии
• Сектор философии российской истории
• Сектор философии хозяйства
• Центр изучения социокультурных изменений
• Центр методологии социального познания
ОТДЕЛ АКСИОЛОГИИ И ФИЛОСОФСКОЙ АНТРОПОЛОГИИ
• Сектор этики
• Сектор философии религии
• Сектор эстетики
• Сектор аналитической антропологии
• Исследовательская группа философских проблем человека
• Сектор истории антропологических учений
• Центр междисциплинарных исследований общественного сознания
ОТДЕЛ ИСТОРИКО-ФИЛОСОФСКИХ ИССЛЕДОВАНИЙ
• Сектор истории западной философии
• Сектор современной западной философии
• Сектор истории русской философии
• Сектор восточных философий
БИБЛИОТЕКА
Онтология и эпистемология
Философия языка, философия сознания, философия науки
Социальная и политическая философия
Антропология и культурология
Этика, эстетика
Философия религии
Восточная философия
Арабская
Канонические тексты
Буддийская
Индийская
Китайская
Алфавитный каталог библиотеки
Texts in English and other languages
Обновления
Правила подачи текстов
ФИЛОСОФСКИЕ РЕСУРСЫ
Организации и философские центры
Отечественные философские центры
Кафедры вузов
Личные страницы философов
О школах и философах
Вакансии
Гранты
Тематические ресурсы
Текстовые ресурсы
Периодика
Библиотеки
Библиографии
Книжные магазины и издательства
Хроника
Вестник РФО
Предстоящие события
Материалы прошедших конференций
Дискуссии
Философия в образовании
Справочники, учебники, энциклопедии
Программы курсов
История философии
Гос.стандарты, требования
Сетевые энциклопедии, справочники, словари
Объявления
ПОИСК ПО САЙТУ
Тема 11. Таблицы стилей.
CSS (Cascading Style Sheets) - язык для управления стилем Web-страниц. Применение CSS позволяет значительно сократить объем HTML-документов, особенно если у вас имеется множество страниц с однотипным стилем и, в то же время, упростить работу по созданию и добавлению новых документов. Сохранив описание различных стилей в отдельных файлах, вы сможете с легкостью манипулировать стилями.
Файлы стилей - обычные текстовые файлы, содержащие описание стиля на языке CSS, и располагающиеся на Web-сервере. Для того, чтобы Web-страница, видела стиль,внутри тэга <BODY> делается ссылка на файл стиля, как показано в примере: Файл style.css
<STYLE type="text/css">
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
</STYLE>
Файл index.htm
<html>
<head>
<title> Пример </title>
</head>
<LINK rel="stylesheet" type="text/css" href="style.css">
<body>
Содержание Документа
</body>
</html>
Если файл стилей находится на другом сервере, необходимо указать его полный URL href="("http://...")" Можно описать стили и в коде Web-страницы, внутри тэга <BODY>, как показано в следующем примере:
Файл index.htm
<html>
<head> <title> Пример Глобальных Таблиц Стилей </title>
</head>
<STYLE type="text/css">
h1,h2,p{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</STYLE>
<body>
</body>
<html>
В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах WEB-страницы. То есть все текстовые элементы, находящиеся внутри тэгов <H1></H1>, <H2></H2> и <P></P> на этой странице будут отображаться красным курсивом, с размером символа в 32 пикселя.
И последний вариант - описание стиля находится непосредственно внутри тэга элемента к которому применяется этот стиль, например:
<font style="color:blue; font-size:12pt; font-family:Arial"> Данный стиль применяется только к этой надписи </font>
Этот вариант не самый лучший, так как приводит к увеличению размера кода страницы и потере разделения отдельно стилей и отдельно данных страницы.
Теперь рассмотрим случай, когда необходимо присвоить стили не всем одинаковым элементам страницы, а только некоторым - для этого используется параметр CLASS = "имя класса" или идентификатор ID="имя элемента", которое может быть присвоено любому элементу страницы (параграф, таблица и т.д.).
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных). Например, указав в описании стиля:
.bold_italic {font-weight: bold; font-style:italic}
Можно сделать так, что только некоторые ячейки таблицы будут отображаться жирным курсивом. Для этого присвоим им стиль класса bi:
<TD CLASS="bold_italic">текст</TD>
Внимание! Названия классов чувствительны к регистру.
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько - это уже класс.