Internet в профессиональной деятельности Принципы реализации Web-сайтов

Цели курса: • Научиться проектировать “хорошие” Web-сайты • Ознакомиться с языком HTML • Освоить инструментальные средства MS Office и MS Frontpage • Разработать и опубликовать собственный Web-сайт Принципы реализации Web-сайтов

Этапы создания сайта • • 1. Общее описание сайта 2. Эскизы страниц 3. Разработка и тестирование сайта 4. Анализ результатов Принципы реализации Web-сайтов

Назначение и предполагаемая аудитория • Какова цель создания вашего сайта? • Какие новые возможности предоставляет ваш сайт? • Кто будет основной (и вторичной) аудиторией вашего сайта? • Какого они возраста? • Чем они занимаются? • Сколько времени они предположительно проведут на вашем сайте? • Что может привлечь их повторно посетить ваш сайт? Принципы реализации Web-сайтов

Основные требования к Web-сайтам • • • Содержание Структура Актуальность информации Собственный стиль Авторитетность Принципы реализации Web-сайтов

Содержание – Четкие цели, структурированность материалов – Наличие уникальных ресурсов – Отражает все направления деятельности организации – Интерактивность Принципы реализации Web-сайтов

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

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

Структура – Опирается на специфику содержания – Интуитивно понятна каждому посетителю – Учитывает специфику психологической группы пользователей Принципы реализации Web-сайтов

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

Актуальность информации – Высокая частота обновления – Динамическое создание Web-документов Принципы реализации Web-сайтов

Процедуры поддержки сайта • Где предполагается разместить сайт? • Какие страницы будут обновляться, как часто и кем? • Предполагается ли получение информации от посетителей сайта? • Предполагается ли регистрация посетителей сайта Принципы реализации Web-сайтов

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

Домашняя страница Заголовок О нашей школе После уроков Текст Иллюстрация Новости Элементы навигации Текст Принципы реализации Web-сайтов

Страница второго уровня Заголовок На домашнюю стр. Драмкружок. . . Наши друзья Текст Иллюстрация Дальше. . . Элементы навигации Кружок по фото. . . Текст Иллюстрация Мне еще и петь охота Текст Принципы реализации Web-сайтов Иллюстрация

Авторитетность – Только проверенные материалы – Авторство документов – Информация о статусе документов Принципы реализации Web-сайтов

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

Использование мастеров и шаблонов • Мастера и шаблоны позволяют быстро создать заготовку типового сайта • Достоинства: – экономия времени на разработку дизайна и установление основных гиперссылок • Недостатки: – стандартные решения лишают сайт оригинальности – необходимость приспособления сайта к конкретным задачам • Разработчики WEB-сайтов используют собственные шаблоны для придания всем сайтам «фирменного» вида Принципы реализации Web-сайтов

Построение страниц и включение текста При создании Web-страниц удобно использовать таблицы, позволяющие выполнить: • выравнивание данных путем вставки в ячейки таблицы; • распределение текста и графики по разным колонкам; • создание обрамления вокруг текста или графических изображений; расположение текста по контуру графического изображения; • создание цветного фона для текстового фрагмента или отдельного изображения; Закончив создание Web-страницы, следует проверить, как она будет выглядеть в браузере при разрешении экрана 640 х480 и 800 х600, с 256 цветами, поскольку в настоящее время на многих компьютерах установлено одно из этих разрешений. Принципы реализации Web-сайтов

Включение изображений и активных элементов • Основная часть объема файла Web-страницы обычно приходится на графические и мультимедийные файлы. Для уменьшения влияния объема файла Web-страницы на продолжительность загрузки рекомендуется использовать графические и мультимедийные файлы как можно меньшего объема. • Графические изображения -- важный компонент любой Web-страницы. В Web в основном используются два формата графических изображений GIF и JPEG. Изображения в этих форматах воспроизводятся самими броузерами без использования встраиваемых модулей. • Для подсчета посетителей сайта на домашней странице может быть установлен специальный счетчик. Принципы реализации Web-сайтов

