🗊Презентация РАЗРАБОТКА МАКЕТОВ Web-страниц С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Категория: Образование
Нажмите для полного просмотра!
– / 7
Скачать
Вы можете ознакомиться и скачать презентацию на тему РАЗРАБОТКА МАКЕТОВ Web-страниц С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ. Доклад-сообщение содержит 7 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1


РАЗРАБОТКА МАКЕТОВ Web-страниц С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ
Описание слайда:
РАЗРАБОТКА МАКЕТОВ Web-страниц С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Слайд 2


Основные типы CSS-макетов CSS-макеты создаются на основе: позиционирования position плавающего размещения float смешанные – позиционирование и плавающее размещение
Описание слайда:
Основные типы CSS-макетов CSS-макеты создаются на основе: позиционирования position плавающего размещения float смешанные – позиционирование и плавающее размещение

Слайд 3


Макет с фиксацией крайних колонок в окне браузера Левый столбец – положение и ширина зафиксированы: {position: absolute; top: 10px; left: 10px; width: 200px;} Правый столбец - положение и ширина зафиксированы: {position: absolute; top: 10px; right: 10px; width: 200px;} Центральный столбец – ширина рассчитывается относительно текущего размера окна браузера: {margin-left:210px; margin-right:210px; margin-top:10px;}
Описание слайда:
Макет с фиксацией крайних колонок в окне браузера Левый столбец – положение и ширина зафиксированы: {position: absolute; top: 10px; left: 10px; width: 200px;} Правый столбец - положение и ширина зафиксированы: {position: absolute; top: 10px; right: 10px; width: 200px;} Центральный столбец – ширина рассчитывается относительно текущего размера окна браузера: {margin-left:210px; margin-right:210px; margin-top:10px;}

Слайд 4


Макет с верхним и нижним колонтитулами и 3 колонками В макете используется только плавающее размещение без фиксации блоков. Блок верхнего колонтитула: style=“width: 100%;” З центральных блока: style=“float: left; width: 30%;” style=“float: left; width: 50%;” style=“float: left; width: 20%;” Блок нижнего колонтитула: style=“width: 100%;”
Описание слайда:
Макет с верхним и нижним колонтитулами и 3 колонками В макете используется только плавающее размещение без фиксации блоков. Блок верхнего колонтитула: style=“width: 100%;” З центральных блока: style=“float: left; width: 30%;” style=“float: left; width: 50%;” style=“float: left; width: 20%;” Блок нижнего колонтитула: style=“width: 100%;”

Слайд 5


Макет с фиксированной шириной и выравниванием по центру Колонка с фиксированной шириной и выравниванием по центру окна браузера. Общий контейнер: {position: absolute; left: 50%; width: 600px; margin-left: -300px;} Блок колонки внутри контейнера: { margin-top: 100px;} Заголовок: {position: fixed; top:0; width: 600px;}
Описание слайда:
Макет с фиксированной шириной и выравниванием по центру Колонка с фиксированной шириной и выравниванием по центру окна браузера. Общий контейнер: {position: absolute; left: 50%; width: 600px; margin-left: -300px;} Блок колонки внутри контейнера: { margin-top: 100px;} Заголовок: {position: fixed; top:0; width: 600px;}

Слайд 6


Макет с плавающей шириной и выравниванием по центру Колонка с фиксированной шириной и выравниванием по центру окна браузера. Общий контейнер: {margin-left: 300px; margin-right: 300px; } Блок колонки внутри контейнера: { margin-top: 100px;} Заголовок: {position: fixed; top:0;}
Описание слайда:
Макет с плавающей шириной и выравниванием по центру Колонка с фиксированной шириной и выравниванием по центру окна браузера. Общий контейнер: {margin-left: 300px; margin-right: 300px; } Блок колонки внутри контейнера: { margin-top: 100px;} Заголовок: {position: fixed; top:0;}

Слайд 7


Смешанный макет 3 столбца с фиксированной шириной и выравниванием по центру. Контейнер: <div style="position: absolute; left: 50%; width: 700px; margin-left: -350px; margin-top: 0px; border: black 2px solid;"> Верхний колонтитул: <p style="position:fixed; top:0px; width: 700px; z-index:2; background-color: #FFFFFF; font-size: 24px; text-align:center; border-bottom:black 2px solid; border-top:black 2px solid;margin:0px; padding:0px" > Столбцы: <div style="float:left; width: 300px;text-align:justify; margin-top: 50px; margin-left: 10px;z-index:1; ">
Описание слайда:
Смешанный макет 3 столбца с фиксированной шириной и выравниванием по центру. Контейнер: <div style="position: absolute; left: 50%; width: 700px; margin-left: -350px; margin-top: 0px; border: black 2px solid;"> Верхний колонтитул: <p style="position:fixed; top:0px; width: 700px; z-index:2; background-color: #FFFFFF; font-size: 24px; text-align:center; border-bottom:black 2px solid; border-top:black 2px solid;margin:0px; padding:0px" > Столбцы: <div style="float:left; width: 300px;text-align:justify; margin-top: 50px; margin-left: 10px;z-index:1; ">

Скачать

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