Государственное образовательное учреждение высшего профессионального образования "Алтайский государственный технический университет им. И. И. Ползунова

УДК 32.973.26-018.2

Допустить к защите в АК

Исполнительный директор ВТУ,

к.ф.-м.н, профессор Бразовская Н. В.

разработка web-сайта ТОРГОВОГО ПРЕДПРИЯТИЯ (на примере ООО "Флагман")

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА К ДИПЛОМНОЙ РАБОТЕ

Руководитель проекта к.ф-м.н, Н. В. Бразовская

Барнаул

Содержание

Введение

1. Технологии разработки сайтов

1.1 Основные определения, термины и понятия

1.2 Современное положение в сфере Web-дизайна

1.3 Ключевые особенности современных Web-редакторов

1.4 Краткое описание Web-редакторов

2. Технологическое обоснование

2.1 Историческая справка

2.2 Обоснование выбранного способа Web-конструирования

2.3 Виды современного дизайна

2.4 Элементы дизайна

2.4.1 Шрифт и текст

2.4.2 Заглавия и заголовки

2.5 Графика на Web-страницах

2.5.1 Форматы графики на Web-страницах

2.5.2 Оптимизация графики

3. Правовые аспекты создания и использовании web-сайта в сети Интернет

3.1 Положение web-сайта как объекта правозащиты

3.2 Web-дизайнер как правообладатель

3.3 Нарушение прав в сфере Web-дизайна

3.4 Лицензирование

Заключение

Список литературы

Приложение 1

Приложение 2

Введение

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

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

- современный дизайн;

- дружественный интерфейс;

- удобство загрузки.

Результатом дипломной работы стал сайт торгового предприятия ООО "Флагман", который представляет собой множество логически взаимосвязанных между собой страниц. Основным принципом дизайна, реализованного в работе, стал принцип простоты и доступности.

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

Основные средства, использованные при создании сайта :

- Microsoft FrontPage - редактор веб-страниц;

- Adobe Photochop - редактор изображений;

1. Технологии разработки сайтов

1.1 Основные определения, термины и понятия

Чтобы разместить информацию в сети Интернет, ее необходимо представить в виде файлов, которые программами пользователей будут определены как страницы документа (этот документ может быть предназначен для чтения, просмотра графики или видео, заполнения интерактивных форм и других целей). Эти файлы создаются с помощью специального языка описания и разметки гипертекста HTML (Hyper Text Markup Language) и называются HTML-файлами.

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

Web-обозреватель - специальная программа, предназначенная для чтения HTML-файлов и их отображения. В настоящее время существует множество таких программ, но наибольшее распространение получили MS Internet Explorer, Opera, Netscape Navigator. Web-обозреватель можно использовать для переходов с одной Web-страницы на другую по гиперссылкам, для загрузки файлов из Internet на компьютер, для воспроизведения внедренных на Web-страницу файлов мультимедиа, а также для запуска программ приложений (например, почтовых)

Web-сайт/Web-узел - несколько Web-станиц, объединенных в общую структуру.

Web-сервер - подключенный к сети Internet компьютер, поддерживающий протокол HTTP (Hyper Text Transfer Protocol) Он используется для доставки данных в Internet и позволяет пользователям клиентских программ загружать и воспроизводить текст, рисунки, звук, видео и другие данные. Протокол FTP (File Transfer Protocol) также является распространенным способом загрузки файлов на удаленный сервер.

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

1.2 Современное положение в сфере Web-дизайна

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

Язык HTML никогда не считался сложным языком. Информатика знает значительно более сложные лингвистические системы. Например, стандарт языка APT (Automatically Programmed Tools), предназначенного для описания конструктивно-технологической информации, включает в себя более тысячи зарезервированных слов и языковых конструкций. Лексикон языка HTML значительно скромнее; тем не менее, не каждый опытный программист свободно владеет всеми дескрипторами гипертекстовой разметки, их атрибутами. В современные версии Web-редакторов входит электронное справочное руководство, содержащее компактное и полное изложение основных языковых средств, используемых для создания Web-документов. Это теги языка HTML (Hypertext Markup Language), стилевые декларации CSS (Cascading Style Sheet), функции и операторы языка JavaScript, соглашения и описания DOM (Document Object Model).

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

