Методические рекомендации по созданию сайта.
методическая разработка на тему

1. Общая часть.

1. Классификация способов создания сайта.

Существует всего три способа создания сайта:

1. HTML – сайт визитка.
2. CMS системы – создание сайта с помощью уже готовых движков.
3. PHP – написание движка сайта с помощью PHP.

1. Особенности разработки с помощью HTML

Разработка сайта на «чистом» HTML без CSS-стилей не осуществляется. Сам по себе HTML – это язык разметки страницы. Разметка осуществляется с помощью специальных тегов, которые можно посмотреть на специальном сайте - htmlbook.ru. CSS отвечает за оформление страницы. Про CSS вы можете почитать из того же источника. Обычно сайты «визитки» применяются в том случае, если не требуется часто менять контент сайта. Но иногда не достаточно только HTML и CSS для таких сайтов, особенно в современных сайтах – применяется язык JavaScript(JS), а так же библиотеки, написанные на нем JQuery(JQ), MooTools и другие.

2. Особенности разработки с помощью CMS систем.

CMS – сокращение от англ. Content Management System, что означает – система управления контентом. Специальная система написанная на языке PHP для обеспечения упрощенного управления содержимым сайта.

Существует множество готовых CMS систем, самые популярные из них – Wordpress, Joomla, DLE, Битрикс. Каждая из них имеет собственные инструменты решения тех, или иных проблем. Для создания на них сайта, их нужно скачать(если она бесплатная), либо купить лицензию и установить следуя инструкции. После чего нужно подобрать дизайн(шаблон) для вашего сайта, либо заказать у людей, кто этим занимается и установить, что не должно составить труда, если шаблон выполнен правильно. Создание сайта с помощью CMS систем не требует особых навыков, но желательно знать хотя бы основы HTML.

3. Особенности разработки с помощью PHP.

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

Создание сайта с помощью данного языка программирования является довольно трудной задачей и требует специальных навыков и знаний. Для начала, пишется CMS на данном языке, о чем мы говорили ранее. Сейчас редко CMS пишется на «чистом» PHP. Для сайтов применяются базы данных, самой популярной из них является MySQL, но существуют еще SQLite, MySQLi, MongoDB и другие.

CMS состоит из:

1. Основной класс-контроллер.
2. Подключаемые объекты управления через класс-контроллер.
3. Система управления базой данных(СУБД).
4. Конструктор шаблонов.
5. Плагины, моддинги и любые другие виды расширения – не обязательно.

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

Такая разработка сайта стоит значительно дороже и занимает больше времени, применяется в том случае, если существующие CMS системы не дают тех инструментов и гибкости, которая требуется поставленной задачей. Либо в студиях создания сайтов, что бы  в последствии быстро выполнить ту или иную задачу.

2. Специальная часть.

1. Разработка карты сайта.

Главная страница делится на три основные части: верх(head), содерание(content), низ(footer, подвал).

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

В содержании размещается какая-либо статья или информация, если новость не выбрана, а правее нее блок с новостями.

Внизу расположен копирайт – «Липецкий промышленно-металлургический техникум © 1986-2013».

2. Разработка макета сайта.

Макет сайта разрабатывается обычно в программе Photoshop.  Для начала нужно создать рабочую область(рис. 1). Ширину обычно для подобных сайтов выбирают не более 1600px, т.к. сайт статичен – 1000px, и не используются фоновые изображения. Высота для рабочей области не имеет значения в данном макете. После нужно включить линейку(CTRL+R) и наметить линии ширины сайта(рис. 2), рабочая область у нас имеет 1600px, следовательно, середина у нас в 1000px будет от 300px до 1300px. Захватываем линейку слева и тянем ее в правую сторону.

Рисунок 1 Создание рабочей области

Рисунок 2 Линии разметки

Дальше нам потребуется сделать горизонтальную разметку. Так же тянем сверху вниз линию и отпускаем, где требуется. Какие разметки делать, зависит только от дизайнера и его планов на макет.

Разработка макета требует много труда и практики. Я покажу вам на примере, как сделать  иконку из слайдера(рис. 3). Но без базовых знаний Photoshop'а я думаю вам не получится это реализовать.

Рисунок 3 Иконка сварщика

Для начала мы возьмем инструмент  эллипс. Выберем цвет #373f47 и с зажатой клавишей «Shift» нарисуем круг. После создадим новый слой(CTRL+SHIFT+N), зажмем CTRL и нажмем на иконку слоя с кругом. У нас появится выделение. Вверху выбираем Выделение -> Модификация -> Сжать. Введем 5 писелей(рис. 4). Выберем инструмент заливка  и зальем выделенную область цветом #49a1dd.

Рисунок 4 Сжатие выделения

        И так, фон у нас имеется, осталось добавить изображение иконки. Существует множество баз иконок, где вы сможете ее подобрать. Но я не нашел и делал эту иконку сам, как ее рисовать я объяснять не буду, это слишком долго. Я предлагаю вам ее скачать по этой ссылке: s5.hostingkartinok.com. Т.к. картинка белая и фон в браузере белый, вы не увидите ее. Просто нажмите CTRL+S и сохраните куда-нибудь, после откройте в photoshop.  Поместите ее примерно по центру и нажмите на этом слое два раза. У вас выскочит окно стиля слоя, выберите тех и сделайте параметры, как показано на рисунке 5.

Рисунок 5 Стиль слоя

        После создайте новый слой и с зажатой клавишей CTRL нажмите на иконку слоя с нашей иконкой сварщика. Как мы это делали ранее. После выберите инструмент градиент  и с параметрами градиента от черного к белому. Потяните снизу выделения до верха и отпустите. Сделайте непрозрачность слоя 20%. Все, наша работа готова!

        Все остальное делается примерно такими же приемами, но без основных знаний программы photoshop вы не сможете сделать хороший макет сайта. Я бы вам посоветовал ресурс www.photoshop-master.ru – там множество хороших уроков, как для начинающих, так и для более опытных дизайнеров и людей, которые занимаются графикой.

3. Разработка выпадающих окон.

Выпадающие окна – частое явление на современных сайтах, конечно и я решил не быть «отставшим» и реализовал их на иконках с профессиями, что бы там можно было дать краткое описание и ссылку на полное описание.

Рисунок 6 Выпадающее окно

Делается это не так трудно, как может показаться на первый взгляд. Реализовывается с помощью HTML и CSS.

Часть HTML:

 class="slider">

       

•  src="img/icons/mechatronics.png" width="104" height="104" /> class="desc">Мехатроник - это занимательная профессия, с ней вы сможете... Описание...