Основы веб-дизайна

Содержание

Слайд 2

К чему будем готовиться? Вводные данные: Название фирмы по продаже товаров

К чему будем готовиться?

Вводные данные:
Название фирмы по продаже товаров или услуг,

логотип, mockup всех страниц, краткое описание, список товаров или услуг с фотографиями и описанием, набор
случайных изображений и текста на тему фирмы, блок изображений стандартных социальных сервисов и шрифты.
Выходные данные:
набор файлов в формате HTML5 и CSS3.
Слайд 3

Прототипирование Mockup или mock—up (макет) — модель того или иного продукта,

Прототипирование

Mockup или mock—up (макет) — модель того или иного продукта, выполненная в естественных пропорциях

с целью более чёткого представления дизайна конечного продукта.
Слайд 4

Юзабилити Юзабилити - эргономичность, удобство использования, дружественность (удобство и простота использования

Юзабилити

Юзабилити - эргономичность, удобство использования, дружественность (удобство и простота использования сайта):
Навигация
Внутренний

поиск
Главная страница
Текст и его оформление
Дизайн для людей с ограниченными возможностями
Слайд 5

Навигация одинаковая навигация логотип или название сайта (обычно на него «вешают»

Навигация

одинаковая навигация
логотип или название сайта (обычно на него «вешают» также ссылку

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

Внутренний поиск форма поиска должна размещаться на всех страницах сайта в

Внутренний поиск

форма поиска должна размещаться на всех страницах сайта в верхней

области (традиционно, верхний правый угол). 
оптимальная длина поля для ввода запроса – 27-30 символов 
поиск на сайте должен быть только внутренним (по сайту); не следует предлагать пользователям поиск на внешних ресурсах, в интернете, так как для этого существуют глобальные поисковые системы.
оформление страницы с результатами поиска должно быть максимально приближенно к странице выдачи глобальных поисковых систем: содержать поле для ввода запроса с введенным посетителем запросом, список результатов должен содержать заголовок (со ссылкой), краткое описание, можно также добавить URL или раздел, к которому относится результат. 
используйте функцию проверки орфографии, как в глобальных поисковых системах (при вводе поискового запроса с ошибкой следует выводить строку «Возможно, Вы имели в виду [правильное написание запроса]?»)
Слайд 7

Главная страница Главная страница должна объяснять, что это за сайт и

Главная страница

Главная страница должна объяснять, что это за сайт и для

чего он был создан, обычно для выполнения этих функций используется слоган и текст приветствия. 
На главной странице должен быть обзор содержимого сайта, например, выгодные предложения, последние статьи, а также обзор сервисов, например, авторизация, подписка на рассылку новостей 
Желательно присутствие периодически обновляемой информации: анонсы новостей, корпоративного блога
Желательно наличие ссылки или подсказки «Откуда мне начать»
Слайд 8

Текст и его оформление Размер основного шрифта должен быть не меньше

Текст и его оформление

Размер основного шрифта должен быть не меньше 12

px.
При подборе шрифтов следует пользоваться относительными величинами (а не фиксированным размером). 
Шрифт «без засечек» (Arial, Arial Black, Verdana, Tahoma)
Не более трех разных цветов текста.
Пользователи придают одинаковое значение элементам, которые визуально выглядят одинаково. 
Не использовать только прописные буквы, так как при этом снижается скорость чтения и затрудняется восприятие. 
Текст и фон должны быть достаточно контрастны, лучший вариант – черный текст на белом фоне. Следует избегать таких сочетаний цветов как красный текст на синем фоне, оранжевый – на темно-зеленом и другие, так как подобные сочетания цветов порождают «эффект дрожания» и создают сильную нагрузку на зрение. 
Пользователи негативно относятся к мигающему тексту и бегущим строкам.
Слайд 9

Дизайн для людей с ограниченными возможностями Навигация с возможностью управления сайтом

Дизайн для людей с ограниченными возможностями

Навигация с возможностью управления сайтом только

с помощью клавиатуры (без использования мыши).
В начале каждой страницы ссылка на главную страницу, чтобы это было первое, что произносит экранный диктор 
В формах ставим тэг label для связи полей формы с текстом подсказок. 
Каждое изображение с описанием
Переключение между размерами текста на странице. 
Минимум javascript
Слайд 10

Psd-шаблон Psd-шаблон – макет внешнего вида страниц сайта, выполненный в формате

Psd-шаблон

Psd-шаблон – макет внешнего вида страниц сайта, выполненный в формате psd


Psd - внутренний формат Adobe Photoshop, позволяющий создать и сохранить многослойное изображение
Нарезка psd-шаблона – создание отдельных фрагментов в формате JPG, GIF, PNG (папка images)
Слайд 11

Макеты вёрстки

Макеты вёрстки

Слайд 12

Генератор шаблонов Генератор HTML+CSS шаблонов (макетов) - это онлайн-сервис, который генерирует

Генератор шаблонов

Генератор HTML+CSS шаблонов (макетов) - это онлайн-сервис, который генерирует архив,

содержащий 2 файла: HTML и CSS, представляющие из себя базовую разметку (каркас) будущего сайта.
Слайд 13

Блочная вёрстка Элементы сайта структурируются с помощью блоков (div). Позиционирование блоков

Блочная вёрстка

Элементы сайта структурируются с помощью блоков (div). Позиционирование блоков относительно

друг друга определяется стилями CSS.





#header { height: 126px;
background-image:url(img/bg.gif);
background-repeat:no-repeat;}
#content {padding: 10px 270px 0 10px;
color:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:120%;}
#sidebar {float: left;
margin-right: -3px;
width: 238px;
margin-left: -240px;
position: relative;
background: none;
top:-20px;}
#footer { width: 913px;
margin: -223px auto 0;
height: 223px;
background-image:url(img/bg-footer.jpg);}

