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

реклама
КУРС ВЕБ ДИЗАЙН И
ПРОГРАММИРОВАНИЕ
В скором будущем компании будут делиться
на 2 типа — тех, кто делает бизнес в интернете,
и тех, кто вышел из бизнеса
ДЛЯ ЧЕГО НУЖЕН ВЕБСАЙТ?
Виртуальный образ. Брендинг.
 Имидж. PR.
 Аудитория.
 Поиск новых клиентов.
 Увеличение прибыли.

ВАРИАНТЫ СОЗДАНИЯ САЙТА
Индивидуальный заказ. HTML PHP JAVA…
 Разработка на базе CMS (система управления
содержанием)
 Framework

КАКИМ ДОЛЖЕН БЫТЬ ХОРОШИЙ САЙТ?
Минимальное время загрузки.
 Разумное количество пунктов меню и ссылок.
 Хороший баланс графики и текста
 Простая навигация по сайту
 Способность сайта продавать, получать новых
клиентов или клики по рекламе.
 Обновляемое содержание.
 Присутствует возможность для пользователей
взаимодействовать с сайтом.
 Обратная связь от посетителей.

ЭТАПЫ СОЗДАНИЯ САЙТА
Выбор имени домена.
 Выбор хостинга
 Дизайн HTML
 Программирование Java PHP
 Оптимизация скорости загрузки.
 Тестирование
 Продвижение сайта. Получение трафика. SEO
(Search Engine Optimization) социальные сети.
Обратные ссылки. PR ТИЦ.

ВЫБОР ИМЕНИ ДОМЕНА
https://domize.com/
 http://www.bustaname.com/
 http://www.nameboy.com/
 http://impossibility.org/
 http://Nurhost.kz
 http://hoster.kz

ЧТО НУЖНО УЧИТЫВАТЬ ПРИ ВЫБОРЕ
ИМЕНИ ДОМЕНА







ЗАПОМИНАЕМОСТЬ.
НЕ ИСПОЛЬЗОВАТЬ БУКВЫ Ю(YU) Я(YA) Ж(ZH)
У(U OO) Ш(SH)
НЕ БОЛЕЕ ДВУХ СЛОВ
ДЛИНА 5-12 СИМВОЛОВ
ИСПОЛЬЗОВАТЬ КЛЮЧЕВЫЕ СЛОВА
НЕ БОЛЕЕ ОДНОГО ДЕФИСА
УНИКАЛЬНОСТЬ ИМЕНИ (избегаем
конкуренции)
Vk.com (Домен для раскрученного сайта)
Vkontakte.com (Хорошее имя домена)
V-kontakte.com (Допустимое имя домена)
Yabloko-vkusnoye.com (Плохое имя)
ВЫБОР ХОСТИНГА
http://www.ipage.com
 http://godaddy.com
 http://iweb.com
 http://www.bigrock.com
 http://www.hoster.kz
 http://Nurhost.kz

ДИЗАЙН HTML 5 И СТРУКТУРА
СТРАНИЧКИ
















Макет сайта или статические страницы создаются на
HTML5
Notepad ++
Total commander
Кодировки UTF-8
http://notepad-plus-plus.org/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
</head>
<body>
<p>Страница на HTML5</p>
<footer></footer>
</body>
</html>
КОПИРОВАНИЕ САЙТА НА СЕРВЕР.
Filezilla
 https://filezilla-project.org/
 FTP

МАКЕТ СТРАНИЦЫ
Шапка.
 Меню.
 Левая панель.
 Правая панель.
 Центральная часть.
 Слайдер.
 Paginator. Разбиение на страницы.
 Футер.

ГЛАВНОЕ ПРАВИЛО ДИЗАЙНЕРА

Уже все придумано.
УЧИМСЯ НА ЧУЖОМ ОПЫТЕ
Все интернет браузеры позволяют смотреть
HTML код сайта.
 Щелчок правой кнопкой мышки и просмотр
кода страницы.

СТИЛИ ОФОРМЛЕНИЯ <STYLE>


<style></style>
<!DOCTYPE html> <html> <head>
<meta charset="utf-8"> <title>boxshadow</title> <style> .shadow { background:
#fc0; /* Цвет фона */ box-shadow: 0 0 10px
rgba(0,0,0,0.5); /* Параметры тени */ padding:
10px; } </style> </head> <body>
<div class="shadow">В чащах юга жил бы
цитрус? Да, но фальшивый экземпляр!</div>
</body> </html>
ФАЙЛЫ CSS, CLASS, HOVER

http://css3gen.com/box-shadow/

.grid{

width:188px;

min-height:100px;

padding: 5px 15px 28px;

background:#fff;

margin:8px;

font-size:12px;

float:left;

box-shadow: 0 1px 3px rgba(34,25,25,0.4);

-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);

-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);


-webkit-transition: top 1s ease, left 1s ease;

-moz-transition: top 1s ease, left 1s ease;

-o-transition: top 1s ease, left 1s ease;
-ms-transition: top 1s ease, left 1s ease;


}

.grid:hover {

box-shadow: 0 1px 13px rgba(34,25,25,1);

-moz-box-shadow: 0 1px 13px rgba(34,25,25,1);

-webkit-box-shadow: 0 1px 13px rgba(34,25,25,1);

}
СТАТИЧНАЯ HTML СТРАНИЧКА
HTML Теги
 Стили

СОЗДАЕМ МАКЕТ ПЕРВОЙ СТРАНИЦЫ
Используем тег <div>
 Подключаем файл стилей
 Различны варианты выравнивания.

ДОМАШНЕЕ ЗАДАНИЕ
Скачать и установить:
 notepad++
 Total commander
 Filezilla

Выбрать тему и доменное имя сайта который
вы будете разрабатывать.
 Блог, фотогалерея, сайт визитка, интернет
магазин….
 Выбрать шаблон на сайте webmasterkz.net и
скопировать его на сайт.

ГРУППЫ ТЕГОВ
Теги верхнего уровня <html, head,body>
 Теги заголовка документа<title,meta>
 Блочные элементы <div,h1, pre, hr,p>
 Строчные элементы <br, big,I,b,em,img,strong>
 Универсальные <del,ins>
 Списки <ol,ul,li,dt,dd,dl>
 Таблицы<table,td,th,tr>
 Фреймы<frame,frameset,iframe>

Скачать