Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


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

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

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

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

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

Содержание

ПланСтруктурная характеристика сайта. Формирование структуры сайта. Как рационально сформировать структуру сайта для оптимизации HTML и CSS кода. Порядок и последовательность описания контента сайта.Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
Формирование структуры сайтаУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS ПланСтруктурная характеристика сайта. Формирование структуры сайта. Как рационально сформировать структуру сайта для Структурная характеристика сайтаСайты между собой можно соотнести к некоторым категориям:По горизонтали:Сайты в Сайты в «Контейнере»Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS Сайты в «Контейнере»На данном рисунке весь сайт помещён на страницу браузера, но Сайты в «Контейнере»Сам сайт у нас находится в body, ширина body равна Полноэкранные сайтыПолноэкранные сайты, это сайты размер которых равен размеру окна браузера. Но Стилистические особенностиИсходные параметры тэга :Display: inline;Color: inherit;~Font-size: 12px;~Line-height: 21px;Border: 0px;Задание: Создайте тэг Полноэкранные сайтыУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS Полноэкранные сайтыЗачастую такие сайты являются адаптивными, т.к. не практично делать полноэкранный сайт Подряд блочные сайтыК подряд блочным относятся сайты, в которых информация распространяется по Подряд блочные сайтыЕсли сайты используют подряд идущие блоки, которые зачастую используют контейнер Подряд блочные сайтыЕсли в сайте нет необходимости в фоновых цветах или экранах, Подряд блочные сайтыУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMSТак же бывает необходимость Формирование структуры сайтаДля формирования структуры, необходимо правильно рассмотреть поставленный дизайн и оценить, Пример Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS														… Как рационально сформировать структуру сайта для оптимизации HTML и CSS кода. Для Как рационально сформировать структуру сайта для оптимизации HTML и CSS кода. Успех Порядок и последовательность описания контента сайтаОписание контента происходит сверху вниз и слева Домашнее заданиеСформировать структуру курсового сайта.Сформировать структуру внутренних блоков.Необходимо в первую очередь выполнить ВыводНеобходимо чётко различать структуры сайтов;Для контейнера использовать отдельный класс;Оптимизировать код используя иные
Слайды презентации

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

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

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


Порядок и последовательность описания контента сайта.

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


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

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

некоторым категориям:

По горизонтали:
Сайты в «Контейнере»
Полноэкранные сайты

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

блочные

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


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

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

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

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

на страницу браузера, но его содержимое ограничено рамками, и

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

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

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


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

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

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:

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

21px;
Border: 0px;

Задание:
Создайте тэг в проекте и попробуйте

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


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


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

Полноэкранные сайтыУспех ВЕРСТКА САЙТА: 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,

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

CMS
Так же бывает необходимость смешивать использование контейнеров, как индивидуально

так и обще.











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


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

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

поставленный дизайн и оценить, как сформировать основную структуру сайта,

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

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

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

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


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





Пример Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS														…

class=“container”>













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

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

и CSS кода.
Для реализации структуры, которая была бы

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

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



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


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

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

и CSS кода.
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery,

CMS


м













“”






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

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

    сверху вниз и слева направо.





    Пока не закончится описание по

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

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




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

    Необходимо

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

    в первую очередь выполнить 1-й пункт задания, 2-й пункт

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

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


    • Имя файла: formirovanie-struktury-sayta-tema-8.pptx
    • Количество просмотров: 149
    • Количество скачиваний: 0