Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
15 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
1.83 MB
Просмотров:
97
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![первых шагов в мир](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img0.jpg)
Содержание слайда: 10 первых шагов в мир Web-дизайна.
(Учимся создавать сайт на HTML, понятие CSS)
Учитель информатики Курилов И.А.
№2 слайд![Введение Что такое HTML Что](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img1.jpg)
Содержание слайда: Введение
Что такое HTML
Что бы представить информацию для размещения в сети Интернет, нужен универсальный язык, который понимали бы все компьютеры. Этим языком стал язык разметки гипертекста HTML.Он включает совокупность простых команд, которые вставляются в исходный текст документа (ASCll-файл) и позволяют управлять представлением этого документа на экране монитора.
№3 слайд![Основные теги и структура](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img2.jpg)
Содержание слайда: Основные теги и структура HTML-документа
Все тэги HTML начинаются с < (левой угловой скобки) и заканчиваются символом > (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:
<TITLE> Заголовок документа </TITLE>
№4 слайд![Список базовых тэгов HTML](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img3.jpg)
Содержание слайда: Список базовых тэгов HTML
№5 слайд![Сделаем сайт только](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img4.jpg)
Содержание слайда: Сделаем сайт только средствами HTML
Шаг 1: Пишем и форматируем текст
Создаем файл *.txt и вписываем в него первый блок тегов, и сохраняем его формате HTML - *.html.
№6 слайд![Второй шаг Вставка рисунков](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img5.jpg)
Содержание слайда: Второй шаг: Вставка рисунков
На странице фотоархива, созданной на следующем шаге вставить фотографии. При этом фотографии желательно хранить в отдельной папке, которая находится в папке сайта!
№7 слайд![Третий шаг Создание](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img6.jpg)
Содержание слайда: Третий шаг: Создание гиперссылок.
Для этого мы создаем копии нашей страницы и вписываем новый блок.
№8 слайд![Четвертый шаг Списки.](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img7.jpg)
Содержание слайда: Четвертый шаг: Списки.
Дописываем основную информацию на главной странице, и начнем дополнять остальные.
№9 слайд![Пятый шаг Таблицы Таблицы](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img8.jpg)
Содержание слайда: Пятый шаг: Таблицы
Таблицы представляют собой особую часть HTML-документа.Данные в них организованы в виде прямоугольной сетки, состоящей из столбцов и рядов
№10 слайд![Шестой шаг Формы. Создадим](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img9.jpg)
Содержание слайда: Шестой шаг: Формы.
Создадим анкету на одной из страниц.
<P><H3 ALIGN="center">Анкета</A></H3></P>
<FORM>
Пожалуйста, введите ваше имя: <BR>
<INPUT TYPE="text" NAME="name" SIZE=30><BR>
E-mail:<BR>
<INPUT TYPE="text" NAME="e-mail" SIZE=30><BR>
Укажите к какой группе пользователей вы себя относите: <BR>
<INPUT TYPE="radio" NAME="group" VALUE="schoolboy">Учащийся<BR>
<INPUT TYPE="radio" NAME="group" VALUE="student">Студент<BR>
<INPUT TYPE="radio" NAME="group" VALUE="teacher">Учитель<BR>
И так далее……….
№11 слайд![Седьмой шаг Фреймы Выбор](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img10.jpg)
Содержание слайда: Седьмой шаг: Фреймы
Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:
1.При необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой области.
2.Для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана.
3.Для предоставления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.
№12 слайд![Восьмой шаг. Мультимедиа Звук](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img11.jpg)
Содержание слайда: Восьмой шаг. Мультимедиа (Звук и видео).
Добавим на страницу проигрыватель. Для хранения музыки также создаем папку.
<embed src="Music/Chromeo - Fancy Footwork (OST Step Up 3D) (zvukoff.ru).mp3">
Кроме этого для воспроизведения фоновой музыки используют тег BGSOUND. Он определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью параметров тега.
№13 слайд![Девятый шаг Понятие](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img12.jpg)
Содержание слайда: Девятый шаг: Понятие Flash-анимация (её виды).
С помощью Flash можно создавать анимированые изображения различного типа - от простейших «живых» кнопок, до сложных мультипликаций.
Во Flash анимации предусмотренно три различных механизма анимации обьектов:
Покадровая (классическая) анимация.
При просмотре последовательности кадров возникает иллюзия оживления изображенных предметов.
Анимация с заполнением кадров (Tweened Animation).
Создается только первый и последний кадры Flash-фильма, а программа автоматически заполняет кадры из определенного промежутка, заключенного между двумя ключевыми кадрами.
Анимация на основе сценариев.
Сценарий - описания поведения объекта на собственном языке ActionScript.
№14 слайд![Десятый шаг. Понятие CSS. CSS](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img13.jpg)
Содержание слайда: Десятый шаг. Понятие CSS.
CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами
HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет большие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).
С появлением каскадных таблиц стилей (CSS - Cascading Style Sheets) можно отделить структуру документа, описанную на языке HTML, от правил отображения этого документа.
№15 слайд![Заключение. Если вы прошли](/documents_6/03f5e06e814db0a87e7e86328148c4a7/img14.jpg)
Содержание слайда: Заключение.
Если вы прошли эти 10 шагов, значит, вы знаете теперь основы Web-дизайна. И, какой бы не был совершенный конструктор сайтов, вы не сможете обойтись без этих основ!