Редактирование HTML-кода • Совсем недавно Web-страницы создавались только вручную, при этом ввод HTML-кода выполнялся в любом текстовом редакторе. Создание Web-страниц таким способом занимало много времени и, как правило, сопровождалось большим числом ошибок. • Сегодня для создания Web-страниц широко применяются специальные редакторы, поддерживающие режим WYSIWYG (what you see is what you get — что видите, то и получаете). При создании Web-страницы соответствующие HTML-коды генерируются автоматически. • Тем не менее, редактирование HTML-текста вручную позволяет исправить ошибки в случае, если редактор Front. Page оказывается недоступным или недостаточно эффективным Принципы реализации Web-сайтов

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

Публикация сайта и проверка на месте • Процесс, который называется публикацией сайта, позволяет перенести содержимое сайта на сервер или осуществить необходимые изменения в сайте. Публикацию сайта желательно проводить после консультаций с администратором WEB-сервера. • После публикации сайт еще раз проверяют в процессе сеанса в Интернет. • Периодически следует анализировать посещаемость файла, актуальность информации, необходимость изменений. • Если предусмотрена возможность получения информации от пользователей (страница обратной связи, почтовый адрес), реакция дожна быть быстрой и адекватной Принципы реализации Web-сайтов

Анализ результатов • Оценка итогов проектирования сайта • Оценка оптимальности логической структуры • Удобства для посетителей сайта • Необходимость модификации сайта • Анализ отзывов • Сложность обслуживания сайта Принципы реализации Web-сайтов

Основные элементы Web-документов • • • Название документа Название организации Навигационная панель Содержание Дополнительная информация Принципы реализации Web-сайтов

Структура учебного сайта Школа События Принципы реализации Web-сайтов Люди

HTML - язык разметки гипертекста • Необходимость знания на базовом уровне • *. html, *. htm - особые текстовые файлы: – коды разметки - теги – работой браузера управляет пользователь – просмотр в различных браузерах • Ограничения – различия в аппаратном обеспечении Принципы реализации Web-сайтов

• Простой HTML-документ <HTML> <HEAD> <TITLE> Школа 1247 </TITLE> </HEAD> <BODY> События Люди </BODY> </HTML> Принципы реализации Web-сайтов

Заголовки 6 уровней заголовков от <H 1> … </H 1> до <H 6>. . . </H 6> Атрибут ALIGN Значения: CENTER LEFT RIGHT <BODY> <H 1 ALIGN = CENTER> ШКОЛА </H 1> …. . </BODY> Принципы реализации Web-сайтов

Стили Физическое и логическое форматирование <STRONG> События Люди </STRONG> <FONT SIZE=2>тег размера <FONT SIZE=4>шрифта <FONT SIZE=5>можно использовать в <FONT SIZE=6>Netscape Navigator и <FONT SIZE=8>Internet Explorer Принципы реализации Web-сайтов

Абзацы <P> …текст абзаца … </P> <BR> - непарный тег, переход на новую строку <STRONG> События Люди </STRONG> <P> Для дополнительной информации обращайтесь по адресу: <P> Иванов <BR> Россия, Москва <P> …Продолжение текста Принципы реализации Web-сайтов

Цвет текста RGB - модель 3 байта: Красный Зеленый Синий 0 0 0 черный 255 255 белый 0 0 255 синий 65 105 225 голубой <BODY> <BODY TEXT ="4169 E 1"> <H 1 ALIGN = CENTER> <FONT COLOR = "0000 FF">ШКОЛА </FONT COLOR></H 1> Принципы реализации Web-сайтов

Списки <LI> … </LI> теги каждого элемента списка <OL> … </OL> нумерованный список <UL> … </UL> маркированный (ненумерованный) список Атрибут TYPE-тип маркера (DISC CIRCLE SQUARE) (HTML 4. 0) По умолчанию TYPE = DISC (не обязательно) <H 1 ALIGN = CENTER> ЛЮДИ </H 1> <UL TYPE = SQUARE> <LI> Иванов 124 -8965 </LI> <LI> Петров 259 -8976 </LI> <LI> Николай Николаев 145 -8923 </LI> </UL> <H 2 ALIGN = CENTER> Справочник адресов </H 2> <OL> <LI> Москва </LI> <LI> Петербург </LI> <LI> Екатеринбург </LI> </OL> Принципы реализации Web-сайтов

