Верстка страниц

Слайд 2

1. Блочная верстка

1. Блочная верстка

Слайд 3

Как правило, веб-страница состоит из множества различных элементов, которые могут иметь сложную

Как правило, веб-страница состоит из множества различных элементов, которые могут иметь сложную
структуру.
Поэтому при создании веб-страницы возникает необходимость нужным образом позиционировать эти элементы, стилизовать их так, чтобы они располагались на странице нужным образом.
То есть возникает вопрос создания макета страницы, ее верстки

Слайд 4

Изначально распространенной была верстка на основе таблиц.
Все это многообразие экранов табличная верстка

Изначально распространенной была верстка на основе таблиц. Все это многообразие экранов табличная
оказалась не в состоянии удовлетворить.
Постепенно ей на смену пришла блочная верстка. Блочная верстка - это относительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойства

float

div

01

Слайд 5

#sidebar{
    background-color: #ddd;
    float: left;
    width: 150px;
}
#main{
    background-color: #eee;
    height: 200px;
    margin-left: 170px;
}

02

#sidebar{ background-color: #ddd; float: left; width: 150px; } #main{ background-color: #eee; height:

Слайд 6

#sidebar{
    background-color: #ddd;
    float: right;
    width: 150px;
}
#main{
    background-color: #eee;
    height: 200px;
    margin-right: 170px;
}

02

#sidebar{ background-color: #ddd; float: right; width: 150px; } #main{ background-color: #eee; height:

Слайд 7

Было рассмотрено создание страницы с двумя колонками. Подобным образом мы можем добавить

Было рассмотрено создание страницы с двумя колонками. Подобным образом мы можем добавить
на страницу и большее количество колонок и сделать более сложную структуру. Например, добавим на веб-страницу второй сайдбар

03

Слайд 8

#leftSidebar{
    background-color: #ddd;
    float: left;
    width: 150px;
}
#rightSidebar{
    background-color: #bbb;
    float: right;
    width: 150px;
}
#main{
    background-color: #eee;
    height: 200px;
    margin-left: 170px;
    margin-right: 170px;
}

#leftSidebar{ background-color: #ddd; float: left; width: 150px; } #rightSidebar{ background-color: #bbb; float:

Слайд 9

2. Вложенные плавающие блоки

2. Вложенные плавающие блоки

Слайд 10

3. Выравнивание столбцов по высоте

3. Выравнивание столбцов по высоте

Слайд 11

4. Создание панели навигации

4. Создание панели навигации

Слайд 12

5. Позиционирование

5. Позиционирование
Имя файла: Верстка-страниц.pptx
Количество просмотров: 51
Количество скачиваний: 0