31

web - сайты и web - страницы

Embed Size (px)

DESCRIPTION

web - сайты и web - страницы. web - сайт. Публикация во Всемирной паутине реализуется в форме WEB – сайтов. Сайт является интерактивным средством представления информации. - PowerPoint PPT Presentation

Citation preview

Page 1: web - сайты  и  web - страницы
Page 2: web - сайты  и  web - страницы

Публикация во Всемирной паутине реализуется в форме WEB – сайтов.Сайт является интерактивным средством представления информации.

WEB - сайт состоит из WEB – страниц, объединенных гиперссылками. WEB – страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.

Page 3: web - сайты  и  web - страницы

•Название сайта должно отражать не только общую тематическую направленность, но и конкретные отличительные особенности вашего сайта.

Page 4: web - сайты  и  web - страницы

Какова цель создания вашего сайта?

Какие новые возможности предоставляет ваш сайт?

Кто будет основной (и вторичной) аудиторией вашего сайта?

Какого они возраста?

Чем они занимаются?

Сколько времени они предположительно проведут на вашем сайте?

Что может привлечь их повторно посетить ваш сайт?

Page 5: web - сайты  и  web - страницы

Общая характеристика данных, включаемых в сайт.

Предположительный объем и предполагаемое содержание текстовой части.

Фотографии, рисунки, диаграммы, анимации и звуки, которые вы предполагаете включить в сайт.

Какая часть данных, включенных в сайт будет обновляться.

Периодичность обновления данных сайта.

Page 6: web - сайты  и  web - страницы

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

Логическая структура сайта должна естественным образом отображать логическую структуру информации.

Для представления логической структуры сайта можно воспользоваться древовидными организационными диаграммами.

Page 7: web - сайты  и  web - страницы

ВСЕ О КОМПЬЮТЕРЕ

ПРОГРАММЫ СЛОВАРЬ КОМПЛЕКТУЮЩИЕ

Устройства ввода

Устройства вывода

Память

Процессор

Page 8: web - сайты  и  web - страницы

Где предполагается разместить сайт?

Какие страницы будут обновляться, как часто и кем?

Предполагается ли получение информации от посетителей сайта?

Предполагается ли регистрация посетителей сайта

Page 9: web - сайты  и  web - страницы
Page 10: web - сайты  и  web - страницы

заголовок

текст рис.

навигация

анима-ция

E-MALE:

Page 11: web - сайты  и  web - страницы

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

HTML – код страницы помещается внутрь контейнера

Заголовок WEB – страницы заключается в контейнер

Название WEB – страницы содержится в контейнере

Основное содержание страницы помещается в контейнер

<HTML> </HTML>

<HEAD> </HEAD>

<TITLE> </TITLE>

<BODY> </BODY>

Page 12: web - сайты  и  web - страницы

Создание Создание WEBWEB сайта сайта

1.1. На диске На диске DD создайте папку создайте папку КомпьютерКомпьютер2.2. Откройте окно текстового редактора Откройте окно текстового редактора БлокнотБлокнот3.3. В окне приложения введите В окне приложения введите HTMLHTML – код – код WEBWEB – страницы. – страницы.4.4. Сохраните файл под именем Сохраните файл под именем index.htmlindex.html5.5. Загрузите этот файл в окно браузера для просмотраЗагрузите этот файл в окно браузера для просмотра..

<HTML><HTML> <HEAD><HEAD> <TITLE> КОМПЬЮТЕР </TITLE><TITLE> КОМПЬЮТЕР </TITLE> </HEAD></HEAD> <BOD<BODYY> ВСЕ О КОМПЬЮТЕРЕ </BODY>> ВСЕ О КОМПЬЮТЕРЕ </BODY></HTML></HTML>

Page 13: web - сайты  и  web - страницы
Page 14: web - сайты  и  web - страницы
Page 15: web - сайты  и  web - страницы

Форматирование текстаФорматирование текстаРазмер шрифта задается тэгами от Размер шрифта задается тэгами от <H1><H1> (самый крупный) (самый крупный)

до до <H6> <H6> (самый мелкий). (самый мелкий).

Некоторые тэги имеют атрибуты, которые являются Некоторые тэги имеют атрибуты, которые являются именами свойств и принимают определенные значения.именами свойств и принимают определенные значения.

ALIGNALIGN ==“ center”“ center” – – тип выравнивания заголовкатип выравнивания заголовка

С помощью тега С помощью тега FONT FONT можно задать параметры можно задать параметры форматирования шрифта.форматирования шрифта.

