К УРС ВЕБ ДИЗАЙН И ПРОГРАММИРОВАНИЕ
реклама
КУРС ВЕБ ДИЗАЙН И
ПРОГРАММИРОВАНИЕ
В скором будущем компании будут делиться
на 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>
