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

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Формирование структуры сайта. (Тема 8), слайд №1Формирование структуры сайта. (Тема 8), слайд №2Формирование структуры сайта. (Тема 8), слайд №3Формирование структуры сайта. (Тема 8), слайд №4Формирование структуры сайта. (Тема 8), слайд №5Формирование структуры сайта. (Тема 8), слайд №6Формирование структуры сайта. (Тема 8), слайд №7Формирование структуры сайта. (Тема 8), слайд №8Формирование структуры сайта. (Тема 8), слайд №9Формирование структуры сайта. (Тема 8), слайд №10Формирование структуры сайта. (Тема 8), слайд №11Формирование структуры сайта. (Тема 8), слайд №12Формирование структуры сайта. (Тема 8), слайд №13Формирование структуры сайта. (Тема 8), слайд №14Формирование структуры сайта. (Тема 8), слайд №15Формирование структуры сайта. (Тема 8), слайд №16Формирование структуры сайта. (Тема 8), слайд №17Формирование структуры сайта. (Тема 8), слайд №18Формирование структуры сайта. (Тема 8), слайд №19Формирование структуры сайта. (Тема 8), слайд №20Формирование структуры сайта. (Тема 8), слайд №21
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Формирование структуры сайта. (Тема 8). Доклад-сообщение содержит 21 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Формирование структуры сайта
Описание слайда:
Формирование структуры сайта

Слайд 2


План Структурная характеристика сайта. Формирование структуры сайта. Как рационально сформировать структуру сайта для оптимизации HTML и CSS кода. Порядок и последовательность описания контента сайта.
Описание слайда:
План Структурная характеристика сайта. Формирование структуры сайта. Как рационально сформировать структуру сайта для оптимизации HTML и CSS кода. Порядок и последовательность описания контента сайта.

Слайд 3


Структурная характеристика сайта Сайты между собой можно соотнести к некоторым категориям: По горизонтали: Сайты в «Контейнере» Полноэкранные сайты По вертикале: Подряд блочные сайты Произвольно блочные
Описание слайда:
Структурная характеристика сайта Сайты между собой можно соотнести к некоторым категориям: По горизонтали: Сайты в «Контейнере» Полноэкранные сайты По вертикале: Подряд блочные сайты Произвольно блочные

Слайд 4


Сайты в «Контейнере»
Описание слайда:
Сайты в «Контейнере»

Слайд 5


Сайты в «Контейнере» На данном рисунке весь сайт помещён на страницу браузера, но его содержимое ограничено рамками, и ширина всего содержимого одинаковая. Данный способ использует следующую структуру:
Описание слайда:
Сайты в «Контейнере» На данном рисунке весь сайт помещён на страницу браузера, но его содержимое ограничено рамками, и ширина всего содержимого одинаковая. Данный способ использует следующую структуру:

Слайд 6


Сайты в «Контейнере» Сам сайт у нас находится в body, ширина body равна ширине браузера, следовательно ограничивать body мы не можем. Тогда используем дополнительный блок (container). <body> <div class=“container”> … <!– тут содержимое сайта ( это комментарий в HTML) --> </div> </body> В данном случае наш блок и будет контейнером, ширина которого будет ограничена (width:900px), а размещён он будет по центру (margin: 0 auto).
Описание слайда:
Сайты в «Контейнере» Сам сайт у нас находится в body, ширина body равна ширине браузера, следовательно ограничивать body мы не можем. Тогда используем дополнительный блок (container). <body> <div class=“container”> … <!– тут содержимое сайта ( это комментарий в HTML) --> </div> </body> В данном случае наш блок и будет контейнером, ширина которого будет ограничена (width:900px), а размещён он будет по центру (margin: 0 auto).

Слайд 7


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

Слайд 8


Стилистические особенности Исходные параметры тэга <span>: Display: inline; Color: inherit; ~Font-size: 12px; ~Line-height: 21px; Border: 0px; Задание: Создайте тэг <span> в проекте и попробуйте в средствах разработчика увеличить его высоту, а так же, проверьте его ширину. Создайте ещё несколько тэгов <span> и проверьте, как они себя ведут.
Описание слайда:
Стилистические особенности Исходные параметры тэга <span>: Display: inline; Color: inherit; ~Font-size: 12px; ~Line-height: 21px; Border: 0px; Задание: Создайте тэг <span> в проекте и попробуйте в средствах разработчика увеличить его высоту, а так же, проверьте его ширину. Создайте ещё несколько тэгов <span> и проверьте, как они себя ведут.

Слайд 9


Полноэкранные сайты
Описание слайда:
Полноэкранные сайты

