Федеральный государственный образовательный стандарт Образовательная система «Школа 2100»
А.В. Горячев, С.Л. Островский, А.В. Паволоцкий, Т.Л. Чернышёва, Д.В. Широков
ИНФОРМАТИКА
9 класс • Часть 1
Москва
Б/тх
2015
УДК 373.167.1:004+004(075.3)
ББК 32.81я721 Г67
Федеральный государственный образовательный стандарт Образовательная система «Школа 2100»
Совет координаторов предметных линий Образовательной системы «Школа 2100» — лауреат премии Правительства РФ в области образования за теоретическую разработку основ образовательной системы нового поколения и её практическую реализацию в учебниках
На учебник получены положительные заключения по результатам научной экспертизы (заключение РАН от 14.10.2011 № 10106-5215/449), педагогической экспертизы (заключение РАН от 24.01.2014 № 000384) и общественной экспертизы (заключение НП «Лига образования» от 30.01.2014 № 177)
Руководитель издательской программы -чл.-корр. РАО, доктор пед. наук, проф. Р.Н. Бунеев
Авторский коллектив:
А.В. Гиглавый - научный редактор, А.В. Горячев - автор концепции курса, научный руководитель, С.Л. Островский (часть 1: модуль «Хранение и обработка больших объёмов данных»), А.В. Паволоцкий (часть 2: модуль «Алгоритмизация и программирование»), А.А. Семёнов (часть 1: модуль «Моделирование»), Т.Л. Чернышёва (часть 2: модуль «Знакомство с математической логикой»), Д.В. Широков (часть 1: модуль «Создание электронных изданий»; часть 2: модуль «Web-конструирование. Основы мастерства»)
Данный учебник в целом и никакая его часть не могут быть скопированы без разрешения владельца авторских прав
ISBN 978-5-85939-997-0 ISBN 978-5-85939-941-3 (ч. 1)
© Горячев А.В., Островский С.Л., Паволоцкий А.В., Чернышёва Т.Л., Широков Д.В., 2012 © ООО «Баласс», 2012
Дорогие читатели!
Перед вами учебник по информатике для 9-го класса, созданный в Образовательной системе «Школа 2100». Надеемся, вы помните, что особое внимание мы уделяем применению компьютеров в наиболее общих, универсальных действиях, которые выполняют люди самых разных профессий в самых разных ситуациях. Принято выделять три основные группы таких универсальных действий:
• познавательные - связанные с поиском информации и работой со знаниями (например, это такие темы, как поиск информации, моделирование, применение интеллект-карт, работа с большим объёмом данных),
• коммуникативные - связанные с общением и сотрудничеством (например, это такие темы, как общение через промежуточное звено в виде печатных, мультимедийных и электронных изданий и общение напрямую: общение в Сети, публичные выступления),
• организационные (или регулятивные) - связанные с постановкой цели, созданием и реализацией плана действий, оцениванием полученного результата (например, это такие темы, как управление личными проектами, организация времени, принятие решений).
Овладение такими видами универсальных действий - важная задача обучения в школе. Об этом прямо записано в Федеральном государственном образовательном стандарте - документе, имеющем силу закона. В 7-м и
8-м классах вы уже научились применять компьютер как инструмент при выполнении некоторых универсальных действий и имеете полную возможность применять свои умения на уроках по другим учебным дисциплинам. Мы надеемся, что именно так вы и поступаете.
С помощью этого учебника вы продолжите осваивать новые умения, которые также сможете применять на других уроках. В модуле «Создание электронных публикаций» вы сможете научиться создавать свои первые сайты для публикации в сети Интернет. С помощью модуля «Хранение и обработка больших объёмов данных» вы сможете научиться создавать базы данных для хранения большого объёма табличной информации и искать нужную информацию в этих базах данных, составляя запросы на поиск. Изучая очень интересный модуль «Управление личными проектами», вы задумаетесь над тем, в какой последовательности надо браться за накопившиеся дела и почему очерёдность выполнения дел должна быть такой. Вы сможете научиться планировать текущую деятельность, включая учебную, для того чтобы ставить цели и добиваться их достижения.
Как работать с учебником
Просмотрите «Содержание», перелистайте учебник. Вы заметите, что он разделён на модули. Вы будете изучать модули в том порядке, который предложит учитель.
Практически в каждом модуле мы предусмотрели пять основных параграфов. Изучив эти параграфы, вы напишете проверочную работу, по итогам которой узнаете, как вы освоили новый материал: ниже необходимого уровня, на необходимом или повышенном уровне. Далее вы будете работать самостоятельно, выполняя по указанию учителя задания того уровня, которого вы пока не достигли. Если проверочная работа покажет, что вы освоили и повышенный уровень, то вы будете выполнять задания самого высокого - максимального уровня. Учитель в любой момент может предложить вам перейти на выполнение заданий более высокого уровня. По окончании выполнения заданий учебника учитель проведёт итоговую проверочную работу.
Далее в модуле расположены дополнительные параграфы, задания к ним и проверочные работы. Основные параграфы выделены в учебнике зелёной полосой вверху страницы, дополнительные - розовой полосой.
Дополнительный материал, который вы не изучите на уроках, вы сможете использовать на факультативах и кружках.
На уроках информатики вы сможете освоить умения, которые помогут вам более эффективно использовать компьютеры и компьютерные сети для решения возникающих в вашей жизни задач. Кроме того, учитель может решить, что вам надо освоить умения, которые помогут вам заниматься разработкой новых компьютерных программ или заложат основы профессиональной деятельности, тесно связанной с применением компьютерной техники.
Кроме того, наш учебник, как и все учебники Образовательной системы «Школа 2100», поможет вам в развитии универсальных учебных действий. В учебнике вам могут встретиться задания, обозначенные кружками и фоном разного цвета - это условные знаки. Каждый цвет соответствует определённой группе умений:
• - организовывать свои действия: ставить цель, планировать работу,
действовать по плану, оценивать результат;
• - работать с информацией: самостоятельно находить, осмысливать и
использовать её;
4
' 1^ - общаться и взаимодействовать с другими людьми, владеть устной и письменной речью, понимать других, договариваться, сотрудничать;
' I - развивать качества своей личности, оценивать свои и чужие слова и поступки;
0,
так обозначены задания, где нужно применить разные группы умений, мы называем их жизненными задачами и проектами.
Для успешного изучения информатики и овладения универсальными учебными действиями на уроках используется проблемно-диалогическая образовательная технология. Поэтому структура параграфа, где вводится новый материал, имеет в учебнике следующий вид.
ПОСТАНОВКА ПРОБЛЕМЫ УРОКА
Это подведение к теме (вопросу, цели) урока: вы обсуждаете проблему в предложенном материале и формулируете главный вопрос урока (всем классом, в группе или в паре). Сравните свой вариант вопроса с авторским. Авторские вопросы к параграфам расположены в «Содержании» под названиями параграфов и выделены курсивом.
НЕОБХОДИМЫЕ БАЗОВЫЕ ЗНАНИЯ
Так обозначены вопросы и задания по изученному материалу, который вам необходим для открытия нового знания.
РЕШЕНИЕ ПРОБЛЕМЫ
Вы в группе, в паре или совместно с учителем, ведя диалог, осуществляете поиск решения проблемы. Для решения проблемы вы работаете с текстом.
ОБОБЩЕНИЕ НОВЫХ ЗНАНИЙ
На этом этапе вы формулируете вывод и проверяете свои предположения, сравнивая их с авторским решением проблемы - научными формулировками правил или определений.
ПРИМЕНЕНИЕ ЗНАНИЙ
Так обозначены задания на применение новых знаний.
ОПЕРАЦИИ
Раздел «Операции» позволит вам научиться выполнять действия с компьютерными программами, необходимые для решения учебных задач.
В конце модуля вы найдёте раздел «Решаем жизненные задачи и работаем над проектами». Задачи и проекты могут выполняться как на уроках, так и на факультативах и кружках.
Там же находится очень важный раздел «О профессиях». Прочитайте его и подумайте, какие профессии вам больше по душе.
Что такое жизненные задачи?
Это проблемы, с которыми вы можете столкнуться в жизни и для решения которых вам понадобятся разные знания и умения. Они оформлены следующим образом:
Название задачи
Ваша роль: человек, в роли которого вы должны себя представить, решая проблему.
Описание. Условия, в которых возникла проблема.
Задание. То, что нужно сделать и получить в итоге.
Что такое проект?
Это любое самостоятельное дело, которое предполагает:
1) оригинальный замысел (цель);
2) выполнение работы за определённый отрезок времени;
3) конкретный результат, представленный в итоге.
Что можно считать результатом проекта?
• Предметы, сделанные своими руками: макеты, модели или вещи для практического использования.
• Мероприятия: спектакли, фотовыставки, викторины, конференции, праздники и тому подобное - при условии, что они подготовлены самими учениками.
• Информационные продукты: газеты, книжки, плакаты, карты, стихотворения, рассказы, доклады, отчёты об исследованиях и т.д.
• Решение конкретных проблем: изменение, улучшение конкретной ситуации, например уборка мусора на школьном дворе.
6
Правила проектной деятельности
1. Каждый может начать собственный проект.
2. Каждый может объединиться с другими в ходе работы над проектом.
3. Каждый может выйти из проекта при условии, что он не подводит других.
4. Каждый может не участвовать ни в одном проекте.
Как оценить свои учебные достижения?
Для этого надо освоить алгоритм самооценки:
1. Какова была цель задания (что нужно было получить в результате)?
2. Вы выполнили задание (получен ли результат)?
3. Вы выполнили задание верно или с ошибкой?
4. Вы выполнили задание самостоятельно или с чьей-то помощью?
5. Вспомните, как вы ставите отметки. Определите свою отметку.
8
Модуль 1. Создание электронных изданий
Этот модуль поможет вам:
• познакомиться со структурой и возможностями гипертекста;
• понять, какими бывают web-страницы и для чего они предназначены;
• ориентироваться в многообразии стилей оформления web-страниц;
• создавать собственные web-страницы и редактировать существующие;
• познакомиться с возможностями оформления web-страниц с помощью каскадных таблиц стилей (CSS);
• превращать эскиз будущей web-страницы в html-документ.
Для этого вам надо научиться:
• иллюстрировать web-страницы различными изображениями;
• создавать навигацию между несколькими страницами;
• описывать стили внутри html-файлов и привязывать к web-страницам внешние css-файлы;
• создавать css-файлы с помощью редакторов «Блокнот» и Simple CSS;
• применять css-стили к любым элементам web-страниц.
9
10 Модуль 1. Создание электронных изданий
Введение
Интернет, или Всемирная паутина (по-английски WWW - World Wide Web), был придуман не так давно - в 1991 году, однако сегодня не так-то просто даже представить себе какую-либо сферу человеческой деятельности, которую он не затронул. Мы читаем с его помощью последние новости, заказываем в интернет-магазине книги и технику, публикуем свои фотографии, выбираем маршрут путешествия, покупаем билет на поезд и... Список можно продолжать бесконечно! Интернет состоит из огромного количества web-сайтов; обычно их называют просто сайтами. По подсчётам аналитиков, на начало 2011 года в Интернете насчитывалось свыше 270 миллионов сайтов. Каждый сайт представляет собой совокупность web-страниц.
Не секрет, что очень многое зависит от внешнего вида web-страниц того или иного сайта. Например, как много времени посетители потратят на его изучение: погрузятся «с головой», забыв обо всём на свете, или уже через минуту будут делать то же самое, но уже на другом сайте. Сколько посетителей станут впоследствии постоянными покупателями, клиентами, пациентами, деловыми партнёрами. Именно поэтому web-дизайн, то есть деятельность, направленная на разработку оптимальной структуры web-страниц и их художественное оформление, представляет собой огромную индустрию всевозможных web-студий, количество которых только в России измеряется сотнями, а то и тысячами.
Вы тоже можете стать мастерами Интернета, создателями web-сайтов, web-дизайнерами! В этом модуле вы научитесь создавать собственные web-страницы и сайты, грамотно и привлекательно их оформлять.
§ 1. Создаём первую web-страницу
11
§ 1. Создаём первую web-страницу
ПОСТАНОВКА ПРОБЛЕМЫ УРОКА
Прочитайте утверждение:
«В отличие от страниц печатных изданий, web-страницы не имеют физических границ: можно сделать сколь угодно широкую и длинную web-страницу. Зачем же разбивать сайт на несколько web-страниц, когда всю информацию можно разместить на одной? Тогда и гиперссылки не понадобятся!»
• Как вы считаете, это утверждение справедливо? Встречались ли вам сайты, состоящие из одной большой web-страницы? А задумывались ли вы, как создаются web-страницы? Какие вопросы, по-вашему мнению, будут решены в этом параграфе? Сформулируйте их. Сравните свою формулировку с авторской (с. 284 учебника).
НЕОБХОДИМЫЕ БАЗОВЫЕ ЗНАНИЯ
Какими способами можно оформлять текст?
Вспомните, как вы работали в текстовом редакторе Блокнот.
РЕШЕНИЕ ПРОБЛЕМЫ
Количество web-страниц, составляющих сайт, определяется его назначением. Наверняка многим знакомо название Википедия. Это самая большая в мире энциклопедия, размещённая в Интернете. Её материалы переведены на сотни языков. Создать новую статью для Википедии или отредактировать уже существующую может любой из нас: именно поэтому количество статей исчисляется сотнями тысяч и даже миллионами. Главная web-страница русскоязычной версии Википедии выглядит так (рис. 1.1).
Всё, что выделено здесь синим цветом, - это гиперссылки. Гиперссылки ведут нас на другие web-страницы. Очевидно, что невероятное количество данных (текста, картинок, аудио- и видеоматериалов) необходимо размещать маленькими порциями на отдельных web-страницах (одна страница - одна статья), поскольку найти что-либо на одной огромной странице будет крайне сложно.
Страницы, связанные гиперссылками, образуют гипертекст. Иногда гипертекст определяют как «текст, выполняющий действия по запросу».
Тем не менее иногда действительно встречаются сайты, состоящие из одной страницы. Как правило, это временные web-страницы, на которых размещена информация о том, что полноценный сайт находится в разработке и появится по данному адресу спустя некоторое время.
Вместе с тем существует немало сайтов, которые содержат небольшое количество web-страниц (пять-десять) в силу того, что выполняют представительскую функцию: кратко рассказывают о той или иной компании, продукте или услуге. Посмотрите на рис. 1.2: на странице, посвящённой выставке
12
Модуль 1. Создание электронных изданий
у Iw https://ru.wikipedia.org •J 1 ♦* 1 ri
J Избранное ^ . *7 • . Страница Безо пасност^ Сер ис- •'
Википедия
Добро пожаловать в Википедию,
Избранная статья
Аристид (ок. 530-467 до н. э.) - афинский государственный деятель, полководец греко-персидских войн (500-449 гг. до н. э.).
Свою политическую деятельность Аристид начал будучи сторонником реформатора Клисфена из рода Алкмеонидов. Позже он отошёл от группировки Алкмеонидов и занял позицию политика вне группировок -позицию уникальную, отличавшую его от всех остальных.
(далее...) -» ■ i «т i55°).
Хорошая статья
Знаете ли вы?
Мария дель Кармен Поло-и-Мартинес Вальднес - супруга испанского диктатора Франсиско Франко, первая леди Испании (1939-1975).
В период диктатуры Франко в Испании Кармен Поло играла важную роль в общественной и политической жизни государства. По словам генерала-лейтенанта Франко Слагадо-Арухо, она “была единственным лицом, обладавшим подлинным влиянием" на каудильо.
ш
•Книги не всегда писались черным по белому (на илл.).
•За пять лет, пока жених из Белоруссии дожидался на берегах Невы взросления своей невесты, он стал фаворитом императрицы, а она - невестой императора.
•Попав в Альмерию, выходец из Восточной Европы 5 раз пытался стать “делателем халифов''
•За четыре года немцы пережили два футбольных позора.
•В одном из городов Коммунистическая улица ведет прямо к кладбищу, а улицы Карла Маркса и Энгельса заканчиваются тупиком.
•Гильотина, созданная усилиями философа еще в XVIII веке, ни на секунду не не прекращает работать и по сей день, несмотря на возражения критиков.
Рис. 1.1. Главная страница русскоязычной Википедии в окне браузера Microsoft Internet Explorer
j Избрэнмо^ t, Яндекс ^Почт^ Карт^§|Мврке^ У Но
^ ^Виде^ ^ М|узык^ Ц^Диск Рекомендуемые узлы • |f;
fk • О • • стра
НОВАЯ
ЭЛЕКТРОНИКА
2013
26_28
МОСКВА ЭКСПОЦЕНТР НА КРАСНОЙ ПРЕСНЕ
Ведущие российские поставщики электронных компонентов и модулей
соберутся на международной выставке -
главная
российская
выставка
электронных
компонентов
и модулей
й -о-Учите обновления О следите за новостями
13.04.2012 _
ПрииТла’с.тельныхбилегто’?''"
Рис. 1.2. Страница сайта, посвящённого выставке российской электроники
в 2013 году
ободную энциклопедию, которую может редактировать каждый Сейчас в Википедии 881 805 статей на русском языке.
• \ 100%
§ 1. Создаём первую web-страницу
13
российской электроники, совсем немного гиперссылок, однако она изобилует большими красочными иллюстрациями, разнообразием шрифтов и пр.
Часто маленькие сайты, рассказывающие о деятельности компании Г^\ (например, типографии или фотостудии], называют сайтами-визитками, а _ J сайты, рекламирующие товар, услугу или событие, - промо-сайтами. Сайт, посвящённый выставке российской электроники, - это как раз промо-сайт.
Большой класс сайтов - это интернет-магазины. К их дизайну предъявляются повышенные требования, так как от того, насколько удобно просматривать товары, формировать заказы и следить за их выполнением, напрямую зависит количество покупателей. Здесь необходимо находить золотую середину между большим объёмом информации и красочным оформлением страниц (рис. 1.3).
оо-
h.ru - Windows Internet Explorer
|ек^ Почт^ ^ Карт^ ^ Но
, Слоеар^ Виде^ Ди
^ • О • т •
Отложить '
! Контакты !
Посчитать
ммгазЕ]
Товарные категории ▼
Телевизоры и видео ►
Аудиотехника ►
Ноутбуки, планшеты и компьютеры ►
Телефоны ►
Фото- и видеокамеры ►
Бытовая техника ►
Акции ▼
Текущие ►
Завершенные ►
Скоро в продаже ▼
Товары со скидками ▼
Москва Магазины ▼
Вход на сай^ Регистраций Помощь
(495) 123-45-67
Распродажи
Товар дня
Акции
Сервис
I Поиск товаров
Л1
Только в ИЮЛЕ
НА ВСЕ ноутеукй^
cKHAicftpgr
□
139 см / 55", Full HD 3D с технологией динамической подсветки Dynamic Edge LED, X-Reality, встроенный Wi-Fi и интернет-телевидение (читать далее...
<*»
Рис. 1.3. Главная страница интернет-магазина электроники и бытовой техники
«Стартех»
Своеобразный набор правил, который позволяет превращать обычный текст в гипертекст, называется языком гипертекстовой разметки, по-английски - hypertext markup language, или сокращённо HTML. Его придумал в 1989 году знаменитый британский учёный Тим Бернерс-Ли, после чего до создания глобальной сети оставались считаные месяцы.
Тим Бернерс-Ли [род. в 1955)
14
Модуль 1. Создание электронных изданий
Однако просто языка HTML было недостаточно: сразу после его изобретения возникла необходимость в программах, которые смогли бы «читать» web-страницы, то есть понимать гипертекст. Такие программы получили название брсаузеров. Первым браузером был Mosaic, разработанный тогда же, когда и гипертекст, в начале 90-х годов XX века; в наши дни наибольшее распространение получили такие браузеры, как Microsoft Internet Explorer, Mozilla Firefox, Opera, Google Chrome и другие (рис. 1.4).
О
Microsoft Internet Explorer
Mozilla Firefox
Opera
Google Chrome
Рис. 1.4. Эмблемы популярных браузеров
Браузер Microsoft Internet Explorer входит в состав операционной системы Windows, остальные можно скачать и установить на компьютер бесплатно.
а Одно из важных требований, предъявляемых к современным сайтам: они должны отображаться одинаково во всех распространённых браузерах. В противном случае, например, одни посетители увидят подпись к рисунку, а другие - нет, что может вызвать некоторые недоразумения. Это требование называется кроссбраузерностью.
Попробуем создать свою собственную web-страницу, пусть не сразу такую же большую, сложную и красочную, как у интернет-магазина.
Логика языка HTML достаточно проста. Сначала указывается, какой фрагмент web-страницы мы описываем, например абзац текста, заголовок, иллюстрацию, таблицу. Затем приводится собственно сам этот фрагмент -текст, рисунок, ссылка и пр. А в конце необходимо отметить, что описание фрагмента завершено и можно переходить к следующему фрагменту. Таким образом, элемент html-документа может выглядеть так:
<р>Александр Сергеевич Пушкинр>
Здесь буква «р», заключённая в угловые скобки, показывает, что далее последует текст обычного абзаца, а буква «р» со слэшем - что текст абзаца закончен. Web-страница с таким элементом будет отображаться в окне браузера так (рис. 1.5).
§ 1. Создаём первую web-страницу
15
® Untitled Document - Windows Internet Explorer
I d C:\Samples\page.html
«Избранное I Файл Правка Вид _збранное С_рвис Справка
Рис. 1.5. Простейшая web-страница
Буквы или слова, заключённые в угловые скобки, в том числе
и
, - это своеобразные команды языка HTML; они называются т(эгами. Тег, предшествующий описанию фрагмента web-страницы, называется открывающим, а тег, завершающий это описание, - закрывающим: его сопровождает слэш. В большинстве своём теги являются парными, то есть открывающими и закрывающими, однако встречаются и одиночные теги, например
, отвечающий за вставку пустой строки.
Вернёмся к нашей web-странице. Она, как и любой html-документ, помимо тегов, описывающих фрагменты гипертекста, содержит также некоторый объём служебной информации. Во-первых, чтобы браузер мог отличить web-страницу от обычного текстового документа, в самом начале её кода открывается, а в самом конце закрывается тег . Далее всё, что находится внутри этого тега, делится на два больших раздела: head («заголовок») и body («тело») (рис. 1.6).
Рис. 1.6. Структура html-документа
16
Модуль 1. Создание электронных изданий
В разделе head указывается всё, что не будет отображаться непосредственно в окне браузера: название страницы, ключевые слова, по которым её сможет найти поисковая система (например, Яндекс или Google], кодировка (набор символов], а также некоторые другие данные. Раздел body, напротив, содержит то, что пользователь увидит в браузере, - текст, графику, ссылки.
Итак, ниже приведён html-код web-страницы о Пушкине. Единственный непарный тег здесь -
; в нём как раз и устанавливается кириллическая кодировка (windows-1 251):
Untitled Document
Александр Сергеевич ПYшкин
Тег
отвечает за название web-страницы, которое отображается в заголовке окна браузера. На рис. 1.5 мы видим именно эту фразу -«Untitled Document». Поменяем её, например, так:
Страница о Пушкине
и заголовок окна браузера станет другим (рис. 1.7).
■g Страница о Пушкине - Windows Internet Explorer
ОО А® C:\Samples\page.html
'Избранном Файл _равка Вид Избранное С_рвис Сп_авка
Страница о Пушкине
Александр Сергеевич Пушкин
Рис. 1.7. Web-страница с новым названием
§ 1. Создаём первую web-страницу
17
На теге раздел head заканчивается; за ним следует раздел body. Пока в нём только один элемент - абзац
<р>Александр Сергеевич Пушкинр>
Чтобы продолжить оформление страницы, рассмотрим ещё четыре часто употребляемых тега, как парных, так и одиночных:
- заголовок;
- пустая строка;
- изображение; внутри кавычек указывается название соответствующего файла;
- ссылка; внутри кавычек указывается адрес, по которому нужно перейти при нажатии на ссылку.
• Как вы считаете, почему тег заголовка обозначается именно h1? Для чего нужна в обозначении единица? Бывают ли теги h2, h3 и т.д.?
Стоит обратить внимание на то, что даже если в тексте абзаца использовать более одного пробела между словами или намеренно поместить два идущих подряд слова на разных строках кода, это никак не отразится на отображении страницы в браузере. Для переноса текста на новую строку в пределах одного абзаца необходимо использовать упомянутый выше тег
, а для добавления второго и последующих пробелов между словами - комбинацию (от англ. non-breakable space - неразрывный пробел). Так, следующий фрагмент html-кода приведёт к появлению в окне браузера текста, показанного на рис. 1.8.
it Александр Сергеевич Пушкин - Windows Internet Explor
) • ' 5# C:\Samples\Пушкин\page.html
Избранное Файл Правка Вид Избранное Сервис Справка
Александр Сергеевич Пушкин родился в 1799 году, Александр Сергеевич Пушкин родился в 1799 году
^ Ничего не изменилось
Александр Сергеевич Пушкин родился в 1799 году
Александр Сергеевич Пушкин родился в 1799 году
\
Добавились пробелы
Часть абзаца перенесена на новую строку
Рис. 1.8. Форматирование абзацев
• ^100%
18
Модуль 1. Создание электронных изданий
<р>Александр Сергеевич Пушкин родился в 1799 годур>
<р>Александр
Сергеевич Пушкин родился в 1799 году Александр Сергеевич Пушкин родился в 1799 году
Александр Сергеевич Пушкин <Ьг>родился в 1799 году
ОБОБЩЕНИЕ НОВЫХ ЗНАНИЙ
Существует множество разновидностей сайтов. Некоторые из них состоят из нескольких web-страниц (например, сайты-визитки или промосайты), а некоторые - из сотен, тысяч и даже сотен тысяч. В основе любых web-страниц лежит гипертекст, закодированный на языке HTML. Структурными единицами этого языка являются теги.
ПРИМЕНЕНИЕ ЗНАНИЙ
1. Создайте новую папку в том месте, где укажет учитель; имя для неё придумайте по своему усмотрению (например, «Моя первая страница»).
2. Откройте папку paragraph_1, скопируйте оба находящихся там файла (robot-small.jpg и robot-big.jpg) в созданную вами папку.
3. Откройте стандартное приложение Блокнот.
4. Создайте заготовку будущего html-документа:
Безымянный - Блокнот
Файл Правка Формат Вид Справка
§ 1. Создаём первую web-страницу
19
5. Дайте документу название «Роботы» (тег
). С помощью тега создайте заголовок «Какими бывают роботы»:
Безымянный - Блокнот
Файл Правка Формат Вид Справка
роботы
Какими бывают роботы
6. Далее создайте обычный абзац с текстом. Напишите в нём: «Роботы бывают такими:». Затем вставьте пустую строку, а за ней - картинку с первым роботом (файл robot-small.jpg) с помощью тега :
После этого завершите абзац (тег ).
7. Наконец, создайте новый абзац, а в нём - фразу «Или такими», которая станет гиперссылкой на вторую картинку (файл robot-big.jpg):
<а href="robot-big.jpg">Или такимиа>
Не забудьте завершить абзац. Должно получиться так:
1 Безымянный - Блокнот
Файл Правка Формат Вид Справка
роботы
Какими бывают роботы
Роботы бывают такими:
или такими
___________________________________________________________________
8. Сохраните этот html-документ в созданной вами папке, где уже лежат обе картинки. При этом в поле Тип файла вместо Текстовые документы [*.txt] необходимо выбрать Все файлы, а после имени (оно может быть любым, но обязательно набранным латинскими буквами или цифрами; выберем, например, имя robots) - написать расширение html:
20
Модуль 1. Создание электронных изданий
" Сохранить как
» Моя первая страница
*1^1 Пеии: u4(0iim
Упорядочите Новая папка
Избранное А Загрузки ..Недавние мест ■ Рабочий стол ;
^ Библиотеки Щ Видео • Документы to Изображения J* Музыка
ЦДомашняя группа ;• Компьютер
Имя файла: robots.html Тип файла: [Все файлы
i robot-small.jpg ^ robot-big.jpg
• Скрыть папки
Кодировка^ ANSI
j Сохранит^ I Отмена""!
9. Посмотрите: в созданной вами папке появился новый html-файл. Откройте его и проверьте, всё ли отображается правильно. Работает ли гиперссылка?
После сохранения документа его можно закрыть. При необходимости вы всегда можете продолжить его редактирование. Для этого необходимо выделить файл: с помощью правой кнопки мыши вызвать контекстное меню, выбрать пункт Открыть с помощью и далее - Блокнот.
§ 2. Создание web-страниц в редакторе Nvu 21
§ 2. Создание web-страниц в редакторе Nvu
ПОСТАНОВКА ПРОБЛЕМЫ УРОКА
Специалист в области web-разработок: Количество тегов языка HTML измеряется сотнями. Некоторые из них определяют тип фрагмента web-страницы (абзац, ссылка, изображение), другие позволяют изменять цвет, размер, начертание и другие параметры текста и т.д.
Я знаю почти все теги!
Начинающий разработчик: Неужели, чтобы оформлять web-страницы, нужно помнить все эти теги и каждый раз набирать их вручную в Блокноте?
Как вы считаете, какие трудности могут возникнуть у разработчика web-страниц, если он будет пользоваться только программой Блокнот? Сформулируйте проблему урока. Сравните свой вариант с авторским (с. 284 учебника).
НЕОБХОДИМЫЕ БАЗОВЫЕ ЗНАНИЯ
Что такое теги? Какие теги вы уже знаете? (§ 1)
Из каких двух блоков состоит html-документ? (§ 1)
РЕШЕНИЕ ПРОБЛЕМЫ
Конечно же, создавать web-страницы с помощью Блокнота, набирая html-код вручную, не очень эффективно. Существуют программы, которые помогают генерировать теги автоматически, а разработчику остаётся только выбирать, что разместить в той или иной области страницы: заголовок, абзац, картинку, таблицу и пр. Такие программы называются визуальными HTML-редакторами, и к их числу относится бесплатный редактор Nvu.
Иногда визуальные редакторы называют также WYSIWYG-редакторами, рЛ от первых букв английской фразы What You See Is What You Get - «Что ты [v J видишь, TO ТЫ и получишь». Произносится эта аббревиатура так: визивиг. WYSIWYG-редакторы позволяют уже на стадии разработки web-страницы видеть, как она будет отображаться в браузере. Создавая страницу в Блокноте, мы этой возможности не имели.
Запустив редактор Nvu, мы увидим большую белую область - это наша web-страница, пока пустая. Под этой областью, в самом низу окна имеется панель режимов редактирования, содержащая четыре вкладки (рис. 1.9):
22 Модуль 1. Создание электронных изданий
^ без_имени - Nvu ,
Файл _равка _ид Вставка Формат ^Таблица _нструменты Справка
' ^ И Ч O' ‘sii — “ Г
Создать Открыть Сохранить Опубликовать Просмотр Якорь Ссылка Изображение 1абЯица Формы
I (без_имени)
1
с
Заголовок 1 v:^J' ® ‘^)а'А*1В/ | Е Ш 3 Д jAi|
(нет класса^] Пропорциональный!^
Панель компоновки
Панель форматирования Пока пустая web-страница
Режимы редактирования web-страницы
/ ^ ^ ^
Обычны^!§НТМЬ-тег^ЗКо^ Предварительный просмотр
Рис. 1.9. Окно редактора Nvu
Обычный: отображаются фрагменты web-страницы с подсказками редактора Nvu.
HTML-теги: то же, что и Обычный, но рядом с каждым элементом страницы появляется флажок соответствующего тега.
Код: отображается непосредственно html-код, как в Блокноте, только с удобным цветовым оформлением тегов.
Предварительный просмотр: web-страница отображается так, как она будет выглядеть в браузере.
имени - Nvu
Файл Правка Вид Вставка Формат Таблица Инструменты Справка
■ , ^ Н И ч -6- 1й - .
Создать Открыть Сохранить Опубликовать Просмотр Якорь Ссылка Изображение Таблица Формы
Заголовок 1
311 -^|д’А*1в / iiji=iE|5iaB|3is
(нет класса^] [Пропорциональный![■=-=
С
Рис. 1.10. Режим html-тегов
§ 2. Создание web-страниц в редакторе Nvu 23
Например, если открыть созданную нами ранее страницу о роботах в Nvu и перейти в режим html-тегов, мы увидим то, что изображено на рис. 1.10.
• Как вы думаете, в каких случаях удобен каждый из четырёх режимов редактирования? Представьте, что вам попалась уже готовая web-страница, содержащая ошибку в html-коде. Каким режимом редактирования вы бы воспользовались, чтобы обнаружить эту ошибку?
Над областью web-страницы расположено ещё несколько панелей, одна из которых - панель компоновки. Именно она позволяет web-разработчику добавлять рисунки, таблицы и гиперссылки, даже если он вообще не знаком с языком HTML и его тегами. Панель форматирования позволяет работать с оформлением текста: менять его цвет, начертание, размер, добавлять отступы и т.п.
Язык HTML обладает встроенными средствами оформления текста, однако их ассортимент очень невелик и не совсем удобен. Поэтому уже с конца 90-х годов XX века для этой цели используется преимущественно язык CSS (от англ. Cascading Style Sheets - каскадные таблицы стилей). «Привязать» стиль оформления к тому или иному тегу можно несколькими способами. Один из них - перечислить необходимые характеристики в атрибуте style непосредственно в открывающем теге. Например, если в редакторе Nvu создать абзац
<р>Александр Сергеевич Пушкинр>
а затем выделить его и на панели форматирования выбрать полужирное начертание и изменить цвет текста на зелёный, то в режиме Обычный мы увидим непосредственно видоизменённый абзац (рис. 1.11)
Поменяли цвет Поменяли начертание
д| без_имени - Nvu
Файл Правка Вид В_тавка (Формат Таблица _нструменты Справ1
Создать Открыть Сохранить Опубликовать Просмотр ^|Якорь Ссылка Изображение
Заголовок 1
A'A^IB / U'|E:E Е111
(нет класса)
Пропорциональный
(без_имени)
I Александр Сергеевич Пушкин
Рис. 1.11. Форматирование абзаца в редакторе Nvu
24
Модуль 1. Создание электронных изданий
а в html-коде появятся следующие изменения:
<р style="color: rgb(0, 153, 0); font-weight:
Ьо!Ь;">Александр Сергеевич
Пушкин
Таким образом, придать нужное оформление любому тегу можно с помощью атрибута style. Схематично это выглядит так:
<тег style="характеристика1: значение; характеристи-ка2: значение; характеристика3: значение; ... ">Содер-жимое тегатег>
Со многими характеристиками, которые используются при создании стилей для web-страниц, а также с другими способами привязки стилей к тегам можно познакомиться в § 6-10. Пока же мы не будем углубляться в эти вопросы, довольствуясь тем, что автоматически генерирует панель форматирования Nvu.
ОБОБЩЕНИЕ НОВЫХ ЗНАНИЙ
Для создания web-страниц можно использовать визуальные HTML-редакторы, такие, как Nvu. Они позволяют просматривать как html-код, так и непосредственно внешний вид редактируемой web-страницы. Для оформления элементов web-страниц используются стили, описываемые языком CSS. Стиль можно привязать к конкретному тегу с помощью атрибута style.
ПРИМЕНЕНИЕ ЗНАНИЙ
1. Создайте новую папку в том месте, где укажет учитель; название для неё придумайте по своему усмотрению.
2. Откройте папку paragraph_2_3, скопируйте все находящиеся там файлы в созданную вами папку.
3. Откройте файл pushkin.html в редакторе Nvu.
4. Сделайте первую строку («Александр Сергеевич Пушкин») заголовком вместо абзаца.
5. Поменяйте цвет этого заголовка с чёрного на любой другой.
6. Вместо строки «[рисунок юного Пушкина]» вставьте рисунок pushkin-young.jpg. Для этого удалите строку, затем воспользуйтесь кнопкой Изображение на панели компоновки. В появившемся окне в поле Альтернативный текст напишите «Юный Пушкин». Альтернативный текст позволяет пользова-
§ 2. Создание web-страниц в редакторе Nvu 25
телям получить представление о том, что изображено на рисунке, даже если тот по каким-то причинам не загрузился (например, в случае очень медленного или дорогого соединения с Интернетом, когда в браузере намеренно отключают загрузку изображений). В принципе, вполне можно обойтись и без альтернативного текста.
7. Подпись к этому рисунку («Саша Пушкин в детские годы») оформите или
другим цветом, или шрифтом меньшего размера (кнопка на панели форматирования).
8. Проделайте то же самое с гравюрой с изображением Царскосельского лицея: удалите текст в квадратных скобках, вставьте рисунок lyceum-1 .jpg, оформите подрисуночную подпись по своему усмотрению.
9. Последнюю строку («Рисунок Царскосельского лицея, сделанный Пушкиным-лицеистом») сделайте ссылкой на файл lyceum-2.jpg. Для этого выделите её (полностью или частично - например, только слова «Рисунок Царскосельского лицея»), затем воспользуйтесь кнопкой Ссылка на панели компоновки.
10. Сохраните web-страницу. Посмотрите, как она выглядит в различных вкладках панели режимов редактирования. Как изменился код? Появились ли css-стили в качестве атрибутов некоторых тегов? Перейдите из редактора Nvu в созданную вами папку и откройте web-страницу с помощью браузера. Всё ли отображается корректно?
ОПЕРАЦИИ
Смена формата абзаца
1. Поместить курсор в любую часть абзаца.
2. В самом низу окна Nvu найти строку состояния. Она отображает «путь» к тому тегу, который соответствует местонахождению курсора, начиная с тега . Нажать на тег
, абзац выделится.
3. Поменять на панели форматирования пункт Абзац на пункт Заголовок 1.
/iMD
pQfiN^HN^jHTML-Ter^gKo^ Предварительный просмотр
Строка состояния
26
Модуль 1. Создание электронных изданий
Александр Сергеевич Пушкин[А!е:/.../ри$Ьк1п.Ь1т!] - Nvu
Файл Правка Вид Вставка (Формат Таблица Инструменты Справка
^ И
Открыть Сохранить Опубликовать Просмотр
Абзац_________
I Обычный текст _J Абзац
в|вавдлаздв1
Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Адрес
Заданный формат Генерируемое содержимое (div)
Смиренная, одетая убого,
Но видом величавая жена
Над школою надзор хранила строго
Изменение цвета
1. Выделить нужный фрагмент текста.
2. Выбрать указатель цвета на панели форматирования.
^ Александр Сергеевич Пушкин[fi!e:/.../pushkiп.htm!] - Nvu
файл Правка Вид Вставка (формат [Таблица Инструменты Справка
ь
♦ »
с
Ь "f «
Создать Открыть Сохранить Опубликовать Просмотр Якорь Ссылка Изображение
I Заголовок 1 Гу| j И" I д" Д'’I В / U ||;Е:Е 11 5 3 В
[ (нет класса) [▼[| 1 Пропорциональный В1 «йгг! I!!
I в Александр Сергеевич Пушкин /
I
р» I
rv го 1 Александр Сергеевич Пушкин |
Добавление изображения
1. Нажать кнопку Изображение №об“е„„е на панели компоновки.
2. В появившемся окне нажать кнопку Выбрать файл, указать нужный рисунок, затем добавить альтернативный текст или отказаться от него.
§ 2. Создание web-страниц в редакторе Nvu 27
Свойства изображения
[ддре^ Размер^ Внешний вид | Ссылка !
Адрес изображения:
[pushkin-young.jpg
Г~1 Относительный URL
Всплывающая подсказка: в Альтернативный текст:
С) Не использовать альтернативный текст
Вы_рать файл...
Предварительный просмотр изображения
Исходный размер: Ширина: 238
Высота: 300
I Дополнительно.."! [ ОК I [ Отмена j I Справка ]
Добавление ссылки р
1. Нажать кнопку Ссылка Ссылка на панели компоновки.
2. В появившемся окне нажать кнопку Выбрать файл, а затем в поле Тип файлов указать Изображения или Все файлы. Далее выбрать требуемый рисунок.
28
Модуль 1. Создание электронных изданий
§ 3. Оформление web-страницы с помощью таблиц
ПОСТАНОВКА ПРОБЛЕМЫ УРОКА
Откройте web-страницу об А.С. Пушкине, созданную при изучении § 2. Посмотрите на расположение текста и картинок, оцените количество «пустого места» на странице.
• Как вы считаете, можно ли считать подобное размещение данных рациональным? Сформулируйте тему урока в виде вопроса. Сравните свой вариант с авторским (с. 284 учебника).
НЕОБХОДИМЫЕ БАЗОВЫЕ ЗНАНИЯ
Как создавать новые web-страницы и редактировать существующие в программе Nvu? (§ 2)
РЕШЕНИЕ ПРОБЛЕМЫ
На нашей web-странице со стихами и картинками действительно очень много свободного места: она неоправданно «вытянута» по вертикали, а справа образуется широкая «белая полоса». Для того чтобы оптимизировать страницу, необходимо научиться располагать элементы не только друг за другом, но и рядом, параллельно: в две-три колонки. Например, страница могла бы выглядеть так, как показано на рис. 1.1 2.
На помощь приходят таблицы - очень удобные и простые средства языка HTML. Идея заключается в следующем: необходимо представить web-страницу в виде нескольких таблиц с невидимыми границами так, чтобы каждый блок, будь то фрагмент текста, изображение, пиктограмма и т.д., располагался в какой-либо из ячеек таблицы.
Таблица имеет следующий формат: сначала открывается тег
, затем тег , отвечающий за строку таблицы, а затем - тег , отвечающий за ячейку в данной строке. Как только ячейка описана, тег | закрывается и открывается заново для описания второй ячейки. После того как все ячейки на текущей строке описаны, закрывается тег |
, затем он же открывается вновь для описания следующей строки. Когда описаны все строки, закрывается тег (рис. 1.13).
§ 3. Оформление web-страницы с помощью таблиц
29
Л Александр Сергеевич Пушкин - Windows Internet Explorer
C:\Samples\Пушкин\pushkm.html
^Александр Серге
Стихотворение о лицейских годах
Александр Сергеевич Пушкин
В начале жизни школу помню я,
Та^ нас, детей беспечн^гх, было много; Неровная и резвая семья.
Смиренная, одетая у^ого,
Но видом величавая жена
Над ш:колою надзор хранила строго.
Тол:пою нашею окружена,
Прнятн^гм, сладким голосом, бывало,
С младенцами беседует она.
Ее чела я помню покрывало И очи светл^1е, как небеса.
Но я вникав в ее бесед^1 ма^о.
Саша Пуш:кнн в детские годы
В 1811 году Пушкин становится одним из первы:х тридцати воспитанников знаменитого Царскосельского Императорского лицея. Спустя годы поэт написав в своем стихотворении “19 октября” следующие строки:
Друзья мои,прекрасеннаш соки!
Он как душа неразделим и вечен -Неколебим, свободен и беспечен Срастался он под сенью дружн^гх муз.
Куда бы нас ни бросила судьбина,
И счастие куда б ни повело,
Все те же м^1: на^ цел^гй мир чубина;
Отечество на^ Царское село.
РисунокЦарскосельскоголицея, сделанн^гй Пуш:кин^1м - лицеистом
Царскосельский лицей. Гравюра Ж. Мойера
Рис. 1.12. Web-страница с более продуманным расположением элементов
Рис. 1.13. Структура таблицы в языке HTML
Избранное С
Стихотворен о школе
• ^100%
30
Модуль 1. Создание электронных изданий
Напишите html-код следующей таблицы:
А Б
В Г
Д Е
Несколько идущих подряд строк можно объединять в блоки; им соответствует тег . Это целесообразно делать, если, например, первая половина таблицы имеет одно оформление, а вторая - другое (рис. 1.14).
; разные блоки со строками
Рис. 1.14. Структура таблицы с разбиением на блоки
Если же оформление всех строк одинаково, то блоки можно и не создавать, однако редактор Nvu по умолчанию всегда создаёт один блок при генерировании новых таблиц.
Ширину таблицы можно указывать или в пикселях, или в процентах от размера той области web-страницы, где она расположена. В первом случае ширина таблицы будет фиксированной, во втором - будет зависеть от ширины окна браузера (рис. 1.1 5).
700 пикселей 100%
окно браузера окно браузера
Рис. 1.15. Способы задания ширины таблицы
§ 3. Оформление web-страницы с помощью таблиц
31
Ширину столбцов таблицы можно также указывать или в пикселях, или в процентах от ширины всей таблицы. Причём, если ширину не указать вообще, браузер сам назначит её, в зависимости от содержимого ячеек: те ячейки, где много текста или большие изображения, будут широкими, другие -узкими. Можно указать ширину всех столбцов, кроме одного (любого), тогда браузер также самостоятельно вычислит её. Например, если три столбца из четырёх имеют ширину 20%, то четвёртый получит значение 100% - 3 • 20% = = 40% (рис. 1.16).
Рис. 1.16. Браузер автоматически рассчитывает недостающую ширину
Высоту таблицы обычно не указывают: она складывается из высот отдельных строк. Высота строки, в свою очередь, определяется содержимым (объёмом текста, размером картинок и пр.) или же может быть задана в пикселях.
Ячейки таблицы можно объединять, но иногда это приводит к тому, что таблица, особенно большая, начинает «разъезжаться», то есть выверенные значения ширины некоторых ячеек самопроизвольно нарушаются. По возможности лучше избегать объединения ячеек.
Итак, представим оптимизированную структуру нашей web-страницы (см. рис. 1.12) в форме таблиц. Сделать это можно разными способами, один из них показан на рис. 1.17.
Ширину всей таблицы целесообразно назначить равной 100%. Первый столбец, в котором содержатся только пояснения к стихотворениям, должен быть небольшим - около 15%. Ширина второго столбца определится браузером автоматически (85%), её можно не задавать. В правых ячейках второй и четвёртой строк нужно создать ещё по одной таблице (шириной также 100%), чтобы разместить на одном уровне стихотворения и иллюстрации (рис. 1.18).
В этих таблицах для первого столбца можно отвести примерно 35-40% ширины.
Стоит также отметить, что задание ширины таблиц с помощью процентов позволяет web-страницам как бы «подстраиваться» под ширину окна браузера: такие страницы часто называют «резиновыми». Их немного сложнее разрабатывать, поскольку внешний вид «резинового» сайта должен быть привлекательным как на маленьких экранах нетбуков, так и на больших ши-
32
Модуль 1. Создание электронных изданий
в Александр Сергеевич Пушкин - Windows Internet Explorer
, I Э C:\Samples\Пушкин\pushkln.html
^ Александр Сергеевич Пушкин
I • Страница Безопасности Сервис*
AieKcaH4p Сергеевич Пушкин ПерВаЯ СТрОКа
В начале жизни школу помню я,
Там нас, детей беспечн^гх, было много; Неровная и резвая семья.
Смиренная, одетая у^ого,
Но видом величавая жена
Над школою надзор хранила строго.
Толпою нашею окружена,
Приятн^1м, сладким голосом, бы:ва^о,
С младенцами беседует она.
Ее чела я помню покры:вало И очи светл^1е, как небеса.
Но я вникал в ее бесед^1 мало.
Вторая строка
Саша Пушкин в детские год^1
В 1811 году Пушкин становится одним из первы:х тридцати воспитанников знаменитого Царскосельского Императорского лицея. Спустя годы поэт написал в своем стихотворении “19 октября” следующие строки:
Друзья мои, прекрасен наш союз!
Он как душа неразделим и вечен -Неколебим, свободен и беспечен Срастайся он под сенью дру^и^гх муз. Куда бы нас ни бросила судьбина,
И счастие куда б ни повело,
Все те же мы: на^ цел^гй мир чубина; Отечество нам Царское село. РисунокЦарскосельскоголицея, сделанн^гй Пушкин:^1м - лицеистом
Царскосельский лицей. Гравюра Ж. Мойер:
Первый столбец Второй столбец
Рис. 1.17. Разбиение web-страницы на ячейки таблицы [начало]
9 Александр Сергеевич Пушкин - Windows Internet Explor
_ 'V C:\Samples\Пушкин\pushkln.html
, Избранное Файл Правка Вид Избранное Сервис Справка ^Александр Сергеевич Пушкин
• Страница Безопасности Сер
Стихотворение о лицейских годах
Александр Сергеевич Пушкин
В начале жизни школу помню я,
Та^ нас, детей беспечн^гх, было много; Неровная и резвая семья.
Смиренная, одетая у^ого,
Но видом величавая жена
Над школою надзор хранила строго.
Толпою нашею окружена,
Приятн^гм, сладким голосом, бы:вало,
С младенцами беседует она.
Ее чела я помню покрывало И очи светлые, как небеса.
Но я вникав в ее беседы ма^о.
Первый столбец
В 1811 году Пушкин становится одним из первы:х тридцати воспитанииков знаменитого Царскосельского Императорского лицея. Спустя год^1 поэт написав в своем стихотворении “19 октября” следующие строки:
Друзья мои, прекрасен наш союз! Он как душа неразделим и вечен -Неколебим, свободен и беспечен Срастайся он под сенью дру^н^гх муз. Куда бы нас ни бросила судьбина, И счастие куда б ни повело, Все те же мы: нам цел^1й мир чубина; Отечество нам Царское село. РисунокЦарскосельскоголицея. сдeлани^lй Пушкин^гм - лицеистом
Первый столбец Царскосельский лицей. Гравюра Ж. Мойера Второй столбец
Рис. 1.18. Разбиение web-страницы на ячейки таблицы [продолжение]
Стихотворен о школе
§ 3. Оформление web-страницы с помощью таблиц
33
рокоэкранных мониторах. Но зато всё свободное место используется максимально эффективно. Страницы с фиксированной шириной таблиц разрабатывать легче: они не меняются в зависимости от разрешения экрана, но, как правило, содержат много пустого места. В последнее время всё чаще предпочтение отдаётся «резиновым» страницам.
ОБОБЩЕНИЕ НОВЫХ ЗНАНИЙ
Для более рационального размещения элементов на web-страницах можно использовать таблицы. В зависимости от того, как задаётся ширина таблиц, страницы делятся на два вида: «резиновые» (ширина в процентах) и фиксированные (ширина в пикселях). В «резиновых» страницах свободное место используется эффективнее.
ПРИМЕНЕНИЕ ЗНАНИЙ
1. Откройте в редакторе Nvu файл pushkin.html, с которым вы работали на прошлом занятии.
2. Создайте новую web-страницу. Сразу сохраните эту страницу в той же папке, где расположен файл pushkin.html, под новым именем, например pushkin-new.html (в названии допустимы только латинские буквы, цифры и некоторые знаки - дефис, подчёркивание, скобки и др.). При сохранении Nvu предложит ввести заголовок, то есть содержимое тега :
Придумайте заголовок и введите его.
3. Создайте на новой web-странице таблицу шириной 100% с четырьмя строками и двумя столбцами в соответствии с рис. 1.17.
4. Двойной щелчок мышью в верхней левой ячейке вызовет окно со свойствами таблицы. Укажите в нём ширину ячейки (15%). Ширина этой верхней ячейки распространится на весь столбец. Теперь перейдите ко второй ячейке первого столбца, последовательно нажимая кнопку Следующая. Установите в ней вертикальное выравнивание содержимого
34
Модуль 1. Создание электронных изданий
по верхнему краю. То же самое проделайте с нижней (четвёртой) ячейкой первого столбца.
5. Создайте две пояснительные надписи в левом столбце, оформите их с помощью панели форматирования. Перейдите к странице pushkin.html (вкладка чуть ниже панели форматирования), выделите заголовок «Александр Сергеевич Пушкин», скопируйте его (комбинация клавиш Ctrl+C), вернитесь к новой странице, вставьте заголовок в первую ячейку второго столбца (Ctrl+V). Проделайте то же самое с абзацем «В 1811 году Пушкин становится одним из первых...» - вставьте его в третью ячейку второго столбца. Должно получиться примерно так:
айл Правка Вид Вставка
сД.,.- о,:::,.с.£Ни,.О
I Абзац
6^ П ' С*' и " Тб
Н " ' а’а* в| U 11= яаш «•!
31»«м fii
лексаН1:1С1:111111||1В11а |(без_име и) 1
Ю55рх 1
Александр Сергеевич Пушкин
Стихотворение о школе
В 1811 году Пушкин становится одним из первых тридцати воспитанников знаменитого ' ' Царскосельского Императорского лицея. Спустя годы поэт написал в своем стихотворении “19 октября” следующие строки:
Стихотворение о лицейских друзьях
6. Создайте две новые таблицы в соответствии с рис. 1.1 8.
7. Установите в каждой из ячеек новых таблиц вертикальное выравнивание по верхнему краю. Перенесите со страницы pushkin.html все оставшиеся данные.
8. Сохраните web-страницу и откройте её в браузере. Оцените результат.
9. Может оказаться полезным изменить расстояние между ячейками таблицы, если фрагменты текста из соседних ячеек будут прилегать друг к другу слишком близко.
Орф
§ 3. Оформление web-страницы с помощью таблиц
35
ОПЕРАЦИИ
Создание новой страницы
. ▼
Нажать кнопку Создать Создать на панели компоновки.
Создание таблицы “
1. Нажать кнопку Таблица Таблица на панели компоновки.
2. В появившемся окне выбрать вкладку Точная и указать необходимые параметры таблицы. В поле Рамка должно стоять значение 0, иначе у таблицы появятся видимые границы.
Вставка таблицы
Iwawl
|Проста^^Ъчн^^Ячейка|^
4
Размер— _трок: С;голбцов: 2
Ширина: JQQ |1% от размера окна
ополнительно...
Создание новой таблицы внутри ячейки существующей таблицы
1. Если курсор уже стоит в ячейке существующей таблицы, то кнопка Таблица на панели компоновки будет вызывать окно свойств непосредственно данной таблицы. Поэтому для создания новой таблицы сначала надо вызвать щелчком правой кнопкой мыши контекстное меню.
2. В контекстном меню выбрать пункт Вставить таблицу, затем - пункт Таблица.
Ш’амка: 0
OK
Отмена
36
Модуль 1. Создание электронных изданий
Изменение ширины столбца
1. Выполнить двойной щелчок мышью внутри любой ячейки.
2. Указать значение ширины.
3. Нажать кнопку Применить.
4. Чтобы перейти к следующей ячейке, нажать кнопку Следующая.
Свойства таблицы
Цаблиц^^
.• Выделение Ячейки
Будут применены текущие изменения Предыдущая ' ^Следующая перед преобразованием выделения
Высота: J [пикселов
О Ширина: 1^ 1% от размера таблицы
Выравнивание содержимого-------
С Вертикальное: Посередине Горизонтальное: Влево
Q Стиль ячейки: Обычный L-Разбивка текста на строки: Разбить на строки ^
0
0
(Будет виден фон таблицы)
Установите флажки, чтобы определить, какие свойства будут применены ко всем выбранным ячейкам
[ Дополнительно^
OK I |^Применит^^ Отмена I Справка j
Изменение вертикального выравнивания
1. Выполнить двойной щелчок мышью внутри любой ячейки.
2. Указать значение выравнивания.
3. Нажать кнопку Применить.
Свойства таблицы
|ТаблицИ Ячейки]
Выделение
1~Ячейки ^ It.I Будут применены текущие изменения
I «Предыдуща^_»ССледующая] перед преобразованием выделения
I Высота: Ширина:
пикселов
Выравнивание содержимого ij[; Вертикальное:
*3 Горизонтальное: Влево
С Стиль ячейки: Обычный ^Разбивка текста на строки^Разбить на строки
t Цвет фона: □ (Будет виден фон таблицы)
Установите флажки, чтобы определить, какие свойства будут применены ко всем выбранным ячейкам
Дополнительно
OK I ^Применит^^ Отмена j Справка j
Размер
Цвет фона:
Размер
пикселов
§ 3. Оформление web-страницы с помощью таблиц
37
Изменение полей ячеек
1. Вызвать окно со свойствами таблицы - выполнить двойной щелчок мышью внутри любой ячейки.
2. Выбрать вкладку Таблица.
3. Установить нужные значения полей.
Свойства таблицы
I Таблиц^ ЯчейкИ
Строки: 4 С;голбцы: 2
Высота: Ширна: 100
' % от размера окна |^] % от размера окна
Обрамления и поля-----
_Рамка^ . 0
Поля: 2
Пол^Я внутри ячейки: 2
пикселов
пикселов между ячейками
пикселов между рамкой ячейки и ее содержимым
Выравнивание таблицы: Влево____Шаголовок: ^ Нет
лз
Цвет фона: □ (будет виден фон страницы)
Дополнительно
OK I ["применит^ Отмена J ^Ыправк^
Размер
38
Модуль 1. Создание электронных изданий
§ 4. Иллюстрирование web-страниц
ПОСТАНОВКА ПРОБЛЕМЫ УРОКА
Миша: В отличие от печатных изданий, web-страницы не требуют полиграфических затрат: дорогих красок, бумаги и пр. Поэтому чем больше на странице цветных иллюстраций, тем лучше.
Ася: Все картинки на сайтах должны быть большими — ведь размеры web-страниц не ограничены; зачем же экономить место?
Данила: В принципе, даже текст можно помещать на web-страницы в форме картинок, например!
• Согласны ли вы с утверждениями ребят? Что в них вам показалось разумным, а что - не очень? Как бы вы сформулировали основной вопрос урока? Сравните свой вариант с авторским (с. 284 учебника).
НЕОБХОДИМЫЕ БАЗОВЫЕ ЗНАНИЯ
Что такое разрешение экрана? Какие разрешения имеют современные экраны (у стационарных компьютеров, ноутбуков, нетбуков)? (Учебник для
7-го класса, книга 1, модуль «Создание мультимедийной продукции»; книга 2, модуль «Основы дизайна и печати изображений».)
Какие программы позволяют редактировать растровые изображения (в частности, изменять их размер)? (Учебник для 7-го класса, книга 1, модуль «Создание мультимедийной продукции»; книга 2, модуль «Основы дизайна и печати изображений».)
Что такое текстура? (Учебник для 7-го класса, книга 1, модуль «Создание мультимедийной продукции».)
§ 4. Иллюстрирование web-страниц 39
РЕШЕНИЕ ПРОБЛЕМЫ
В том, что правильно подобранные цветные иллюстрации украшают web-страницу, сомневаться не приходится. Действительно, посмотрим на любой современный сайт: его дизайн прежде всего запоминается по ярким графическим элементам. Так выглядит главная страница сайта Стенфордского университета (рис. 1.1 9).
I^Stanfod University - Windows Internet Explorer .
0,_J. ht,p//www/s,aT7ord/edy/ • V-'' "" ~
^ Stanfod University ^ • Стозниц^ Безопасности Сеовис. ф.
S ГЛ N I OR I)
UNIViRStTY
GATEWAYS FOR. . .
TOP DESTINATIONS
UNIVERSITY NEWS
EVENT CALENDAR
SLIDESHOW
Рис. 1.19. Главная страница сайта Стенфордского университета
Мы видим множество изображений - больших и маленьких, которые вместе создают целостный графический образ.
• Как бы вы описали этот образ? С чем у вас ассоциируется цветовая гамма и оформление сайта в целом? Нравится ли вам его дизайн?
Если же в браузере отключить отображение рисунков, страница будет выглядеть по-другому (рис. 1.20).
MOER STORIES
Medicine
Departments (A -Z)
8
15
MORE NEWS
AT STANFORD
SLIDESHOW
40 Модуль 1. Создание электронных изданий
■ Stanfod University - Windows Internet Exp
Tout Contemporary
S'-
Voices of Calirornia In a mr
Stanford experts say.
Vistors
Neighbors
receive S40 million stem cell grant
Engineering Humanties & S^en^s
Medicine
Departments (A -Z) Lu^le Packard Children's
AT STANFORD
[Read store: At stanford]
NCAA
championships.
Рис. 1.20. Главная страница сайта Стенфордского университета, если отключить отображение рисунков
Как видим, она стала абсолютно безликой и неконтрастной.
Тем не менее злоупотреблять иллюстрациями тоже не стоит. К иллюстрациям для web-страниц предъявляются определённые требования, среди которых:
• не очень большой размер (1 Мб - уже много!);
• ограничение по ширине: чтобы картинка и окружающие её элементы web-страницы умещались в окне браузера при разрешении экрана 1024x768 (как у большинства нетбуков).
Большие изображения могут долго загружаться, и web-страница будет из-за них «тормозить», особенно если у пользователя не очень быстрое соединение с Интернетом. Согласитесь, ждать загрузки страницы только для того, чтобы увидеть красивый, но не очень информативный рисунок - не лучшее времяпрепровождение; многие посетители такого сайта могут просто не дождаться и уйти с него.
Если не выполняется второе требование, в браузере возникает горизонтальная полоса прокрутки и пользователю приходится постоянно перемещаться по странице то вправо, то влево, что очень неудобно (рис. 1.21).
populous state.
prefer
Assessing nuclear activity North Korea appers capable of
studyfinds
ndependents Labs Research Centers
9 Город - Windows Internet Explorer
Л C:\Samples\Город\oity.html
- Избранное Файл Правка Вид Избранное Сервис Справка ^ Город
Какой чудесный городской пейзаж!
§ 4. Иллюстрирование web-страниц 41
•Н ||‘
• О • ‘Страниц^ Безопасность Се
сверхагломерация или глобальная агломерация, образующая сплошную «
сеть расселения •'
на поверхности Земли.
Часть картинки не уместилась
История городов во многом зависит от того, какие характеристики закладываются в понятие «город»: площадь одновременного заселения (обычно от нескольких гектаров), количество жителей (от нескольких сотен), функции территориального центра поселений (властн^1е, культовые, экономические, культурно-технологические), наличие укреплений (но было немало признаваем^гх городов и без укреплений) и т.д.
Полоса
прокрутки
Рис. 1.21. Неудачная web-страница: имеется горизонтальная полоса прокрутки
Помещать на иллюстрацию текст стоит в том случае, если он играет декоративный характер - например, является рекламным слоганом, частью логотипа и т.п. Это особенно актуально, когда в тексте необходимо сохранить шрифт (рис. 1.22), поскольку web-страницы поддерживают, как правило, очень небольшое количество стандартных шрифтов.
Яндекс
Найдётся всё
Рис. 1.22. Логотип и слоган поисковой системы «Яндекс», набранные фирменным шрифтом
Изображения также можно использовать в качестве фона для web-страниц, таблиц, отдельных ячеек и т.п. Особенно, если эти изображения являются «бесшовными» (англ. seamless). В этом случае между расположенными друг за другом и друг над другом одинаковыми картинками не будет границ: мы увидим один сплошной повторяющийся рисунок-текстуру (рис. 1.23).
42
Модуль 1. Создание электронных изданий
Рис. 1.23. «Бесшовное» изображение и текстура на его основе
Если элемент web-страницы содержит текст, необходимо подбирать такие текстуры, чтобы его читаемость не ухудшалась.
Кроме того, не стоит забывать о такой стороне использования изображений, как авторские права. Если кто-то опубликовал картинку в Интернете, это вовсе не означает, что теперь она стала общественным достоянием. Использовать её для своих целей (например, для оформления web-страниц) можно только с разрешения автора. Тем не менее существует множество крупных интернет-коллекций изображений - как платных, так и бесплатных. Бесплатные изображения распространяются свободно, но при соблюдении некоторых условий (запрет перепродажи, запрет использования в изданиях, нарушающих законодательство, и т.д.). Вот несколько фотобанков бесплатных изображений (фотографий, рисунков, коллажей и пр.):
• www.sxc.hu
• www.freepixels.com
• www.everystockphoto.com
С каждым днём все больше авторов (художников, музыкантов, создателей видеороликов и др.) дают согласие на свободное распространение и использование своих произведений. Чтобы это согласие имело законные основания, были разработаны специальные лицензии, получившие название Creative Commons (англ. creative - творческий, commons - дословно «простые люди»). Такие лицензии разрешают частичное копирование, распространение, демонстрирование и исполнение творческих работ при условии обязательного упоминания автора, однако могут накладывать ограничения (только некоммерческое использование, запрет какого-либо видоизменения и т.п.).
§ 4. Иллюстрирование web-страниц 43
ОБОБЩЕНИЕ НОВЫХ ЗНАНИЙ
Изображения - важный элемент оформления web-страниц, однако использовать их нужно в меру. Слишком большие изображения будут долго загружаться, слишком широкие - давать горизонтальную полосу прокрутки. Иногда изображения используются в качестве фона web-страниц и их элементов. Следует обращать внимание на соблюдение авторских прав при использовании изображений для оформления сайта.
ПРИМЕНЕНИЕ ЗНАНИЙ
1. Откройте папку paragraph_4_5. Скопируйте находящиеся в ней файлы texture.jpg и logo.jpg в папку со страницами об А.С. Пушкине, созданную ранее.
2. Ещё один файл - Царскосельский_лицей.jpg - это фотография парадной залы Царскосельского лицея. Её необходимо подготовить для публикации на web-странице. Откройте файл в каком-либо графическом редакторе, уменьшите до приемлемых размеров (примерно 500-600 пикселей по ширине) и сохраните в папке со страницами об А.С. Пушкине. Имя файла выберите на своё усмотрение, но не забывайте, что можно использовать только латинские буквы, цифры и некоторые знаки.
3. Откройте в редакторе Nvu созданную на прошлом занятии web-страницу об А.С. Пушкине. Сохраните её в той же папке, но под новым именем. Поменяйте заголовок на «Царскосельский лицей в наши дни».
4. На самой странице поменяйте заголовок «Александр Сергеевич Пушкин» опять же на «Царскосельский лицей в наши дни». Удалите содержимое всех остальных ячеек большой таблицы, в том числе две маленькие таблицы. Удалите четвёртую строку большой таблицы. Должно получиться следующее:
^скиилицеивнашиЯ
‘ -
л Правка Вид Вставка
О Н
1 Bl#---- В/ j __________________
)(нет класса^ Д ’’Пропорциональный • ! 1' ^ *
1- 1
I ' гг ^ Царскосельский лицей в наши дни
.
Nvu
44
Модуль 1. Создание электронных изданий
5. В ячейку под заголовком вставьте обработанную ранее фотографию залы, в нижней правой ячейке напишите небольшой текст (2-3 предложения), описывающий то, что находится на фотографии.
6. Поменяйте фон страницы с однородного белого на текстурный. В качестве фонового изображения используйте файл texture.jpg.
7. • Сохраните web-страницу и откройте её в браузере. Появился ли фоновый рисунок? Нет ли горизонтальной полосы прокрутки? Что бы вы предприняли, если бы она всё-таки появилась?
ОПЕРАЦИИ
Изменение заголовка страницы
1. В главном меню Nvu выбрать пункт Формат, далее - пункт Заголовок и свойства страницы.
2. В появившемся окне изменить заголовок.
Удаление строки таблицы
1. Поместить курсор в любую из ячеек данной строки. Слева и сверху появится комбинация из двух стрелок и кружка с крестиком между ними.
|®>=
§ 4. Иллюстрирование web-страниц 45
2. Нажать на кружок с крестиком.
Изменение фона web-страницы
1. В главном меню Nvu выбрать пункт Формат, далее - пункт Цвета и фон страницы.
2. В открывшемся окне в разделе Фоновое изображение нажать кнопку Выбрать файл.
Цвета и фон страницы
Цвета страницы-------------------------------------
• Цвета пользователя по умолчанию (не указывать цвета)
. Использовать цвета:
Обычный текст:
Ссылка:
Активная ссылка:
Просмотренная ссылка:
Фон:
Фо.новое изображение:
Обычный текст Ссылка
Активная ссылка Просмотренная ссылка
I I Относительный URL
Выбрать файл...
Дополнительно...
DC
OK
Отмена
46 Модуль 1. Создание электронных изданий
§ 5. Создание навигации
ПОСТАНОВКА ПРОБЛЕМЫ УРОКА
У нас есть две полноценные web-страницы: об А.С. Пушкине и с фотографией Царскосельского лицея. Мы можем открыть и просмотреть каждую из них по отдельности, а также можем создать ещё несколько аналогичных страниц. Можно ли считать, что мы создали сайт?
• Как вы думаете, чего не хватает этим страницам? Что могло бы связать их в единое целое, помимо тематики и стиля оформления? Сформулируйте проблему урока. Сравните свою формулировку с авторской (с. 284 учебника).
НЕОБХОДИМЫЕ БАЗОВЫЕ ЗНАНИЯ
Что такое гиперссылка? Какой тег ей соответствует? (§ 1)
РЕШЕНИЕ ПРОБЛЕМЫ
Слово «навигация» происходит от латинского navigo - плыву на судне. Это понятие успешно перекочевало в область разработки сайтов буквально с первых дней существования Интернета. Действительно, пользователю необходимо как-то «переплывать» с одной страницы сайта на другую. Таким образом, навигация - это система ссылок, которые позволяют переходить с любой страницы сайта на любую другую. Она и поможет нам окончательно объединить несколько разрозненных web-страниц в целостный сайт.
Нередко навигацию также называют меню; к этому элементу сайта предъявляются повышенные требования и с точки зрения дизайна, и с точки зрения удобства использования. Если навигация неудобная, многие посетители просто не найдут некоторых страниц, а значит, и не получат необходимой им информации.
Большие сайты имеют достаточно сложную навигацию, состоящую из меню двух-трёх уровней (рис. 1.24).
В нашем простом сайте об А.С. Пушкине пока всего две страницы, поэтому ограничимся одним меню, состоящим из двух пунктов. К меню добавим рисунок с эмблемой сайта, которая также будет подчёркивать единство обеих страниц (рис. 1.25).
§ 5. Создание навигации 47
меню первого уровня
еще одно меню
^ Другие возможности Prague Airport - Windows Interner Explor
О©-
^ Избранное ^ Яндекс ^Почт^ Q Карт^ ^Мэрке^ I уН
Другие возгиожности / "Pr
Prague информация о
✓Я Airport РЕйСАХ
Homepaqe> Регистрацияпассажиров > Регистрацияпассажиров > Другие возможности регистрации
Другие возможности регистрации
Аэропорт Прага - это современный воздушный порт, в котором используется ряд самых современных технологий, и вместе с этим здесь создана приятная атмосфера для пассажиров. Здесь предоставляются услуги на высоком уровне. В области реги^рации пассажиров и оформления багажа Аэропорт Прага предоставляет несколько возможностей.
Стандартная регистрация
Классические стойки регистрации расположены в залах Терминала 1 и Терминала 2. Для регистрации необходимо принеси с собой: авиабилет (бумажный или электронный), ваучер или код бронирования, документ, удостоверяющий лично^ь и визу, если вы направляетесь в страну, где это требуется. Стойки регистрации, как правило, открываются за 2 часа до отправления рейса и закрываются за 30 минут перед отлетом. Аэропорт Прага рекомендует обязательно выяснить точное время открытия ^оек регистрации у конкретной авиакомпании.
У ^ойки регистрации вы сдайте свой багаж, предназначенный для оформления к отправке в пункт назначения, после этого вы получите посадочный талон с указанием вашего места в самолете, а также талон для багажа. После этого пройдите на контроль безопасности, при необходимости - паспортный контроль.
пногабаритный багаж
Об оформлении нестандартного или крупногабаритного багажа, например, солнечных зонтов, колясок, инвалидных кресел, велосипедов, лыж, досок для серфинга, но также и коробок необходимо договориться с работником, который занимается вами уЛтойки реги^рации. Этот багаж будет отправляться от специальной стойки, которая обозначена надписью «NADROZmER'A.ZAVAZADLA» (крупногабаритный багаж).
меню третьего уровня
меню второго уровня
Рис. 1.24. Одна из страниц сайта пражского аэропорта: перед посетителем
несколько разных меню
Александр Сергеевич Пушкин
Царскосельский Лицей в наши дни
/а.спушкин V
I и Царскосельский f I лицей /
Рис. 1.25. Меню сайта об А.С. Пушкине
ОБОБЩЕНИЕ НОВЫХ ЗНАНИЙ
Система ссылок, позволяющих перемещаться между web-страницами одного сайта, называется навигацией. В сложных сайтах имеется несколько уровней навигации.
• 100% •
48
Модуль 1. Создание электронных изданий
ПРИМЕНЕНИЕ ЗНАНИИ
1. Откройте в редакторе Nvu страницу с фотографией Царскосельского лицея. Вставьте над тремя существующими строками таблицы ещё одну новую.
2. В правой ячейке только что добавленной строки создайте новую таблицу шириной от 80 до 100% (на ваше усмотрение), состоящую из трёх столбцов и одной строки. В первой ячейке этой таблицы напишите «Александр Сергеевич Пушкин» и сделайте эту надпись ссылкой на нашу страницу об А.С. Пушкине со стихами и иллюстрациями. Во второй ячейке напишите «Царскосельский лицей в наши дни» - название текущей страницы. Эту надпись ссылкой делать не надо (страница не должна ссылаться сама на себя), но её можно выделить другим цветом или начертанием. В третью ячейку вставьте рисунок logo.jpg (его вы скопировали в папку на прошлом занятии).
^Царскосельский лицей в наши дни[А1е:/-/рй~5Ик1п4.ИГт1] Nvu
'_айл Правка Вид Вставка '_ормат Хаблица Инст,рументы Спр^
Опубликовать Просмотр
Щщ ^ д'А‘ В / g>=iibHF,aa
^неткласса^ Пропорциональный [*| ^____I *Т »-Д Y ^
Создать Открыть Сохра! ] Заголовок 1
Таблица Формы Орфография
Александр Сергеевич Пушкин
Г
Александр Сергеевич Пушкин Царскосельский лицей в наши дни ji А. С. ПУШКИН и Царскосельский 1 ... 1
Царскосельский лиц( ^й в наши дни
3. Сохраните страницу «Царскосельский лицей в наши дни». Затем скопируйте целиком только что созданную верхнюю строку большой таблицы.
4. Откройте страницу «Александр Сергеевич Пушкин», опять добавьте в самый верх большой таблицы пустую строку, выделите её и вставьте (Ctrl+V) только что скопированную строку с готовым меню. В нём необходимо надпись «Царскосельский лицей в наши дни» сделать ссылкой на соответствующую страницу, а с надписи «Александр Сергеевич Пушкин» ссылку убрать (с помощью кнопки Ссылка на панели компоновки) и придать надписи необходимое оформление. В завершение сохраните страницу.
5. Теперь у нас есть две взаимосвязанные страницы, то есть небольшой двухстраничный сайт. Откройте любую из страниц в браузере и проверьте, работает ли навигация.
§ 5. Создание навигации
49
ОПЕРАЦИИ
Вставка строки таблицы
1. Поместить курсор в любую из ячеек верхней строки таблицы.
2. Щелчком правой кнопки мыши вызвать контекстное меню.
3. Выбрать пункт Вставить таблицу, далее - пункт Строка сверху.
Копирование строки таблицы
1. Щёлкнуть в крайнем левом поле строки, где указана высота строки.
2. Воспользоваться комбинацией клавиш Ctrl+C.
^Царскосельский лицей в наши дни[А1е:/-/ри_5Ик1п4.ИГт1] Nvu
'Файл _равка _ид В_тавка 'Формат _аб^ица Инструменты _правк
• И в
Создать Открыть Сохранить Опубликов
> Просмотр Якорь Ссылка Изображение Таблица Формы
Орфография Печат
Заголовок 1 иД=:='Е*аШ|-50
^^^(нет^к^эооа^^^^^*|^^^^Пропорциональ „ый Ell» I :: =1||*»|и|ч||тг1
^ (нет класса)
;андр Сергеевич Пушки
У
Царскосельский лицей в н^
Нажать
сюда
Александр Сергеевич Пушкин
Царскосельский лицей в наши дни
А. С. ПУШКИН
и Царскосельский лицей
Царскосельский лицей в наши дни
50
Проверь себя
Задание 1
1. Создайте новую папку в том месте, где укажет учитель.
2. Откройте папку test_1. Скопируйте из неё все файлы в созданную вами папку.
3. Откройте файл test.html с помощью браузера. Перед вами пустое окно, хотя внутри файла есть html-код. Вероятно, этот код содержит ошибки. Откройте файл с помощью программы Блокнот и исправьте ошибки. Закройте файл.
4. Снова откройте файл в браузере и убедитесь, что страница отображается верно.
5. Покажите учителю и исправленный код, и то, как страница отображается в браузере.
Задание 2
1. С помощью редактора Nvu приведите исправленную вами в задании 1 web-страницу к виду, который показан на рисунке:
■ Молекулы - Windows Internet Explorer
■■ Irf C:\Documents\Модуль1\page.html
■l-rl-lk-
■ Молекулы
• • • Стр.
Что такое молекула?
Молекула - мельчайшая частица какого-либо вещества (например, воды), сохраняющая все его свойства. Молекулы очень маленькие: в о^ой капле во^ содержится примерно столько же молекул, сколько песчинок во всех пустынях на Земле!
А вот так выглядит молекула воды
2. По завершении работы покажите учителю страницу в редакторе Nvu и то, как она отображается в браузере.
бранное С
Готово
% 100%
51
ПРИМЕНЕНИЕ ЗНАНИЙ [необходимый уровень)
Задание 1
1. Напишите фрагменты html-кода, которые отвечают за:
• описание абзаца «Тихий океан является самым большим в мире!»
• добавление изображения ocean.jpg
• придание словам «Тихий океан» функции ссылки на файл pacific.doc.
2. Покажите ваши записи учителю.
Задание 2
1. Создайте новую папку в том месте, где укажет учитель.
2. Откройте папку task_1. Скопируйте из неё файлы ocean.jpg и pacific.doc в созданную вами папку.
3. Создайте в Блокноте или в редакторе Nvu (на ваш выбор) html-документ, в котором будут присутствовать фрагменты html-кода из задания 1. Сохраните web-страницу в той же папке, что и файлы к ней.
4. Покажите учителю код и то, как web-страница отображается в браузере.
Задание 3
1. Создайте новую папку в том месте, где укажет учитель.
2. Откройте папку task_2. В ней вы найдёте файл Агрегатные состояния. doc с текстом и несколько изображений. Ваша задача - разработать на основе этого текста и картинок иллюстрированную web-страницу. Скопируйте все картинки и doc-файл в созданную вами папку. В этой же папке должна размещаться будущая web-страница.
3. Некоторые картинки используйте непосредственно между абзацами текста, на некоторые давайте из текста гиперссылки. Не забудьте, что картинки для web-страниц необходимо уменьшить до приемлемого размера.
4. Пользуйтесь разными типами заголовков. Например, для общего названия страницы («Агрегатные состояния вещества») используйте Заголовок 1 (можно выбрать на панели форматирования), а для разделов, посвящённых каждому из агрегатных состояний, - Заголовок 2.
5. Попробуйте разместить какие-нибудь две картинки не друг под другом, а рядом, например так:
картинка 1
картинка 2
Описание Описание
Это можно сделать с помощью таблицы из двух столбцов и двух строк.
52
ПРИМЕНЕНИЕ ЗНАНИЙ [повышенный уровень)
1. Создайте новую папку в том месте, где укажет учитель.
2. Откройте папку task_2. В ней вы найдёте файл Агрегатные состояния. doc с текстом и несколько изображений. Ваша задача - разработать на основе этого текста и картинок иллюстрированный сайт, состоящий из трёх web-страниц: по одной на каждое агрегатное состояние. Скопируйте все картинки и doc-файл в созданную вами папку. В этой же папке должны размещаться будущие web-страницы.
3. Некоторые картинки используйте непосредственно между абзацами текста, на некоторые давайте из текста гиперссылки. Не забудьте, что картинки для web-страниц необходимо уменьшить до приемлемого размера.
4. Попробуйте разместить какие-нибудь две картинки не друг под другом, а рядом, например так:
картинка 1
картинка 2
Описание
Описание
Это можно сделать с помощью таблицы из двух столбцов и двух строк.
5. Будет отлично, если вы нарисуете в каком-либо графическом редакторе эмблему для вашего сайта и разместите её на каждой из трёх страниц.
ПРИМЕНЕНИЕ ЗНАНИЙ [максимальный уровень)
1. Ваша задача - создать небольшой (3-5 страниц) сайт на любую интересную вам тему. Это может быть сайт о вас самих (увлечения, любимые фильмы и ваше мнение о них, ваши фотографии и т.д.), вашей семье, вашем питомце; о технике, животных или растениях, о любимой музыкальной группе и т.п. Продумайте его содержание.
2. Создайте новую папку в том месте, где укажет учитель. В ней должны размещаться все web-страницы и изображения для вашего сайта.
3. Обязательно проиллюстрируйте сайт. Если вы используете изображение, созданное не вами лично, не забывайте о вопросах авторского права.
4. Для оформления web-страниц пользуйтесь разными типами заголовков. Например, для общего названия страницы используйте Заголовок 1 (можно выбрать на панели форматирования), а для более мелких разделов - Заголовок 2. Экспериментируйте с цветами и шрифтами.
53
Итоговая проверочная работа
Задание 1
1. Создайте новую папку в том месте, где укажет учитель.
2. Откройте папку test_2, скопируйте из неё все файлы в созданную вами папку.
3. Откройте файл oil.html с помощью браузера. Перед вами пустое окно, хотя внутри файла есть html-код. Вероятно, этот код содержит ошибки. Откройте файл с помощью Блокнота и исправьте ошибки. Закройте файл.
4. Снова откройте файл в браузере и убедитесь, что страница отображается верно.
5. Покажите учителю и исправленный код, и то, как страница отображается в браузере.
Задание 2
1. С помощью редактора Nvu приведите исправленную вами в задании 1 web-страницу к виду, который показан на рисунке:
Нефть - Windows Internet Explor ,1 \lest_2\oil.html
'id Нефть
•1*»
а • С • - -Стр,
* Безопасности Сер
Несколько слов о нефти
В настоящее время в России насчитывается двадцать семь нефтеперерабатывающих заводов. Каждый из них - как огромный, сложный механизм: стоит нарушить какой-то параметр, и вся система начнет работать неисправно.
Нефть и нефтепродукты - основные загрязнители почвы и гидросферы. При аварии танкеров они тонким слоем покрывают акваторию водоема, вызывая крупную экологическую катастрофу.
2. По завершении работы покажите учителю страницу в редакторе Nvu и то, как она отображается в браузере.
Бранное С
Готово
00%
Задание 3
1. Создайте web-страницу, которая будет отображаться бы в браузере приблизительно так:
Windows Internet Explor
Избранное Файл Правка Вид Избранное Сервис Справг
• Страниц^ Безопасности Сервис • •*
положить подарки
надеть шпиль
повесить шарики
Необходимые изображения найдите в папке test_3.
& 100%
§ 6. Структура CSS. Встроенные и внешние стили
55
§ 6. Структура CSS. Встроенные и внешние стили
ПОСТАНОВКА ПРОБЛЕМЫ УРОКА
Оформление элементов web-страниц с помощью всевозможных стилей - вещь, безусловно, полезная. Но, допустим, на одной web-странице огромное множество элементов (пять таблиц по 10 ячеек в каждой, двенадцать абзацев, три разных заголовка, два меню и пр.), а всего таких web-страниц на сайте — около шестидесяти. Вероятно, придётся создавать тысячи разных стилей! Ведь, создавая и оформляя ранее web-страницы с помощью редактора Nvu, мы так и поступали — за счёт атрибутов style html-код значительно увеличивался.
• Как вы считаете, можно ли избежать загромождения html-кода однотипными стилями? Какое решение этой проблемы кажется очевидным? Встречались ли вам подобные вопросы, когда речь шла о работе с печатными изданиями? Сформулируйте проблему урока. Сравните свой вариант с авторским (с. 284 учебника).
НЕОБХОДИМЫЕ БАЗОВЫЕ ЗНАНИЯ
Что такое тег? (§ 1)
Какие теги встречаются в любом html-документе? (§ 1)
РЕШЕНИЕ ПРОБЛЕМЫ
Оформить тот или иной элемент web-страницы с помощью css-стилей можно несколькими способами. Основных способов - три. Первый нам уже знаком: мы перечисляли необходимые характеристики стиля (цвет шрифта, начертание, отступы и пр.) в атрибуте style внутри конкретного тега. Это выглядело так:
<тег style="характеристика1: значение; характеристика?: значение; характеристика?: значение; ... ">Содержимое
тегатег>
Данный способ привязки стилей к тегам уместен в том случае, если стиль встречается крайне редко и на единичных web-страницах. Например, если посреди какой-то страницы один-единственный раз возникает необходимость создания большого красочного заголовка, который не встретится больше ни на одной другой странице.
56
Модуль 1. Создание электронных изданий
Второй способ годится тогда, когда стиль повторяется несколько раз, но только в пределах одной страницы (рис. 1.26).
1-2 июня 2011года
Уважаемые коллеги!
Приглашаем принять участие в работе международной научно-практической конференции «Современные подходы к решению проблем утилизации резинотехнических изделий и шин которая состоится 1-2 июня 2011 г. в Российском государственном институте нефти и газа имени И. М. Губкина в аудитории 444.
Конференция производится по инициативе:
Министерства природных ресурсов и экологии Российской Федерации ,
Центра международного промышленного сотрудничества ЮНИДО в Российской Федерации,
!)»
Ф
Российского государственного университета нефти и газа им. И. М. Губкина,
Программа конференции предусматрива
Ассоциации содействия восстановлению и переработке шин «Шиноэкология» ,
Автономной некоммерческой организации «Международный центр наилучших природоохранных технологий».
1я по следующим направлен
• экологические и правовые аспекты управления отходами резинотехнических изделий и шин;
• прблемы утилизации резинотехнических изделий и шин;
• современные технологии и научные исследования в области утилизации резинотехнических изделий и ш
• новые технологии изготовления изделий из продуктов переработки резинотехнических изделий и шин.
Рис. 1.26. Промо-страница экологической конференции
Легко заметить, что на странице имеется шесть одинаковых блоков «картинка - текст», оформленных одинаково: сверху изображение, затем маленький отступ, затем однотипный текст. Повторять одинаковое оформление в атрибуте style каждого тега шесть раз подряд было бы крайне нецелесообразно, поэтому в данном случае стили можно описать один раз в самом начале html-документа - в разделе . Это делается с помощью подраздела
Обратим внимание на правила описания стилей.
Во-первых, CSS позволяет описывать как стандартные теги html (, ,
,
и пр.), так и произвольные, придуманные нами стили. В случае стандартных тегов оформление распространяется на все соответствующие им фрагменты страницы: стиль body будет отвечать за оформление страницы в целом, стиль p - за оформление всех абзацев, h1 - всех заголовков и т.п. Придуманные нами стили мы можем применять к тем элементам страницы, к которым сочтём нужным. Разница в оформлении стандартных и произвольных стилей - в наличии точки перед названием: она есть только у произвольных.
Во-вторых, конечно же, названия стилей должны содержать только латинские буквы или цифры; пробелы в таких названиях не допускаются. Если необходимо составить название из двух слов, между ними можно поставить дефис или знак подчёркивания, например . left_table.
В-третьих, все характеристики стилей перечисляются в фигурных скобках.
В-четвёртых, каждая характеристика отделяется от своего значения двоеточием, а между характеристиками ставится точка с запятой.
Произвольные стили привязываются к любым тегам web-страницы с помощью атрибута class, например:
... |
Заметим, что здесь точка перед названием стиля уже не нужна.
• Представьте ситуацию: имеется web-страница, состоящая из десяти абзацев. Первые восемь, а также десятый абзац оформлены одинаково, а вот девятый необходимо выделить: оставить прежними все характеристики (отступы, интервалы, гарнитуру шрифта), но
58
Модуль 1. Создание электронных изданий
поменять цвет и размер текста. Как бы вы предложили поступить с описанием стилей для этих десяти абзацев?
Итак, мы перечислили два типа стилей:
• указываемые в атрибуте style непосредственно внутри конкретного тега;
• описываемые в подразделе
6. Привяжите стиль .robot1 к тегу с помощью атрибута class.
60
Модуль 1. Создание электронных изданий
7. Сохраните файл. Перейдите в браузер, в котором по-прежнему открыта web-страница; чтобы обновить её, нажмите на клавиатуре клавишу F5. Посмотрите на изменения. Мы использовали три характеристики:
• для стиля body - background-color, отвечающую за цвет фона;
• для стиля h1 - color, отвечающую за цвет шрифта;
• для стиля . robotl - margin, отвечающую за отступы.
8. Откройте программу Блокнот, скопируйте из Nvu описание всех трёх стилей, вставьте его в окно Блокнота. Незначительно измените на ваше усмотрение значения одной или нескольких характеристик. Например, в характеристике
background-color: rgb(200, 220, 240); вместо значения 200 используйте 100.
3Безымянный - Блокнот
Файл Правка Формат Вид Справка
body { background-color : rgb(200, 220, 240); } h1 { color : rgb(220, 30, 30); } .robot1 { margin: 100px; }
4 •
§ 6. Структура CSS. Встроенные и внешние стили 61
9. После внесения изменений сохраните файл под именем robots.css.
~ШЯ:
Сохранить как
^ Моя первая страница - CSS
^ [ Поиск; installers ~
Р1
Упорядочите Новая папка
Избранное щ Загрузки ^ Недавние мес ■ Рабочий стол
д Библиотеки Ш Видео 131 Документы В Изображения ^ Музыка
п ^ robots.html В robot-big.jpg 1Д robot-small.jpg
Имя файла: robots.css *
Тип файла: [Все файлы Н
Скрыть папки
Кодировкам ANSI
Сохранить
10. Вернитесь в Nvu, удалите весь подраздел