Проектирование и разработка сайта средствами Web Page Maker

Курсовая работа

ПРОЕКТИРОВАНИЕ  И РАЗРАБОТКА САЙТА СРЕДСТВАМИ

 WEB PAGE MAKER

 

СОДЕРЖАНИЕ

 

 

ВВЕДЕНИЕ

В данной курсовой работе рассмотрены возможности Web Page Maker для проектирования и разработки сайта. Кроме теоретических сведений в данной работе представлен пример создания экономического сайта средствами Web Page Maker.

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

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

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

Целями данной работы являются анализ использования Web Page Maker и разработка и проектирование сайта. Реализация поставленных целей возможна при решении следующих задач:

• Обзор технических возможностей Web Page Maker;
• Изучить теорию Web-дизайна;
• Изучить Web-технологию;
• Выявление достоинств и недостатков использования Web Page Maker для разработки сайта.

Web Page Maker – это  очень простой инструмент для  создания Web-страниц. С его помощью  можно создавать страничку даже  не обладая никакими знаниями HTML. Web Page Maker содержит несколько высококачественных шаблонов, которые помогут начать работу. Также вместе с программой поставляются различные эскизы, Java - скрипты, таблицы, формы.

Таким образом, Web Page Maker достаточно прост в использовании  и позволяет за короткое время спроектировать и разработать сайт.

 

1 СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ

1.1 Web-дизайн и браузеры

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

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

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

 На рынке доминируют два основных браузера: Netscape Navigator и Microsoft Internet Explorer. Вместе они, включая все их версии, представляет примерно 90 % используемых сегодня браузеров.

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

 Большинство Web-авторов  в своей работе ориентируются на Navigator и Internet Explorer, поскольку они занимают львиную долю рынка. Тем не ме-нее, существует ряд других браузеров, которые можно принимать во внимание.

1.2 Обеспечение доступности Web-страницы

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

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

Все большее число  разработчиков считает стандартным  разрешение 800x600. И совсем единицы  разрабатывают страницы для еще  более высоких разрешений.

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей. Однако успех данной инициативы зависит от участия в ней рядовых разработчиков, которые могут (или не могут) создать Web-сайты в соответствии с поставленными задачами.

1.3 Представление текста на web-страницах

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

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

Пропорциональный шрифт - иначе "шрифт  переменной ширины" для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная "W" занимает больше места в строке по горизонтали, чем прописная "I". Такие гаринитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов.

Web-браузеры для большинства  текстов на Web-странице, включая основной  текст, заголовки, списки, цитаты  и т. д., используют пропорциональные  шрифты. Как правило, большие отрывки  основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило.

Шрифт с фиксированной шириной  предоставляет одинаковое место  для всех символов шрифта. Заглавная "W" занимает не больше места, чем прописная "I". Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco.

1.4 Представление графики на web-страницах

На данный момент почти  все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее - краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов. GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

Его свойства состоят  в следующем:

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

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

 

Вторым наиболее популярным графическим форматом в Web является JPEG – Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

Фотографии или любые  изображения с плавными градациями цветов лучше всего сохранять  в JPEG-формате, потому что он предлагает более высокое качество изображений, умещающихся в файл меньшего объема. Тем не менее, JPEG не является лучшим решением для графических изображений с одноцветными областями, поскольку этот формат имеет тенденцию испещрять цвета крапинками и конечный файл, как правило, будет несколько больше, чем GIF-файл для того же изображения. PNG.

Есть еще третий графический  формат, конкурирующий за постоянное использование в Web. Это формат PNG - Portable Network Graphic, который, несмотря на некоторые  достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

Разрешение и размер файла изображений. Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi - pixels per inch). Другая единица измерения разрешения - количество точек на дюйм (dpi - dots per inch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.

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

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

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