Р аздел 5: Создание и публикация веб-ресурсов.

Тема 5.1: Основы веб-дизайна.

1. World Wide Web. Понятия веб-страницы и веб-сайта. Браузеры. Типы сайтов.

2. Основные принципы эргономичного размещения информации на веб-страницах.

3. HTML – язык гипертекстовой разметки. Понятия тегов и атрибутов языка. Структура HTML-документа.

4. Создание веб-сайта. Публикация веб-сайта на сервере бесплатного хостинга.

1.

Популярнейшая служба Интернета - World Wide Web (сокращенно WWW или Web), ещё называют Всемирной паутиной (англ., web — паутина). Представление информации в WWW основано на возможностях гипертекстовых ссылок. Служба World Wide Web предназначена для доступа к электронным документам особого рода, которые называются Web-документами или, упрощенно, Web-страницами.

W eb-страница — это электронный документ, в котором кроме текста содержатся специальные команды форматирования, а также встроенные объекты (рисунки, аудио- и видеоклипы и др.).

Гипертекст – это текст, в котором есть активные ссылки (гиперссылки) на другие документы.

Это дает возможность при просмотре некоторого документа легко и быстро переходить к другой связанной с ним по смыслу информации, которая может быть текстом, изображением, звуковым файлом или иметь любой другой вид, принятый в WWW. При этом связанные ссылками документы могут быть разбросаны по всему земному шару. Многочисленные пересекающиеся связи между веб-документами компьютерной паутиной охватывают планету - отсюда и название. Таким образом, пропадает зависимость от местонахождения конкретного документа.

Гиперссылки обычно подчёркиваются и выделяются цветом (по умолчанию – синим), при попадании на них курсор мыши превращается в руку. Если щёлкнуть левой кнопкой мыши на гиперссылке, в окне браузера загружается документ, на который указывает ссылка. На современных веб-страницах встречается не только текст, но и графика, звук, видео, причём каждый элемент может быть гиперссылкой. Такие документы называются гипермедиа.

С каждой гиперссылкой в Сети связан Web-адрес некоторого документа или объекта (файла с рисунком, звукозаписью, видеоклипом и т. п.).

Совокупность web-документов, объединенных по какому-либо признаку (адресом сервера, темой, оформлением) называют web-сайтом (или просто сайтом).

Просматривают Web-страницы с помощью специальных программ, называемых браузерами (например, Internet Explorer, Mozilla Firefox, Opera, Safari, Chrome), так что браузер — это не просто клиент WWW, служащий для взаимодействия с удаленными Web-серверами, это еще и средство просмотра Web-документов.

В отличие от печатных электронных документов, Web-страницы имеют не абсолютное, а относительное форматирование, то есть они форматируются в момент просмотра в соответствии с тем, на каком экране и с помощью какого браузера их просматривают. Строго говоря, одна и та же Web-страница при просмотре в разных браузерах может выглядеть по-разному — это зависит от того, как браузер реагирует на команды, которые встроил в Web-страницу её автор.

У каждого Web-документа (и даже у каждого объекта, встроенного в такой документ) в Интернете есть свой уникальный адрес — он называется унифицированным указателем ресурса URL (Uniformed Resource Locator) или, сокращенно, URL-адресом. Обратившись по этому адресу, можно получить хранящийся там документ. Например, URL-адрес рисунка, находящегося на одной из Web-страниц портала www.klyaksa.net: http://www.klyaksa.net/htm/exam/answers/images/a23_1.gif.

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

Коммерческие сайты:

1. Сайт-визитка —сайт из нескольких страниц, на которых размещают информацию о себе (например, фирм и её услугах).

2. Промо-сайт — сайт, созданный специально для рекламы (продвижения) отдельного товара либо услуги или основного сайта компании.

3. Корпоративный сайт — ресурс какой-либо компании. Предназначен для презентации компании, информирования партнеров и клиентов о деятельности компании, привлечения новых клиентов.

