Современные web-технологии : Учеб. пособие. / Л. А. Татарникова. — 2-е изд., испр. — Томск, 2011. — 188 с.
Учебное пособие является частью учебно-методического комплекта
«Современные web-технологии» и предназначено для учащихся 8–9-х классов информационного профиля. В пособии приведены общие сведения о технологии создания веб-страниц. Большое внимание уделено современному подходу к сайтостроению, назначению и возможностям популярного веб-редактора Dreamweaver.
И не удивляйся, теперь ты студент Открытого молодёжного университета!
А сейчас о курсе, по которому ты будешь заниматься.
Первые интернет-сайты были похожи на электронные газеты: текст, картинка и незамысловатый фон. Сегодня это настоящие произведения искусства с динамичными объектами, анимацией, слайд-шоу и звуковыми эффектами. Их создатели находятся в постоянном поиске новых технологий.
Этот курс — для тех, кто уже знает о том, как устроен простой сайт и стремится создавать виртуальные шедевры. Ты упрочишь свое знание HTML, научишься оформлять страницы с помощью каскадных таблиц стилей (CSS), использовать визуальный веб-редактор, создавать «гибкие» сайты, размещать на веб-страницах медиаконтент (видео, Flash, графические карты), осуществлять поисковую оптимизацию и др.
Коллектив разработчиков КОП «Школьный университет»
Оглавление 9 ВВЕДЕНИЕ 11 УРОК 1. ИЗ ЧЕГО СОСТОИТ САЙТ 11 Программы для работы над простой веб-страницей 12 Структура веб-страницы 13 Теги разметки и форматирования текста 14 Теги логической и физической разметки 17 Заголовок страницы 20 УРОК 2. АТРИБУТЫ ТЕГОВ 20 Атрибуты блочных тегов Оформление шрифта тегом font Атрибуты тега body 23 Цвет 28 УРОК 3. ЗНАКОМСТВО С ВЕБ-РЕДАКТОРОМ 004 28 Интерфейс веб-редактора 28 Macromedia/Adobe Dreamweaver 30 Создание сайта 31 Кодировка веб-страницы 34 УРОК 4. ИЗОБРАЖЕНИЯ НА ВЕБ-СТРАНИЦЕ 34 Изображения на веб-странице 36 Вставка изображения в веб-редакторе 38 УРОК 5. СПИСКИ НА ВЕБ-СТРАНИЦЕ 38 Список на веб-странице 39 Свойства списков 40 Списки в веб-редакторах 44 УРОК 6. СПЕЦСИМВОЛЫ HTML 44 Esc-последовательности 45 Некоторые спецсимволы 47 Индексы 50 УРОК 7. СОЗДАНИЕ ТАБЛИЦ 50 Таблицы на веб-странице 50 Теги формирования таблицы 51 Атрибуты табличных тегов 54 Создание таблицы в веб-редакторе 56 УРОК 8. НАСТРОЙКА ТАБЛИЦЫ 56 Цвет фона 57 Поля в таблицах Оглавление 58 Создание цветной сетки таблицы 59 Объединение ячеек 64 УРОК 9. ГИПЕРССЫЛКИ 64 Гиперссылки на веб-странице 64 Создание гиперсcылки 65 Типы гиперссылок 69 УРОК 10. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ 69 Каскадные таблицы стилей 71 Стилевое правило 72 Селекторы 76 Некоторые стилевые свойства 81 УРОК 11. ПОДКЛЮЧЕНИЕ
СТИЛЕВЫХ ТАБЛИЦ
81 Подключение стилевых таблиц 81 Внутренняя таблица стилей 82 Внешняя таблица стилей 83 In-line стиль 83 Каскадность стилей 86 УРОК 12. СВОЙСТВА БЛОКА 86 Блок на веб-странице 86 Структура блока 90 Сокращённая запись свойств УРОК 13. ПОЗИЦИОНИРОВАНИЕ 94 Позиционирование на веб-странице 95 Абсолютное позиционирование 100 Относительное позиционирование 104 Фиксированное позиционирование 107 УРОК 14. СОЗДАНИЕ СТИЛЕЙ 109 Создание правила 112 Редактирование правила 114 УРОК 15. СОЗДАНИЕ БЛОКА 006 114 Свойства шрифта 116 Свойства текста 120 УРОК 16. ВЁРСТКА БЛОКАМИ 120 Способы нестандартного размещения блоков 120 Настройка позиционирования в веб-редакторе 120 Плавающие блоки 122 Завершение обтекания 125 Расположение блока по центру 127 УРОК 17. ТАБЛИЧНАЯ РАЗМЕТКА 127 Разметка веб-страницы 128 Табличная разметка 132 УРОК 18. «РЕЗИНОВЫЙ» ЗАГОЛОВОК 132 «Резиновые» объекты 133 «Резиновая» шапка 135 Формирование «резиновой»
УРОК 19. «РЕЗИНОВАЯ» РАМКА 138 Двумерные «резиновые» объекты на странице 138 Формирование двумерного «резинового» объекта УРОК 20. СЛОЖНАЯ РАМКА 143 Сложные «резиновые» объекты 144 Формирование сложного «резинового» объекта 146 УРОК 21. DIVНАЯ «РЕЗИНОВАЯ» РАЗМЕТКА 146 Разметка веб-страницы 146 Блочная абсолютная разметка 148 Идентификатор позиционированного блока 151 УРОК 22. DIVНАЯ «ПЛАВАЮЩАЯ» РАЗМЕТКА 151 Блочная «плавающая» разметка 152 Блочная и табличная разметки: сравнение 154 Рецепты создания колонок одинаковой высоты 157 УРОК 23. БЛОЧНОЕ МЕНЮ 157 Язык CSS и вёрстка веб-страниц 158 Блочное меню 159 Блочное меню: вариации 160 УРОК 24. МЕНЮ ИЗ ТАБОВ 160 Схема «раздвижных дверей»
161 CSS-реализация «раздвижных дверей»
163 УРОК 25. ВСТАВКА FLASH НА СТРАНИЦУ 163 Как вставить на страницу flash-ролик 164 Настройки flash-ролика
УРОК 26. В ГОСТЯХ У СОЗВЕЗДИЙ
167 Чувствительные области на изображении 168 Теги создания карты изображения УРОК 27. CSS3: ТЕНЬ, ТРАНСФОРМАЦИЯ УРОК 28. CSS3: ЗАКРУГЛЁННЫЕ УГОЛКИ,
ГРАДИЕНТ И ПРОЗРАЧНЫЕ ТЕНИ
УРОК 29. CSS3: НОВЫЕ ВОЗМОЖНОСТИ
САЙТ В ИНТЕРНЕТЕ
САЙТ В ИНТЕРНЕТЕ
ЗАКЛЮЧЕНИЕ
СПИСОК РЕКОМЕНДУЕМОЙ ЛИТЕРАТУРЫ
Введение Сейчас, наверное, нет такого человека, который не знал бы, что такое Интернет. Мир Интернета бесконечно разнообразен и безумно интересен.
не задумываясь об огромных расстояниях, — Интернет победил пространство.
мира. Не важно, что нам нужно найти: формулировку второго закона Ньютона, фотографию Колина Мука или данные своего одноклассника — мы идём за ними в Интернет.
Мир Интернета бесконечно разнообразен.
программы нам помогут упростить работу над страницей?
Какие справочники позволят найти нужную информацию?
Какие приёмы дадут возможность сформировать современные красивые страницы?
Ответы на эти вопросы ты и получишь в нашем курсе.
Урок 1. Программы для работы над простой веб-страницей Из чего состоит сайт текстовый редактор (ни в коем случае не текстовый процессор), например, «Блокнот», в котором мы будем редактировать нашу страницу;
отображать только те страницы, которые сохранены на диске. Поэтому перед просмотром изменённой в «Блокноте»
Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.