«Создание сайта на тему: «Классификация сайтов по содержанию. Зависимость дизайна сайта от его контента»

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

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

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

Предмет исследования – классификация сайтов по содержанию. Зависимость дизайна сайта от его контента.

Цель исследования - создание Internet-сайта на тему «Классификация сайтов по содержанию. Зависимость дизайна сайта от его контента».

Для достижения поставленной цели в данной работе нам необходимо решить следующие задачи:

 анализ классификации сайтов;

 изучение Интернет технологий;

 планирование сайта и разработка технического задания;

 разработка сайта с использованием Интернет технологий;

 тестирование и публикация сайта.

Данная работа состоит из трех глав:

В первой главе данной работы исследуются интернет-технологий и программы для создания web-cтраниц.

Во второй главе разрабатываются:

 планирование сайта;

 техническое задание, которое включает общие сведения, назначение и цели создания сайта, характеристика сайта, требования к системе и сайту;

 публикация сайта.

Рассматривается формулировка цели создания сайта, обсуждение аудитории, требование к содержимому и внешнему виду, технические требования, технологии реализации, схема и макет сайта. Разрабатывается Интернет сайт.

В третьей главе рассматривается результаты внедрения Интернет сайта.

Несколько wеb-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, и обычно находящихся на одном web-сервере, образуют web-сайт.

1.2 HTML-редакторы

Реда́ктор HTML или HTML-реда́ктор - компьютерная программа, позволяющая создавать и изменять HTML-страницы. Несмотря на то, что HTML-код может быть написан в простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности.

По своей функциональности они делятся (часто весьма условно) на две категории:

 Редактор показывает только исходный код.

 Редактор показывает готовую страницу в режиме WYSIWYG (что

 видишь, то и получишь).

Многие WYSIWYG-редакторы позволяют одновременно работать и с кодом страницы.

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

Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими-то кривыми, поэтому для создания качественных web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.

Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производсту программ для создания веб-сайтов, а также законодателем моды в этой области. Последния версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю).

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).

Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page 2000 v2.

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

Графические редакторы

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

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

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

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

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

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

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

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

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

А) Редакторы растровой графики

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

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

PhotoPaint - еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop.

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

B) Редакторы векторной графики

Adobe Illustrator - пакет позволяет создавать, обрабатывать и редактировать векторную графику.

8. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СпБ: «Символ», 2005. – 350с.

9. Томас А. Пауэлл. WEB-дизайн. – СпБ: «БХВ-Петербург», 2004. – 278с.

10. Холзнер Стивен. Perl: специальный справочник :Пер. с анг. – СПб.: Питер, 2000. – 496с.: ил.

11. Хейл, Бернард Ван. JDBC: Java и базы данных :Пер. с англ. М.,1999.-320с.

12. Эферган М. Java: справочник. – СПб.: Питер, 1998. -448с.: ил.

13. Румянцев «Сам себе WEB – программист», Москва 2001

14. Левин "Internet для "чайников", Москва 1996.

15. Рассохин Лебедев "World Wide Web - глобальная информационная паутина в сети Internet", Москва 1997.

16. Перри "Секреты World Wide Web", Москва 1996.

17. Уолл "Использование WWW", Москва 1997.

18. Хеслоп "HTML с самого начала", СПб:, 1995

Электронный ресурс

19. Носов В. «Web-программирование (обзорная статья)» h**t://w*w.internet-technologies.r*/articles/category_36.html, свободный

20. Кусков С.М. «Создание web-сайтов» h**t://w*w.postroika.r* /programming/prog1.html, свободный

21. Интернет работа.Заработок в интернете, создание сайтов, SEO, блоггинг [Электронный ресурс]. Режим доступа : w*w. URL: h**t://blogwork.r*/chto-takoe-cms-ili-sistema-upravleniya-kontentom/

22. Энциклопедия сайтостроения [Электронный ресурс]. Режим доступа : w*w. URL: h**t://site.nic.r*/content/view/46/28/

23. Интернет работа.Заработок в интернете, создание сайтов, SEO, блоггинг [Электронный ресурс]. Режим доступа : w*w. URL: h**t://blogwork.r*/chto-takoe-cms-ili-sistema-upravleniya-kontentom/

24. Энциклопедия сайтостроения [Электронный ресурс]. Режим доступа : w*w. URL: h**t://site.nic.r*/content/view/46/28/

25. Гибкая разработка ПО (Agile Development) [Электронный ресурс]. Режим доступа : w*w. URL: h**t://wiki.agiledev.r*/doku.php?id=frameworks

26. Создание сайтов [Электронный ресурс]. Режим доступа : w*w. URL : h**t://prolabs.r*/Technical/Architecture/default.aspx

27. Краснов С.Л., Суриков С.Я. «Internet технологии» h**t://w*w.intuit.r*

28. h**t://w*w.citforum.r*, свободный

29. Беляев П.Р. «Joomla!» h**t://w*w.xpoint.r*, свободный

30. Липанов К.В., Рожков С.А. «Основы web-программирования» h**t://w*w.by.iatp.org.ua, свободный

31. h**t://phpclub.unet.r*, свободный

32. Куликов К.К. «Создание web-сайтов» h**t://w*w.webmasteram.r*, свободный

33. h**t://w*w.web4pro.com.ua/design

34. h**t://w*w.profyclass.r*/analys/223.htm

35. h**t://artprime.r*/knowledge/webdesighn/id~3/

36. Томас А Пауэлл. «Web – дизайн»

37. Коровенков Юрий - h**t://w*w.seo-copywrite.r*/web1/

38. h**t://w*w.luxsite.r*/services/createsite05.htm

39. Петюшкин А. В. - h**t://w*w.i2r.r*/static/255/out_14155.shtml

40. h**t://w*w.dserg.com/design-requirements-2008-12-22.html