Файл: Проектирование создания Веб-сайта.pdf

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

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

• Wix. Известный сервис, работает уже почти 10 лет. Основное достоинство сервиса – язык HTML 5, т.е. поддержка современных стандартов разметки страниц. Имеет большой выбор шаблонов, разбитых по категориям. Сайт собирается не из готовых блоков, а из элементов, каждый из которых можно настраивать. Есть и дополнительные возможности: подключение домена, поисковая оптимизация.
• 

Рис. 3.1. Онлайн-конструктор Wix

• uKit. Хороший вариант, если нужен сайт для бизнеса. Имеется возможность подключить хостинг, купить домен привязать платёжные сервисы, добавить виджеты, подготовить мобильную версию и изучать статистику.
• 

Рис. 3.2. Онлайн-конструктор uKit

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

Рис. 3.3. Онлайн-конструктор LPmotor

• uCoz. Самый популярный конструктор России и СНГ. Универсальное решение для создания всех типов сайтов. Продвинутые возможности по редактированию кода.
• 

Рис. 3.4. Онлайн-конструктор uCoz

3.2 Adobe Dreamweaver

Adobe Dreamweaver – это HTML-редактор от компании Adobe, который на сегодняшний день очень известный. Первая его версия была выпущена в 1997 году и на сегодняшний день существует уже 8 его версий.

Рис. 3.5. HTML-редактор Adobe Dreamweaver

Самая основная особенность этого редактора – поддержка режима WYSIWYG. Это только название такое страшное, потому что обозначает аббревиатуру, расшифровать которую можно так: What You See Is What You Get. А вот значение этого режима в переводе означает «что ты видишь, то и получишь». Это означает, что если вы делали исправления на html-страничке, и хотите увидеть полученный результат, то вам уже не нужно заново открывать страничку или обновлять окно браузера, потому что на все изменения можно посмотреть в самом редакторе Dreamweaver и непосредственно в режиме правки кода. Это очень удобно и позволяет сэкономить массу времени, особенно при разработке сложных веб-сайтов.

Dreamweaver полностью поддерживает HTML5, а это дает новые возможности в использовании онлайн-видео, анимации, что, в свою очередь, придаст уникальность любому сайту.

К программе подсоединен jQuery – это значит, что пользователь с легкостью может использовать Java-скрипты при создании веб-странички.

Для начинающих Dreamweaver рекуомендуем. При создании первых сайтов он способен значительно облегчить обучение. Есть сервис подсказок и приличное количество шаблонов, элементов оформления, скриптов – с помощью всего этого легко, как говорится, «набить руку». Очень простые странички не заберут у пользователя много времени и сил.

Опытные веб-мастера, используя Dreamweaver, имеют значительно больше возможностей. Например, можно использовать CSS3, разрабатывать страницы под разные операционные системы (iOS и Android) и приложения. Есть уникальная панель «Многоэкранный просмотр», с помощью которой возможно оптимизировать сайт под самые разные устройства, не зависимо от размеров их экранов (вплоть до мобильных телефонов) и при этом ваш сайт будет выглядеть так, как вы хотите, как вам нужно.

3.3 Adobe Brackets

Adobe Brackets представляет из себя редактор с открытым исходным кодом. Предназначен для создания веб-приложений. Это редактор кода общего назначения и предназначен для людей, владеющих языками программирования. Имеет множество расширений, которые можно загрузить с сайта программы. Как заявляют создатели Brackets, их цель – создать лучший редактор кода для JavaScript, HTML и CSS и связанных с ними открытых веб-технологий.

Рис. 3.6. текстовый редактор Adobe Brackets

В редакторе нет необходимости переключения между документами HTML и CSS – их можно поставить одновременно в окне программы. Также возможно быстрое редактирование правил CSS при установке курсора в любом теге html.

Обычно для просмотра страницы в браузере нужно предварительное сохранение файла. В Brackets это не нужно. Эта программа открывает прямое соединение с локальным браузером и направляет изменения CSS, как только вы их напечатаете. Здесь нет нужды копировать и вставлять финальный CSS обратно в редактор. Код запускается в браузере, но живет в редакторе. Программа поддерживает «Интерактивный просмотр».

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

Brackets позиционируется как текстовый редактор, но по факту он больше напоминает полноценную IDE. Огромное количество плагинов позволяет превратить данный текстовый редактор в мощный комбайн для ВЕБ-разработки.

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

3.4 Текстовый редактор Notepad++

Notepad++ является бесплатным редактором текстовых файлов и поддерживает синтаксис огромного количества языков программирования (более пятидесяти) в среде Windows. Программа потребляет достаточно мало системных ресурсов и, соответственно, совсем не требовательна к железу компьютера, при этом она имеет огромные возможности — как для текстового редактора, и неплохую скорость работы.

Notepad++ часто сравнивают со встроенным в Windows блокнотом, описывая преимущества и недостатки обеих программ. Эти программы сильно отличаются друг от друга.

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

Чаще всего Notepad++ используют для веб-программирования, то есть как HTML, PHP, JavaScript-редактор.

Начинающие вэб-програмисты изначально часто пользуются Windows-блокнотом, как средством, которое всегда есть под рукой. В последствии, когда объем кода увеличивается, разобраться в нем становится все труднее и труднее и тут встает вопрос об установке программы, которая смогла бы облегчить работу.

У этой программы есть масса преимуществ по сравнению с другими довольно известными приложениями, например, такими как Dreamweaver или Microsoft FrontPage. Это более сложные программы с довольно большими возможностями, но они занимают определенное место на жестком диске и потребляют системные ресурсы не сравнимые с работой Notepad++. Во-вторых они не бесплатны. Так же Notepad++ легче и быстрее по сравнению со многими тяжеловесными редакторами.

Notepad++ программа, как и любая другая, требует ее установки, но есть и портативная версия Notepad++ Portable.

Поддержка синтаксиса большого количества языков программирования заключается в подсветке управляющих элементов и командных слов. Так же при необходимости можно вызвать выпадающее меню комбинацией «Ctrl + пробел» в котором будут перечислены все атрибуты и теги языка программирования, при наборе командного слова оно будет подсвечиваться в этом меню.

Рис. 3.7. текстовый редактор Adobe Brackets

ЗАКЛЮЧЕНИЕ

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

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

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

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

Познакомились с языком разметки HTML, который и позволяет написать код веб-страницы. Дизайн веб-страниц позволяет настроить таблица стилей CSS. Код стилей CSS может быть написан как внутри HTML-документа, так и в отдельном файле *.css формата.

Для редактирования кода можно использовать любой текстовый редактор, например, Notepad++. Либо специализированную среду разработки, самой популярной является – Adobe Dreamweaver.

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