Программные средства создания Web-страниц и Web-сайтов
Министерство образования и науки РФ
Федеральное Государственное бюджетное образовательное
учреждение высшего профессионального образования
«Ижевский государственный технический университет» им. М.Т. Калашникова
Факультет «Реклама и дизайн»
Кафедра «Инженерная графика и технология рекламы»
Курсовая работа
по дисциплине «Информационные технологии в рекламе»
на тему: «Программные средства создания
Web-страниц и Web-сайтов»
Выполнил: студент гр. -55-2з
Иванова Е. И
Проверил: к.т.н., доцент
Ахмедзянов Э.Р.
Ижевск, 2013
Содержание
Введение 3
1. Понятие Web-страницы и Web-сайта
- История Web-страниц и Web-сайтов
7 - Классификация Web-сайтов 9
2. Как построить хороший сайт
2.1. Представление текста на Web-страницах
2.3. Планирование информационного потока
2.4 Условия для создания
3. Программные средства для создания Web- страниц и Web-сайтов 18
4. Разработка Web-сайта, посвященного теме
«Мой ребенок» и
продукту «Нурофен»
4.1. Создание новой Web-страницы (шаблона) 25
4.2. Ввод и форматирование текста
4.3. Работа с графикой
4.4. Создание гиперссылок
Заключение 31
Список использованных источников 32
Введение
World Wide Web , WWW, W3, Web, Сеть, Всемирная паутина, Веб – все эти термины используются для обозначения одного явления глобального масштаба. Определим Веб как распределенную систему взаимосвязанных гипертекстовых документов, содержащихся на различных компьютерах, подключенных к Интернету.
Для чего же нам нужны веб-сайты и веб-страницы? Любая
компания стремится к росту. Она развивается
и стремится охватывать своей деятельностью
более широкое бизнес поле. Это легко осуществляется
путем создания сайта.
Даже
не стремящейся к росту компании, которая
уверенно стоит на ногах и располагает
клиентской базой, большей, чем достаточно,
мы все равно советовали бы создать сайт.
- Во-первых, с помощью сайта можно улучшить информационное обеспечение клиентов.
- Во-вторых, наличие сайта уже формирует положительный образ компании в глазах любого партнера.
- В-третьих, сайт может подарить варианты, о которых, порой, трудно догадаться.
- В-четвертых, сайт может проводить не требующие усилий маркетинговые исследования.
- В-пятых, трудно предположить, что может сделать для компании. Многое...
После создания сайта нет больше необходимости
пересылать по факсу прайс-листы, договора
и т.п. - достаточно выложить их на сайт
один раз и они станут доступны всем посетителям!
Нет необходимости долго объяснять, как
выглядит, работает, и какие могут быть
варианты по той или иной позиции.
Сайт - это визитная карточка
компании. Практически все крупные компании в настоящее
время обзавелись собственными web-сайтами.
Мало того, даже среди небольших и начинающих
компаний редко встретишь фирму без собственного,
пускай совсем простенького, сайта. Сайт
свидетельствует о процветании компании,
о ее солидности и современности.
Вот
несколько преимуществ web-сайта:
- Сайт доступен для посетителей круглосуточно
- удобство получения информации клиентами.
- Информирование посетителей сайта существенно
дешевле рассылки бумажной корреспонденции.
- Ваша компания получает представительство
на глобальном рынке, что просто невозможно
другими средствами со столь же малыми
затратами.
Цель данной курсовой работы: Выявить программные средства создания веб-страниц и веб-сайтов.
4
- Понятие Web-страницы и Web-сайта
Веб-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.
Веб-страницы обычно создаются на языках разметки HTML и могут содержать гиперссылки для быстрого перехода на другие страницы.
Информация на веб-странице может быть представлена в различных формах:
- текст
- статические и анимированные графические изображения
- аудио
- видео
- апплеты
Информационно значимое содержимое веб-страницы обычно называется контентом.
Несколько веб-страниц, объединенных
общей темой и дизайном, а также
связанных между собой ссылками
Веб-сайт (от англ. website: we
5
Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят «своя страничка в Интернет», то подразумевается целый веб-сайт или личная страница в составе чужого сайта. Кроме веб-сайтов в сети Интернет так же доступны WAP-сайты для мобильных телефонов.
Изначально веб-сайты представляли собой
совокупности статических документов.
В настоящее время большинству из них
свойственна динамичность и интерактивность. Для таких случаев специалисты используют
термин веб-приложение — готовый программный комплекс для
решения задач веб-сайта. Веб-приложение
входит в состав веб-сайта, но веб-приложение
без данных сайтом является только технически.
В большинстве случаев в Интернете одному
веб-сайту соответствует одно доменное имя. Именно по доменным именам сайты идентифицируются
в глобальной сети. Возможны иные варианты:
один сайт на нескольких доменах или несколько
сайтов под одним доменом. Обычно несколько
доменов используют крупные сайты (веб-порталы) чтобы логически отделить разные виды
предоставляемых услуг (mail.google.com, news.google.com, maps.google.com). Нередки и случаи
выделения отдельных доменов для разных
стран или языков. Например, google.ru и google.fr
логически являются сайтом Google на разных языках, но технически это разные
сайты. Объединение нескольких сайтов
под одним доменом характерно для бесплатных
хостингов. Иногда для идентификации сайтов
в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/, а чаще всего
используется домен третьего уровня: my-site-name.example.com.
Аппаратные сервера для хранения веб-сайтов
называются веб-серверами. Сама услуга хранения называется веб-хостингом. Раньше каждый сайт хранился на своём
собственном сервере, но с ростом Интернета
технологическим улучшением серверов
на одномкомпьютере стало возможно размещение множества
сайтов (виртуальный хостинг). Сейчас сервера для хранения только
одного сайта называются выделенными (англ.
6
Один и тот же сайт может быть доступен по разным адресам и хранится на разных серверах. Копия оригинального сайта в таком случае называется зеркалом. Существует так же понятие оффлайновая версия сайта — это копия сайта, которая может быть просмотрена на любом компьютере без подключения к компьютерной сети и использования серверного программного обеспечения (ПО).
- История Web-страниц и Web-сайтов
Первый в мире сайт info.cern.ch появился в 1990 году. Его создатель, Тим Бернерс-Ли (рис. 1), опубликовал на нём описание новой технологии World Wide Web, основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметкиHTML. Также на сайте были описаны принципы установки и работы серверов и браузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты.
Рис. 1. Тим Бернерс-Ли
Все инструменты, необходимые для работы первого сайта, Бернерс-Ли подготовил ещё раньше — в конце 1990 года появились первый гипертекстовый браузер WorldWideWeb с функционалом веб-редактора, первый сервер на базе NeXTcube и первые веб-страницы.
7
«Отец» веба считал, что гипертекст может служить основой для сетей обмена данными, и ему удалось претворить свою идею в жизнь. Ещё в 1980 году Тим Бернерс-Ли создал гипертекстовое программное обеспечение Enquire, использующее для хранения данных случайные ассоциации. Затем, работая в Европейском центре ядерных исследований в Женеве (CERN), он предложил коллегам публиковать гипертекстовые документы, связанные между собой гиперссылками. Бернерс-Ли продемонстрировал возможность гипертекстового доступа к внутренним поисковику и документам, а также новостным ресурсам Интернета. В результате, в мае 1991 годав CERN был утверждён стандарт WWW.
Тим Бернерс-Ли является «отцом» основополагающих технологий веба — HTTP, URI/URL и HTML, хотя их теоретические основы были заложены ещё раньше. В 1940-х годах Ванневар Буш выдвинул идеи расширения памяти человека с помощью технических устройств, а также индексации накопленной человечеством информации для её быстрого поиска. Теодор Нельсон и Даг Энгельбарт предложили технологию гипертекста — «ветвящегося» текста, предоставляющего читателю разные варианты чтения. Xanadu, так и не законченная гипертекстовая система Нельсона, была предназначена для хранения и поиска текста, в который введены взаимосвязи и «окна». Нельсон мечтал связать перекрёстными ссылками все тексты, созданные человечеством.
В настоящее время Тим Бернерс-Ли возглавляет основанный им Консорциум Всемирной паутины (World Wide Web Consortium), который занимается разработкой и внедрением стандартов интернета.
8
1.2 Классификация веб-сайтов
По доступности сервисов:
- Открытые — все сервисы полностью доступны для любых посетителей.
- Полуоткрытые — для доступа необходимо зарегистрироваться (обычно бесплатно).
- Закрытые — полностью закрытые служебные сайты организаций (в том числе корпоративные сайты), личные сайты частных лиц. Такие сайты доступны для узкого круга людей. Доступ новым людям обычно даётся через т. н. инвайты (приглашения).
По природе содержимого:
- Статические — всё содержимое заранее подготавливается. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере.
- Динамические — содержимое генерируется специальными скриптами (программами) на основе других данных из любого источника.
По физическому расположению:
- Внешние сайты сети Интернет.
- Локальные сайты — доступны только в пределах локальной сети. Это могут как корпоративные сайты организаций, так как и сайты частных лиц в локальной сети провайдера.
По схеме представления информации, её объёму и категории решаемых задач можно выделить следующие типы веб-ресурсов:
- Интернет-представительства владельцев бизнеса (торговля и услуги, не всегда связанные напрямую с Интернетом):
- Сайт-визитка — содержит самые общие данные о владельце сайта (организация или индивидуальный предприниматель). Вид деятельности, история, прайс-лист, контактные данные, реквизиты, схема проезда. Специалисты размещают своё резюме. То есть подробная визитная карточка.
9
- Представительский сайт — так иногда называют сайт-визитку с расширенной функциональностью: подробное описание услуг, портфолио, отзывы,форма обратной связи и т.д.
- Корпоративный сайт - содержит полную информацию о компании-владельце, услугах/продукции, событиях в жизни компании. Отличается от сайта-визитки и представительского сайта полнотой представленной информации, зачастую содержит различные функциональные инструменты для работы с контентом (поиск и фильтры, календари событий, фотогалереи, корпоративные блоги, форумы). Может быть интегрирован с внутренними информационными системами компании-владельца (КИС, CRM, бухгалтерскими системами). Может содержать закрытые разделы для тех или иных групп пользоватлей - сотрудников, дилеров, контрагентов и пр.
- Каталог продукции — в каталоге присутствует подробное описание товаров/услуг, сертификаты, технические и потребительские данные, отзывы экспертов и т. д. На таких сайтах размещается информация о товарах/услугах, которую невозможно поместить в прайс-лист.
- Интернет-магазин — веб-сайт с каталогом продукции, с помощью которого клиент может заказать нужные ему товары. Используются различные системы расчётов: от пересылки товаров наложенным платежом или автоматической пересылки счета по факсу до расчётов с помощью пластиковых карт.
- Промо-сайт — сайт о конкретной торговой марке или продукте, на таких сайтах размещается исчерпывающая информация о бренде, различных рекламных акциях (конкурсы, викторины, игры и т. п.).
10
- Сайт-квест — Интернет-ресурс, на котором организовано соревнование по разгадыванию последовательности взаимосвязанных логических загадок.
- Информационные ресурсы:
- Тематический сайт — веб-сайт, предоставляющий исчерпывающую информацию о какой-либо теме.
- Тематический портал — это очень большой веб-ресурс, который предоставляет исчерпывающую информацию по определённой тематике. Порталы похожи на тематические сайты, но дополнительно содержат средства взаимодействия с пользователями и позволяют пользователям общаться в рамках портала (форумы, чаты) — это среда существования пользователя.
- Веб-сервис — обычно решает конкретную пользовательскую задачу напрямую связанную с сетью Интернет:
- Поисковые сервисы — например, Яндекс, Google.
- Почтовый сервис.
- Веб-форумы.
- Блоговый сервис.
- Фотохостинг — например, Flickr, ImageShack,
Panoramio, Photobucket. - Хранение видео — например, YouTube, RuTube.
- Доска объявлений.
- Каталог сайтов — например, Open Directory Project
По отношению к посетителю:
- Вовлекающий сайт.
- Безразличный к посетителю.
11
2. . Как построить хороший сайт
2.1 Представление текста на Web-страницах
При создании профессиональной графики для Web используется текст со сглаженными краями. Сглаживание – это легкая размытость на неровных краях, сглаживающая переходы между цветами. Не сглаженные края, напротив, выглядят зазубренными и ступенчатыми. Исключением из этого общего правила является текст очень малого размера, (10 пунктов и меньше), применение сглаживания делает его практически неразличимым. Текст малых размеров будет выглядеть намного лучше без сглаживания.
Два комплекта шрифтов. При разработке Web-страницы средствами базового HTML есть два комплекта шрифтов; пропорциональный и шрифт фиксированной ширины. Проблема заключается лишь в том, что неизвестно, какой из них и какого размера будет использован при отображении.
Пропорциональный шрифт – иначе "шрифт переменной ширины" для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная "W" занимает больше места в строке по горизонтали, чем прописная "I". Такие гаринитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов.
Web-браузеры для большинства текстов на Web-странице, включая основной текст, заголовки, списки, цитаты и т. д., используют пропорциональные шрифты. Как правило, большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило.
12
Шрифт с фиксированной шириной предоставляет одинаковое место для всех символов шрифта. Заглавная "W" занимает не больше места, чем прописная "I". Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В Web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: <рге>, <tt>, <code>, <kbd>,<samp>, <хтр>.
Поскольку многие люди не меняют настройку шрифтов, установленную по умолчанию, текст, находящийся в указанных тегах, будет выведен одним из шрифтов типа Courier.
Размер шрифта. Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами. Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями.
2.2 Представление графики на Web-страницах
На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее – краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов.
GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.
Его свойства состоят в следующем:
– поддерживает не более 256 цветов (меньше можно и часто нужно);
– использует палитру цветов;
– использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в
13
дальнейшем практически не сжимаются);
– поддерживает чересстрочную развертку;
– является поточным форматом, т.е. показ картинки начинается во время перекачки;
– позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;
– имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;
– поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах), осуществлять задержку между показами изображений и т.д.
А теперь немножко разъяснений – к чему эти свойства могут привести. Как мы написали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод – если у взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже – оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.
JPEG. Вторым
наиболее популярным
14
некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.
Фотографии
или любые изображения с
PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG – Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).
Размер файла. Без сомнения, именно графика сделала Web таким, каким мы его видим сегодня, но как дизайнер вы должны знать, что многие пользователи испытывают к графике в Web чувство на грани любви и ненависти. Не стоит забывать, что графика увеличивает время, необходимое Web-странице для передачи по сети; большой объем графики означает существенное время загрузки, которое испытывает терпение читателя, особенно если он
15
дозванивается с использованием стандартного модемного соединения.
В этом отношении для Web-дизайнера существует единственное наиболее важное правило: размер файла графического изображения должен быть минимально возможным! Создание изображений, предназначенных для передачи по сети, возлагает ответственность на разработчиков серьезно относиться к проблеме времени загрузки.
2.3
Планирование информационного
Многие Web-мастера не тратят время на то, чтобы продумать информационный поток, а ограничиваются только размещением текста и изображений на странице. Хотя на многих сайтах вы можете встретить хвастливые уверения, что у них гораздо больше посетителей, чем у конкурентов, однако это не самый лучший индикатор качества исполнения. Лучшим показателем является время: если пользователи остаются на вашем сайте достаточно долго для того, чтобы пройти по разным его уровням и разделам, то вы вправе быть уверенными в хорошо выполненной работе. Это означает, что они могут найти то, что им нужно, осмотреть остальное и без особого труда вернуться обратно.
Чтобы сделать свой сайт эффективным, я должна визуализировать поток информации и выбираемые пути. Другими словами, я должна видеть свой сайт с точки зрения пользователя. Процесс планирования может потребовать больших затрат труда, однако если он доставляет мне удовольствие, то вполне вероятно, что мой сайт будет превосходен.
16
2.4 Условия для создания успешного сайта
Самые лучшие Web-сайты — это те, которые привлекательно выглядят, емко выражают основную идею и не заставляют пользователей ждать получения информации на их экранах слишком долго. Некоторые условия для создания успешного сайта:
Четко сформулировать назначение сайта. Необходимо определить цели сайта, стараться формулировать цели настолько четко, насколько это возможно. Я хочу, чтобы сайт представлял продукцию компании Марс. После этого нужно задуматься о том, как продукция будет представлена, как позиционировать продукты на сетевом рынке. Без четко определенной цели сайт будет обречен на забвение где-то на задворках Всемирной Паутины.
Обязательно продумать аудиторию. Кто будет основной (и вторичной) аудиторией сайта? Какого они возраста? Чем они занимаются? Сколько времени они проводят на сайте?
Использовать быстро загружаемые элементы. Причина номер один, почему люди быстро уходят с сайта (или не посещают его вовсе) — слишком долгая загрузка информации. Большой объем графических файлов вызывает желание как-то повлиять на ход событий, и самое простое — это нажать на кнопку Stop, остановив загрузку.
Сделать сайт
визуально привлекательным. Нес
Не пытаться разместить все на одной странице. Не нужно перегружать страницы слишком большим количеством информации. Все мы знаем, что писатели любят писать, а дизайнеры-графики — рисовать эффектные картинки.
17
Моя задача как разработчика сайта — создать тонкую гармонию между этими двумя очень различными группами людей, установить равновесие между текстовой и изобразительной информацией.
Разумно организовать содержимое. Знакомое утверждение, что содержание первично, а форма вторична. И это правда, но форма подачи содержания тоже важна. Сколько раз при посещении очередного сайта вы говорили себе: "Здесь нет ничего интересного"? Возможно, где-то глубоко внутри и захоронено что-то ценное, но откопать это что-то можно, лишь случайно на него натолкнувшись. Информация, которую посетители должны увидеть, не нужно прятать вглубь сайта. Важную информацию необходимо сделать настолько легко доступной, насколько это возможно.
Воспользоваться картой сайта. Карта сайта может оказаться особенно полезной, когда возникнут трудности с представлением информации. Начните работу с главной страницы и идите вглубь. Это визуальное представление поможет "увидеть" содержимое вашего сайта, более ясно организовать его и избежать глобальных изменений при модификации сайта. Чем более четко я смогу представить себе структуру сайта, тем больше у меня появятся новых идеи по его улучшению.
3. Программные средства создания Web-страниц и Web-сайтов.
Создание web-сайтов, их поддержка
и развитие осуществляется с помощью специализированного ПО.
HTML-документ,
можно создавать в любом текстовом редакторе,
например, в "блокноте" (MS NotePAD в составе
Windows).
HTML-документ, можно конвертировать из
многих программ, (например, Microsoft Word). После
конвертации одна страница текста может
превратиться в огромный HTML-файл размером
более 100кб. HTML-документ, можно создавать
с помощью визуальных пакетов (WYSIWYG -What You See Is