Слайд 10


Полноэкранные сайты Зачастую такие сайты являются адаптивными, т.к. не практично делать полноэкранный сайт ограниченным. Такую структуру используют дорогие Брендовые сайты, т.к. на данный момент такие сайты пользуются большой популярностью. <body> <header></header> <section></section> <section></section> <footer></footer> </body> Такие сайты не используют контейнеры
Описание слайда:
Полноэкранные сайты Зачастую такие сайты являются адаптивными, т.к. не практично делать полноэкранный сайт ограниченным. Такую структуру используют дорогие Брендовые сайты, т.к. на данный момент такие сайты пользуются большой популярностью. <body> <header></header> <section></section> <section></section> <footer></footer> </body> Такие сайты не используют контейнеры

Слайд 11


Подряд блочные сайты К подряд блочным относятся сайты, в которых информация распространяется по сайту подряд, одна под другой. К таким сайтам можно отнести Лэндинги, на данных сайтах эта структура лучше всего просматривается. Для примера откройте слайд 4.
Описание слайда:
Подряд блочные сайты К подряд блочным относятся сайты, в которых информация распространяется по сайту подряд, одна под другой. К таким сайтам можно отнести Лэндинги, на данных сайтах эта структура лучше всего просматривается. Для примера откройте слайд 4.

Слайд 12


Подряд блочные сайты Если сайты используют подряд идущие блоки, которые зачастую используют контейнер и фон блоков распространяется на весь экран (слайд 4), то структура выглядит так: <body> <header> <div class=“container”></div> </header> <div class=“block1”> <div class=“container”></div> </div> <footer> <div class=“container”></div> </footer> </body> Выполните задание 1
Описание слайда:
Подряд блочные сайты Если сайты используют подряд идущие блоки, которые зачастую используют контейнер и фон блоков распространяется на весь экран (слайд 4), то структура выглядит так: <body> <header> <div class=“container”></div> </header> <div class=“block1”> <div class=“container”></div> </div> <footer> <div class=“container”></div> </footer> </body> Выполните задание 1

Слайд 13


Подряд блочные сайты Если в сайте нет необходимости в фоновых цветах или экранах, то структуру можно построить следующим образом: <body> <div class=“container”> <header></header> <div class=“block1”></div> <footer></footer> </div> </body> Выполните задание 2
Описание слайда:
Подряд блочные сайты Если в сайте нет необходимости в фоновых цветах или экранах, то структуру можно построить следующим образом: <body> <div class=“container”> <header></header> <div class=“block1”></div> <footer></footer> </div> </body> Выполните задание 2

Слайд 14


Подряд блочные сайты Так же бывает необходимость смешивать использование контейнеров, как индивидуально так и обще. <body> <div class=“container”> <header></header> <div class=“block1”></div> </div> <footer> <div class=“container”></div> </footer> </body> Выполните задание 3
Описание слайда:
Подряд блочные сайты Так же бывает необходимость смешивать использование контейнеров, как индивидуально так и обще. <body> <div class=“container”> <header></header> <div class=“block1”></div> </div> <footer> <div class=“container”></div> </footer> </body> Выполните задание 3

Слайд 15


Формирование структуры сайта Для формирования структуры, необходимо правильно рассмотреть поставленный дизайн и оценить, как сформировать основную структуру сайта, что бы в дальнейшем, при Вёрстке не было сложностей. Используя дизайн сайта Flowers, сформируйте структуру сайта, опираясь на возможные структуры сайтов. Обратите внимание на пример в следующем слайде.
Описание слайда:
Формирование структуры сайта Для формирования структуры, необходимо правильно рассмотреть поставленный дизайн и оценить, как сформировать основную структуру сайта, что бы в дальнейшем, при Вёрстке не было сложностей. Используя дизайн сайта Flowers, сформируйте структуру сайта, опираясь на возможные структуры сайтов. Обратите внимание на пример в следующем слайде.

Слайд 16


Пример
Описание слайда:
Пример

Слайд 17


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

Слайд 18


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

Слайд 19


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

Слайд 20


Домашнее задание Сформировать структуру курсового сайта. Сформировать структуру внутренних блоков. Необходимо в первую очередь выполнить 1-й пункт задания, 2-й пункт необходимо выполнить частично, т.е. разобрать структуру некоторых блоков.
Описание слайда:
Домашнее задание Сформировать структуру курсового сайта. Сформировать структуру внутренних блоков. Необходимо в первую очередь выполнить 1-й пункт задания, 2-й пункт необходимо выполнить частично, т.е. разобрать структуру некоторых блоков.

Слайд 21


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

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию