Формирование структуры сайта. (Тема 8) презентация

Содержание

План Структурная характеристика сайта. Формирование структуры сайта. Как рационально сформировать структуру сайта для оптимизации HTML и CSS кода. Порядок и последовательность описания контента сайта. Успех ВЕРСТКА САЙТА: HTML,

Слайд 1Формирование структуры сайта
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 2План
Структурная характеристика сайта.
Формирование структуры сайта.
Как рационально сформировать структуру сайта

для оптимизации HTML и CSS кода.
Порядок и последовательность описания контента сайта.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 3Структурная характеристика сайта
Сайты между собой можно соотнести к некоторым категориям:

По горизонтали:
Сайты

в «Контейнере»
Полноэкранные сайты

По вертикале:
Подряд блочные сайты
Произвольно блочные

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 4Сайты в «Контейнере»
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 5Сайты в «Контейнере»
На данном рисунке весь сайт помещён на страницу браузера,

но его содержимое ограничено рамками, и ширина всего содержимого одинаковая.

Данный способ использует следующую структуру:

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 6Сайты в «Контейнере»
Сам сайт у нас находится в body, ширина body

равна ширине браузера, следовательно ограничивать body мы не можем.

Тогда используем дополнительный блок (container).



…



В данном случае наш блок и будет контейнером, ширина которого будет ограничена (width:900px), а размещён он будет по центру (margin: 0 auto).

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 7Полноэкранные сайты
Полноэкранные сайты, это сайты размер которых равен размеру окна браузера.

Но если окно браузера слишком мало, а сайт не адаптивный, то он ограничивается шириной (min-width:1100px;), и при сужении страницы, появляется горизонтальный Scroll.

Рассмотрим сайт на примере:

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 8Стилистические особенности
Исходные параметры тэга :
Display: inline;
Color: inherit;
~Font-size: 12px;
~Line-height: 21px;
Border: 0px;

Задание:
Создайте

тэг в проекте и попробуйте в средствах разработчика увеличить его высоту, а так же, проверьте его ширину.
Создайте ещё несколько тэгов и проверьте, как они себя ведут.


Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 9Полноэкранные сайты
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 10Полноэкранные сайты
Зачастую такие сайты являются адаптивными, т.к. не практично делать полноэкранный

сайт ограниченным.

Такую структуру используют дорогие Брендовые сайты, т.к. на данный момент такие сайты пользуются большой популярностью.








Такие сайты не используют контейнеры


Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 11Подряд блочные сайты
К подряд блочным относятся сайты, в которых информация распространяется

по сайту подряд, одна под другой.

К таким сайтам можно отнести Лэндинги, на данных сайтах эта структура лучше всего просматривается.

Для примера откройте слайд 4.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 12Подряд блочные сайты
Если сайты используют подряд идущие блоки, которые зачастую используют

контейнер и фон блоков распространяется на весь экран (слайд 4), то структура выглядит так:













Выполните задание 1

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 13Подряд блочные сайты
Если в сайте нет необходимости в фоновых цветах или

экранах, то структуру можно построить следующим образом:









Выполните задание 2


Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 14Подряд блочные сайты


Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
Так же бывает

необходимость смешивать использование контейнеров, как индивидуально так и обще.











Выполните задание 3

Слайд 15Формирование структуры сайта
Для формирования структуры, необходимо правильно рассмотреть поставленный дизайн и

оценить, как сформировать основную структуру сайта, что бы в дальнейшем, при Вёрстке не было сложностей.

Используя дизайн сайта Flowers, сформируйте структуру сайта, опираясь на возможные структуры сайтов.

Обратите внимание на пример в следующем слайде.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 16Пример
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS









class=“container”>


…







Слайд 17Как рационально сформировать структуру сайта для оптимизации HTML и CSS кода.


Для реализации структуры, которая была бы сформирована рационально, то необходимо использовать в качестве блоков так же и тэги предназначенные для иных целей.

Рассмотрим структуру внутренних блоков:



Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 18Как рационально сформировать структуру сайта для оптимизации HTML и CSS кода.


Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS


м













“”





    Слайд 19Порядок и последовательность описания контента сайта
    Описание контента происходит сверху вниз и

    слева направо.





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

    Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS



    Слайд 20Домашнее задание
    Сформировать структуру курсового сайта.
    Сформировать структуру внутренних блоков.

    Необходимо в первую очередь

    выполнить 1-й пункт задания, 2-й пункт необходимо выполнить частично, т.е. разобрать структуру некоторых блоков.

    Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

    Слайд 21Вывод
    Необходимо чётко различать структуры сайтов;
    Для контейнера использовать отдельный класс;
    Оптимизировать код используя

    иные тэги;
    Необходимо правильно описывать контент.

    Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

    Скачать презентацию

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

    Федеральная Целевая Программа 288
    Изучение таблицы умножения 285
    Психологическое сопровождение ЕГЭ 181
    Проект создания сети многофункциональных центров Ростовской области 246
    Английский на ладошке 205
    размеситть это 185

    Обратная связь

    Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

    Email: Нажмите что бы посмотреть 

    Что такое ThePresentation.ru?

    Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

    Для правообладателей

    Яндекс.Метрика