Кафедра МИ Лекция 10. Разработка Webстраниц 1. Web-технологии. 2. Средства создания Web-страниц. 3. Создание Web-страниц с использованием MS Word. 1
1. Web-технологии. Основные понятия WWW (World Wide Web- Всемирная паутина) — это новейший вид информационных услуг Интернете, который позволяет любому пользователю легко найти и прочитать документы, размещенные на серверах в любой части Интернета. Веб-сайт (Web-site) — это совокупность Web -страничек, объединённых по смыслу и расположенных на одном сервере (Web-узле). Сайт (Web-узел) – совокупность Web–страниц, тематически связанные между собой и расположены на одном сервере. Web–страница – отдельный документ, минимальная адресуемая часть WWW. Web–страница –документ, созданный с помощью языка HTML. Хостинг (Hosting) – процесс размещения сайта или Web–страниц на сервере (хосте) с определенным количеством дополнительных услуг. Браузер – программа, которая считывает данные (документы) с удаленных серверов Интернета и затем их демонстрируют на ПК пользователей. 2
HTML (Hyper. Text Markup Language) — язык разметки гипертекстовых документов - основной способ хранения и передачи документов в Интернет. Представляет собой обычный текстовый файл. В качестве элементов форматирования используются так называемые тэги (tag). Главной особенностью HTML является способность использовать гиперсвязи (links), благодаря которым возможны ссылки на другие документы, как локальные, так и находящиеся на другом конце земного шара, а также внедрение в документы изображений, звука, видео и т. д. HTTP (Hyper Text Transfer Protocol) — протокол передачи файлов, подобный FTP, но со встроенным идентификатором типа передаваемой информации. Главным образом используется в WWW. Гипертекст – текст, представленный в виде связных блоков текста. Переходы между блоками осуществляются с помощью гиперссылок. Гиперссылка – выделенный фрагмент гипертекста (графический объект), который содержит указатель (адрес) на другой сервер, другую Web-страницу или блок (фрагмент) документа. WYSIWYG (What You See Is What You Get) – принцип точного соответствия изображения на экране дисплея и документа, отпечатанного на принтере. 3
Методика создания сайта фирмы Принятие решения о создании сайта Маркетинговый анализ сайта Разработка схемы и дизайна сайта Программирование сайта Размещение (публикация) сайта на сервере (хостинге) Эксплуатация и сопровождение сайта 4
Принятие решения Веб-сайт– это представительство (лицо) любой фирмы в Интернете. Для реализации решения должны быть технические средства (ПК, линии связи, ПО). Предварительно должен быть проведен анализ рынка. Четко должны быть сформулированы цели и задачи, которые должны решаться при наличии сайта. Маркетинговый анализ обеспечивает эффективное функционирование сайта. Анализ осуществляется в 2 -а этапа: На 1 -м этапе - изучаются требования по разработке сайта и четко формулируют цель и задачи. На 2 -м этапе - проводится анализ потенциальных пользователей сайта, спроса на товары и услуги. При этом изучаются сайты конкурентов. Выявляются их преимущества и недостатки. Анализируется политика, проводимая конкурентами в Интернете. 5
Разработка схемы и дизайна сайта При разработке сайта нужно обеспечить: информативность, простоту навигации, эстетику дизайна, помещение на подходящий хостинг. Информативность обеспечивается не заголовками и красочным оформлением, а наличием на страницах сайта нужной и интересной информации. Простота навигации по сайту обеспечивается быстротой поиска нужной информации. Любого человека в первую очередь привлекает внимание все красивое и поэтому страницы сайта должны быть эстетически правильно оформлены. Сайт должен быть помещен на известном хостинге, который обеспечивает всеми необходимыми услугами (электронной почтой, сбором статистики и т. п. ). 6
Схема сайта отражает содержимое страниц и их взаимосвязи (через гиперссылки). Дизайн сайта Дизайн обеспечивает удобство работы пользователя с сайтом. Дизайн выполняет не только эстетическую роль, он еще и помогает восприятию информации. При этом должны быть: выделены нужные для постоянного применения элементы; обеспечиваться легкость чтения текста и быстрый поиск информации; применяться приятная цветовая гамма для оформления; создан собственный графический стиль, соответствующий имиджу фирмы; обеспечиваться легкость главной страницы, чтобы ее загрузка происходила быстро; цветовая гамма должна вызывать положительные эмоции у посетителей; разработаны логотип фирмы и баннеры. Дизайн может мешать восприятию информации. Пользователь при этом практически не может сформулировать, о чем же была реклама, какая фирма и какая услуга рекламировались. 7
Программирование сайта должны делать специалисты. Квалифицированное программирование обеспечивает: Быстрый поиск нужной информации на сайте. Быструю загрузку страниц сайта даже при низкоскоростном соединении. Изменение содержания информации на сайте с помощью привычного интерфейса без знаний языков программирования. При необходимости создание дополнительных разделов и дополнительные функций. Сбор статистики по посещению сайта. 8
Выбор доменного имени сайта Доменное имя сайта должно быть коротким, запоминаемым, соответствовать имени фирмы и содержать ключевые слова, связанные с бизнесом, написание и произношение должно однозначно толковаться. При возможности нужно скупать альтернативные доменные имена. Иначе конкуренты могут используя похожие имена вполне легально уводить ваших клиентов и даже лишить Вас денег. Имена сайтов www. auto. ru и www. avto. ru очень похоже читаются по-русски. 9
Размещение (публикация) сайта в Интернете При публикации сайта следует помнить следующие: Загружать нужно не только HTML-документ, но все связные с ним файлы. Строчные и заглавные буквы имен файлов различаются в Интернете. Проверти работу сайта после публикации в сети. Обычно HTML-редакторы имеют средства загрузки страниц. Доступ к сайту можно обеспечить и ваш ПК, но он должен быть постоянно включен и иметь соответствующие аппаратное и программное обеспечение. При этом могут возникнуть проблемы при большом потоке желающих попасть на ваш сайт. Обычно сайты размещается на каком-то сервере Интернета. Сервер может принадлежать вашему провайдеру или одной из бесплатных служб. 10
Обычно пользователям для сайта предоставляется небольшой объем дискового пространства –несколько Мбайт. При бесплатном размещении сайта на его страницах размещается провайдером различная реклама. Для сайта даётся домен третьего уровня (http: //your-site. server. ru) или просто подкаталог (http: //server. ru/freehost/yoursite). Обычно их используют для тестирования сайтов. Регистрации домена происходит мгновенно. Иногда взимается плата за дополнительное место, если не хватает дискового пространства для сайта. При оплате размещения сайта вам могут подарить домен в зонах. net, . com, . ru (реже). Серьезные фирмы оплачивают свои сайты. При самостоятельной эксплуатации и сопровождении плата будет не очень высокая(примерно получится 35$ в год). Но это при имеете 100 Мбайт дискового пространства и бесплатный домен. 11
Хостинг - это техническая поддержка и площадка для вашего сайта в Интернете, для того чтобы он был доступен для всех пользователей. В услуги хостига входят: загрузка файлов на сервер через браузер или ftp-клиент (второе предпочтительней); управление файловой структурой сайта (удаление, создание, редактирование файлы вашего сайта), по сути это самый минимум что нужно от хостинга; предоставление различных служб (E-mail); предоставление панели управления сайтом, через которую можно следить за состоянием сервера, за занятым дисковым пространством, управлять почтой, доменами; предоставление полной статистики; администрирование сайта (обновлять прайс-листы, каталоги услуг и товаров, новости и вопросы анкетирования). 12
При покупке хостинга придерживайтесь следующих правил: 1. Не торопитесь купить хостинг у первого понравившегося хостера. Найти хостинг вы сможете с помощью поисковой системы по запросу: хостинг, платный хостинг, качественный хостинг и т. п. 2. У хорошего хостера должен быть форум и различные средства связи со службой поддерки (E-mail, icq, телефон) 3. Не покупайтесь на "впечатляющий" дизайн сайта хостера. Вас должна интересовать техническая часть работы (скорость серверов, качество обслуживания). 4. Распечатайте правила и условия использования покупаемых услуг нескольких хостеров и выберите для себя самые приемлемые. Некоторые хостеры категорически запрещают установку чатов, программ для массовой рассылки почты. 5. Проверти службу поддержки до покупки хостинга. Напишите им тестписьмо с самым простым вопросом. Плохая служба поддержки может вообще вам не ответить, по причине того что вы настолько глупы или же ответит, но спустя много времени. 13
Требования к хостингу: Скорость сервера. Создаём страничку с графикой и скриптами и проверяем на скорость, а также загружаем на сервер файлы (да покрупнее), а затем их скачиваем. Можно узнать адреса клиентов и спросить их мнение о скорости сервера и о хостинге. Физическое расположение сервера играет важную роль. Сервер, расположенный в Америке с супер-каналами связи, будут проигрывать по скорости соединения с сервером, который расположен в России. Дисковое пространство. Статичный сайт фирмы с трудом займёт 5 Мбайт, то динамичный может потребовать больше места. Стоит поинтересоваться о возможности увеличить дисковое пространство и сколько это будет стоить. Форум очень прожорлив и особенно если на форуме разрешена загрузка файлов. Стоимость траффика. Платный траффик должен входить в покупаемый тарифный план, но только за ограниченное его количество. Если ограничение будет превышено, то сайт блокируется до момента стабилизации траффика. При израсходовании дневного лимита траффика сайт блокируется до следующего дня. При превышении месячного лимита сайт блокируется до следующего месяца. Из этих вариантов предпочтительней установить суточный лимит. Много траффика идет на скачивание архивных файлов. Резервное копирование (backup) - обязанность хостера, которое часто не выполняется. Если хостер делает копирование, то вы избавитесь от боловной боли если ваш сайт взломают, если забудете пароли, если что-то сломается у хостера, то сайт можно восстановить. 14
15
16
17
2. Средства создания Web-страницы представляют из себя гипертекстовые документы, включающие кроме текста теги для разметки, гиперссылки на другие документы и различные объекты (рисунки, графики ит. п. ). Браузер при просмотре Web-страницы обрабатывает теги и содержимое страницы форматируется для отображения по правилам языка HTML (Hyper Text Markup Language – язык разметки гипертекста). С помощью HTML оформляют документы для помещения в Интернет. Специальные эффекты, которые можно увидеть при просмотре, создаются с помощью дополнительных средств ( язык Java. Script, Flash-роликов). Для просмотра Web-страницы используются программы браузеры. Самый распространенный MS Internet Explorer. Браузеры: Netscape Communicator, Mozilla Firefox, Opera. Для проверки Web-страницы стандарту можно воспользоваться специальным службой проверки, которая имеет адрес validator. w 3. org. После проверки получаем перечень ошибок и несоответствий. О браузерах можно узнать на сайте http: //insert-title. com/browser. asp. 18
Для разработки Web–страниц применяются HTML–редакторы разделяются на 2 типа: редакторы тегов; WYSWYG-редакторы. При использовании редакторов тегов пользователь должен знать язык HTML и самостоятельно их применять для создания Web–страниц. К ним относится Блокнот, MS Word. WYSWYG-редакторы с помощью мастеров создавать страницы и их отдельные элементы. Так как MS Word может сохранять разработанный документ в виде HTMLфайла, то Word является WYSWYG-редактором. Обычно WYSWYG-редакторы создаются под конкретный браузер. К ним относится MS Front Page, Netscape Composer, Home. Site. 19
Средства создания Web-страниц Редакторы для составления кода на языке HTML Блокнот Редакторы для визуального проектирования страниц Microsoft Word MS Front Page Netscape Composer Home. Site 20
Объекты Web-технологий Web-страница – отдельный документ, минимальная адресуемая часть WWW Баннер – графическая гиперссылка, выполненная в виде динамичного, яркого табло на Web-странице Апплет (маленькое приложение) – программа для создания различных визуальных эффектов на основной Web-странице, которые хранятся на сервере в виде отдельных файлов Скрипт (сценарий) – программа, служащая для выполнения определенного задания (формирования бегущей строки, мерцающей рамки, поиска данных), и располагается в тексте Web-страницы Отдельные элементы Web-страниц 21
Классификация Web-страниц по содержанию и внешнему виду Статья Глоссарий (словарь) Статья с фото Статья с иллюстрациями Глоссарий с иллюстрациями Чертежи Галерея (фотографий или репродукций) Тесты Каталог с гиперссылками на различные документы Диалоговые окна различных служб и интерактивных программ 22
3. Создание Web-страниц с использованием MS Word Использование средств MS Word для создания Web-страниц MS Word Преобразование существующего документа в HTML Открыть файл документа Сохранить (Файл, Сохранить как вебстраницу) Присвоить имя Webстранице и сохранить Создание Web-страницы на основе шаблона Файл, Создать В области задач Создание документа в группе Шаблоны выберите параметр На моем компьютере. На окне вкладке Общие дважды щелкните шаблон веб-страницы Заполнить шаблон 23
Сохранение документа как Web-страницу 24
Просмотр Web-страницы и HTML-кодов Для правки документа обратится к меню Файл, Править в Microsoft Office Word. 25
Создание Web-страницы на основе шаблона 26
Задание на самоподготовку 1. Повторить методику разработки Web-страниц с помощью MS Word. 2. Быть готовыми к созданию Web-страниц на любую тему. 27
Скачать презентацию Кафедра МИ Лекция 10 Разработка Webстраниц 1 Web-технологии
Разработка Web-страниц.ppt