Веб-страницы

ИИМОП МО 11-11

СОДЕРЖАНИЕ

ВВЕДЕНИЕ……………………………………………………………………………3

ГЛАВА 1.СОЗДАНИЕ WEB-СТРАНИЦ…………………………………………...4

1.1 Создание новой   web-страниц……………………………………………………4

1.2 Редактирование  и оформление web-страницы………………………………...6

1.3 Сохранение web-страницы....................................................................................11

ГЛАВА 2 ЭЛЕМЕНТЫ WEB-СТРАНИЦ И ИХ ФОРМАТИРОВАНИЕ..........12

2.1 Добавление и исследование гиперссылок. Вставка горизонтальных линий. Добавление фильмов и звуков. ..............................................................................................12

2.2 Фон .Тема..................................................................................................................18

2.3 Настройка параметров web-страницы................................................................19

2.4 Публикация  web-страницы....................................................................................21

ЗАКЛЮЧЕНИЕ ............................................................................................................24

СПИСОК ЛИТЕРАТУРЫ...........................................................................................25

 

 

 

 

 

 

 

 

 

ВВЕДЕНИЕ

 

World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

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

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

Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера. И я, в данном случае, не являюсь исключением, потому и выбрала такую тему для своей курсовой работы.

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

Также в данной работе мною рассмотрены основы языка программирования Web-страниц – HTML, который является общепринятым стандартом WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами ее правильного оформления.

 

 

 

 

ГЛАВА 1.СОЗДАНИЕ WEB-СТРАНИЦ.

1.1 Создание новой   web-страниц.

В качестве редакторов, упрощающих создание Web-сайтов, можно использовать приложения Microsoft Office – Word, Excel, PowerPoint и др. При  этом пользователь может не знать  язык HTML и иметь привычную среду  для оформления документа – WYSIWYG (что вижу, то и получаю). Огромное количество людей, использующих Word в  своей повседневной работе, становятся потенциальными разработчиками HTML-документов.

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

Первый способ созданияHTML-документов достаточно прост – надо начать создание документа "с нуля" и только следовать советам Мастера и использовать те средства, которые имеются в меню программы.

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

Одной из отличительных особенностей HTML-документов является то, что сам  документ содержит только текст, а все  остальные объекты встраиваются в документ в момент его отображения  Браузером с помощью специальных  тэгов и хранятся отдельно. При  сохранении HTML-файла в месте размещения документа Word создает на диске папку, в которую помещает сопутствующие  ему графические элементы оформления. Например, при сохранении файла с  рисунками frieds.htm Word создает папку frieds.files, в которой и разместит все рисунки.

В соответствии с этим при создании сайта – группы взаимосвязанных Web-страниц – рекомендуется помещать сайт в отдельную папку и при  перемещении или публикации сайта  строго сохранять всю внутреннюю структуру папок.

При подготовке публикации в Интернет материалов, созданных в Word, полезно  знать особенности преобразования в формат HTML. Некоторые из них  приводятся ниже (табл. 8.1).

Таблица 8.1

Конвертирование элементов оформления вHTML

Элемент документаWord	ПреобразованиеWord ® HTML
Размеры шрифтов	ВWord изображаются шрифты от 9 до 36 пунктов. Размеры шрифтов HTML изменяются от 1 до 7 и служат Браузеру указанием  на размер шрифта
Текстовые эффекты:  приподнятый, с тенью, уплотненный и т.д.	Текстовые эффекты не сохраняются, но сам текст остается
Начертания:  полужирный, курсив, подчеркивание	Начертания шрифта остаются, но некоторые виды подчеркивания  преобразуются в сплошную линию
Анимация текста	Анимация не сохраняется, но текст остается. Для придания тексту анимационного эффекта можно  использовать бегущую строку (панель "Web-компоненты")
Графика	Изображения преобразуются  в форматGIF или JPEG, если они не были сохранены до этого в таких  форматах. Линии преобразуются в  горизонтальные линии
Графические объекты: автофигуры, фигурный текст, надписи и тени	Объекты преобразуются  в файлы форматаGIF. В среде редактирования Web-страницы можно вставить графические  средства "Вставка" – "Рисунок"
Таблицы	Таблицы преобразуются, однако параметры, не поддерживаемыеHTML, не сохраняются (например, цветные границы и границы  переменой ширины)
Нумерация страниц и колонтитулы	Так как документHTML считается  одной Web-страницей, то понятие колонтитулов отсутствует и нумерация страниц не сохраняется
Поля страниц и многоколонный  текст	Чтобы сохранить разметку страницы, следует использовать таблицы
Стили	Определенные пользователем  стили преобразуются в прямое форматирование, если оно поддерживаетсяHTML

При необходимости вставить на HTML-страницу собственные тэги, в Word предусмотрено непосредственное редактирование HTML-кода. Это можно сделать, вызвав окно редактора через меню "Вид" – "Источник HTML". До того как перейти в этот режим, следует сделать сохранение файла. После завершения редактирования перед закрытием окна, файл также нужно сохранить.

Другая возможность перехода в  режим редактирования НТМL – это  открыть документ в Браузере и  вызвать меню "Вид" – "В виде HTML". По умолчанию редактирование выполняется в Блокноте.

Хотя Word отображает документ практически  в том же виде, в каком он в  дальнейшем будет находиться в Браузере, предварительный просмотр Web-документа  можно выполнить, не покидая Word.

В меню "Вид" установлены способы  отображения документа Word (рис.8.1). При  выборе "Web-документ" файл отображается так, как будет выглядеть в  Браузере, установленном на компьютере. Через меню "Вид" можно вернуться  к обычному режиму работы с документом.

Рис. 8.1. Способы отображения  документаWord

 

 

 1.2 Редактирование и оформление web-страницы.

Редактирование web-страниц

Редактирование web-страницы можно  начать с определения ее заголовка  и основных свойств с помощью  команды Формат => Заголовок и свойства страницы. В результате открывается диалоговое окно Свойства страницы (рис.) в котором можно задать следующие параметры.

Рис. Окно Свойства страницы

Поле Заголовок содержит название web-страницы, которое будет отображаться в строке заголовка браузера.

Поле Автор позволяет указать информацию  об авторе, которая запишется в теге META.

Поле Описание дает возможность задать краткое описание содержимого, которая запишется в теге META.

Флажок Шаблон позволяет преобразовать web-страницу в шаблон.

Поле Язык определяет язык страницы, который можно выбрать с помощью кнопки Выбрать язык.

Ниспадающее меню Направление письма позволяет определить направление текста (слева направо или справа налево).

Поле Кодировка задает кодировку web-страницы с помощью кнопки Выбрать кодировку (для страниц на русском языке рекомендуется использовать windows-1251).

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

<head>

<meta content=”text/html; charset=windows-1251″  http-equiv=”content-type”>

<title>гиперссылки</title>

<meta content=”Ющик Е.В.” name=”author”>

<meta content=”пример гиперссылки” name=”description”>

</head>

Фон web-страницу можно сделать цветным. Цветовое оформление web-страницы задается командойФормат =>Цвета и фон страницы… (рис.).

Рис. Окно диалога Цвета и фон  страницы

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

В поле Фоновое изображение можно задать файл, который будет использоваться как фоновое изображение. Удобно для этих целей использовать кнопку Выбрать файл…. При щелчке по этой кнопке открывается стандартное диалоговое окно Выберите файл изображения, в котором выбирается графическое фоновое изображение для web-страницы. Для того чтобы web-сайт можно было переносить на другой компьютер или web-сервер выбранный графический файл должен лежать в одной из папок сайта, и флажок Относительный URL должен быть включен.

Кнопка Дополнительно… открывает окно Редактора дополнительных свойств.

Щелкнув по кнопке ОК, получим следующий  вид страницы (рис.).

Оформление web-страниц