Процесс разработки развитого сетевого проекта, как правило, не заканчивается созданием всех составляющих гипертекстовых документов и ссылочной структуры. Чтобы "вживить" новый сайт в "ткань" всемирной Сети, требуется выполнить большой объем работ по сопровождению проекта. Регистрация на поисковых машинах и в каталогах, организация сетевой рекламы, обмен ссылками и баннерами с родственными сетевыми ресурсами - вот далеко не полный перечень необходимых мероприятий по поддержке Web-узла. Все эти операции сопровождаются изменениями версий документов, расположенных на удаленном сервере. В оболочку современных Web-редакторов интегрировано специальное средство, предназначенное для обслуживания опубликованных в сети документов и сайтов. Оно располагает всеми необходимыми инструментами для дистанционного обновления версий документов. Это средство поддерживает распределенную работу нескольких исполнителей над одним сетевым проектом, обладает механизмом синхронизации версий документов и защиты от несанкционированного доступа.

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

Современные Web-редакторы основаны на принципе открытой архитектуры. Это значит, что полностью открыт интерфейс прикладного программиста (Application Programming Interface, API), с помощью которого сторонние программисты и софтверные фирмы могут выполнить радикальные изменения функциональных возможностей программы и ее интерфейса: добавить новый инструмент, создать палитру или раздел меню, запрограммировать новый объект или мультимедийный ролик и прочее.

1.3 Ключевые особенности современных Web-редакторов

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

Контроль синтаксиса. Опытные Web-программисты знают, что поддержка HTML и функций JavaScript немного отличается на различных платформах. Вот почему современные Web-дизайнеры имеет встроенную функцию проверки синтаксиса. Она позволяет узнать, какие браузеры и на каких платформах поддерживают все те элементы, которые вы предусмотрели на своей странице, будь то DHTML или таблицы стилей. Вы можете создать страницу в HTML 4.0, преобразовать ее в стандартный формат HTML 3.2 или сделать в обоих вариантах, предоставив право выбора пользователю.

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

Встроенный ftp-клиент. Современные Web-сайты оснащены полным интегрированным FTP-клиентом, который позволяет загружать и обновлять Web-сайт. Когда создается необходимость обновить сайт, запускается процесс - будут обновлены только измененные файлы. Можно так же переносить отдельные страницы, просто "перетаскивая" их с панели FTP или, наоборот, на нее. Для удобства работы современные Web-дизайнеры рассчитывает время, которое понадобится посетителям сайта для загрузки ваших страниц.

Работа со спецэффектами.

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

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

Таблицы стилей (Cascading Style Sheets). Современные Web-редакторы поддерживает технологию так называемых таблиц стилей (cascading style sheets (CSS)) - cutting-edge. Технология предоставляет беспрецедентные возможности контроля над внешним видом страниц, в том числе и платформо-независимыми вариантами. Вам больше не придется создавать специальные однопикселовые изображения и вложенные таблицы чтобы сверстать страницу так, как вы хотите. Web-редактор позволяет визуально создавать и редактировать таблицы стилей, позиционировать изображения и текстовые блоки на странице при помощи плавающих областей, определять шрифты, цвета и размеры для достижения наилучшего варианта дизайна, а также создавать и редактировать как внешние стили, определенные для всего сайта, так и стили отдельных страниц.

1.4 Краткое описание Web-редакторов