4. Интернет-магазин — интерактивный веб-сайт не только рекламирующий товар или услугу, но и принимающий заказы на покупку, очень часто предлагающий пользователю доставку и выбор варианта расчета.

Некоммерческие:

1. Информационный сайт — предоставляет информацию посетителю на определенную тему. В основном имеет четкую направленность. Такие сайты очень популярны.

2. Игровой сайт — сайты, созданные для общения с единомышленниками или создания базы знаний по игре.

3. Персональный сайт —сайт об одном человеке или его семье. В основном, присущи для знаменитых и популярных людей.

4. Сайт-форум — может быть самостоятельным сайтом, а может быть разделом сайта. Чаще всего выполняется на поддомене основного сайта и предназначен для общения посетителей сайта между собой и администратором сайта.

5. Блог — это сайт, представляющий из себя интернет-дневник, журнал, который ведется одним человеком, при этом на каждую тему блога посетители могут оставлять свои комментарии-сообщения. Блог обычно очень часто обновляется.

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

В зависимости от технологии создания можно выделить следующие типы сайтов:

1. Статические сайты, содержащие статические HTML страницы. Статические веб-страницы - это статические файлы (набор текста, таблиц, рисунков и т.д.), которые создается с помощью языка разметки HTML (имеют расширение .html или .htm) и хранятся в готовом виде в файловой системе сервера. Статические сайты с пассивными веб-страницами создаются вручную, с помощью какого – либо редактора HTML в файловой системе компьютера, потом загружаются на сайт. В основном статические сайты с пассивными веб-страницами применяются для создания небольших и средних сайтов с постоянной структурой и внешним видом страниц.

Для создания сайта используют различные средства: редакторы текста типа Блокнот, визуальные редакторы типа Microsoft FrontPage, Macromedia Dreamweaver и множество других редакторов, а также конструкторы сайтов (дизайнеры). Конструкторы веб-сайтов размещаются на некоторых сайтах в сети Интернет. 

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

В настоящее время для создания динамических сайтов применяются различные веб-приложения. Для создания динамических сайтов, веб-страницы которых генерируются на стороне клиентского приложения (на стороне браузера), используют языки сценариев JavaScript и VBScript, а также Java-апплеты и технология ActiveX.

3. Flash-сайты – это интерактивные приложения, разработанные в среде Macromedia Flash. Основным инструментом разработки flash-программ является векторная графика (интерактивная векторная анимация для Web). Flash придает сайтам динамичность и интерактивность. Flash целесообразно использовать там, где мало текста, но где требуются звуковые или анимационные эффекты (например, для создания логотипов, флэш-меню, информеров и других анимированных графических элементов), в качестве анимированных flash-баннеров и входных flash-заставок.

4. Комбинированные сайты, в которых используются вышеизложенные технологии создания сайтов.

2.

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

• чем важнее элемент, тем заметнее;

• элементы связанные логически, связывать визуально;

• чётко разделять области;

• делать заметными ссылки;

• не перегружать страницу лишними деталями и словами;

• навигационное меню на всех страницах должно иметь одни и те же форму, цвет, размеры и месторасположение, что обеспечивает легкость перемещения по серверу;

• не следует включать в страницу непрерывно двигающиеся элементы - они перенапрягают периферическое зрение;

• нужно сохранять баланс между текстом, изображениями и пустым пространством;

• внешние ссылки лучше открывать в новом окне.

У сайта должна быть интуитивно-понятная структура: древовидная, линейно-последовательная или гибридная. Должны отсутствовать перекрестные переходы между разными ветками.

Дизайн играет важную роль в привлечении внимания пользователей сети Интернет к определенной Веб-странице. При разработке дизайна Веб-страницы, прежде всего, нужно учитывать особенности восприятия аудитории. При этом оформление должно соответствовать содержанию Веб-страницы. Универсального решения в области разработки дизайна Веб-страниц не существует, возможны совершенно различные варианты исполнения. Под дизайном Веб-страницы предполагается разработка следующих элементов: цвет; шрифт; графика; компоновка Веб-страницы.

В се Веб-страницы одного сайта должны быть оформлены в едином стиле. Единая цветовая гамма Веб-страниц способствует быстрому и полному восприятию содержания. Как правило, лучшая комбинация цветов для чтения - белый фон и черный текст. Можно использовать фоновый цвет для отдельных символов текста, что дает возможность создавать интересные композиции для заголовков, подписей к рисункам.

В ажно грамотно использовать шрифты при построении веб-страницы. Различные виды шрифтов по-разному воспринимаются человеком. Многие применяют такие приёмы, как подчеркивание и перечеркивание. Этого лучше не делать, так как подобные текстовые эффекты могут ассоциироваться у пользователей с гипертекстовой ссылкой. Допустимо использовать не более двух типов шрифтов на странице. При выборе шрифта необходимо принимать во внимание следующие рекомендации: шрифты желательно использовать из того набора, который установлен на компьютерах практически всех посетителей сайта:

Шрифт с засечками – Times New Roman

Шрифт без засечек – Arial

Закончив создание Веб-страницы, нужно посмотреть на неё со стороны потенциального пользователя. Нужно проверить сайт на разных мониторах, в разных браузерах и при разных скоростях подключения к Интернету.

3 .

Гипертекстовые страницы записываются на специальном языке HTML (HyperText Markup Language - язык гипертекстовой разметки). HTML – это язык разметки документов в среде WEB. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование, к примеру текста, т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д., ему (браузеру) надо как-то сообщить, что это - заголовок, а это – параграф  и.т.д. Этим как раз и занимается язык html. Обычно файл Веб-страницы имеет расширение .html или .htm.

Размещение информации на Web-странице задается с помощью команд — тегов.

Т ег — это специальная команда языка HTML, используемая для разметки Web-страницы, то есть для размещения на ней текста, таблиц, рисунков, списков и т.п., и, которую понимает браузер.

HTML-тег записывается в угловых скобках < > и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл понятен. Записывать теги можно в любом регистре – прописными или строчными буквами. Теги можно разделить на две большие группы.

Теги одной группы, называемые парными, воздействуют на часть документа, заключенную между ними. Они имеют два компонента: открывающий (начальный) и закрывающий (конечный) теги и образуют, так называемый, контейнер или элемент языка HTML . Закрывающий тег имеет то же название, что и открывающий, но перед его названием ставится косая черта (символ /). Между открывающим и закрывающим тегами могут располагаться текст или другие теги (вложенные). Например, парный тег (<CENTER>...</CENTER>) выравнивает по центру страницы всю информацию, расположенную на месте многоточия.

Другую группу тегов образуют непарные или автономные (одиночные) теги, которые не имеют конечного компонента. Они вызывают однократное действие или при их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег <IMG SRC="pict.gif"> вызывает вставку рисунка из файла pict.gif.

Теги могут иметь уточняющие параметры – атрибуты. Атрибуты записываются внутри непарного тега, а в контейнере (или элементе из парных тегов) – только в открывающей части (в начале). Значения атрибутов указываются после знака равенства в кавычках (пример, приведённый выше <IMG SRC="pict.gif">). В списке атрибуты отделяются друг от друга пробелами. Последовательность атрибутов не существенна.

Рассмотреть принцип построения (структуру) HTML-документа можно с помощью рисунка, на котором размещён смешной HTML-человечек.

