Web-Дизайн Денис Игоревич 04.02.2013 Введение в Веб-дизайн Веб-дизайн – это область веб разработки и разновидность дизайна, задачи в которой входит проектирование пользовательских веб-интерфейсов для сайтов и веб-приложений. Веб-сайт – это: 1) Информация которая располагается на веб сервере и имеет свой адрес. 2) Некоторый набор текстовой и графической информации организованной в виде нескольких веб страниц. 3) Страницы связаны между собой гипертекстовыми ссылками. Виды веб-сайтов 1) Личные, персональные 2) Информационные сайты 3) Дистанционного образования 4) Коммерческие – интернет магазины и т.д. 5) Развлекательные Веб-страница – представляет собой текстовый файл с расширением .htm или .html, который содержит текстовую информацию и html коды определяющие вид отображения информации в браузере. Этапы разработки сайта 1) Постановка ТЗ 2) Дизайн основной и типовых страниц сайта 3) Html верстка 4) Программирование 5) Тестирование сайта 6) Размещение сайта в интернет 7) Наполнение контентом и публикациями 8) Внутренняя SEO оптимизация 9) Внешняя SEO оптимизация (ссылка с других сайтов на ваш) 10) Сдача проекта 11) Сопровождение Планирование сайта 1) Определить цель создания сайта 2) Определить тематику сайта 3) Определение целевой аудитории a. Примерная возрастная группа и пол b. Цель посещения c. Определение круга браузеров d. Определение скорости подключения Все надо разбить на две группы контент и дизайн (планирование и содержание) 1) На первой (титульной) странице размещается заголовок сайта, ссылки на страницы с основной информацией и некоторые общие сведения 2) Наличие на главной странице ключевой фразы или слова 3) Ограничение длинны страниц 3-4 экранами, длинна первой страницы – 1 экран 4) При необходимости организовывать ссылки со страницами содержащие основную информацию на страницы с более подробной информацией Оформление сайтов Дизайн – размещение и оформление элементов содержания и навигации. Композиция – определенное сочетание частей изображения, соотношение их размеров, пропорций, цветов, фактур. 05.02.2013 Свойства композиции: 1) Выразительность – изображение захватывает внимание посетителя 2) Выявление центра – подчеркивание части которая выражает главную идею Графика – визуальное средство подчеркивания и выделения информации. Размещение сайта Бесплатный хостинг: 1) + Бесплатный сервис и быстрая регистрация 2) – Не гарантируется непрерывная работа сайта 3) – Используется реклама лица предоставляющего хостинг для вашего сайта 4) – В любой момент в хостинге может быть отказано Платный хостинг: 1) + Домен второго или первого уровня 2) + Гарантируется стабильная работа сайта 3) + Гарантируется определенная скорость доступа к сайту 4) + Дополнительные услуги 5) – Платный сервис 6) – Процесс регистрации дольше Основы HTML HTML – это теговый язык разметки документов. Основная структура <HTML> <head> <title>Заголовок</title> </head> <body> ….. </body> </html> Перед самым началом можно указать версию html <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”> <!DOCTYPE HTML> - 5-я версия html Элементы и теги Элементы – это структуры которые описывают отдельные составляющие html документы. Комментарий – не влияют на отображение документа, а только поясняют его содержимое. <!--Текст комментария —> Типы данных html Тип CDATA – является цепочкой символов включая специальные символы ID и NAME – должны начинаться с латинской буквы от A до Z и состоять только латинских букв, цифр, дефисов, подчеркиваний, двоеточий и точек. Отличие name от ID в том, что он может содержать спец. символы. IDREF и IDREFS – указывают на идентификаторы, то есть назначение атрибута ID других элементов. Первый указывает на один, а второй на множество. Число – числовые значения атрибутов от 0 до 9 Текст – представляет собой текст