Презентацию на тему "Css и оформление веб-страниц"
можно скачать абсолютно бесплатно на нашем сайте. Предмет
проекта: Информатика. Красочные слайды и иллюстрации помогут вам
заинтересовать своих одноклассников или аудиторию.
Для просмотра содержимого воспользуйтесь плеером, или если вы хотите скачать доклад - нажмите на
соответствующий текст под плеером. Презентация
содержит 41 слайд(ов).
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам.
Слайд 3
HTML vs. CSS
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого. CSS был создан для предоставления web-дизайнерам возможностей создания точного дизайна, поддерживаемого всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.
Слайд 4
Преимущества CSS
управление отображением множества документов с помощью одной таблицы стилей; более точный контроль над внешним видом страниц; различные представления для разных носителей информации (экран, печать, и т. д.); сложная и проработанная техника дизайна.
Слайд 5
Фундаментальная модель CSS
Слайд 6
Применение CSS к HTML-документу
Метод 1: Инлайн/In-line (атрибут style) Метод 2: Внутренний (тэг style) Метод 3: Внешний (ссылка на таблицу стилей)
Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. Интервал между буквами текста можно специфицировать свойством letter-spacing. Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase
Слайд 20
Форматирование текста в Dreamweaver
Слайд 21
Типы стилей
Слайд 22
Группирование элементов с помощью class С помощью него можно применить любой стиль к определённому элементу или группе элементов. Идентификация элемента с помощью id Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. Переопределение тэгов Псевдоклассы и составные стили позволяют выбирать элементы на основании их размещения в дереве документа. То есть при выборе можно, например, манипулировать такими понятиями как «является потомком», «следует за», «лежит непосредственно внутри»
Ключевой момент — этот селектор выбирает всех потомков не зависимо от их уровня вложенности. p span { color: #333; } div a span { color: #333; }
Слайд 26
Селектор дочернего элемента
Основное отличие — тот факт, что если селектор потомка выбирает все потомки, независимо от уровня вложенности, то селектор дочернего элемента выбирает потомков только первого уровня — то есть непосредственно вложенные элементы. .content > ul { margin-left: 20px; }
Слайд 27
Селектор сестринского элемента
Сестринские элементы — это теги, имеющие общего родителя и следующие один за другим в структуре HTML. h2+p { font-style: italic; background-color: #DFE8FF; }
Слайд 28
Селектор обобщенных родственных элементов
Основная задача селектора обобщённых родственных элементов — выбор элемента (-ов), идущего после заданного элемента, и имеющего с ним общего родителя. HTML:
Заголовок
Подзаголовок 1
Это абзац с текстом
Подзаголовок 2
Это текст, обрамлённый в span
CSS: h1~h2 { color:red; }
Слайд 29
Верстка HTML-страниц
Слайд 30
Боксовая модель.
Слайд 31
Обтекание элементов
Для обтекания одних элементов другими в CSS применяется свойство float, которое может иметь значения left (обтекание слева направо), right (обтекание справа налево) или none. Чтобы остановить действие обтекания применяется свойство clear, которое может принимать значения left, right, both или none.
Слайд 32
Табличная верстка и верстка по слоям
Благодаря наличию большого числа параметров, особенно границе нулевой толщины, таблица выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы. Удобство и широкие возможности верстки — вот основной реверанс в пользу таблиц.
Использование слоев накладывает свой отпечаток не только на код документа, но и на вид веб-страницы в браузере. Зная особенности верстки слоями, можно более эффективно разрабатывать сайт, получая в итоге быстрый и компактный код, который к тому же корректно отображается в браузерах.
Слайд 33
Пример табличной верстки
Слайд 34
Пример div-верстки
Слайд 35
«Резиновый» макет
Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Например, если текста немного, то «подвал» страницы может висеть в ее середине. Параметрами таблицы можно отрегулировать это так, что при небольшом тексте «подвал» плотно прилегает к нижнему краю окна браузера, независимо от размеров окна.
Слайд 36
«Склейка» изображений
Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.
Слайд 37
Группирование элементов (span и div)
Элементы и
используются для структурирования документа, часто совместно с атрибутами class и id. Элемент можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, может использоваться для визуальных эффектов применимо к отдельным блокам текста.
применяется для группирования одного или более блок-элементов.
Слайд 38
Задание 1. Исправить ошибки
Опрос общественного мнения показал
Диего Веласкес писал свои полотна в стиле: империализма, кубизма и империосионизма;
конфуцианство возникло в: Италии, Корее и Франции;
богами торговли и воровства в Древней Греции были: Марс, Меркурий и Дионис;
богами загробного мира в Египте были: Аид, Анубис и Ассирис;
столица Золотой Орды - Монголия;
главные противники Александра Македонского: татаро-монголы, Дедал и Цезарь;
в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.
Слайд 39
Задание 2. Исправить ошибки
Glossary<title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <body> <a href="glosstop.html"> <h1>Glossary of Terms</h1> </a> <span> <h2></p><p>Algorithmic Oriented Language.</h2></p><p></span> <span> <h2></p><p>Creates new project</p><p></h2> </span> </body> </html></p></div><div class="slide_left"><a data-fancybox="gallery" href="https://prezentacii.org/upload/cloud/18/12/101770/images/screen40.jpg"><img src="https://prezentacii.org/upload/cloud/18/12/101770/images/thumbs/screen40.jpg" alt="Задание 3. Исправить ошибки. Галион Галион - большое трехмачтовое судно особо прочной постройки, снабженное тяжелой артиллерией. Эти суда служили для перевозки товаров и драгоценных металлов из испанских и португальских колоний в Европу. Флагманский корабль был мощным галионом, вооруженным со" title="Задание 3. Исправить ошибки. Галион Галион - большое трехмачтовое судно особо прочной постройки, снабженное тяжелой артиллерией. Эти суда служили для перевозки товаров и драгоценных металлов из испанских и португальских колоний в Европу. Флагманский корабль был мощным галионом, вооруженным со" ></a></div><div class="slide_right"><span>Слайд 40</span><p class="slide_title">Задание 3. Исправить ошибки</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-1"> <body> <h11 align="justify">Галион</h1> <p align="justify"> <strong>Галион</b> - большое трехмачтовое судно особо прочной постройки, снабженное тяжелой артиллерией.</br> Эти суда служили для перевозки товаров и драгоценных металлов из испанских и португальских колоний в Европу.</p><p><hr> <blockquote>Флагманский корабль был мощным <i>галионом</i>, вооруженным сорока восьмью большими пушками и восьмью малыми.</blockquote> </hr> </body> </html></p></div><div class="slide_left"><a data-fancybox="gallery" href="https://prezentacii.org/upload/cloud/18/12/101770/images/screen41.jpg"><img src="https://prezentacii.org/upload/cloud/18/12/101770/images/thumbs/screen41.jpg" alt="Задание 4. Исправить ошибки. Ut aliquip ex ea commodo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lobortis nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit." title="Задание 4. Исправить ошибки. Ut aliquip ex ea commodo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lobortis nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit." ></a></div><div class="slide_right"><span>Слайд 41</span><p class="slide_title">Задание 4. Исправить ошибки</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table border="0" celpadding="0" celspacing="0" border="2"> <tr> <td valign="top">Ut aliquip ex ea commodo.</td> <td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td> </tr> <td valign="botom" colspan="2">Lobortis nisl.</td> <td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td> </tr> </table> </body> </html></p></div> </div>
</div>
<div class="inside_page_rel_news">
<h2 id="same">Список похожих презентаций</h2>
<div class="inside_page_rel_news_wrapper">
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/97309-stilevoe-oformlenie-teksta-v-ms-word.html"><img border="0"
src="/upload/resize_cache/webp/iblock/a91/a919aec529c58a1cfe78df5cc7f5064a.webp" alt="Стилевое оформление текста в MS WORD"
title="Стилевое оформление текста в MS WORD"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/97309-stilevoe-oformlenie-teksta-v-ms-word.html"
title="Стилевое оформление текста в MS WORD">Стилевое оформление текста в MS WORD</a>
</h3>
<span>Стиль форматирования — набор элементов форматирования (шрифта, абзаца и пр.), имеющий уникальное имя. Любой абзац документа Word оформлен определенным ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/139529-sozdanie-i-oformlenie-informacionnyh-modelej.html"><img border="0"
src="/upload/resize_cache/webp/iblock/eae/eae6cb0de109ffb659e3227d73451685.webp" alt="Создание и оформление информационных моделей"
title="Создание и оформление информационных моделей"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/139529-sozdanie-i-oformlenie-informacionnyh-modelej.html"
title="Создание и оформление информационных моделей">Создание и оформление информационных моделей</a>
</h3>
<span>Обсуждаем вопросы:. 1. Какие модели называются информационными? 2. Какие разновидности информационных моделей вам известны? 3. Какие информационные ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/111612-dostup-v-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/dc8/dc8e57c8de749a6982cd216ef8dcd431.webp" alt="Доступ в интернет"
title="Доступ в интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/111612-dostup-v-internet.html"
title="Доступ в интернет">Доступ в интернет</a>
</h3>
<span>Варианты доступа в интернет. Через существующие коммуникации. Dial-up xDSL Кабельное ТВ Wi-Fi, Wi-Max Электропровода. Не требующие коммуникаций. GPRS, ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/3705-global-naya-set-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/5d9/5d94c31f76273d416276979a81423527.webp" alt="Глобальная сеть интернет"
title="Глобальная сеть интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/3705-global-naya-set-internet.html"
title="Глобальная сеть интернет">Глобальная сеть интернет</a>
</h3>
<span> ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/115296-veselaja-informatika.html"><img border="0"
src="/upload/resize_cache/webp/iblock/184/1840726ba4a8e4061e449f3c6a6c4eae.webp" alt="Весёлая информатика"
title="Весёлая информатика"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/115296-veselaja-informatika.html"
title="Весёлая информатика">Весёлая информатика</a>
</h3>
<span>Эпиграф. Ты лишь на старте, длинен путь. Но к цели он ведет. И мир компьютеров тебя, Быть может, увлечет. А. М. Хайт. Цель:. развитие интереса к предмету, ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/40597-ob-ekty-i-ih-svoystva-informatika-5-klass.html"><img border="0"
src="/upload/resize_cache/webp/iblock/0bf/0bf6377c4731ddc1a0c13400ddd15845.webp" alt="Объекты и их свойства информатика"
title="Объекты и их свойства информатика"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/40597-ob-ekty-i-ih-svoystva-informatika-5-klass.html"
title="Объекты и их свойства информатика">Объекты и их свойства информатика</a>
</h3>
<span>Объект - ЯБЛОКО красное круглое вкусное висит съедается продается зеленое кислое. о нем рассказывают. Объект - КНИГА листать читать. закрывать закладывать. ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/79248-mobilnyj-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/045/045cb2f771a9ea91f84fa5f586a3fcb3.webp" alt="Мобильный интернет"
title="Мобильный интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/79248-mobilnyj-internet.html"
title="Мобильный интернет">Мобильный интернет</a>
</h3>
<span>МИУ как отдельный класс были выделены компанией Intel из категории UMPC, включающей ранее все устройства с диагональю экрана 4-10 дюймов (10,2 — 25,4 ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/64354-medicinskaja-informatika.html"><img border="0"
src="/upload/resize_cache/webp/iblock/e10/e109dfcd3a399f489d4d044d07a87c4f.webp" alt="Медицинская информатика"
title="Медицинская информатика"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/64354-medicinskaja-informatika.html"
title="Медицинская информатика">Медицинская информатика</a>
</h3>
<span>Термин ИНФОРМАТИКА возник в 60-х годах ХХ века во Франции для названия области, занимающейся автоматизированной переработкой информации, как слияние ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/64297-bezopasnyj-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/53a/53a78d4c8410b90ff0b5347183cdf7e1.webp" alt="Безопасный интернет"
title="Безопасный интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/64297-bezopasnyj-internet.html"
title="Безопасный интернет">Безопасный интернет</a>
</h3>
<span>Это компьютер и ноутбук. У тебя есть компьютер? Это телефон и планшет. Они тоже компьютеры. В компьютере хранятся фотографии, мультфильмы, музыка, ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/64296-bezopasnyj-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/a5e/a5ee746294cea96d761e1b1f0c2263ad.webp" alt="Безопасный интернет"
title="Безопасный интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/64296-bezopasnyj-internet.html"
title="Безопасный интернет">Безопасный интернет</a>
</h3>
<span>Правила. Дорожного Движения. Компьютер. Что находится в твоем компьютере? ? Наш помощник. Привет, меня зовут Онлайка! Интернет это сеть Что это? Из ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/3682-bezopasnyy-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/556/556117099d50aeb19edfdd11df3bdf83.webp" alt="Безопасный интернет"
title="Безопасный интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/3682-bezopasnyy-internet.html"
title="Безопасный интернет">Безопасный интернет</a>
</h3>
<span>Если что-то непонятно страшно или неприятно, Быстро к взрослым поспеши, Расскажи и покажи. . 1. Спрашивай взрослых. Всегда спрашивай родителей о незнакомых ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/44364-bezopasnost-v-seti-internet-dlya-5-6-klassov.html"><img border="0"
src="/upload/resize_cache/webp/iblock/b86/b86c51110136f9db5fc30afa6f6d7b55.webp" alt="Безопасность в сети интернет для 5-6 классов"
title="Безопасность в сети интернет для 5-6 классов"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/44364-bezopasnost-v-seti-internet-dlya-5-6-klassov.html"
title="Безопасность в сети интернет для 5-6 классов">Безопасность в сети интернет для 5-6 классов</a>
</h3>
<span>Что такое Интернет? Какие бывают опасные угрозы в сети Интернет? Физкультминутка Практическая работа Обобщение полученной информации Составление сводной ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/3670-adresaciya-v-seti-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/f7f/f7fc327bb6e5d18e15f29afc306a7690.webp" alt="Адресация в сети интернет"
title="Адресация в сети интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/3670-adresaciya-v-seti-internet.html"
title="Адресация в сети интернет">Адресация в сети интернет</a>
</h3>
<span>Проверка домашнего задания:. 1. Что такое компьютерная сеть? 2. Как называлась первая экспериментальная компьютерная сеть, и какова цель ее создания? ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/66224-adresacija-v-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/4b2/4b27d7b53d0e88b8181d21b69647acc7.webp" alt="Адресация в интернет"
title="Адресация в интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/66224-adresacija-v-internet.html"
title="Адресация в интернет">Адресация в интернет</a>
</h3>
<span>Каждый компьютер, подключенный к сети Интернет, имеет свой собственный уникальный адрес. IP-адрес – это уникальный числовой адрес компьютера в сети, ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/59128-zanimatel-nyy-urok-fol-klornaya-informatika.html"><img border="0"
src="/upload/resize_cache/webp/iblock/6a2/6a267a0e1c259f341ba6175ab913fa6c.webp" alt="Занимательный урок Фольклорная информатика"
title="Занимательный урок Фольклорная информатика"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/59128-zanimatel-nyy-urok-fol-klornaya-informatika.html"
title="Занимательный урок Фольклорная информатика">Занимательный урок Фольклорная информатика</a>
</h3>
<span>Разделы. Компьютерные добавлялки Слова с компьютерной начинкой Слова, оснащенные компьютером Попробуй прочитай Компьютерные анаграммы Словесное сложение ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/90066-kompjuternye-kommunikacii-i-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/338/338d78394167e64e2ed6d297e6e78f6d.webp" alt="Компьютерные коммуникации и интернет"
title="Компьютерные коммуникации и интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/90066-kompjuternye-kommunikacii-i-internet.html"
title="Компьютерные коммуникации и интернет">Компьютерные коммуникации и интернет</a>
</h3>
<span>Телефон Радио Телевидение. Средства передачи информации. Текстовые Голосовые Видео. Режимы обмена сообщениями. Передача и прием разделены во времени. ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/46526-bezopasnyy-internet-2017-podskazki-roditelyam.html"><img border="0"
src="/upload/resize_cache/webp/iblock/56d/56d0f1d2e652c59e62fbd1c1b8085074.webp" alt="Безопасный интернет 2017 Подсказки родителям"
title="Безопасный интернет 2017 Подсказки родителям"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/46526-bezopasnyy-internet-2017-podskazki-roditelyam.html"
title="Безопасный интернет 2017 Подсказки родителям">Безопасный интернет 2017 Подсказки родителям</a>
</h3>
<span>В Сети им попадается не только информация, полезная для расширения кругозора и хороших оценок, — там легко находится и масса нежелательного контента ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/79246-mobilnyj-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/ab4/ab40b4b969d98d9f5b1adfd1753e01db.webp" alt="Мобильный интернет"
title="Мобильный интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/79246-mobilnyj-internet.html"
title="Мобильный интернет">Мобильный интернет</a>
</h3>
<span>Где используют мобильный Интернет? Мобильные устройства в высшем образовании. которое приводит к изменению поведения. Мобильное обучение. Признаки ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/78443-bezopasnyj-internet-dlja-detej.html"><img border="0"
src="/upload/resize_cache/webp/iblock/e34/e34f00223bc69bf5b66975251b22e110.webp" alt="Безопасный интернет для детей"
title="Безопасный интернет для детей"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/78443-bezopasnyj-internet-dlja-detej.html"
title="Безопасный интернет для детей">Безопасный интернет для детей</a>
</h3>
<span>Интернет – это мир интересных и полезных возможностей, но в то же время это источник угроз, особенно для ребенка. Агрессия, преследования, мошенничество, ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_rel_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/68985-moshenniki-i-internet.html"><img border="0"
src="/upload/resize_cache/webp/iblock/eb5/eb5a9f8981abaef7d20bbfb64bdf4ead.webp" alt="Мошенники и интернет"
title="Мошенники и интернет"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/68985-moshenniki-i-internet.html"
title="Мошенники и интернет">Мошенники и интернет</a>
</h3>
<span>Особенности Интернет-мошенничества. Мошенничество, как свидетельствует его длительная история, усиливается во времена кризисов и неурядиц в обществе. ...</span>
</div>
</div>
</div>
</div>
</div>
<div class="inside_page_rel_news">
<h2 id="konspekty">Конспекты</h2>
<div class="inside_page_rel_news_wrapper">
<div class="relate_block_item_wrapper">
<div class="inside_page_kon_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/konspekty/konspekty-po-informatike/33306-konspekt-uroka-po-informatike-sozdanie-i-oformlenie-informacionnoy-modeli-biologicheskie-effekty-9-klass.html"><img border="0"
src="https://prezentacii.org/word_logo.png" alt="Создание и оформление информационной модели"
title="Создание и оформление информационной модели"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/konspekty/konspekty-po-informatike/33306-konspekt-uroka-po-informatike-sozdanie-i-oformlenie-informacionnoy-modeli-biologicheskie-effekty-9-klass.html"
title="Создание и оформление информационной модели">Создание и оформление информационной модели</a>
</h3>
<span>Создание и оформление информационной модели "Биологические эффекты" с помощью MS Power Point, как один из примеров проектной деятельности на уроке ...</span>
</div>
</div>
</div>
<div class="relate_block_item_wrapper">
<div class="inside_page_kon_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/konspekty/konspekty-po-informatike/15415-konspekt-uroka-po-informatike-dobavlenie-tablic-oformlenie-risunkov-na-web-stranicah-10-klass.html"><img border="0"
src="https://prezentacii.org/word_logo.png" alt="Добавление таблиц, оформление рисунков на Web-страницах"
title="Добавление таблиц, оформление рисунков на Web-страницах"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/konspekty/konspekty-po-informatike/15415-konspekt-uroka-po-informatike-dobavlenie-tablic-oformlenie-risunkov-na-web-stranicah-10-klass.html"
title="Добавление таблиц, оформление рисунков на Web-страницах">Добавление таблиц, оформление рисунков на Web-страницах</a>
</h3>
<span>Конспект урока по информатике. Дата:. 02.10.2010. Класс:. 10. Учитель:. Мкртчян Оксана Владимировна. Тема:. Добавление таблиц, оформление ...</span>
</div>
</div>
</div>
</div>
</div>
<div class="inside_page_tips">
<h2 id="tips">Советы как сделать хороший доклад презентации или проекта</h2>
<ol>
<li>Постарайтесь вовлечь аудиторию в рассказ, настройте взаимодействие с аудиторией с помощью наводящих
вопросов, игровой части, не бойтесь пошутить и искренне улыбнуться (где это уместно).
</li>
<li>Старайтесь объяснять слайд своими словами, добавлять дополнительные интересные факты, не нужно
просто читать информацию со слайдов, ее аудитория может прочитать и сама.
</li>
<li>Не нужно перегружать слайды Вашего проекта текстовыми блоками, больше иллюстраций и минимум текста
позволят лучше донести информацию и привлечь внимание. На слайде должна быть только ключевая
информация, остальное лучше рассказать слушателям устно.
</li>
<li>Текст должен быть хорошо читаемым, иначе аудитория не сможет увидеть подаваемую информацию, будет
сильно отвлекаться от рассказа, пытаясь хоть что-то разобрать, или вовсе утратит весь интерес. Для
этого нужно правильно подобрать шрифт, учитывая, где и как будет происходить трансляция презентации,
а также правильно подобрать сочетание фона и текста.
</li>
<li>Важно провести репетицию Вашего доклада, продумать, как Вы поздороваетесь с аудиторией, что скажете
первым, как закончите презентацию. Все приходит с опытом.
</li>
<li>Правильно подберите наряд, т.к. одежда докладчика также играет большую роль в восприятии его
выступления.
</li>
<li>Старайтесь говорить уверенно, плавно и связно.</li>
<li>Старайтесь получить удовольствие от выступления, тогда Вы сможете быть более непринужденным и будете
меньше волноваться.
</li>
</ol>
</div>
</div>
<div class="right_info">
<div class="info_grid">
<h2>Информация о презентации</h2>
<div class="info_grid_element_rating">
<span>Ваша оценка:</span>
<span class="rating_tip">Оцените презентацию по шкале от 1 до 5 баллов</span>
<!--'start_frame_cache_dv_18785'--> <div class="rating">
<div class="iblock-vote" id="vote_18785" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="5" />
<meta itemprop="reviewCount" content="1" />
<meta itemprop="bestRating" content="5" />
<meta itemprop="worstRating" content="0" />
<script type="text/javascript">
if(!window.voteScript) window.voteScript =
{
trace_vote: function(div, flag)
{
var my_div;
var r = div.id.match(/^vote_(\d+)_(\d+)$/);
for(var i = r[2]; i >= 0; i--)
{
my_div = document.getElementById('vote_'+r[1]+'_'+i);
if(my_div)
{
if(flag)
{
if(!my_div.saved_class)
my_div.saved_className = my_div.className;
if(my_div.className!='star-active star-over')
my_div.className = 'star-active star-over';
}
else
{
if(my_div.saved_className && my_div.className != my_div.saved_className)
my_div.className = my_div.saved_className;
}
}
}
i = r[2]+1;
while(my_div = document.getElementById('vote_'+r[1]+'_'+i))
{
if(my_div.saved_className && my_div.className != my_div.saved_className)
my_div.className = my_div.saved_className;
i++;
}
},
do_vote: function(div, parent_id, arParams)
{
var r = div.id.match(/^vote_(\d+)_(\d+)$/);
var vote_id = r[1];
var vote_value = r[2];
function __handler(data)
{
var obContainer = document.getElementById(parent_id);
if (obContainer)
{
var obResult = document.createElement("DIV");
obResult.innerHTML = data;
obContainer.parentNode.replaceChild(obResult, obContainer);
}
}
arParams['vote'] = 'Y';
arParams['vote_id'] = vote_id;
arParams['rating'] = vote_value;
BX.ajax.post(
'/bitrix/components/bitrix/iblock.vote/component.php',
arParams,
__handler
);
}
}
</script>
<table>
<tr>
<td><div id="vote_18785_0" class="star-active star-voted" title="1" onmouseover="voteScript.trace_vote(this, true);" onmouseout="voteScript.trace_vote(this, false)" onclick="voteScript.do_vote(this, 'vote_18785', {'SESSION_PARAMS':'2b698cfbc00a4634d41468854b4bd2aa','PAGE_PARAMS':{'ELEMENT_ID':'18785'},'sessid':'3d9460e643450cc2371f11676c0fea58','AJAX_CALL':'Y'})"></div></td>
<td><div id="vote_18785_1" class="star-active star-voted" title="2" onmouseover="voteScript.trace_vote(this, true);" onmouseout="voteScript.trace_vote(this, false)" onclick="voteScript.do_vote(this, 'vote_18785', {'SESSION_PARAMS':'2b698cfbc00a4634d41468854b4bd2aa','PAGE_PARAMS':{'ELEMENT_ID':'18785'},'sessid':'3d9460e643450cc2371f11676c0fea58','AJAX_CALL':'Y'})"></div></td>
<td><div id="vote_18785_2" class="star-active star-voted" title="3" onmouseover="voteScript.trace_vote(this, true);" onmouseout="voteScript.trace_vote(this, false)" onclick="voteScript.do_vote(this, 'vote_18785', {'SESSION_PARAMS':'2b698cfbc00a4634d41468854b4bd2aa','PAGE_PARAMS':{'ELEMENT_ID':'18785'},'sessid':'3d9460e643450cc2371f11676c0fea58','AJAX_CALL':'Y'})"></div></td>
<td><div id="vote_18785_3" class="star-active star-voted" title="4" onmouseover="voteScript.trace_vote(this, true);" onmouseout="voteScript.trace_vote(this, false)" onclick="voteScript.do_vote(this, 'vote_18785', {'SESSION_PARAMS':'2b698cfbc00a4634d41468854b4bd2aa','PAGE_PARAMS':{'ELEMENT_ID':'18785'},'sessid':'3d9460e643450cc2371f11676c0fea58','AJAX_CALL':'Y'})"></div></td>
<td><div id="vote_18785_4" class="star-active star-voted" title="5" onmouseover="voteScript.trace_vote(this, true);" onmouseout="voteScript.trace_vote(this, false)" onclick="voteScript.do_vote(this, 'vote_18785', {'SESSION_PARAMS':'2b698cfbc00a4634d41468854b4bd2aa','PAGE_PARAMS':{'ELEMENT_ID':'18785'},'sessid':'3d9460e643450cc2371f11676c0fea58','AJAX_CALL':'Y'})"></div></td>
</tr>
</table>
</div> </div>
<!--'end_frame_cache_dv_18785'--> </div>
<div class="info_grid_element">
<span>Дата добавления:</span>11 декабря 2018 </div>
<div class="info_grid_element"><span>Категория:</span><a
href="/prezentacii/prezentacii-po-informatike/"
title="Смотреть другие презентации из категории Информатика">Информатика</a>
</div>
<div class="info_grid_element">
<span>Содержит:</span>41 слайд(ов)
</div>
<div class="info_grid_element_2"><span>Поделись с друзьями:</span><span>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,twitter"></div>
</span>
</div>
<a class="file_link" href="/download/18785/" rel="nofollow">Скачать презентацию</a>
</div>
<div class="same_block">
<h2>Презентации из категории</h2>
<div class="inside_page_same_news_wrapper">
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/131725-topologija-seti.html"><img border="0"
src="/upload/resize_cache/webp/iblock/3fb/3fb227af84f0e734e0952bcd82fd02e6.webp" alt="Топология сети"
title="Топология сети"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/131725-topologija-seti.html"
title="Топология сети">Топология сети</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/45824-osnovnye-komponenty-komp-yutera-8-klass.html"><img border="0"
src="/upload/resize_cache/webp/iblock/61d/61de03c255a8c001b200cd49bdfab607.webp" alt="Основные компоненты компьютера"
title="Основные компоненты компьютера"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/45824-osnovnye-komponenty-komp-yutera-8-klass.html"
title="Основные компоненты компьютера">Основные компоненты компьютера</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/142073-server-manager-i-powershell.html"><img border="0"
src="/upload/resize_cache/webp/iblock/97b/97bafdb09ad9df4e190dad37f908c4d3.webp" alt="Server Manager и PowerShell"
title="Server Manager и PowerShell"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/142073-server-manager-i-powershell.html"
title="Server Manager и PowerShell">Server Manager и PowerShell</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/108990-vstavka-obektov-v-dokument.html"><img border="0"
src="/upload/resize_cache/webp/iblock/2de/2de31c6c3bec498b3ea45fae7bfcfcc5.webp" alt="Вставка объектов в документ"
title="Вставка объектов в документ"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/108990-vstavka-obektov-v-dokument.html"
title="Вставка объектов в документ">Вставка объектов в документ</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/138745-sozdanie-prezantacij.html"><img border="0"
src="/upload/resize_cache/webp/iblock/82a/82ae0e9814eacd6d324fe76fd54c9b55.webp" alt="Создание презантаций"
title="Создание презантаций"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/138745-sozdanie-prezantacij.html"
title="Создание презантаций">Создание презантаций</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/117436-zolotye-pravila.html"><img border="0"
src="/upload/resize_cache/webp/iblock/cd6/cd6fcf299826dd0055f36a86a952cfeb.webp" alt="Золотые правила"
title="Золотые правила"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/117436-zolotye-pravila.html"
title="Золотые правила">Золотые правила</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/10460-mul-timediynye-tehnologii.html"><img border="0"
src="/upload/resize_cache/webp/iblock/13a/13abdf84dd78062b542be1363020aaf7.webp" alt="Мультимедийные технологии"
title="Мультимедийные технологии"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/10460-mul-timediynye-tehnologii.html"
title="Мультимедийные технологии">Мультимедийные технологии</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/145968-raschet-antisimmetrichnogo-letatelnogo-apparata-v-msc.html"><img border="0"
src="/upload/resize_cache/webp/iblock/b86/b8607bc2448a3356f81f3d6513e93953.webp" alt="Расчет антисимметричного летательного аппарата в MSC"
title="Расчет антисимметричного летательного аппарата в MSC"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/145968-raschet-antisimmetrichnogo-letatelnogo-apparata-v-msc.html"
title="Расчет антисимметричного летательного аппарата в MSC">Расчет антисимметричного летательного аппарата в MSC</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/137560-dialog-s-vetvleniem.html"><img border="0"
src="/upload/resize_cache/webp/iblock/5c8/5c8f06e1e2c3cde1cc8d022c403de8db.webp" alt="Диалог с ветвлением"
title="Диалог с ветвлением"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/137560-dialog-s-vetvleniem.html"
title="Диалог с ветвлением">Диалог с ветвлением</a>
</h3>
</div>
</div>
</div>
<div class="same_block_item_wrapper">
<div class="inside_page_same_news_item">
<div class="inside_page_rel_news_item_img">
<a href="/prezentacii/prezentacii-po-informatike/66230-informatika.html"><img border="0"
src="/upload/resize_cache/webp/iblock/78a/78ac5d510e159e771dc7a119619c6950.webp" alt="Информатика"
title="Информатика"></a>
</div>
<div class="inside_page_rel_news_item_content">
<h3><a href="/prezentacii/prezentacii-po-informatike/66230-informatika.html"
title="Информатика">Информатика</a>
</h3>
</div>
</div>
</div>
</div>
</div>
<a class="tips_link" href="#tips" rel="nofollow">Смотреть советы по подготовке презентации</a>
</div>
</div>
<script>
slideShow('.slider', {
isAutoplay: false
});
</script>
<div id="bxdynamic_CxqOHg_end" style="display:none"></div>
</div>
</div>
</div>
</div>
<!-- рекл Рся Fulscreen -->
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter29672320 = new Ya.Metrika({
id:29672320,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<!-- /Yandex.Metrika counter -->
<script>
(renderRecaptcha = function(elementId){
if (typeof(grecaptcha) != 'undefined')
{
var element = document.getElementById(elementId);
if (element != undefined && element.childNodes.length == 0)
{
grecaptcha.render(element, {
'sitekey': '6LdqFc4hAAAAAOyFqPNaYhFzegeWEA0sxrgGWbY6'
});
}
}
})();
</script></body>
</html><!--fb7e7074159fe9c0bc3d73754ce5644c-->
Слайд 1
Слайд 2
Слайд 3
Слайд 4
Слайд 5
Слайд 6
Слайд 7
Слайд 8
Слайд 9
Слайд 10
Слайд 11
Слайд 12
Слайд 13
Слайд 14
Слайд 15
Слайд 16
Слайд 17
Слайд 18
Слайд 19
Слайд 20
Слайд 21
Слайд 22
Слайд 23
Слайд 24
Слайд 25
Слайд 26
Слайд 27
Слайд 28
Слайд 29
Слайд 30
Слайд 31
Слайд 32
Слайд 33
Слайд 34
Слайд 35
Слайд 36
Слайд 37
Слайд 38
Слайд 39
Слайд 40
Слайд 41