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

Создание WEB сайтов.ppt

  • Количество слайдов: 40

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редактирование HTML-кода • Совсем недавно Web-страницы создавались только вручную, при этом ввод HTML-кода выполнялся Редактирование 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-сайтов

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

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

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

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

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

Абзацы <P> …текст абзаца … </P> <BR> - непарный тег, переход на новую строку Абзацы

…текст абзаца …


- непарный тег, переход на новую строку События Люди

Для дополнительной информации обращайтесь по адресу:

Иванов
Россия, Москва

…Продолжение текста Принципы реализации Web-сайтов

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

Списки <LI> … </LI> теги каждого элемента списка <OL> … </OL> нумерованный список <UL> Списки

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

    Списки определений <DL> … </DL> список определений <DT>…</DT> тег термина <DD>…</DD> тег определения <H Списки определений

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

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

    Гиперссылки: пример Ссылка на страницу Люди в домащней странице Школа События <A HREF = Гиперссылки: пример Ссылка на страницу Люди в домащней странице Школа События Люди Ссылка на e-mail адрес в домащней странице Школа

    Для дополнительной информации обращайтесь по адресу:

    Иванов
    Россия, Москва
    Послать сообщение Принципы реализации Web-сайтов

    Таблицы <TABLE> … </TABLE> <CAPTION> <TH> … </TH> <TR> … </TR> <TD> … </TD> Таблицы