Adobe GoLive Данный редактор является достаточно профессиональным инструментом для Web-разработки, он может работать с графическими приложениями компании Adobe (Photoshop, Illustrator, LiveMotion, и т.д.). Программа обладает мощными возможностями для дизайна: отличительной чертой является опция Layout Grid (Решетка макета), которая сильно облегчит работу тем дизайнерам, которые стремятся создавать графику с точностью до пикселя. Также программа обладает превосходной поддержкой возможностей мультимедиа - в нее встроен редактор QuickTime, а также предусмотрена поддержка форматов SVG и Flash. Программа генерирует четкий исходный текст и обеспечивает широкие возможности управления сайтами. Но за все эти плюсы придется платить - освоить программу нелегко, но в результате вы сможете создавать решения для Web очень высокого класса. Также данный пакет поддерживает технологию drag-and-drop почти всюду, где это возможно. Профессионалы в области Web-дизайна и фанаты других продуктов Adobe несомненно сочтут GoLive очень удачным дополнением к привычному набору инструментов. Allaire ColdFusion ColdFusion ориентирован на серьезных разработчиков, которые создают приложения Web, поддерживающие электронную коммерцию и базы данных. В данной программе реализовано визуальное программирование профессионального уровня, а также инструменты разработки баз данных и отладки; она также содержит набор мастеров Web Application Wizards. ColdFusion позволяет прямо во время редактирования свернуть исходный текст и быстро перейти в другую секцию. Также есть возможность создавать сложные SQL-операторы, с помощью инструментального набора Visual Database, использовать преимущества встроенных редакторов каскадных таблиц стилей и Image Map, а также отлаживать программы в интерактивном режиме, строка за строкой. Одним из огромных плюсов программы является ее способность манипулировать большими проектами, в которых задействовано много разработчиков и серверов. В программу также встроен мощный серверный язык сценариев (Cold Fusion Markup Language, или CFML) с синтаксисом на основе тегов, который работает с HTML и XML. А поддержка WML (Wireless Markup Language - язык разметки для беспроводных устройств) - это явно нацелено на будущее. В ColdFusio интегрирован пакет HomeSite, поэтому если вам по большей части приходится генерировать обычные Web-страницы, то имеет смысл приобрести инструмент HomeSite вместо всего комплекта. Allaire HomeSite Пакет HomeSite включает в себя большинство инструментов, используемых профессионалами, соблюдая баланс между новейшими возможностями и удобством использования. Ориентирован этот пакет скорее на разработчиков, чем на дизайнеров. Обладает достаточным набором функций, чтобы привлечь внимание любителей ручного кодирования, поддерживает такие современные технологии, как DHTML, SMIL, CSS, ASP, JSP, Perl и XML. HomeSite выделяется тем, что дает пользователям возможность настроить интерфейс: есть возможность создавать собственные инструментальные панели, добавлять заказные кнопки, корректировать клавиатурные ускорители программы и даже использовать Visual Tool Markup Language для изменения интерфейса приложения. Можно также пристыковывать, прятать или отделять части интерфейса. В программе есть замечательная функция CodeSweeper, которая позволяет вносить глобальные изменения на всем Web-сайте. Еще один плюс - режим автоматического завершения, когда при вводе текста заданные пользователем строки завершаются сами. Напрашивается вывод: большой плюс этой программы, особенно для тех разработчиков, которые любят создавать удобные для себя интерфейсы, состоит в том, что данная программа обладает значительно расширенными возможностями настройки по сравнению с другими подобными приложениями. Bare Bones BBEdit Данный пакет ориентирован на HTML-программистов, которые все привыкли делать сами, т.е. здесь нет такого огромного количества функций drag-and-drop, как в других программах, хотя в программе есть множество кнопок для добавления тегов, элементов заголовков и ссылок. Пакет обладает множеством полезных функций, таких как встроенная проверка орфографии, многократная отмена, поддержка 13 различных языков программирования, предварительный просмотр по одному щелчку мыши, инструменты завершения тегов и встроенный генератор таблиц. Но он предназначен главным образом для пользователей, знающих, как писать исходные тексты, любящих создавать страницы в текстовом редакторе и желающих избежать визуальных Web-программ, которые могут изменить сформатированные страницы неожиданным образом.

