Слайд 1

10 первых шагов в мир Web -дизайна. (Учимся создавать сайт на HTML , понятие CSS ) Учитель информатики Курилов И.А.

Слайд 2

Введение Что такое HTML Что бы представить информацию для размещения в сети Интернет, нужен универсальный язык, который понимали бы все компьютеры. Этим языком стал язык разметки гипертекста HTML .Он включает совокупность простых команд, которые вставляются в исходный текст документа ( ASCll -файл) и позволяют управлять представлением этого документа на экране монитора.

Слайд 3

Основные теги и структура HTML-документа Все тэги HTML начинаются с < (левой угловой скобки) и заканчиваются символом > (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

Слайд 4

Список базовых тэгов HTML Стартовый Завершающий Описание Обозначение HTML-документа Заголовочная часть документа Заголовок документа Тело документа

Заголовок абзаца первого уровня

Заголовок абзаца второго уровня

Абзац

Форматированный текст
Перевод строки без конца абзаца BGCOLOR цвет фонового изображения. TEXT Определяет цвет текста

< / BLOCKQUOTE> Цитата Управление размером, начертанием и цветом текста

Слайд 5

Сделаем сайт только средствами HTML Шаг 1: Пишем и форматируем текст Создаем файл *. txt и вписываем в него первый блок тегов, и сохраняем его формате HTML - *. html . < html > < head > < title >Информационно-технологический профиль < body > < body bgcolor =" green "> < body text ="# ffff 00"> < p >< center >< h 1>Сайт информационно-технологического профиля

МБОУ СОШ №9 г . Нерчинска

< p >< center >< H 3> Добро пожаловать на нашу страницу! < HR > < p ALIGN =" LEFT "> Наш сайт предназначен для будущих учеников, их родителей, для сегодняшних учеников, разных посетителей и конечно для выпускников. Ознакомтесь с нашей работой, созданными проектами в различных областях информатики, достижениями, нашими планами на будущее и многим другим!!!

Слайд 6

Второй шаг: Вставка рисунков На странице фотоархива, созданной на следующем шаге вставить фотографии. При этом фотографии желательно хранить в отдельной папке, которая находится в папке сайта! Общий формат изображений Выравнивание по верху Выравнивание по середине Выравнивание по низу Задание альтернативного текста < IMG SRC = имя файла ALT =текст>

Слайд 7

Третий шаг: Создание гиперссылок . Для этого мы создаем копии нашей страницы и вписываем новый блок. Общий формат гиперссылки Текст гиперссылки Закладка на данной HTML-странице Текст закладки Гиперссылка на закладку Текст гиперссылки Электронная почта Текст гиперссылки Файл (или каталог)FTP Текст гиперссылки

Слайд 8

Четвертый шаг: Списки. Дописываем основную информацию на главной странице, и начнем дополнять остальные. Список базовых тэгов HTML (списки): Списки предназначены для представления информации в упорядоченном виде. В HTML - документах используется 3 вида списков: 1. Неупорядочные списки (Тег

), 2. Маркированные списки (Тег
), Элемент списка задается тегом
1. .

   Слайд 9

   Пятый шаг: Таблицы Таблицы представляют собой особую часть HTML-документа.Данные в них организованы в виде прямоугольной сетки, состоящей из столбцов и рядов

   - таблица - строка < TD > - ячейка Некоторые дополнительные метки расширения HTML : - Размер рамки таблицы < TABLE BORDER =размер> - Ширина таблицы < TABLE WIDTH = ширина> - Ширина клетки таблицы < TD WIDTH = ширина> - Интервал клетки таблицы < TABLE SPACING = интервал> - Заполнение клетки таблицы < TABLE CELLPADDING =заполнение>

   Слайд 10

   Шестой шаг: Формы. Создадим анкету на одной из страниц.

   Анкета

   Пожалуйста, введите ваше имя:
   
   E-mail:
   
   Укажите к какой группе пользователей вы себя относите:
   Учащийся
   Студент
   Учитель
   И так далее……….

   Слайд 11

   Седьмой шаг: Фреймы Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях: 1.При необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой области. 2.Для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана. 3.Для предоставления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.

   Слайд 12

   Восьмой шаг. Мультимедиа (Звук и видео). Добавим на страницу проигрыватель. Для хранения музыки также создаем папку. Кроме этого для воспроизведения фоновой музыки используют тег BGSOUND . Он определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью параметров тега.

   Слайд 13

   Девятый шаг: Понятие Flash -анимация (её виды). С помощью Flash можно создавать анимированые изображения различного типа - от простейших «живых» кнопок, до сложных мультипликаций. Во Flash анимации предусмотренно три различных механизма анимации обьектов: Покадровая (классическая) анимация. При просмотре последовательности кадров возникает иллюзия оживления изображенных предметов. Анимация с заполнением кадров ( Tweened Animation ). Создается только первый и последний кадры Flash -фильма, а программа автоматически заполняет кадры из определенного промежутка, заключенного между двумя ключевыми кадрами. Анимация на основе сценариев. Сценарий - описания поведения объекта на собственном языке ActionScript .

   Слайд 14

   Десятый шаг. Понятие CSS . CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет большие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра). С появлением каскадных таблиц стилей ( CSS - Cascading Style Sheets) можно отделить структуру документа, описанную на языке HTML , от правил отображения этого документа.

   Слайд 15

   Заключение. Если вы прошли эти 10 шагов, значит, вы знаете теперь основы Web -дизайна. И, какой бы не был совершенный конструктор сайтов, вы не сможете обойтись без этих основ!