Гіпермаркет Знань>>Інформатика>>Інформатика 11 клас>> Інформатика: Ідентифікація ПК в мережі. Принцип адресації.

Підручник до предмету Інформатика 11 клас.

Тема «Основи веб-конструювання».

Розгляд теми: Ідентифікація ПК в мережі. Принцип адресації.

                                     ГЛАВА 3. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

3.1. Общее представление о веб-конструировании

Всемирная информационная паутина (WWW – World Wide Web) является в настоящее время популярной и удобной службой сети Интернет.
Веб-страницы  и веб-сайты широко применяются во Всемирной паутине.

Для создания веб-сайтов  используется язык разметки гипертекстовых документом HTML (HyperText Markup Language).
Методы конструирования веб-сайтов и инструменты, с помощью которых выполняется конструирование, очень разнообразны, их можно классифицировать по различным признакам. Важнейшими из них являются степень автоматизации конструирования сайта и методика процесса разработки.

По степени автоматизации конструирования веб-сайтов следует выделить два основных метода: визуальный и программируемый.

Визуальный метод позволяет конструировать веб-сайт с высокой степенью автоматизации. Этот метод возник из необходимости уменьшить трудоемкость создания сайта и сократить сроки выполнения работ.

Главным принципом визуального метода является принцип «Что вижу, то и получаю» - WYSIWYG (от англ. предложения “What you see is what you get”). При создании сайтов с использованием визуального метода необходимо выбрать инструменты – редакторы визуального конструирования.

Наиболее известными такими редакторами  являются: Microsoft FrontPage, DreamWeaver (Macromedia), NamoWEbEditor, Adobe GoLive и др.  Во время создания веб-сайта эти редакторы обеспечивают пользователю возможность работать без непосредственного подключения к сети Интернет. В дальнейшем созданный веб-сайт  можно разместить в сети Интернет. 

При создании веб-сайтов с помощью этих редакторов по каждой создаваемой веб-странице автоматически генерируется код HTML, который представляет собой набор конструкций языка HTML.

Для конструирования веб-сайтов могут использоваться  системы управления содержанием CMS (Content Management System), которые предоставляются некоторыми специальными  платными или бесплатными сервисными службами. Системы CMS представляют собой своего рода конструкторы, позволяющие создавать сайт и сопровождать его в дальнейшем. При создании структуры и навигации по сайту в системе CMS  обычно не требуется глубоких знаний языка HTML. Примеры систем CMS можно найти на сайтах Narod.ru и  Boom.ru. 

Нельзя стать настоящим веб-мастером, не зная основных конструкций языка HTML, а для профессиональной работы необходимо освоить язык HTML. Создание сайта на языке HTML часто называют программируемым  или ручным методом конструирования.

Для непосредственной работы с HTML-кодом могут использоваться специальные инструменты разработки, например программы Hotdog, HomeSite и др. Эти программы облегчают разработчику веб-сайта ввод и редактирование основных конструкций языка HTML. 

Вводить основные конструкции языка HTML можно  в программе Блокнот. Об этом способе работы мы поговорим позже.

Кроме языка разметки гипертекстовых документов HTML для создания веб-сайтов используются другие языки программирования, например  Java Script и PHP.

Широкое применение при веб-конструировании получили скрипты. Они используются, как правило, для создания отдельных элементов веб-страницы, например, выпадающих списков, динамических меню, часов, календарей и т.п. 

 Методика веб-конструирования предполагает выполнение проектирования сайта за несколько основных этапов:

1.    Разработка тематики сайта, его целей и задач.
2.    Логическое проектирование, которое включает в себя: формирование структуры сайта (линейный, иерархический), название разделов, связь между ними, подготовка  информации, размещаемой на каждой веб-странице сайта.
3.    Непосредственное создание сайта, которое включает в себя определение методов проектирования и выбор инструментов для него.   
Методы и инструменты конструирования веб-сайтов очень разнообразны, например можно создавать сайты динамические и статические.

На динамической сайте размещается информация, которая может изменяться пользователем или  загружаться из  баз данных. Такие базы данных обычно содержат информацию, которая требует постоянного обновления. Например, сайт Интернет магазина всегда пополняется сведениями о дополнительных товарах и изменяющихся ценах.

Статический сайт не обновляется в режиме реального времени. 

Широкое распространение получили интерактивные сайты. На таких сайтах веб-страницы генерируются серверными программами. Информация  обычно берется из баз данных. Очень часто используется разграничение доступа к сайту, при котором  посетители сайта имеют различные права доступа к информации на нем. Такие сайты могут содержать различные формы для заполнения.