Изображения, фоновые звуки и видеозаписи  улучшают оформление web-страниц, но их нельзя внедрить на web-страницу как в документ Microsoft Office. Эти элементы хранятся в отдельных файлах. Диаграммы и рисунки можно послать в World Wide Web после конвертирования в формат Graphics Interchange Format, JPEG и WMF. Рисунки можно конвертировать из одного формата в другой. Для редактирования сканированных изображений рекомендуется использовать Microsoft Photo Editor.

Цвет  текста можно задать в окне команды Шрифт (Font) из меню Формат (Format), открыв вкладку Шрифт (Font). На web-страницах таблицы по умолчанию не имеют границы.

Помещаемые  на страницу графические маркеры  сохраняются как отдельные файлы  там же, где и web-страница. Эти файлы следует перемещать вместе с web-страницами, чтобы гиперссылки работали правильно, и изображения появлялись на страницах. Например, маркеры списка сохраняются как Bullet.gif, Bullet1.gif, Bullet2.gif, и т.п.

1.3 Сохранение  web страницы.

Перед тем как сохранять HTML-документ, приведем две рекомендации касательно будущего имени файла. Имя файлу рекомендуется давать на английском языке. 
Не используйте в именах файлов символы пробела (My first page .htm), так как в некоторых старых компьютерных системах они могут просто не почитаться. Вместо пробелов можно использовать символ подчеркивания, например my_f irst__page.htm, либо каждую первую букву следующего слова делать прописной, например MyFirst Page. htm.

Чтобы сохранить HTML-документ, выполните такую процедуру. 
1.  В окне Блокнот (см. рис. 2.11) выберите команду меню Файл. В открывшемся списке выберите Сохранить как. Если данный файл сохраняется впервые, то на экран будет выведено диалоговое окно Сохранить как (рис. 2.12). 

Рис. 2.12. Вид диалогового  окна Сохранить как

2. В текстовом поле  Имя файла введите имя будущего  проекта (до 255 символов) будьте задать  для сохраняемого файла корректный  формат расширения .htm, а также  заключить в кавычки имя файла,  в противном случае Блокнот  по умолчанию добавит расширение .txt. В нашем примере присваиваем Web-странице имя 
Sample.index.htm.

Добавить имя index.htm необходимо для сохранения “входной” Web-страницы. Дело в том, что серверные технологии устроены так, что, какой бы адрес вы ни вводили для поиска любого сайта на сервере, сначала ищется файл index.htm. Если по указанному адресу такого файла нет, то выводится сообщение, что требуемый документ не найден, если же есть, то открывается “главная” страница сайта.

3.   Проверьте, какая папка установлена по умолчанию в списке Папка. Если эта папка не подходит для сохранения файла, то для выбора нужной папки щелкните в списке Папка и укажите требуемый вариант. 
4.   Щелкните на кнопке Сохранить.

Как уже указывалось, файлы Web-страниц могут иметь и расширение .html. Но, к сожалению, в некоторых старых компьютерных системах такое расширение использовать нельзя. Так исторически сложилось, что раньше в расширении любого файла разрешалось использовать не более трех символов. Поэтому, используя четырех символьное расширение {.html), можно столкнуться с проблемами при чтении или записи подобных файлов.

После первого сохранения нового документа все последующие  изменения этого файла можно  будет сохранять так, как описано  в п. 1, либо просто нажимая комбинацию клавиш <Ctrl+S>. Данные всегда будут  сохраняться в том файле, который  был указан в диалоговом окне Сохранить  как без его открытия.

 

 

 

 

 

 

ГЛАВА 2 ЭЛЕМЕНТЫ WEB-СТРАНИЦ И ИХ ФОРМАТИРОВАНИЕ

2.1 Добавление  и исследование гиперссылок. Вставка  горизонтальных линий. Добавление  фильмов и звуков.

Добавление и  исследование гиперссылок

Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки. 
Гиперссылка создается с помощью универсального тэга, "А" и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница: