Internet в профессиональной деятельности


The Presentation inside:

Slide 0

Принципы реализации Web-сайтов Составители: Э. П. Чернаков Л.П. Дьяконова Internet в профессиональной деятельности


Slide 1

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


Slide 2

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


Slide 3

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


Slide 4

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


Slide 5

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


Slide 6

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


Slide 7

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


Slide 8

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


Slide 9

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


Slide 10

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


Slide 11

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


Slide 12

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


Slide 13

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


Slide 14

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


Slide 15

Авторитетность Только проверенные материалы Авторство документов Информация о статусе документов


Slide 16

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


Slide 17

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


Slide 18

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


Slide 19

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


Slide 20

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


Slide 21

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


Slide 22

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


Slide 23

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


Slide 24

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


Slide 25

Структура учебного сайта Школа События Люди


Slide 26

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


Slide 27

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


Slide 28

Заголовки 6 уровней заголовков от <H1> … </H1> до <H6>... </H6> Атрибут ALIGN Значения: CENTER LEFT RIGHT <BODY> <H1 ALIGN = CENTER> ШКОЛА </H1> ….. </BODY>


Slide 29

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


Slide 30

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


Slide 31

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


Slide 32

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


Slide 33

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


Slide 34

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


Slide 35

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


Slide 36

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


Slide 37

Пример таблицы <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> <TR> <TD> <UL> <LI> Петр Петров </LI> </UL> </TD> <TD ALIGN = "CENTER"> 259-8976 </TD> <TD> http://www.msu.ru </TD></TR> <TR> <TD> <UL> <LI> Николай Николаев </LI> </UL> </TD> <TD ALIGN = "CENTER"> 145-8923 </TD> <TD> http://www.pro-inv.ru </TD></TR> </TABLE>


Slide 38

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


Slide 39

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


×

HTML:





Ссылка: