Протокол://сервер_домен/ путь/имя_файла

В.К. Сибирский

ВЕБ-ДИЗАЙН

Москва, 2011

В.К. Сибирский

ВЕБ-ДИЗАЙН

Москва: МИЭМП, 2011. –150 стр.

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

Работа предназначается для студентов всех специальностей факультета управления желающих научиться создавать свои Web-сайты.

Рекомендована кафедрой Математики и Информатики

Рецензент:

Описание

Веб-дизайн / В.К. Сибирский – 2011. –150 стр.

Библиография стр.143 (27 назв.)

ISBD

50 экз.

О г л а в л е н и е

Введение. 6

Раздел 1. Этапы создания Web-сайта. 9

Основные понятия HTML.. 9

Структура простого html документа. 10

Форматирование текста. 12

Форматирование всего документа. 12

Форматирование фрагментов документа. 13

Теги для программистов, браузеров и роботов. 16

Рисунки на WEB-страницах. 21

Списки. 24

Таблицы.. 26

Гиперссылки и якоря. 30

Ссылки внутри html-документа. 31

Ссылки на другие html-документы.. 31

Ссылки на ресурсы Internet 32

Использование рисунков в качестве ссылок. 33

Формы.. 33

Создание формы.. 34

Тег INPUT. 34

Создание полей для ввода текста и пароля. 35

Создание кнопок. 36

Создание флажков и переключателей. 37

Создание списков – тег SELECT. 38

Создание многострочного поля – тег TEXTAREA.. 39

Кадры.. 40

Клиентские карты-изображения. 43

Использование мультимедиа. 45

Звуки. 45

Видеоклипы.. 45

Компоновка сайта. 46

Публикация сайта. 46

Реклама своего сайта. 47

Что дальше?. 48

Перспективы развития - HTML5. 49

Лабораторные работы.. 50

Лабораторная работа № 1. Таблицы и списки. 50

Лабораторная работа № 2. Формы.. 51

Лабораторная работа № 3. Создание сайта. 51

Лабораторная работа № 4. Карты - изображения. 51

Контрольные вопросы.. 52

Раздел 2. Dynamic HTML.. 54

Синтаксис CSS. 57

Указатели, зависящие от контекста. 57

Указатели детей. 57

Указатели потомков. 58

Указатели смежных элементов (Adjacent Sibling Selectors) 58

Способы задания цвета. 58

Способы задания размеров (ширина, длина) 59

Свойства текста. 59

Свойства шрифта. 61

Внедрения индивидуальных шрифтов. 63

Свойства цвета и фона. 63

Блочная модель. 64

Позиционирование. 69

Свойства полосы прокрутки. 73

Фильтры и переходы.. 74

Элементы таблиц. 77

Генерируемое содержимое и списки. 78

Аппаратно-зависимый стиль. 80

Страничные носители. 80

Акустические листы стилей. 82

Горизонтальная панель навигации на основе списка с использованием цвета. 85

CSS макеты: фиксированные, резиновые, эластичные. 86

Макеты с фиксированной шириной. 86

Плюсы такого макета. 87

Его минусы.. 87

Советы по макету с фиксированной шириной. 87

Резиновые макеты.. 88

Плюсы резинового макета. 88

Минусы такого макета. 88

Советы по использованию этого макета. 88

Эластичный макет. 89

Плюсы эластичного макета. 89

Минусы эластичного макета. 89

Советы по эластичному макету. 89

Пример эластичной верстки. 90

Перспективы развития – CSS3. 90

Лабораторные работы.. 91

Лабораторная работа № 5. С татические фильтры.. 91

Лабораторная работа № 6. Динамические фильтры.. 92

Контрольные вопросы.. 92

Раздел 3. Web-программирование. 94

Язык VBScript 94

Описание переменных. 94

Создание скриптов. 94

Процедуры.. 95

Виды процедур. 95

Использование подпрограмм и функций. 96

Обработка ошибок. 97

Включение других файлов. 97

Обработка форм.. 97

Рекурсивная обработка форм.. 98

Язык Perl 98

Краткое описание языка Perl 99

Обработка данных из форм.. 100

Использование Perl для создания web-страниц "на лету". 100

Альтернативы Perl 100

Запуск Perl 101

Первоисточник Perl 101

Этапы создания скрипта. 101

Основные части Perl скрипта. 101

Заключение. 103

WIMP – Windows, IIS, MySQL, PHP. 105

Установка модуля FastCGI. 105

Установка PHP. 106

Настройка Internet Information Services. 108

Установка MySQL.. 112

Web Platform Installer 112

Раздел 4. Введение в ASP. 116

Управление приложением.. 117

Чередование ASP/HTML.. 118

Использование внешних компонент. 118

Работа с базами данных. 118

Переменные HTTP. 119

Переадресация. 120

Электронная почта. 120

Объект. 120

Объектная модель. 121

Использование объектов. 122

Установка свойств для элементов управления и объектов. 124

Вызов методов. 126

Объектная модель Internet Explorer 128

Объект Document 129

Объект Frame. 129

Объект History. 129

Объект Location. 130

Server-Side Includes. 130

Включение механизма Server-Side Includes. 130

Базовые директивы.. 131

Переменные включения. 131

Подстановка переменных. 131

Условные операторы.. 132

Практическое использование SSI. 132

Приложение 1. Сводная таблица тегов HTML.. 139

Приложение 2. Спецсимволы.. 141

Литература. 145

Введение

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

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

Одним из примеров гипертекста является известная современная система подсказок пакета MS Office. В такой системе поиск информации ограничен одним компьютером. Шло время, системы гипертекста развивались, а Internet разрастался в виду подключения новых серверов. Найти информацию на сервере было не сложно. Но вот найти сам сервер было трудно.

Годом рождения языка разметки гипертекста можно считать 1986 год, когда Международная организация по стандартизации (ISO) приняла стандарт, названный SGML (Standard Generalized Markup Language). Его описывали как язык для логического оформления текста, ведь тогда не предполагали возможность описания внешнего вида документа. SGML даже не представлял собой готовую систему для разметки текста, он не подразумевал какого-либо списка структурных элементов, которые применялись бы в определённых ситуациях. Он позволял лишь описание синтаксиса написания основных элементов разметки текста (которые сейчас называют тегами). Это основные причины того, что язык SGML не получил значимого распространения.

И вот наступил не такой уж далёкий от сегодняшнего дня 1989 год. Это год, в котором в Женевской лаборатории ядерной физики (CERN) английский программист Тим Бернерс Ли (Tim Berners-Lee) разработал гипертекстовую систему HTML (HyperText Markup Language – язык разметки гипертекста) для создания гипертекстовых документов – html-документов. A в 1990 году тоже в CERN, для чтения гипертекстовых документов программистами, был создан первый браузер, который назвали WWW (World Wide Web - WWW, или просто Web). Таким образом, гипертекстовая система была объединена с информационными ресурсами Internet.

Интерес к данным разработкам проявили в 1991 году, когда Европейский институт физики частиц ощутил потребность в передаче гипертекстовой информации по сети Интернет. В том году была создана новая версия HTML - 1.2. В ней присутствовало около 40 тегов, но, как и в случае с SGML, подразумевалась только логическая разметка текста. Только несколько тегов подразумевали физическую разметку веб-страниц, но эти теги не рекомендовались к использованию.

В 1994 году консорциум W3C начал работу над HTML 2.0, окончательный стандарт которой был принят в 1995 году, когда уже в полную силу шла разработка HTML 3.0. В HTML 2.0 появились формы - средства отправки информации от пользователя на сервер. Самым большим прорывом явился HTML 3.0. Он включил в себя такие нововведения, как теги для создания таблиц, вставки рисунков, примечаний, разметку математических формул и др. Наиболее важным нововведением явились CSS (таблицы стилей), которые позволяли задавать единый вид всему сайту. Они имели свою структуру, свой синтаксис и применялись вместе с HTML.

В 1995 году появился браузер Netscape Navigator, разработчикам которого была корпорация Netscape Communications. Эта корпорация с целью привлечь пользователей стала вводить новые теги, которые были предназначены на улучшение внешнего вида документов. Тем самым были разрушены изначальные принципы языка.

В 1996 году в свет вышел браузер Internet Explorer 2.0 (разработчик: корпорация Microsoft), но он не имел большой популярности ввиду того, что не поддерживал многих тегов, введённых Netscape. Их поддержка была введена в Internet Explorer 3.0, после выхода, которого рынок браузеров был поделён пополам между Microsoft и Netscape.

