В настоящее время в России реализуется национальный проект «Образование». В соответствие с этим проектом в школу пришли современные компьютеры. В учебный план школы вводятся новые предметы и элективные курсы. Одним из таких курсов является курс «Web-конструирование». Каждая школа уже подключена к Интернету. Возникает необходимость создавать школьные Интернет-страницы, на которых будут размещены материалы о сегодняшним дне школы и её истории.
В современном мире разразился настоящий «бум» сайтостроения. Свои странички в Интернете имеют все: государственные учреждения, различные компании, школы. Вы тоже можете построить свой собственный виртуальный дом.
Существуют множество программ, специально предназначенных для создания новых Web-сайтов. Например, MS Front Page или Macromedia Dream Weaver. Все они предоставляют широкие возможности для визуального создания сайтов. Это и хорошо и плохо.
Хорошо потому, что мы сможем создать наш сайт за считанные минуты. Оснастим его картинками, красиво оформленным текстом и гиперссылками. Однако при этом мы никогда не узнаем, как «устроена» наша страница, из чего она состоит и как взаимодействуют все ее компоненты. Кроме того, любая программа для создания сайтов предъявляет определенные требования к компьютеру, на котором будет работать, и не исключена вероятность того, что Вы не сможете использовать понравившийся продукт по причине недостаточной мощности своего ПК.
Поэтому воспользуемся другим более простым способом. Мы станем составлять наши странички из простейших элементарных команд языка HTML, который специально предназначен для разметки гипертекстовых документов, коими и являются сайты.
Для этой работы нам не нужно сверхмощного компьютера, поскольку работа будет происходить в обычной программе «Блокнот», которая входит в базовый комплект MS Windows.
Кроме этого нам потребуется любой браузер, например MS Internet Explorer, а так же – любой графический редактор – в нашем случае программа ACDSee и Adobe Photoshop.
В самом конце работы, когда придет время опубликовать наш готовый сайт в сети Internet, нам потребуется специальная программа FTP-клиент, в качестве которого выступит программа FAR, очень похожая на Norton Commander.
Объект исследования: методика изучения курса информатики.
Предмет исследования: методика изучения элективного курса «Web-конструирования».
Цели исследования:
· Изучить научно-методическую литературу по данной теме.
· Проанализировать этапы построения Web-сайтов.
· Научить, используя средства HTML, строить полезные компьютерные приложения, которые можно было бы использовать на локальном компьютере у себя дома, в школе или на базе полученных знаний построить собственную страничку в Интернете.
· Публикация редактированного сайта «Лукояновский педагогический колледж» в сети Интернет
Рабочая гипотеза: изучение данной темы направлено на формирование знаний, умений и навыков по созданию собственной Web-страницы на основе языка HTML и дальнейшее размещение её в Internet.
Создавая сайт, нужно продумать его структуру. Хорошо структурированный сайт позволяет быстро находить нужную страницу сайта. Структура сайта отражает логическую связь страниц сайта.
Чтобы открыть главную Интернет – страницу, нужно запустить файл, который называется Index. Это стандартное обозначение первой (главной) страницы сайта. Так называются и все первые страницы отдельных Интернет – проектов, которые здесь содержатся.
Рассмотрим структуру сайта. На главной странице есть ссылки на второстепенные страницы. Такая структура называется иерархической. Если посмотреть файловую структуру, то она такая же: в корневой папке находится запускной файл (Index) и папки отдельных Интернет – проектов (cult, flash, history …), а в этих папках находятся уже файлы отельных Интернет - страниц и другие вспомогательные папки (например – папка Pic, содержащая картинки для Интернет – страниц, или папка с Flash – проектами).
Разрабатывая сайт, нужно подумать о навигации или по – другому о системе ссылок, чтобы было удобно и быстро перемещаться по всему сайту. Очень важно, чтобы система работы ссылок была единой, то есть везде одинаковой (Например, на каждой главной странице отдельного проекта есть ссылка на главную страницу всего сайта. Она выполнена виде кнопки. Важно чтобы на каждой главной странице другого проекта была такая же кнопка и чтобы она также действовала, а не отправляла на другую страницу). Если щелкнуть по любой ссылке с главной страницы, то мы попадем на страницу отдельного Интернет проекта, например на Интернет – проекты. На этой странице также есть ссылки на вложенные страницы Интернет – проектов. На каждой главной странице есть ссылка на главную страницу всего сайта (она выполнена виде кнопки, на которой нарисован домик) и ссылка на главную страницу следующего (предыдущего) Интернет – проекта (это стрелка вправо или влево, в зависимости от положения в сайте данного Интернет – проекта).
Но это были элементы навигации, присутствующие на каждой главной странице отдельного Интернет – проекта, они находятся в строго определенном месте – слева внизу. А основное место страницы занимают ссылки на вложенные страницы, то есть на содержание Интернет проекта. На воженных станицах есть стандартные для всех страниц элементы: кнопки «Домой», «Влево», «Вверх», «Вправо». Кнопка «Домой» в данном случае будет отправлять нас не на главную страницу всего сайта, а на главную страницу этого проекта. Кнопки «Влево», «Вправо» необязательно будут присутствовать на каждой вложенной странице, только на тех, которые находятся на одном уровне иерархии с другими вложенными страницами проекта. А кнопка «Вверх» отправляет на уровень вверх. Если следующий уровень – это главная страница, то это будет кнопка «Домой». Это тоже обязательный элемент любой страницы сайта и находятся они только слева внизу.
На вложенных страницах могут быть текстовые ссылки на другие страницы, которые вожены дальше по смыслу. Например: в предложении «В вычислениях Вы можете потренироваться здесь». Слово «здесь» нас отправит на страницу с тренажером.
В любом Интернет – проекте есть страница с картой данного Интернет – проекта. На главной странице есть ссылка на карту всего сайта. С помощью такой карты можно сразу попасть на нужную страницу и можно проследить структуру сайта, логическую связь страниц.
Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Браузеры “понимают” два графических формата GIF и JPG. JPG — для фотографий и очень сложных по цветовой гамме рисунков с плавными цветовыми переходами. Фотография в JPG-формате.
GIF — для логотипов, надписей, заголовков, рисунков, имеющих четкие цветовые границы. Такое расширение имеют изображение А.М. Горькова и Орден Трудового Красного Знамени в верхней части страниц.
GIF-формат имеет три приятные дополнительные возможности:
· Мультипликация
· Прозрачная графика
· Чересстрочная развертка
В настоящее время Интернет-страницы невозможно представить себе без графики. Графика позволяет сделать их более интересными, содержательными, понятными и приятными для глаз пользователей Интернета. Но не каждую картинку можно вставить в HTML-документ. Основным требованием к ним является малый объём при достаточно высоком качестве изображения. Добиться этого можно несколькими способами. Но в основе каждого лежит работа с графическим редактором Adobe Photoshop.
Чтобы уменьшить её объём и размер фотографии нужно:
1. Загрузить нужную фотографию в редактор.
2. Нажать кнопку Изображение в главном меню, выбрать пункт Размер изображения.
3. В открывшемся окне Размер рисунка найти пункт разрешение и изменить его на меньшее. Размер фотографии уменьшится.
4. Выберите команду Файл-Сохранить для Web.
5. Из предлагаемых форматов нужно выбрать формат JPEG. Далее, соглашаясь с тем, что предложит вам компьютер при конвертировании, можно уменьшить объём фотографии в несколько раз.
Для того, чтобы создать HTML-альбом в программе ACDSee. Мы должны открыть программу. Выбрать папку, содержащую нужные файлы. Выделить их. Выбираем в меню кнопку Создать. Создать HTML-альбом.
В появившемся диалоговом окне нажимаем кнопку Далее. Затем в строке Title пишем название альбома. Затем выбираем формат и размер длины и ширины файла. Далее выбираем папку, в которую создастся HTML-альбом.
Язык HTML и его назначение
HTML — это специальный язык, на котором описывается как должен быть показан документ на экране компьютера. Самым важным элементом HTML-программы (HTML-документа) является ссылка. Ссылка позволяет передавать управление из одного HTML-документа в другой по контексту, то есть непосредственно в той точке документа, где в этом есть необходимость по смыслу. Таким образом HTML-документы читают не как беллетристику, от первой страницы до последней по-порядку, а как справочники, от одной нужной темы до другой.
Итак, программирование ссылок - это самое главное свойство HTML-документа. Документы со ссылками, которые передают управление другим документам, называются гипертекстами. Можно сказать, что язык HTML — это язык для программирования гипертекста. Именно так и расшифровывается аббревиатура HyperText Markup Language (язык разметки гипертекста).
Второй, важной особенностью HTML-документа, является его независимость от компьютерных платформ (DOS, Windows, UNIX, MacOS,...), а также от типа видеовывода конкретного компьютера (CGA, EGA, VGA, SVGA,...).
Чем обеспечивается такая универсальность?
HTML-текст — это программа, которая задает информацию и правила показа этой информации на экране компьютера. Для каждой платформы создается специальная программа-интерпретатор ("браузер" в терминологии Интернета), которая должна интерпретировать (выполнять) HTML-программу по единым стандартным правилам. Браузер учитывает особенности компьютера для максимального соблюдения стандарта, HTML-программа ничего о компьютере не знает.