При создании сайтов могут использоваться готовые шаблоны или их построение может выполняться в специальных программных средах, построенных в основном на графических изображениях и т.д.

?
1.    Какие два основных метода веб-конструирования вам известны?
2.    Какие инструменты могут использоваться при создании веб-сайтов?
3.    В чем разница между визуальным и  программируемым методами веб-конструирования?
4.    Для чего используются скрипты?
5.    Какие этапы следует выполнять при проектировании веб-сайта?

                                   3.2. Основные понятия  HTML. Представление о структуре HTML-документа

3.2.1. Структура HTML-документа

Документ HTML представляет собой обычный текстовый файл, который содержит конструкции языка HTML. Поэтому  этот документ можно создавать в обычных текстовых редакторах, например программе Блокнот,  а затем сохранять созданные файлы с расширением .htm или .html.

Суть языка HTML - в разметке текста с помощью управляющих символов - тегов, которые располагаются в угловых скобках.

Большинство тегов парные, т.е. имеют открывающий элемент <> и закрывающий элемент </>.

Между ними и находятся коды, которые распознает браузер.

HTML-документ всегда должен начинаться отрывающим тегом <html> и заканчиваться закрывающим </html>.

Внутри расположены: блок заголовка <head> </head> и тело <body> </body>, в котором размещаются тексты, рисунки, аудио и видеофрагменты.
Основные теги, необходимые для создания HTML- документа простой структуры, представлены в таблице:

В блоке заголовка размещается тег <title> текст </title>.  Текст, указанный в этом теге отображается в заголовке окна браузера.
В HTML-документе можно разместить комментарии, которые браузером не отображаются: <! Комментарии>.

Пример 1. Создать  простой HTML-документ в Блокноте. Сохранить созданный файл  prim1.htm. Открыть созданный документ в браузере.
Структура такого документа представляется следующим образом:

<html>    <!Открытие HTML документа>
<head>
<title> Заголовок  </title>
</head>
<body>        <!Содержание (тело) документа>
Текст первой странички
</body>
 </html>

Результат отображения HTML-документа в браузере представлен на рис. 3.1.

 
Рис. 3.1.

3.2.2. Оформление  HTML-документа

Теги языка HTML могут содержать атрибуты, которые являются параметрами или свойствами элементов разметки документа.
Правило записи атрибутов в теге следующее:

<тег атрибут1=значение  атрибут2=значение …>

Тег <body> определяет внешний вид всей веб-станицы, в то время как отдельные ее элементы, например заголовки, таблицы могут иметь свое особенное оформление.
Выбор цвета страницы, фонового рисунка и цвета текста на ней   является весьма важным, так как от этого зависит визуальное восприятие всего сайта.
Цвет страницы задается атрибутом  bgcolor, а цвет текста - text. Значением атрибутов является цвет, который задается своим названием на английском языке или его шестнадцатеричным кодом.

Пример 5.  В этом примере задан синий цвет страницы двумя способами:

<body bgcolor="blue"> <!название цвета>
         или
<body bgcolor="#0000FF”> <!шестнадцатеричный код цвета>        

При формировании веб-страниц указываются уров¬ни заголовков, которые обозначаются h1, h2,...h6. Для описания уровней используются соответствующие теги, например, для третьего уровня — <hЗ> и </h3>. Заголовок уровня 1 самый крупный, а уровня 6 — самый маленький. Для выравнивания текста на странице обычно указывается одно из трех значений атрибута align:

align = center — выравнивание заголовка по центру;
align = left — выравнивание заголовка по левому краю;
align = right — выравнивание заголовка по правому краю.

Пример 6. Создадим HTML-документ с желтым цветом фона и зеленым цветом текста. Выведем тексты заголовков уровня h1, h2, h3, выровняв их соответственно по центру, по левому и правому краю документа.

 
Результат отображения HTML-документа в браузере представлен на рис. 3.2.

 
Рис. 3.2

?
1. С помощью чего создается HTML-документ?
2. Для чего предназначены теги  и атрибуты в языке HTML?

Упражнения

1.    Просмотрите текст HTML-документа:

 
а) Какой цвет фона и текста будет на веб-странице?
б) При выводе заголовков на веб-странице размер их уменьшается или увеличивается?

                                                        3.3. Работа с редактором визуального конструирования FrontPage

3.3.1. Основные элементы интерфейса FrontPage

Редактор Microsoft FrontPage относится к редакторам визуального веб-конструирования. При работе с веб-редактором FrontPage можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница просто конструируется на экране и сохраняется в формате .html. Выполняемые при этом действия напоминают работу в текстовом редакторе Word.