Структура веб-документа
HTML-человечек	<HTML> <HEAD> Описание заголовка </HEAD> <BODY> Текст документа </BODY> </HTML>	<HTML>...</HTML> - границы HTML-программы	Любой HTML-документ должен начинаться (и заканчиваться) тегом <HTML>...</HTML>. Этот тег указывает на то, что данный документ содержит в себе HTML-текст.
Ж елательно, чтобы каждый HTML-документ начинался со строки объявления версии языка HTML <!DOCTYPE…>, которая обычно выглядит примерно так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
		<HEAD>...</HEAD>-заголовок HTML-программы	Заголовок также называют головной частью программы, он содержит справочную информацию о странице, которая не отображается браузером, а также название документа.
		В головной части программы обычно пишется тег TITLE - имя окна, содержащего Вашу страничку (не более 64 символов). Показывается в заголовке окна браузера.
		<BODY>...</BODY> - содержание HTML-программы	Основное содержание страницы помещается в тег <BODY> ... </BODY>. Его также называют телом программы.
В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Эта строка помогает сделать сайт, который будет одинаково смотреться во всех браузерах (обычно это три основных Internet Explorer, Opera, Firefox) .

Как видно, голова находится над телом, поэтому, никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа </HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.

4.

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

Можно выделить следующие два типа веб-редакторов, с помощью которых можно создавать веб-сайты:

• WYSIWYG-редакторы — («What You See Is What You Get» — «Что видишь, то и получишь») — визуальные редакторы. Наиболее популярными визуаль­ными редакторами сегодня являются Micromedia Dream Weaver и Microsoft FrontPage.

• HTML-редакторы — программные средства, позволяющие создавать код стра­ницы вручную. При работе в таком редакторе требуется знать язык разметки гипертекста HTML. Простейшим HTML-редактором является стандартное приложение операционной системы Windows Блокнот. Работа вручную позволяет создавать более универсальные, более качественные и более разнообразные документы.

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

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

Если у вас нет собственного Web-сервера с выделенным доменным именем, вы можете разместить свой сайт у одного из провайдеров, предлагающих услуги по созданию на собственном сайте пользовательских Web-страниц (Web Presence Providers), еще это называется «хостингом» (hosting). То есть, хостинг – это предоставление места под ваш сайт, хостинговой компанией, владеющей сервером (или серверами), которые круглосуточно подключены к Интернету. Услуги хостинга бывают бесплатные (обычно за счет установки на ваши странички рекламы, своей или спонсоров), условно-бесплатные ( хостинг предостaвляется на некоторых условиях ) и просто платный хостинг с разнообразным качеством услуг.

Д ля загрузки файлов сайта на сервер можно использовать файловый менеджер (команду загрузить) из раздела управление сайтом на сервере, на котором Вы размещаете сайт. Сначала с помощью файлового менеджера создайте на сервере папку, в которую будете помещать файлы или выберите готовую папку на сервере. Загрузить файлы на сервер можно и с помощью браузера (Internet Explorer) по протоколу ftp, например ftp://ftp.lessons-tva.info/. Далее появится диалоговое окно с запросом ввести пароль, после ввода пароля и нажатия кнопки "ОК" в окне просмотра будут отображены все Ваши папки на сервере. Далее откройте папку, где будут размещены файлы сайта и скопируйте их туда одним из методов. Адрес FTP-сервера указывается в персональных данных, которые вы получите после регистрации на сервере. Чтобы соединение по FTP-протоколу происходило быстрее необходимо предварительно войти в свой аккаунт по протоколу http.