В скором времени был создан HTML 3.2, который был ориентирован на Internet Explorer. Данный стандарт долгое время оставался единственным для веб-разработчиков. В 2004 году в свет вышел HTML 4.01, обеспечивающий достаточно большую кросс-браузерность. Данный стандарт и CSS сейчас применяются при создании большинства сайтов.

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

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

Серверы WWW общаются друг с другом, используя стандартные протоколы, например

· HTTP (Hyper Text Transfer Protocol – протокол передачи гипертекста);

· FTP (File Transfer Protocol – протокол пересылки файлов).

Для однозначного определения файлов на сервере в Internet используется уникальный адрес – URL (Uniform Resource Locator), который представляется в следующем виде:

протокол://сервер_домен/ путь/имя_файла

Например, http://www.cinf.usm.md/index.html

означает загрузку данных файла index.html по протоколу http домена md (Молдова) сервера cinf.usm Государственного университета Молдовы. Если используется сервер WWW, то символы http:// можно не писать, так как компьютер их добавит сам.

Отметим, что по URL часто невозможно определить, где фактически расположен web-сервер. Но обычному пользователю об этом и не нужно знать. А с Вами мы разберём этот вопрос в теоретической части курса «Компьютерные сети».

Таким образом, Вам должно быть ясно, что самая популярная на сегодня служба Internet – WWW состоит из четырех частей:

1. Web-сайтов, т.е. набора html-документов;

2. Программ-браузеров для просмотра Web-сайтов;

3. Протоколов http и https для передачи Web-сайтов по сети;

4. URL- адресов встроенных в Web-сайты для переходов от одного документа к другому.

Наша с Вами практическая цель в первой части курса - изучить язык гиперссылок html для профессионального использования для себя или фирмы, в которой Вы будете работать, а также научиться публиковать сайты на Web-серверах. Правда, эти сайты будут статическими, т.е. не меняющимися во времени. Для придания им динамики надо изучить вторую часть курса - каскадные таблицы стилей (Cascading Style Sheets - CSS), а также третью часть курса - Web-программирование (мы вкратце вспомним VBScript, как подмножество языка VB, а также языки JavaScript, PHP и Perl). В последней четвертой части курса мы осветим Active Server Pages (ASP). Все это вместе составляет основу Web-дизайна – нового направления графического дизайна – предназначенного для проектирования пользовательских веб-интерфейсов для сайтов/порталов и/или веб-приложений.

Веб-дизайн (англ. Web design) — отрасль дизайна объединяющая в себе с одной стороны художественные качества оформления веб-проекта, а с другой стороны - знания новейших веб-технологий для наиболее доступной подачи информации, обладающей свойством кроссплатформенности (т.е. не зависящей от браузера). Известному американскому дизайнеру в области рекламы Максиме Виньелли (Massimo Vignelli) принадлежит изречение: «Дизайн всеобщ!» Само слово дизайн известно давно (с XVI века) в отличие от веб. Оно означало первоначальный замысел создателя о том, как будет выглядеть создаваемое им. Словарь, опубликованный в Оксфорде в 1588 году, дает следующую трактовку этого слова: «задуманный человеком план или схема чего-то, что будет реализовано, первый набросок будущего произведения искусства». Международный совет организаций по дизайну принял в сентябре 1969 года на своем конгрессе следующее определение: «… дизайн … творческая деятельность, цель которой определение формальных качеств предметов, производимых промышленностью. Эти качества формы относятся не только к внешнему виду, но главным образом к структурным и функциональным связям, которые превращают систему в целостное единство с точки зрения, как изготовителя, так и потребителя». Надеюсь, читатель, что Вами замечен сдвиг акцентов от создателя в сторону потребителя. В веб-дизайне этот сдвиг еще более ощутим, т.к. потребителем является не только человек, посетивший веб-ресурс и визуализирующий его с помощью различных браузеров и компьютеров, но и программы (роботы или пауки) различных сервисов в Интернете, осуществляющие поиск информации и ее индексацию. Важно отметить, что Вам также необходимо изучить предмет под названием интернет-маркетинг, посвящен продвижению и рекламе созданного Вами ресурса и его поисковой оптимизации.

В заключение пример ошибки, увиденной автором в канун Нового 2011 Года на известном сайте 123Greetings.com.

Раздел 1. Этапы создания Web-сайта

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

Создавая свой Web-сайт, Вы должны так его представить в Internet, чтобы любой посетитель захотел посещать его снова и снова. Рассмотрим, что для этого надо делать, и в какой последовательности:

1. определить цель создания сайта и продумать его структуру (см. п. Ссылки на другие html-документы);

2. узнать, какие и где уже существуют сайты по Вашей тематике, для включения ссылок на них;

3. определить аудиторию, которой будет предназначаться сайт и, в дальнейшем при его создании, максимально удовлетворять интересы этой аудитории;

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

5. скомпоновать из этих файлов сайт (см. п. Использование мультимедиа);

6. просмотреть сайт в браузерах Internet Explorer и Mozila;

7. опубликовать сайт на Web-сервере (см. п. Компоновка сайта);

8. и опять просмотреть сайт теми же программами;

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

10. сообщить всем о своем сайте (см. п. Публикация сайта), ведь зачем он Вам нужен, если его никто не будет посещать?

Обычно Web-сайт оценивается по двум параметрам:

· по содержанию;

· по внешнему виду.

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

Основные понятия HTML

Язык HTML появился почти одновременно со службой WWW и используется для создания Web-страниц, как программистами, так и обычными пользователями.

Поэтому гипертекст - это файл, имеющий расширение htm или html. Его можно просматривать специальной программой – браузером, например Internet Explorer или Mozila.

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

Расстановка специальных кодов в тексте – это и есть разметка текста. Специальные коды называют тегами. Теги определяют границы действия определённого эффекта на текст или на другие элементы документа. Они задаются ключевыми словами, заключёнными в угловые скобки: < т е г>

Многие теги являются парными, так как они задают начало и конец действия эффекта. Из них некоторые задают начало и конец некоторого раздела информации. Такая пара тегов называется контейнером. Конечный тег отличается от начального тем, что после знака меньше следует косая черта: < т е г> текст < /т е г>

Но существуют и одиночные теги, которые указывают на эффект непосредственно в месте их появления. Например:

1. парные теги: <B> HTML – документ </B> - на экране появится указанный текст, выделенный жирным шрифтом (лучшее использовать тег <STRONG> вместо <B> для правильного отображения содержимого всеми браузерами);

2. одиночный тег: <HR> - выводит горизонтальную линию в месте появления тега.

Если ключевое слово тега написано с ошибкой, то очевидно, что тег будет полностью проигнорирован и ожидаемый эффект не появится на экране.

Теги могут иметь атрибуты – параметры или свойства, которые уточняют действие эффекта. Атрибуты представляются ключевыми словами и записываются внутри стартового тега. Если атрибут принимает одно из ряда значений, то выбранное значение указывается в виде: ключевое слово=«значение» (некоторые браузеры позволяют не использовать кавычки, однако, следуя стандарту XHTML надо все значения заключать в кавычки). Атрибуты отделяются друг от друга пробелами. Закрывающие теги не содержат атрибутов, так как указывают на конец того или другого эффекта. Например:

<FONT color="green">

<STRONG> HTML – документ </STRONG> </FONT>

приведёт к выводу текста «HTML – документ» зелёным цветом.

Последовательности используются для размещения в документе зарезервированных или специальных символов. Последовательности начинаются со знака амперсанда (&) и заканчиваются точкой с запятой (;).

Зарезервированными являются символы, используемые в синтаксисе HTML документа. Мы уже знаем эти символы и в следующей таблице указаны последовательности для их представления в документе:

Таким образом, если в каком-либо месте html-документа надо вывести символ <, то в этом месте пишут последовательность &lt;.

Специальные символы представляются последовательностью, начинающейся символами &#, за которыми идёт код нужного символа и в конце ставится точка с запятой. Эти последовательности используются для выдачи ASCII-кодов символов. Например, для вставки неразрывного пробела в текст используется последовательность &#160; Неразрывный пробел вставляется между двумя словами для того, чтобы они оба находились в одной строке, без перевода второго слова на новую строку. В приложении 2 приведены коды спецсимволов.

Не нашли, что искали? Воспользуйтесь поиском: