Модульная сетка представляет собой набор невидимых направляющих, вдоль которых располагаются элементы web-страницы. Это облегчает размещение данных в файле, обеспечивает визуальную связь между отдельными блоками и сохраняет преемственность дизайна при переходе от одной страницы к другой. Модульная сетка задает структуру макета, описывает размещение блоков в дизайне сайта. структура: сетка состоит из юнитов и промежутков между ними. Юнит -это единичный компонент,на основе которого формируются колонки. Расстояние между юнитами- сумммаа правого и левого отступов соседних юнитов. Модульную сетку описывают 3 основных параметра: ширина всей сетки, ширина юнита, ширина отступов между юнитами.
Одноколонная сетка контент в одну колонку чаще всего встречается в академическом дизайне, при фиксированном макете и публикации большого контента. Замечание
Академический дизайн характеризуется минимализмом оформления и даже аскетизмом. Основной упор делается на содержательную часть, а дизайну как таковому практически не уделяется внимания. Преимущественно академический дизайн встречается в научной среде.
Двухколонная сетка - это один из самых распространенных наборов при использовании на сайтах. При такой модульной сетке используется две колонки — одна отводится под основной контент, а вторая используется для навигации и другой полезной информации 
. Двухколонные сетки удобны при создании самых разнообразных сайтов и не требуют особых знаний по верстке web-страниц. Единственный недостаток, который им вменяют, что подобные сайты выглядят достаточно однообразно
Трехколонная сетка.
Такие сетки часто применяются на главных страницах сайтов, где одновременно требуется показать пользователю множество возможностей, которые он обнаружит на данном сайте. Также трехколонная сетка используется и на внутренних страницах, если для размещения различной информации двух колонок уже не хватает.
|
|
Одна из колонок отдается под навигацию, вторая, самая широкая — под основной контент, а в третью колонку добавляют рекламу, ссылки, контент и т. д. Трехколонная сетка обеспечивает больше простора для дизайна, ведь в некоторых местах можно объединять колонки, разбивать материал на отдельные фрагменты и визуально отделять один блок от другого.
16) Адаптивный дизайн сайтов.
Целью адаптивного дизайна является разработка универсального дизайна веб-сайта, который бы в свою очередь позволял просматривать и взаимодействовать с ресурсом с различных устройств.А также данная технология предполагает разработку одной версии веб-сайта для всех устройств, а не нескольких. Адаптивный веб-дизайн - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.
· Адаптивный шаблон сайта, способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
· Адаптация и перемещение блоков контента, способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
· Адаптация изображений, способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
|
|
· Использование гибкой сетки, позволяет максимально быстро изменять конструкцию макета;
· Скрытие менее важных блоков, на небольших экранах некоторые блоки могут скрываться;
· Переработка юзабилити элементов навигации, так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
· Упрощение ряда элементов на веб — странице, некоторые элементы упрощаются для использования на мобильных устройствах;
· Адаптация видео контента, также следует учесть и адаптацию видео;
· Использование медиа — запросов(media query), позволяют создавать адаптивный макет;
· Сначала мобильные(mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.
17) Основные тенденции и тренды веб-дизайна 2015- 2016гг
Большие и красивые имиджи.
С 2014 года в моду вошли большие фоновые изображения высокого качества.
Причем, желательно, чтобы эти иллюстрации были уникальными и особенными, специально подобранными для сайта. Поскольку практически все любят красивые картинки, этот тренд стойко удерживает свои позиции, и в 2015 году изображения используются всё так же активно
Плоский дизайн
В конце 2013 — начале 2014 наступила эпоха плоского дизайна, так называемого «стиля Metro». Ода на плоский дизайн по-прежнему сохраняется и в 2015 году. Этот чистый, легкий дизайн позволяет сайтам выглядеть очень современно. Основные признаки тренда: огромные белые пространства, большие кнопки, четкий шрифт. Плоский дизайн исключает тени, градиенты и любые другие графические средства, которые делают элементы объемными. Эти особенности дизайна позволяют быстро загружать сайты на любых устройствах, в том числе и мобильных
Эмоциональный контент. Основная его цель — зацепить посетителя эмоционально, вызвать душевный отклик.достижения этого используются умело написанные статьи, эмоциональные фото и видео. Эта тенденция появилась в 2012 году и сохраняется до сих пор.
Лучшая типографика.
Становится лучше визуальная иерархия, используются более красивые и уникальные шрифты, а со стороны веб-дизайнеров делаются достаточно сильные заявления. Основной толчок это направление получило в 2015 году.
Кастомизированные иллюстрации и фото; иллюстрации, рисованные вручную.
Специально для каждого заказчика создаются иконки и иллюстрации, причем основной тренд — это иллюстрации, рисованные вручную. Всё это позволяет и сайту, и самой компании приобрести яркую индивидуальность.
Видео.
В 2015 мощности еще увеличились. Возросшие скорости теперь позволяют еще более активно использовать видео.
Сетка.
Еще одно модное веяние — дизайн крупными блоками, уложенными в сетку наподобие коллажа. Он позволяет быстро и наглядно представить имеющийся на сайте товар или продемонстрировать образцы своей работы. Правильно спланированная сетка может сделать навигацию на сайте очень удобной.
18) Юзабилити. Способы анализа юзабилити сайта.
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Задача юзабилити — не привлечение, а удержание клиента. Юзабилити — это степень эффективности (сейчас принято говорить результативности — то есть, насколько легко, насколько возможно добиться полезного результата), результативности, продуктивности и удовлетворенности с которой определенный пользователь решает определенную задачу в определенных условиях.
Этапы анализа юзабилити сайта.
Анализ юзабилити необходимо проводить путем ответа на такие вопросы:
Насколько сайт соответствует требованиям (потребностям) посетителей?
Насколько качественное оформление сайта?
Какие страницы популярны? Какие из них продвигаются?
Насколько удобна навигация и понятна структура сайта?
Работоспособны ли все сервисы сайта?
Выдерживает ли сайт нагрузки? Доступен ли пользователям во всех регионах? Корректно ли он отображается в различных браузерах?
19) Программные средства и ресурсы веб-дизайна.
Adobe Dreamweaver – популярный HTML редактор, с поддержкой языков программирования DHTML, PHP, JavaScript, Ajax, стилей CSS, и других. Даная программа включает в себя систему управления сайтом, поддерживает работу со скриптами и может оптимизировать веб-страницы под различные браузеры.
Notepad++ – удобный и простой, а главное бесплатный текстовой редактор для программистов и веб-дизайнеров, работает с множеством языков программирования, имеет подсветку синтаксиса с удобным вводом тегов. После нанесения разметки в макете проекта необходимо задуматься о графических элементах и постараться сделать веб-ресурс красивым. Самым популярным графическим редактором является Фотошоп.
Модуль 2.
|
|
20)Понятие браузера. Основной функционал браузеров. Браузеры доступные пользователям Windows, Mac OS X и Linux.
Браузер — это программа, представляющая в удобном для восприятия виде информацию, получаемую из Интернета. Это инструмент для просмотра ресурсов Сети и, в меньшей степени, для взаимодействия с ними.
Основные функции браузеров:
установление связи с Web-сервером, на котором хранится документ;
интерпретация тегов языка HTML, форматирование и отображение Web-страницы в соответствии с возможностями компьютера;
предоставление средств для отображения мультимедийных и других объектов, входящих в состав Web-страниц;
обеспечение автоматизации поиска Web-страниц и упрощение доступа к Web-страницам, посещавшимся ранее;
предоставление доступа к встроенным или автономным средствам для работы с другими службами Интернет
Mozilla Firefox, Safari, Google Chrome, Yandex, Opera.
21) Что представляет собой язык HTML. Спецификация HTML.
HTML — это язык гипертекстовой разметки, с помощью него верстальщики непосредственно создают структуру web-страниц (одной из разновидностей которых являются лендинги) Если объяснить суть данного понятия простыми и наглядными образами, то можно сказать, что HTML — это тело, а CSS (Cascading Style Sheets — каскадные таблицы стилей) — одежда. В то время как CSS определяет внешний вид web-страницы, HTML формирует ее структуру (скелет) посредством заголовков, списков и других подобных элементов, начиная от начала страницы — хедера, и до ее конца — футера.
В спецификации HTML 4.0 ключевой идеей стало отделение описания структуры документа от описания его представления на экране монитора. следует шире пользоваться методами описания представления документа с помощью таблиц стилей, Для реализации этой идеи в спецификации HTML 4.0 ряд тегов, используемых для непосредственного задания формы представления HTML-элементов, отменены. К отмененным по этой причине тегам относятся <CENTER>, <FONT>, <BASEFONT>, <S>, <STRIKE>, <U>. Среди других отмененных тегов отметим <ISINDEX>, <APPLET>, <DIR>, <MENU>. Вместо отмененных тегов предлагаются альтернативные варианты реализации соответствующих возможностей,
Понятие отмененного (deprecate) тега состоит в следующем. Если в данной спецификации языка тег назван отмененным, то это означает, что браузеры должны пока продолжать поддержку таких тегов, но их использование не рекомендуется. В следующих спецификациях эти теги, возможно, будут переведены в разряд устаревших (obsolete). Устаревшие теги могут более не поддерживаться браузерами. В спецификации HTML 4.0 устаревшими названы всего три тега: <ХМР>, <PLAINTEXT> и <LISTING>.
22) Описание раздела заголовка HTML-документа.
<HTML>
<HEAD>
<TITLE> Заголовок HTML-документа
</TITLE>
</HEAD>
</HTML>
2. Тэг-контейнер <TITLE> является единственным обязательным тэгом заголовка и служит для того, чтобы дать документу название. Также следует отличать название документа (с тэгом <TITLE>) от заголовка внутри документа, обычно размечаемых тэгами <H1...6>.
23) Задание свойств тела документа
Тело документа <BODY> Тело документа должно находиться в контейнере <BODY> и </BODY>. Это та часть документа
<HTML>
<HEAD>
<TITLE>This is an example document</TITLE>
</HEAD>
<BODY>
<font face="Verdana, Arial" color="#CC0000" size="6" ><h2> все,что отобразится на сайте H2</h2></font>
<img src="image1.jpg">
</BODY>
</HTML>
24) Физическое(1) и логическое (2)форматирование текста HTML-документа
(1)<besefont> определение свойств шрифта для всего документа
<font> задания свойств шрифта
<b> <strong> выделение жирным начертанием
<i>,<em> выделение курсивом
<u> выделение подчеркиванием
<tt> имитация моноширинного(печатная машинка) текста
<big> выделение фрагмента текста шрифтом большего размера чем основной текс
<small> выделение фрагмента текста большего размера чем основной текст
<span> присвоение определенных свойств
<s>,<strike> обозначение удаленной информации зачеркиванием текста
<sub>оформление нижнего индекса
<sup> оформление верхнего индекса.
(2)
<abbr> определяет текст, как аббревиатуру
<acronym> определяет текст, как сокращения
<code> указание фрагмента программного кода
<del> обозначение удаленной информации
<em> выделение курсивом
<strong> выделение жирным начертанием
<cite> выделяет специальным образом цитаты, высказывания, названия библиографических источников.
25) Форматирование блоков (DIV).
Тег DIV – это тег, с помощью которого хотят выделить фрагмент документа с целью изменения его внешнего вида. Другими словами, с помощью тега DIV выделяют блок в html коде, которому придают вид отличный от другого содержимого html кода.
<div>...</div>.
У тега DIV – всего два параметра. Первый параметр – align. С помощью параметра align, задается выравнивание содержимого тега DIV.
left – выравнивание текста по левому краю страницы,
center – выравнивание текста по центру страницы,
right – выравнивание по правому краю,
justify – выравнивание по всей ширине страницы.
Синтаксис записи – <div align="center | left | right | justify">...</div>
Второй параметр - title добавляет всплывающую текстовую подсказку к содержимому тега DIV. Теперь давайте приведём примеры использования тега DIV. Текст должен располагаться или в параграфе, (тег <p> … </p>) или в другом блочном элементе.
3. 26) Цветовые модели и форматы хранения графики для веб.
Формат BMP (Bitmap) наиболее прост по технологии хранения информации. В файле с расширением BMP записаны позиция и цвет каждой точки. Иначе говоря, каждый пиксель охарактеризован с точки зрения местоположения и окраски по какой-либо из цветовых моделей. Вы глядит это примерно следующим образом: пиксель 1, позиция 0,0, цвет 120,120,240 (по модели RGB); пиксель 2, позиция 0,1, цвет 120,120,244; пиксель 3, позиция 0,2, цвет 120,120,248 и т. д.
Формат TIFF похож на формат BMP. Однако в TIFF можно записать ряд дополнительных параметров: прозрачность пикселей, информацию о слоях и т. д. Плюсы и минусы этого формата в общем-то такие же, как и у BMP, но из-за содержания дополнительной информации размер файла TIFF еще больше, чем BMP, хранящего аналогичное изображение.
Формат PSD является специализированным форматом Adobe Photoshop. Файлы с таким расширением содержат максимум информации об изменениях в изображении, произведенных при помощи Photoshop, информацию о слоях, прозрачности, масках, об эффектах и еще о многом другом, что мы с вами будем рассматривать далее.
Формат JPEG позволяет существенно сжать информацию, что нередко бывает очень важно, в частности, при публикации изображений в Интернете, но в то же время, работая с ним, мы проигрываем в качестве изображения.
На сегодняшний день существуют только два формата графических файлов, распознаваемых достаточно большим числом Web-браузеров - это GIF и JPEG.
Формат PNG имеет ряд явных преимуществ в сравнении с GIF и JPEG, однако пока что не распознается большинством широко распространенных программ-браузеров.
27) Способы добавления графики на веб-страницу.
<img src="место расположения" align="left" border="1" width"100" height="150">
28) Организация гиперссылок: внешней, локальной, внутренней.
<p><a name="top"></a></p>
<p><a href="#top">Наверх</a></p> </body>(внутреннии ссылки)
внеешние ссылки:
<a href= "https://webmastermix.ru/">Проект для веб-мастеров</a>...........
29) Назначение, виды и способ организации карты-изображения в HTML-документе.
MG SRC="picture.gif"ALT="Картинка">
<html>
<head>
<title> Карта изображения в HTML (навигационные карты). </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<img src="kartinka.gif" usemap="#karta1">
<map name="karta1">
<area href="https://bloggood.ru/" shape="rect" coords="25,36,114,98">
<area href=" https://bloggood.ru/avtor/" shape="rect" coords="153,11,219,127">
</map>
</body>
</html>