Интерфейс редактора FrontPage достаточно прост, чтобы пользователь смог быстро освоить основные приемы работы. После запуска FrontPage открывается окно, основные элементы которого представлены на рис. 3.3.

Панели Стандартная, Форматирование и Рисование по своим возможностям напоминают аналогичные панели  текстового редактора Word.

Вид Рабочей области зависит от выбранного режима работы. В режиме Конструктор веб-страница конструируется из текстовых блоков и графических объектов. При этом автоматически генерируется ее HTML-код, который можно просматривать и редактировать в режиме Код. Режим
С разделением  (рис. 3.4) является комбинацией этих двух режимов. Режим Просмотр позволяет просматривать созданные страницы.

С помощью меню Вид можно выбрать и другие полезные при конструировании сайта режимы. Режим Страница предназначен для создания и редактирования веб-страниц. В режиме Папки просматривается структура папок сайта, выполняются файловые операции. Заметим, что любые изменения файлов и папок сайта необходимо производить из среды разработки, так как это позволяет отследить изменения  в структуре взаимосвязанных веб-страниц сайта. Режим Переходы отображает структуру связей между страницами и позволяет ее изменять. Режим Гиперссылки наглядно отображает систему ссылок, обеспечивает их проверку и редактирование.

 
Рис. 3.3

 
Рис. 3.4

3.3.2. Создание веб-сайта в редакторе FrontPage

Рассмотрим этапы и приемы работы в редакторе FrontPage на примере разработки веб-сайта «Беларускія пісьменнікі» (см. Рис. 3.3).
Для создания этого веб-сайта необходимо уяснить его структуру, и предполагаемое содержание, т.е. подготовить проект сайта. Фрагмент структуры сайта для наглядности изобразим в виде двухуровневой схемы (рис. 3.5).

 
Рис. 3.5.
На первой  странице (верхний уровень) размещается заголовок сайта «Беларускія пісьменнікі», текстовые гиперссылки и гиперссылки с изображением писателей и поэтов, позволяющие открыть страницы второго уровня.

На втором уровне разместим три страницы одинаковой структуры, содержащие следующую информацию, как показано на рисунке 3.6.

 
Рис. 3.6.
После просмотра любой страницы второго уровня внизу расположим гиперссылки для возврата на главную  (первую) страницу сайта и две гиперссылки для движения вперед и назад по сайту.

При проектировании сайта «Беларускія пісьменнікі» мы будем использовать методику построения сверху вниз, то есть конструировать от верхнего уровня к нижнему уровню. При создании веб-страниц сайта с помощью редактора FrontPage  мы будем для удобства создавать страницы  снизу вверх, то есть начнем создавать страницы нижнего уровня.

Файлы всех веб-страниц сайта  размещаются в отдельной папке. Это в дальнейшем поможет упростить размещение сайта в сети Интернет. Файлу главной веб-страницы принято давать имя index или main с расширением .htm, хотя это требование не является обязательным.

В рамках каждого уровня страницы сайта имеют одинаковую структуру. Все страницы одного уровня обычно оформляются в едином стиле. Стиль оформления веб-страницы определяется стилем текста и графических элементов.

Под стилем текста понимается тип шрифта, размер, начертания; отступы, выравнивание, межстрочный интервал и др.  Стиль графических элементов   задается формой, размером, цветом, фактурой материала и т. д.

В редакторе FrontPage для оформления документов разработаны шаблоны – Темы.

Темой называется специально разработанный компьютерным дизайнером набор элементов оформления и цветовых схем документа.

 С помощью меню Файл → Создать в появившемся окне Шаблоны веб-узлов выберем Одностраничный веб-узел  (рис. 3.7).

Для облегчения подбора элементов оформления и цветовых схем используем готовый шаблон оформления – тему.

С помощью меню Формат → Тема в появившемся диалоговом окне выберем, например, тему Горизонт и укажем  Применить как тему по умолчанию.
Тему можно применять к отдельным страницам, а также ко всему сайту. В последнем случае при создании каждой новой страницы тема устанавливается автоматически.

?
1.    Для чего предназначен редактор FrontPage?
2.    Назовите основные элементы интерфейса редактора FrontPage. Каково их назначение?
3.    Для чего используется Тема при оформлении веб-страницы?

 
Рис. 3.7

                                                 3.4. Форматирование текста  и вставка изображений в редакторе FrontPage

3.4.1. Форматирование текста

Форматирования текста в редакторе FrontPage осуществляется с помощью панели инструментов Форматирование, а также окон Формат (рис. 3.8) и Абзац (Рис. 3.9).

      
Рис. 3.8    Рис. 3.9
Выделив текст в редакторе FrontPage (выполняется аналогичноWord)  в окне Шрифт можно выбрать его имя, начертание и указать размер, а в окне Абзац указать выравнивание, отступы и межстрочный интервал. Примеры форматированного текста представлены на рисунках 3.8 и 3.9. Важно помнить, что отображение веб-страницы на экране зависит от разрешения монитора и настройки браузера. Поэтому размер шрифта принято задавать в условных единицах от 1 до 7. Если размер шрифта не указан, то по умолчанию он принимается равным 3, что при установке в браузере Размер шрифта средний  соответствует 12 пунктам.
Для привлечения внимания к информации создается бегущая строка с помощью цепочки действий: Вставка → Веб-компонент → Бегущая строка. В окне Cвойства бегущей строки (Рис 3.10) вводится текст, задается направление и скорость движения, время задержки и другие параметры.

 
Рис. 3.10

3.4.2. Вставка изображений

Размещение изображений на веб-странице производится аналогично тому, как это выполнялось в редакторе Word (команда меню ВставкаРисунок.)
Задавать параметры изображения на странице можно в окне Положение, которое активизируется с помощью меню Формат Положение (Рис. 3.11).  Можно задать размер изображения (в пикселях или процентах), выравнивание, толщину границы, обтекание текстом и другие параметры.
Важно подчеркнуть, что все изображения, которые мы видим на веб-страницах, хранятся в отдельных файлах, а на самой странице имеются лишь ссылки на соответствующие файлы.

 
Рис. 3.11
В зависимости от обтекания текстом вставляемые изображения могут располагаться различными способами (Рис. 3.12).

 Рис. 3.12

Регулирование позиции изображения относительно других элементов веб-страницы, например текста, осуществляется в диалоговом окне, которое активизируется с помощью меню Формат→  Положение.
В редакторе FrontPage предусмотрена возможность простейшей обработки изображений (коррекция яркости и контрастности, повороты, обрезка  и т.д.). Для этого используется панель Рисунки  аналогичная текстовому редактору Word.

?
1.    Какие возможности по форматированию текста имеет FrontPage?
2.    Как задается размер шрифта на веб-страницах?
3.    Как создать бегущую строку?
4.    Как выполняется размещение изображения на веб-странице?
5.    Каким образом выполняется настройка изображения?

Упражнения

1. Наберите и оформите в редакторе FrontPage текст следующего диалога:

Давайте улыбнемся!
    На  работу пришла новая Мышь. Вечером она решила расспросить Клавиатуру о работниках.
•    Слушай, Клав, а кто у Вас главный?
•    А сама как думаешь?
•    Ну, Сервер, наверное…
•    Нет, судя по зарплате, он не является главным.
•    Тогда Принтер… Цветной, лазерный световой…
•    Нет, Мышь, опять мимо. Вот видишь, на столе маленький с красными глазками? Ладно, скажу -  Модем. Он является самым главным, так как связывает нас со всем миром.

2.  Вставьте  в редакторе FrontPage изображение, предложенное учителем,  и наберите текст, выполнив выравнивание.
 


                                                          3.5. Вставка таблицы в редакторе FrontPage

На веб-странице  в редакторе FrontPage вставляются таблицы, которые часто используются для структурирования информации.
С помощью таблиц можно  выполнять верстку в несколько колонок, применять  эффекты состыковки картинки и фона, размещать  тонкие линии на всю ширину или высоту странички и т.д.

Для вставки таблицы можно воспользоваться стандартной панелью инструментов, однако наиболее полно команды работы с таблицами представлены в меню Таблица. В диалоговом окне Вставка таблицы можно указать не только количество строк и столбцов таблицы, но и способ выравнивания, цвет фона ячеек, цвет и толщину границ, интервал между ячейками и другие параметры  (рис. 3.13).

 
Рис. 3.13 


?
1.    Для чего используются таблицы на веб-страницах?
2.    Как  вставить таблицу в редакторе FrontPage?

Упражнение 

Создайте в редакторе FrontPage фрагмент сайта «Беларускія пісьменнікі» из четырех веб-стран:
а) главная веб-страница – «Беларускія пісьменнікі» (файл index.htm), как показано на рисунке 3.3;
б)  веб-страница - «Якуб Колас» (файл Kolas.htm), как показано на рисунке 3.6;
в) веб-страница «Янка Купала» (файл Kupala.htm), как показано на рисунке 3.14;

 
Рис. 3.14.