Но лучше всего для загрузки файлов использовать Total Commander. Для этого в меню "СЕТЬ" выбрать команду "Новое FTP - соединение" и в появившемся диалоговом окне "Соединиться" ввести FTP-адрес (например, ftp://ftp.lessons-tva.info/). Затем по запросу ввести пароль и на одной из панелей появятся папки, расположенные на сервере, в одну из них необходимо поместить (скопировать) файлы.

Далее Вы присвойте имя этому соединению и сохраните его. Это имя будет помещено в опцию "Соединиться с FTP-сервером" в меню "СЕТЬ". При повторном соединении (например, при обновлении страничек) Вы выбираете это имя, далее на запрос вводите пароль и соединяетесь с директорией, в которой находятся странички и файлы Вашего сайта. После размещения сайта на хостинге необходимо зарегистрироваться в поисковых системах и тематических каталогах Yahoo, Rambler, Апорт и т.п. и осуществить раскрутку сайта.

Некоторые бесплатные хостинги
сервис "Ayola"		Сервис "Ayola" в полной мере отвечает своему слогану "Простой хостинг". В Украине "Ayola" - оптимальный бесплатный хостер.
сервис "EoMy"		Сегодня "EoMy" достаточно популярен среди украинских пользователей.

Выделим основные основ­ные технологические этапы, которые предстоит выполнить, приступая к работе по созданию сайта:

1. Определите тему сайта. Рабо­тая над темой сайта, хорошо продумайте его информационное содержание.

2. Создайте проект сайта, т. е. определите количество, взаимосвязь и тематику web-страниц. Проработайте структуру, общий дизайн сайта и содержание главной страницы.

3 . Создайте папку для хранения файлов сайта, в которой собе­рите необходимый текстовый и графический материал (необходимо оптимизиро­вать объем и количество графических файлов, предназначенных для размещения на страницах вашего сайта). Не используйте символы русского алфавита в именах тех файлов, которые вы включаете в состав веб-узла, так как многие операционные системы серверов сети Интернет работают только с англоязычными именами.

4. Определите программное средство для создания сайта (например: Блокнот, Microsoft FrontPage 2003 и др.).

5. Создайте макет сайта (выполните макеты — заготовки страниц, содержащие элементы общего дизайна сайта: логотипы, фоновое оформление и т. п.; обеспечьте взаимосвязь между страницами сайта с помощью кнопочных, текстовых или гра­фических гиперссылок). Необходимо помнить, что хорошо разработанная навига­ция — важный фактор привлечения к сайту посетителей.

6. Выполните содержательное наполнение созданных макетов веб-страниц.

7. Протестируйте созданный сайт в наиболее распространенных браузерах (на­пример: Internet Explorer, Netscape Navigator).

8. Устраните выявленные при тестировании неточности и ошибки.

9. Опубликуйте сайт в Интернете.

10. Зарегистрируйте сайт в популярных поисковых системах.

Отметим, что в указанной технологической цепочке п.п. 5 и 6 часто переставляют местами, так как многие сайтостроители предпочитают начинать работу сразу с создания отдельных веб-страниц, и только потом разрабатывают систему навигации по страницам сайта.

1. Для чего предназначена служба Интернета WWW? Почему её ещё называют всемирной паутиной?

2. Что называют веб-страницами? Что такое гипертекст?

3. Как отличить гиперссылку от остального текста и других элементов страницы? Какие документы называют гипермедиа?

4. Что называют веб-сайтом? Браузером? Приведите примеры известных вам браузеров?

5. Почему веб-страницы могут выглядеть по-разному? От чего это зависит?

6. Назовите типы сайтов в зависимости от: 1) цели и типа информации; 2) взаимодействия пользователя с ресурсами веб-страницы; 3) технологии создания сайта.

7. Каким правилам следует следовать при создании сайта?

8. Что понимают под дизайном сайта?

9. Что представляет собой язык HTML? Что такое тег? Какие теги бывают?

10. Что понимают под элементом (контейнером) HTML? Из чего он состоит? Что такое атрибут?

11. Какова основная структура HTML-документа?

12. Назовите этапы, необходимые для размещения собственных материалов в Интернете.

13. Какие программы используют для создания веб-сайтов? Назовите их типы.

14. Что называют хостингом? Какой он бывает:

15. Как можно опубликовать сайт на сервере? (1) с помощью каких программ; 2) как это сделать?)

16. Перечислите технологические этапы создания сайта.

Приложение. Основные теги и атрибуты языка HTML.