🗊Презентация 10 первых шагов в мир Web-дизайна. (Учимся создавать сайт на HTML, понятие CSS)

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

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

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

Список базовых тэгов HTML

Сделаем сайт только средствами HTML Шаг 1: Пишем и форматируем текст Создаем файл *.txt и вписываем в него первый блок тегов, и сохраняем его формате HTML - *.html.

Второй шаг: Вставка рисунков На странице фотоархива, созданной на следующем шаге вставить фотографии. При этом фотографии желательно хранить в отдельной папке, которая находится в папке сайта!

Третий шаг: Создание гиперссылок. Для этого мы создаем копии нашей страницы и вписываем новый блок.

Четвертый шаг: Списки. Дописываем основную информацию на главной странице, и начнем дополнять остальные.

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

Шестой шаг: Формы. Создадим анкету на одной из страниц. <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> И так далее……….

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

Восьмой шаг. Мультимедиа (Звук и видео). Добавим на страницу проигрыватель. Для хранения музыки также создаем папку. <embed src="Music/Chromeo - Fancy Footwork (OST Step Up 3D) (zvukoff.ru).mp3"> Кроме этого для воспроизведения фоновой музыки используют тег BGSOUND. Он определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью параметров тега.

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

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

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