г)  веб-страница «Максім Багдановіч» (файл Bagdanovich.htm), как показано на рисунке 3.15.
 

Рис. 3.15

                                                  3.6.  Создание гиперссылок в редакторе FrontPage

Для создания гиперссылки требуется  выделить ее  в документе (определить элемент привязки) и задать адрес перехода по данной ссылке. В качестве элементов привязки могут выступать слова, группы слов, изображения.

Текстовые ссылки обычно отмечаются цветом и подчеркиваются, а графические   иногда обводятся рамкой. Благодаря этому они отличаются от обычного текста и других элементов страницы.

Ссылки могут обеспечивать переход к веб-страницам или иным документам, например, рисункам, презентациям, видеофрагментам, расположенным как на данном сайте (внутренние ссылки), так и на других сайтах (внешние ссылки). Переходы внутри документа выполняют внутристраничные гиперссылки. Они облегчают навигацию по длинной странице, например, быстрый переход из конца страницы в начало.

Перед созданием внутристраничных ссылок нужно сначала расставить закладки. Для этого курсор устанавливается на нужное место веб-страницы. С помощью меню Вставка→Закладка вызывается диалоговое окно Закладка, в котором вводится имя закладки, например Вниз (рис. 3.16).

Для организации гиперссылки необходимо выделить элемент привязки (текст или рисунок), с помощью кнопки на Стандартной панели инструментов или меню Вставка →Гиперссылка вызвать диалоговое окно, в котором указать адрес перехода (адрес веб-страницы или электронной почты, имя файла или документа, а в случае внутренней ссылки имя закладки) (рис. 3.16).

 
Рис. 3.16
По умолчанию новый документ открывается в текущем окне браузера, однако из окна Добавление гиперссылки можно щелкнуть по кнопке Выбор рамки и в открывшемся окне Конечная рамка задать открытие нового документа в новом окне  (Рис. 3.17).

 
Рис. 3.17
Заметим, что в редакторе FrontPage создание гиперссылок выполняется в режиме Конструктор, а проверить работу гиперссылок можно в режиме Просмотр.

?
1.    Какие элементы могут выступать в качестве гиперссылки?
2.    На что может указывать гиперссылка?
3.    В чем различие внутренней, внешней и внутристраничной гиперссылок?

Упражнение

Создайте в редакторе FrontPage текстовые и графические гиперссылки между страницами веб-сайта «Беларускія пісьменнікі», как показано на рисунке 3.18

Рис.3.18

                                                                              3.8. Публикация сайта

Публикацией сайта называют его размещение на сервере или локальном компьютере с возможностью вызова из сети (глобальной или локальной).

Некоторые серверы бесплатно предоставляют дисковое пространство под сайт, например, www.narod.ru. Процесс публикации сайта заключается в переносе файлов вашего сайта на этот сервер. Адрес перенесенного сайта может иметь вид, например, www.belpisateli.narod.ru.

Для публикации сайта, подготовленного в редакторе FrontPage, необходимо с помощью меню Файл → Опубликовать узел вызвать диалоговое окно Свойства удаленного веб-узла (рис. 3.19).
Для размещения созданного сайта на сервере narod.ru в строке Расположение удаленного веб-узла следует указать адрес ftp-узла сервиса narod.ru, который для всех пользователей является одинаковым: ftp://ftp.narod.ru (рис. 3.19).

 
Рис. 3.19.

 В дальнейшем  пользователю необходимо ввести имя и пароль в окне Требуется имя и пароль (рис. 3.20).

 
Рис. 3.20
В открывшемся новом окне слева будут размещены файлы и папки созданного локального веб-узла, а справа файлы и папки удаленного веб-узла,  например странички сайта «Беларускія пісьменнікі» (рис. 3.21).

 
Рис. 3.21

После указания режима все файлы локального веб-узла копировать на сервер необходимо нажать  кнопку Опубликовать веб-узел.

Когда копирование всех файлов завершится,  пользователь может просмотреть размещенный в сети сайт. Для этого в строке браузера вводится адрес, например www.belpisateli.narod.ru

?
1.    Что понимают под публикацией сайта?
2.    Как опубликовать сайт?

Упражнение

Опубликуйте сайт «Беларускія пісьменнікі» на локальном компьютере или доступном бесплатном сервере, который укажет  учитель.

Надіслано учителем інформатики Міжнародного ліцею "Гранд" Чебаном Л.І.

_{Інформатика скачати, завдання школяру 11 класу, матеріали з інформатики для 11 класу онлайн}