FASE=“arial”FASE=“arial”-- гарнитура шрифта гарнитура шрифта SIZE=4SIZE=4 – размер шрифта – размер шрифтаCOLOR=“blue”COLOR=“blue” – цвет шрифта – цвет шрифта

Page 16: web - сайты  и  web - страницы

Заголовок целесообразно отделить от остального

содержания страницы горизонтальной линией – тэг <HR> Разделение текста на абзацы производится с помощью

контейнера <P> <//P>

Page 17: web - сайты  и  web - страницы

6.6. В контейнер В контейнер <BODY><BODY> вставить последовательность. Просмотреть результат в вставить последовательность. Просмотреть результат в

браузере.браузере.<BODY>

<FONT COLOR = "BLUE">

<H1 ALIGN="CENTER"> ВСЕ О КОМПЬЮТЕРЕ </H1>

</FONT>

</BODY>

<HR>

<BODY>

<FONT COLOR= "green">

<H2> <P ALIGN="LEFT"> На этом сайте вы можете получить информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>

<P ALIGN="RIGHT"> Терминологический словарь познакомит вас с

компьютерными терминами. </P>

</BODY>

Page 18: web - сайты  и  web - страницы
Page 19: web - сайты  и  web - страницы
Page 20: web - сайты  и  web - страницы

Вставка изображенийВставка изображенийНа WEB – страницы обычно помещают изображения

трех форматах – GIF, JPG, PNG. Если рисунок сохранен в другом формате, то его преобразовывают в графическом редакторе (PHOTO EDITOR).

Для вставки изображения используется тэг <IMG> с атрибутами:

SRC=“computer.gif”, который указывает место хранения файла.

ALT=“компьютер” – поясняющий текстРасположить рисунок относительно текста позволяет

атрибут ALIGN=“ritght”

Page 21: web - сайты  и  web - страницы

6.6. В контейнер В контейнер <BODY><BODY> вставить перед абзацами вставить перед абзацами

текста тэг вставки изображения, просмотреть текста тэг вставки изображения, просмотреть результат в браузере.результат в браузере.

<IMG SRC="computer.gif" ALT="Компьютер" ALIGN="RIGHT"> <IMG SRC="computer.gif" ALT="Компьютер" ALIGN="RIGHT">

Page 22: web - сайты  и  web - страницы
Page 23: web - сайты  и  web - страницы
Page 24: web - сайты  и  web - страницы

Гиперссылки на WEB–страницахПервая страница должна предоставить посетителю WEB – сайта

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

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

Каждая страница будет содержать следующий HTML- код:

<HTML><HTML>

<HEAD><HEAD>

<TITLE> ЗАГОЛОВОК СТРАНИЦЫ</TITLE><TITLE> ЗАГОЛОВОК СТРАНИЦЫ</TITLE>

</HEAD></HEAD>

<BOD<BODYY> ПРОГРАММЫ > ПРОГРАММЫ <</BODY>/BODY>

</HTML></HTML>

Page 25: web - сайты  и  web - страницы

Создать пустые страницыСоздать пустые страницыСоздайте пустые страницы «Программы», «Словарь»,

«Комплектующие» и сохраните их в файлах

SOFTWARE.HTML - ПРОГРАММЫ

GLOSSARY.HTML – СЛОВАРЬ

HARDWARE.HTML - КОМПЛЕКТУЮЩИЕ

Page 26: web - сайты  и  web - страницы

Контейнер гиперссылок <A> <//AA> .

Атрибут HREF=“адрес документа”

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

гиперссылки.гиперссылки.

<P ALIGN="CENTER">

[<A HREF="SOFTWARE.HTML"> ПРОГРАММЫ</A>] &nbsp

[<A HREF="GLOSSARY.HTML"> СЛОВАРЬ</A>] &nbsp

[<A HREF="HARDWARE.HTML"> КОМПЛЕКТУЮЩИЕ</A>] &nbsp

</P>

Page 27: web - сайты  и  web - страницы
Page 28: web - сайты  и  web - страницы
Page 29: web - сайты  и  web - страницы

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

Контейнер адреса <ADRESS> </ADRESS>

Атрибут HREF=“адрес электронной почты”Вставьте в титульную страницу код, создающий ссылку на Вставьте в титульную страницу код, создающий ссылку на

адрес электронной почты.адрес электронной почты.

<ADRESS><ADRESS>

<A HREF="MAILTO:[email protected]"><A HREF="MAILTO:[email protected]">

E-MAE-MAIIL: [email protected]</A>L: [email protected]</A>

</ADRESS></ADRESS>

Page 30: web - сайты  и  web - страницы
Page 31: web - сайты  и  web - страницы