Фрагмент файла index.php:

Фрагмент файла styles.css:

Слайд 14

Поля, границы, отступы

Поля, границы, отступы

Слайд 15

Фоновые изображения фоновый рисунок большой ширины фоновая картинка фоновый цвет фиксированный макет

Фоновые изображения

фоновый рисунок большой ширины

фоновая картинка

фоновый цвет

фиксированный макет

Слайд 16

Абсолютное и относительное позиционирование position: absolute position: relative

Абсолютное и относительное позиционирование

position: absolute

position: relative

Слайд 17

HTML (Hyper Text Markup Language) - язык разметки гипертекста фундаментальная технология

HTML

(Hyper Text Markup Language) - язык разметки гипертекста
фундаментальная технология Интернета
используется для

формирования web-страниц

HTML помогает браузеру понять, какой элемент страницы отображать и в каком месте окна браузера

Слайд 18

Теги и их атрибуты Тег – элемент языка HTML, отвечающий за

Теги и их атрибуты

Тег – элемент языка HTML, отвечающий за правильное

размещение на web-странице определенного элемента (абзаца текста, заголовка, изображения, гиперссылки, таблицы и т.п.)
Атрибут – уточняющий элемент тега (задаёт вид выравнивания, стиль, адрес ссылки и т.п.)
Слайд 19

CSS Cascading Style Sheets – каскадные списки стилей позволяют отделить описание

CSS

Cascading Style Sheets – каскадные списки стилей
позволяют отделить описание внешнего вида

элементов web-страницы от описания её структуры
могут размещаться внутри страницы или во внешнем файле
определяют шрифт, цвет, высоту, ширину, позиционирование элементов и т.д.
Слайд 20

Кроссбраузерность и адаптивная вёрстка Адаптивная вёрстка — вёрстка веб-страниц, обеспечивающая корректное

Кроссбраузерность и адаптивная вёрстка

Адаптивная вёрстка — вёрстка веб-страниц, обеспечивающая корректное отображение сайта

на различных устройствах, подключённых к интернету и динамически подстраивающаяся под заданные размеры окна браузера.

Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.

W3C-стандарты - это общий набор "правил" для браузеров с указанием, как использовать и показывать код страницы. 

http://validator.w3.org

http://jigsaw.w3.org/css-validator

W3C - World Wide Web Consortium

Слайд 21

Файловая структура сайта Рекомендации: стартовая страница - index.html именование каталогов и

Файловая структура сайта

Рекомендации:
стартовая страница - index.html
именование каталогов и файлов только на

латинице
для изображений - каталог images
для стилей – каталог css
- Предыдущая
Законотворческий процесс в РФ
Следующая -
Имена русских путешественников на карте Мира

Похожие презентации

Обзор программных продуктов дистрибутива Линукс Юниор
Алгоритм пользования сайтом Мирознай
Основы языка Python. Лекция № 4
Использование Ассемблера в ЯВУ. Соглашение о регистрах. Лекция 11 1
Мы в современном медиапространстве: уважение, безопасность, достоверность
Интернет будущего
Двоичное кодирование символьной информации 30.08.15
Руководство по сложным вопросам Scopus
Киберспорт. Зарождение киберспорта. Перспективы развития
Двоичное кодирование различных видов информации
Логические уравнения и системы повышенной трудности
Презентация на тему География интернета
Сортировка данных в таблицах
Communardo Software GmbH Lösungen aus Leidenschaft für Netzwerke
Работа журналиста. Реконструкция журналистского поиска
Правила участия в СКАЙП встречах Азбуки грамотного садовода, г. Пермь
Виды информационных технологий
Память компьютера
Презентация Робототехника и искусственный интеллект
Растровая и векторная анимация
Основы HTML
С компьютером на "ты"
Компьютер. Устройства
Основы компьютерной криминалистики
Разработать прием оплаты бонусными баллами
Microsoft Excel – электронные таблицы
Система управления базами данных MS Access (СУБД MS Access)
Презентация "Системы охлаждения" - скачать презентации по Информатике
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть