Принципы реализации Web-сайтов Составители:Э. П. Чернаков Л.П. Дьяконова 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-кодаРедактирование 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-текста вручную позволяет исправить ошибки в случае, если редактор FrontPage оказывается недоступным или недостаточно эффективным

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

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

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

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

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

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

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

Принципы реализации Web-сайтов Заголовки 6 уровней заголовков от … до... Атрибут ALIGNЗначения: CENTERLEFTRIGHT ШКОЛА …..

Принципы реализации Web-сайтов Стили Физическое и логическое форматирование События Люди тег размера шрифта можно использовать в Netscape Navigator и Internet Explorer

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

Принципы реализации Web-сайтов Цвет текста RGB - модель 3 байта: Красный Зеленый Синий 000 черный белый синий голубой ШКОЛА

Принципы реализации Web-сайтов Списки … теги каждого элемента списка … нумерованный список … маркированный (ненумерованный) список Атрибут TYPE-тип маркера (DISC CIRCLE SQUARE) (HTML 4.0) По умолчанию TYPE = DISC (не обязательно) ЛЮДИ Иван Иванов Петр Петров Николай Николаев Справочник адресов Москва Петербург Екатеринбург

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

Принципы реализации Web-сайтов Использование гиперссылок Общий вид тега гиперссылки: Выделенный текст ATTRIBUTE - HREF или NAME HREFуказывает на гиперссылку NAME на помеченное место в самом документе Ссылки на ресурсы сети: Netscape Home Page Почта Ссылка на локальный документ, хранящийся в поддиректории: Документ 2

Принципы реализации Web-сайтов Гиперссылки: пример Ссылка на страницу Люди в домащней странице Школа События Люди Ссылка на адрес в домащней странице Школа Для дополнительной информации обращайтесь по адресу: Иван Иванов Россия, Москва Послать сообщение

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

Принципы реализации Web-сайтов Пример таблицы Москва и москвичи ФИО Телефон Адрес в Интернет Иван Иванов Петр Петров Николай Николаев

Принципы реализации Web-сайтов Включение изображений Другие атрибуты: ALTзадает альтернативный текст HEIGHT WIDTHразмер изображения в пикселах ALIGN значения: TOP BOTTOM LEFT RIGHT MIDDLE - выравнивание по той строке текста, в которую включен тег IMG ISMAPкарта-изображение

Принципы реализации Web-сайтов Изображения - гиперссылки Наряду со ссылкой-изображением следует всегда давать ссылку в виде текста: Москва