Списки определений <DL> … </DL> список определений <DT>…</DT> тег термина <DD>…</DD> тег определения <H 3> Теги списков </H 3> <DL> <DT> Тег UL </DT> <DD> Создает маркированный список </DD> <DT> Тег OL </DT> <DD> Создает нумерованный список </DD> <DT> Тег DL </DT> <DD> Создает список определений </DD></DL> Принципы реализации Web-сайтов

Использование гиперссылок Общий вид тега гиперссылки: <A ATTRIBUTE = «адрес» > Выделенный текст </A> ATTRIBUTE - HREF или NAME HREF указывает на гиперссылку NAME на помеченное место в самом документе Ссылки на ресурсы сети: <A HREF = “http: //www. netscape. com/download/index. html”> Netscape Home Page </A> <A HREF = “mailto: director@school. ru”> Почта </A> Ссылка на локальный документ, хранящийся в поддиректории: <A HREF = “subdir 1/doc 2. htm”> Документ 2 </A> Принципы реализации Web-сайтов

Гиперссылки: пример Ссылка на страницу Люди в домащней странице Школа События <A HREF = "people. htm"> Люди </A> Ссылка на e-mail адрес в домащней странице Школа <P> Для дополнительной информации обращайтесь по адресу: <P> Иванов <BR> Россия, Москва <BR> <A HREF = "mailto: manager@school. ru"> Послать сообщение </A> Принципы реализации Web-сайтов

Таблицы <TABLE> … </TABLE> <CAPTION> <TH> … </TH> <TR> … </TR> <TD> … </TD> Включение таблицы Заголовок колонки Задание строк Задание данных Атрибуты: BORDER Используется с тегом <TABLE> ALIGN По умолчанию столбцы выравниваются по центру UNITS Значения PIXELS или RELATIVE WIDTH Принципы реализации Web-сайтов

Пример таблицы <TABLE BORDER ALIGN = "CENTER" WIDTH = 90% UNITS = "RELATIVE"> <CAPTION> <FONT SIZE = 5> Москва и москвичи </CAPTION> <TH WIDTH = 40%> ФИО </TH> <TH WIDTH = 20%> Телефон </TH> <TH WIDTH = 40%> Адрес в Интернет </TH> <TR> <TD> <UL> <LI> Иванов </LI> </UL> </TD> <TD ALIGN = "CENTER"> 124 -8965 </TD> <TD> http: //www. deal. ru </TD></TR> <TD> <UL> <LI> Петров </LI> </UL> </TD> <TD ALIGN = "CENTER"> 259 -8976 </TD> <TD> http: //www. msu. ru </TD></TR> <TD> <UL> <LI> Николай Николаев </LI> </UL> </TD> <TD ALIGN = "CENTER"> 145 -8923 </TD> <TD> http: //www. pro-inv. ru </TD></TR> </TABLE> Принципы реализации Web-сайтов

Включение изображений <IMG SRC = “имя файла”> Другие атрибуты: ALT задает альтернативный текст HEIGHT WIDTH размер изображения в пикселах ALIGN значения: TOP BOTTOM LEFT RIGHT MIDDLE - выравнивание по той строке текста, в которую включен тег IMG ISMAP карта-изображение <IMG ALT="[Логотип школы]" SRC="log. gif"> Принципы реализации Web-сайтов

Изображения - гиперссылки Наряду со ссылкой-изображением следует всегда давать ссылку в виде текста: <LI> <A HREF = "http: //www. mos. ru/"> <IMG HEIGHT = 32 WIGTH = 32 SRC="mos. gif"> Москва </A> </LI> Принципы реализации Web-сайтов