Macromedia Dreamweaver/Dreamweaver UltraDev Dreamweaver стал любимчиком программистов для Web-дизайна почти с самого момента своего создания. В программе соблюден баланс между созданием четкого исходного текста HTML с полным контролем над ним и реализацией необходимых средств drag-and-drop, облегчающих разработку. Данная программа не вносит нежелательных изменений в исходные тексты и создает компактные Web-сайты. Недавно Macromedia усовершенствовала программу, выпустив Dreamweaver UltraDev, который построен на основе ядра Dreamweaver и обладает расширенными функциональными возможностями. UltraDev позволяет соединять Web-страницы с базами данных, просматривать реальные данные в среде разработки и обладает интерактивностью на уровне сервера. Эти продукты не обладают готовыми средствами электронной коммерции, но все равно множество фанатов программирования доверяют именно этим пакетам! Microsoft FrontPage Профессиональные разработчики часто не воспринимают всерьез сайты, созданные при помощи FrontPage, поскольку большая часть их исходного текста генерируется автоматически. Но они забывают об исчерпывающем наборе функциональных возможностей и о том, как много людей приобщились к веб-дизайну, благодаря этому продукту. В интерфейсе программы много позаимствовано из знакомых приложений Microsoft Office, поэтому освоение программы не составляет труда. В программе сочетаются простые и понятные мастера с мощной функциональностью. FrontPage обладает интерфейсом, работающим в различных представлениях: есть представление страницы для работы над страницами Web, представление папок для выбора содержания и навигационное представление для проверки ссылок. В комплекте с программой предлагаются 60 шаблонов или Themes (тем), с широким диапозоном видов и стилей. Полезные мастера позволяют начать работу с шаблонов, но у вас всегда есть доступ к исходному тексту. Умение работать с FrontPage не заменит знания HTML, но поможет вам быстро создавать прекрасные сайты. В общем, FrontPage является великолепной программой для начинающего. NetObjects Fusion На первый взгляд удобный в навигации интерфейс и надежные шаблоны говорят о Fusion, как о простой программе, но за внешней простотой скрываются множество мощных функций. Fusion не предназначен для программистов на HTML - в действительности программа не обеспечивает легкое изменение исходного текста HTML вручную. Но она обладает большим набором таких опций, как "сборка" сетевого магазина и подключение внешних баз данных с помощью довольно удобных мастеров. Можно например сразу изменить логотип сразу на 200 страницах или добавить еще несколько навигационных ссылок, но исходный текст может оказаться довольно "тяжелым", что увеличит время загрузки страницы. Но совершенно очевидно, что Fusion поможет с минимальными усилиями и за кратчайший срок создать сайт от начала до конца.

2. Технологическое обоснование

2.1 Историческая справка

Сеть магазинов "Флагман" на сегодняшний день включает в себя девять магазинов: "Флагман", "Уют", "Зеленый", "Алтай +", "Продукты +" (Березка), "Звездный", "Прудской", "Продукты" (Белоярск), "Флагман - 3".

1) Магазин "Флагман", расположен по адресу г. Новоалтайск, ул. Октябрьская, 20 А. Его открытие состоялось 26 декабря 2003 года. Магазин представляет собой супермаркет, то есть многоэтажное (в данном случае четырехэтажное) здание со множеством отделов (в данном случае более пятидесяти) разного профиля начиная от косметики и заканчивая одеждой). Продуктовый отдел относится к разряду самообслуживания и его ассортимент насчитывает более 5000 наименований продукции (штат 23 сотрудника).

2) Магазин "Зеленый" расположен по адресу г. Новоалтайск, 8-ой микрорайон, 3 А. Является магазином самообслуживания. Имеет в ассортименте более 5000 наименований различной продукции. Открытие магазина состоялось 29 мая 2006 г (штат 27 сотрудников)

3) Магазин "Продукты +" (Березка) находится по адресу г. Новоалтайск ул. Деповская, 28. В Ассортименте магазина более 2000 наименований различной продукции. Является магазином прилавочного типа (штат 13 сотрудников)

4) Магазин "Алтай +" открылся в марте 2002 г. Расположен по адресу г. Новоалтайск ул. Красногвардейская 14. Является магазином прилавочного типа. Ассортимент насчитывает более 3000 наименований (штат 7 сотрудников)

5) Магазин "Звездный" относится к типу "магазин самообслуживания". Он открылся 10 ноября 2006 г. Находится по адресу г. Новоалтайск, ул. Гагарина 24. Ассортимент магазина насчитывает не менее 5000 наименований различной продукции (штат 24 сотрудника)

6) Магазин "Флагман - 3" относится к типу "супермаркет", "магазин самообслуживания" На территории магазина находится не менее 30 отделов различного профиля. Его открытие состоялось 16 февраля 2006 г. Адрес магазина г. Новоалтайск, 7-ой микрорайон, 2. Ассортимент насчитывает не менее 7000 наименований продукции.

7) Магазин "Продукты" расположен по адресу г. Белоярск, ул. Советская, 3. Ассортимент - около 2000 наименований продукции. Является магазином прилавочного типа. Открытие состоялось 15 февраля 2004 года (штат 6 человек)

8) Магазин "Уют" расположен по адресу г. Новоалтайск, ул. 22 партсъезда, 12. В настоящее время находится на реконструкции

9) Объединение магазинов в одну сеть "Флагман" Состоялось 1 июля 2007 г. Связи с этим юридический адрес ООО "Флагман" (Общество с Ограниченной Ответственностью): г. Новоалтайск ул. Октябрьская, 20а, а фактический адрес: г. Новоалтайск ул. 7 микрорайон, 2. Общая численность персонала 270 человек. В собственности организации находится 10 нежилых помещений, из которых 2 торговых центра общей площадью около 6,5 тысяч квадратных метров. Торговая сеть "Флагман" включает в себя 9 магазинов, специализирующихся на розничной торговле продуктами питания, из которых 5 магазинов прилавочного типа, 4 магазина самообслуживания типа супермаркетов.

2.2 Обоснование выбранного способа Web-конструирования

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

Такая же картина наблюдается в сфере Web-дизайна и Web-конструирования. Хотя язык HTML не является сравнительно сложным языком, все же для его освоения необходимы определенные способности и знания, не говоря уже о времени.

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

Сходную во многом картину можно наблюдать на примере языка программирования Pascal. Этот язык требует очень много времени от программиста и необходимости вручную описывать процедуры.

На смену ему по требованиям времени пришел Object Pascal, в котором создание программы облегчено за счет визуальный средств (одним щелчком мыши вызывается необходимая процедура)

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

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

2.3 Виды современного дизайна

Существует несколько видов Web-дизайна:

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

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

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

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

5) Смешанный - комбинация нескольких типов.

2.4 Элементы дизайна

2.4.1 Шрифт и текст

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

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

В современном мире компьютер открыл для всех желающих простор для шрифтового пространства.

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

Основную массу шрифтов можно разделить на две большие группы: шрифты с засечками и без засечек (рубленые) В отдельный класс выделяют моноширинные шрифты. У них одинакова ширина всех букв и знаков, так как по начертанию эти шрифты обычно имитируют буквы пишущих машинок или старых матричных принтеров.

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

Из начертаний внутри определенной гарнитуры чаще всего используется прямое или курсивное. Курсивное начертание имитирует наклоненный вправо, более округлый и беглый рукописный почерк, однако сохраняющий графические особенности прямого начертания и хорошо сочетающийся с ним. Курсивная разновидность есть у всех текстовых шрифтов с засечками. У большинства рубленых шрифтов создать близкий по стилю курсивный вариант значительно труднее, и некоторые из рубленых и моноширинных шрифтов употребляют вместо курсива просто слегка перекошенное вправо основное начертание. Большинство декоративных шрифтов не имеет курсива вообще.

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

2.4.2 Заглавия и заголовки

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

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

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

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

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

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

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

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

- как попасть на эту Web-страницу

- куда дальше идти с этой Web-страницы

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

2.5 Графика на Web-страницах

2.5.1 Форматы графики на Web-страницах

Именно благодаря графике на Web-страничках WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.

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

Для использования в Web-сайтах применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен, и не все браузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.

Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.

Формат GIF

Поддерживает не более 256 цветов (меньше можно и часто нужно);

Использует палитру цветов;

Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы практически не сжимаются);

Поддерживает чересстрочную развертку;

Является поточным форматом, т.е. показ картинки начинается во время перекачки;

Позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIF-ов;

Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIF-ов;

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

А теперь немножко разъяснений - к чему эти свойства могут привести. GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если нужно разместить красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если необходимо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов. А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.

Формат JPEG

Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение; Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов; Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается. Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.

Страницы: 1, 2, 3