Введение в технологию создания Web-сайтов 1
Понятие Web-сайта Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), -серверах на которых установлено специальное программное обеспечение. Значительная часть этой информации организованна в виде Web-сайтов. Каждый -сайтов из них имеет свое имя (адрес) в Internet. 2
Web-сайт - это информация (представленная в определенном виде), которая располагается на Web-сервере и имеет свое имя (адрес). Web-сайт представляет собой некоторый набор текстовой и графической информации, организованный в виде определенного количества веб-страниц, связанных между собой гипертекстовыми ссылками. 3
Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами На Ваших компьютерах установлен браузер Internet Explorer В зависимости от того, какое имя сайта мы зададим в строке "Адрес", браузер будет загружать в свое Адрес окно соответствующую информацию 4
Web-сайт состоит из связанных между собой Web-страниц. 5
Web-страница представляет собой текстовый файл с расширением *. htm, который содержит текстовую информацию и специальные команды - HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера. 6
Вся графическая, аудио- и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы с расширениями *. gif, *. jpg - графика, *. mid, *. mp 3 - звук, *. avi - видео. В HTML-коде страницы содержатся только указания на такие файлы. 7
Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице. Переход между страницами Web-сайта в браузере осуществляется с помощью гиперссылок. 8
Ø Гиперссылка представляет собой выделенный фрагмент текста или изображения, при наведение на который указатель мыши меняет свой вид. Ø Для организации гиперссылки в содержимое Webстраницы вставляется специальный HTML-код, содержащий адрес страницы. Структура создаваемого Web-сайта зависит от того, как связаны между собой его страницы (линейная, иерархическая, смешанная). 9
При планировании структуры Web-сайта основным критерием является то, насколько легко пользователи могут получить нужную информацию. Рекомендуется: ü На первой (титульной) странице размещать заголовок сайта, ссылки на страницы с основной информацией и некоторые общие сведения ü Ограничивать длину страниц 3 -4 экранами, первая страница - 1 экран. ü При необходимости со страниц содержащих основную информацию организовывать ссылки на страницы с более подробной информацией ü На всех страницах сайта иметь ссылку на титульную страницу ü Оформлять все страницы в едином стиле 10
Изображения на Web-страницах Графика - это визуальное средство подчеркивания и выделения информации, раскрываемой текстом Webстраницы. Графические объекты Внешний вид и привлекательность сайта в значительной мере зависит от наполняющей его графики. 11
Подготовка изображений для размещения в WWW § Пути получения графического изображения: 1 создание изображения в каком-либо графическом редакторе ; 2 - поиск в библиотеках графических изображений (Clip. Art, Internet), 3 - сканирование с печатного экземпляра. § Большая часть времени просмотре Webстраницы в браузере тратится на загрузку изображений. Поэтому не стоит перегружать страницу графикой не несущей смысловой нагрузки. § При размещении больших графических файлов на сайте рекомендуется поместить о них текстовую информацию с указанием объема 12
Используемые форматы графических изображений: § GIF (Graphic Interchange Format) формат графического обмена. GIFфайлы - это файлы растровых изображений, в которых используется не более 256 цветов. (прозрачная, анимированная графика и рисунки). § JPEG (Joint Photographic Experts Group) - JPEG - файлы представляют собой растровые изображения, в которых может быть использовано до 16. 7 млн. цветов. При каждом сохранении такого файла качество изображения ухудшается. (фотографии) 13
Используемые форматы графических изображений: § PNG (Portable Network Graphics) - растровый формат, предназначенный для хранения и передачи растровых изображений: черно-белых и альфа данных - до 16 бит, а цветных - до 48 бит (truecolor). Он использует прогрессивный метод сжатия без потерь, позволяет сохранять в файле палитру, текстовую информацию и обеспечивает прозрачность. 14
Как создать привлекательный Web- сайт? Содержание или контент - является одной из самых важных составляющих. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, то можно ставить вопрос о необходимости существования сайта как такового. Дизайн - вторая по важности составляющая хорошего сайта. От дизайна зависит, насколько привлекательны будут странички, т. е. в конечном счете, сколько людей дополнительно захотят прийти и посмотреть на Ваш сайт. Не забывайте, что встречают-то по одежке. 15
Как создать привлекательный Web- сайт? Скорость загрузки Ваших страничек - НИ ОДИН НОРМАЛЬНЫЙ ЧЕЛОВЕК НЕ БУДЕТ ЖДАТЬ ЗАГРУЗКИ ВАШИХ СТРАНИЧЕК В ТЕЧЕНИЕ ЧАСА. Вывод: странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного). 48 Кб - это максимальный объем, который может иметь страничка вместе со всей графикой, находящейся на ней. Если требуется разместить информацию большего размера, то предупредите об этом 16 пользователя или распределите информацию
Как создать привлекательный Web- сайт? Раскрутка web-сайта ü регистрация сайта во всех возможных Поисковых системах мира ü Размещение информации в средствах массовой информации (URL - в газете) ü Упоминание о Вашем сайте на визитках, рекламках, в газетных и журнальных статьях и т. д. ü На web-сайте обязательно должен быть упомянут E-mail для связи с Вами или, в случае его отсутствия, хотя бы номер телефона. 17
Как создать привлекательный Web- сайт? Ясная и логическая структура размещения информации на Вашем сервере - ничто так не утомляет при поиске нужной информации, как плохо структурированные сервера. Отсутствие орфографических и грамматических ошибок - этот пункт можно включить ввиду громадного количества ошибок на свежепоявляющихся web-сайтах. Перечитывайте то, что Вы написали перед выставлением Вашего сервера на всемирное обозрение! 18
Этапы разработки Web-сайта: Ø Планирование. Определяется содержание каждой страницы сайта и связи между ними. Осуществляется поиск ресурсов в Internet по выбранной теме. Ø Реализация. Подготовка текстового и графического материала. Организовываются ссылки между файлами сайта. Ø Тестирование. После того как Web-сайт создан, необходимо проверить правильность переходов со страницы на страницу. Просмотреть свой Web-сайт другим браузером. Просмотреть сайт на компьютере с другими техническими характеристиками. Ø Публикация. Размещение сайта в Internet. Ø Рекламирование. Сообщить адрес Вашего сайта как можно большему числу людей. Ø Сопровождение. Обновление информации, расширение материала, улучшение дизайна. 19
При разработке Web-сайта в первую очередь необходимо определить с какой целью он создается Т. е. ответить на вопросы "о чем? " и "для чего? ". Web-сайты подразделяют на: q Личные (персональные) q Информационные (сайты учебных заведений, организаций) q Сайты дистанционного образования q Коммерческие (Internet-магазины) q Развлекательные 20
Примерная структура Web-сайта 21
Общие представления о языке HTML Web-страница представляет собой гипертекстовый документ. Гипертекст - это текст, в котором имеются ссылки для автоматического перехода на другие тексты – гиперссылки. Для создания Web-страниц используется язык разметки HTML (Hyper. Text Markup Language). 22
HTML (Hyper. Text Markup Language) Он представляет собой набор команд определяющих, в каком виде информация будет отображаться в окне браузера. Команды состоят из заключённых в угловые скобки (< >) тэгов (флагов) и их атрибутов. Почти все команды языка HTML парные и состоят из открывающего (< >) и закрывающего (< / >) тэгов, между которыми располагается содержимое тэга. Они подразделяются на структурные, которые организуют текст и на форматирующие, которые задают его стиль. HTML-код На страничке (в браузере): Обычный шрифт <b>жирный шрифт</b> жирный шрифт <i>курсив</i> курсив 23
Файл, содержащий Webстраницу должен иметь расширение. htm или. html. Для его компоновки можно использовать любой текстовый редактор, сохраняющий "только текст". Картинки и другие нетекстовые компоненты не вставляются в документ непосредственно и хранятся отдельно. Вместо этого в текст Web-страницы вставляется ссылка, указывающая программе просмотра имя файла, содержащего нетекстовый компонент. 24
Процесс создания документа HTML “вручную”, заключается в следующем: 4 Создать минимальную Web-страницу в файле с расширением htm. 4 Вставить внутрь тегов <BODY></BODY> текст. 4 Осуществить логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр. , внешнее их оформление) при помощи тэгов. 4 Внедрить в документ необходимые объекты: рисунки, таблицы, видео клипы, аудио файлов, апплеты Java, скрипты и т. д. при помощи тэгов языка HTML. 4 Вставить гипертекстовые связи. 4 Загрузить готовый документ в программу просмотра и при необходимости продолжить редактирование. 25
При создании Web-страницы следует помнить: 4 В настоящее время применяется стандарт языка HTML … Однако фирмы, разрабатывающие браузеры, включают в них свои собственные тэги, не согласуя между собой введение этих новшеств. Поэтому Web-страницы могут по-разному отображаться браузерами различных фирм. 4 Для создания динамичных, интерактивных страниц, включающих в себя массу нестандартных возможностей, необходимо не только знание языка 26 HTML, но и основ написания
Стандартные тэги языка HTML Общая структура HTML файла <html> <body> тело страницы </body> </html> 27
Часто используемые тэги языка HTML Организация фона на странице <body bgcolor="#? ? ? " background="имя. jpg"> Оформление текста <center>текст</center> - расположение текста посередине страницы <p> - пустая строка - новая строка <b>текст</b> - жирный текст <i>текст</i> - курсив <u>текст</u> - текст с подчеркиванием - пробел <hr> - горизонтальная черта <ol> - нумерованный список <li> текст </ol> Вставка графических изображений <img src="имя. jpg"> Организация гиперссылок 28 <a href="имя. htm">название ссылки</a> гиперссылка на другую страницу или
Программы для создания Web-страниц две категории программы автоматизирующие вставку тэгов, т. е. редактирующие исходный код и программы, работающие по методу WYSIWYG (What you see is what you get) - что видишь, то и получишь. программы не автоматизирующие вставку тэгов, но содержащие основные инструменты для ускорения вставки тегов 29
Наиболее популярные программы для создания Web-страниц: ÿ Microsoft Front Page ÿ Dream Weaver ÿ Home Site ÿ Текстовые редакторы (Блокнот) 30
Создание Web-сайта в Microsoft Front Page предоставляет полный набор средств для разработки и организации Web-сайтов в различных режимах. Задача пользователя сводится к тому, что он располагает тексты, изображения и гиперссылки так, как ему нужно, а Front Page сам генерирует необходимый HTML-код. 31
Алгоритм создания (редактирования) Web-сайта в Microsoft Front Page. ü Запустить программу Microsoft Front Page. ü Создать новый Web-сайт или открыть уже созданный. ü Организовать (отредактировать) структуру Web-сайта в режиме “Навигация”. 32
Алгоритм создания (редактирования) Web-сайта в Microsoft Front Page. ü Отредактировать страницы Web-сайта в режиме “Страница” (в любом порядке): перейти в режим редактирования конкретной страницы; проверить настройки страницы; ввести или вставить текст и отформатировать его; вставить фон, звуковое сопровождение, общие области, таблицы, графические изображения, гиперссылки, панели навигации; добавить анимационные эффекты и компоненты Front Page; сохранить страницу и просмотреть ее в браузере Internet Explorer; продолжить редактирование или перейти к редактированию другой страницы. ü При необходимости добавить новые страницы. 33 ü Закрыть Microsoft Front Page, открыть Web-сайт в браузере Internet Explorer и протестировать его.
Скачать презентацию Введение в технологию создания Web-сайтов 1 Понятие
Технология создания сайтов (33).ppt