сысоев андрей

«Лучшая профессия – моя»

Андрей Сысоев

 Меня зовут Андрей Сысоев, я студент Колледжа автоматизации и

информационных технологий №20. Моё обучение проходит дистанционно,
так как я являюсь человеком с ограниченными возможностями. Одним из
самых интересных предметов для меня является интернет технологии
(веб-дизайн). Изучая этот предмет в колледже, я постепенно приближаюсь
к профессиональному владению этой технологией. Ведь как интересно
создавать дизайн веб-сайта с чистого листа и сделать его оригинальным,
чтобы он был гармоничен и функционален, а главное полезен для
пользователей. Веб-дизайн обязан идти в ногу со временем. Для того, чтобы
стать профессиональным веб-дизайнером я не хочу останавливаться на
достигнутом и в дальнейшим хочу продолжить обучение в ВУЗЕ, чтобы
достигнуть высокого уровня владения современными технологиями.
Благодаря возможностям дистанционного обучения и такой профессии, я
понял, что я смогу добиться своей цели, стать самостоятельным и найти
работу по душе.

 Слово Web - переводится как паутина. И, главным образом, в
компьютерном мире ассоциируется именно с Интернетом. Но веб-
странички обязательно должны находиться в Интернете, они могут
размещаться на вашем домашнем компьютере.
 Собрание страниц, объединенных некоторой общей тематикой и
помещенных, как правило, на одном компьютере, называют Web-узлом
или сайтом. Узлы Web подобны книгам, а Web-страницы - страницам
этих книг. Компьютеры, на которых размещаются сайты, а также
программы, обеспечивающие поддержку сайтов, называются серверами.
На одном сервере может размещаться множество Web-узлов или
сайтов.
 Чтобы опубликовать в Интернете страницу, содержащую некоторую
информацию, используется специально разработанный для этого язык
HTML.
 Создавать Web-страницы можно с помощью специальных программ-
редакторов, автоматически генерирующих код HTML, например:
блокнот для windows (notepad).

Структура web-страницы
 Web-страницы создаются с использованием языка разметки гипертекстовых
документов HTML – (HyperText Markup Language).
 Этот язык разметки позволяет выделить в документе отдельные логические
части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает
конкретные атрибуты форматирования. Конкретный вид форматирования
определяет сам браузер при чтении документа, и именно браузер обеспечивает
наилучшее отображение Web-документа на вашем экране.
 В обычный текстовый документ вставляются управляющие символы HTML –
теги, которые определяют вид страницы в Web –браузере.
 Web-сайт – набор страниц, посвящённых определённой тематике и связанных
между собой с помощью гиперссылок.
 Web-страница сохраняется в виде файла с разрешением .htm или .html Пример:
index.html
 Свойства текста на web-стренице и свойства самой страницы задаются при
помощи тегов.
 Что такое тег? Тег - это код, который указывает какие-либо параметры текста,
web-страницы и других объектов.
 HTML-теги заключаются в угловые скобки и могут быть опарными или
одиночными.
 Парные теги содержат открывающий и закрывающий теги. Закрывающий тег
содержит прямой слеш (/) перед обозначением.

 Web-страница состоит из трёх основных частей:
 Заголовка страницы; Названия страницы; Тела документа.
 Заголовок страницы
 Заголовок страницы помещается в контейнер <HEAD></HEAD>.
 Между открывающим и закрывающим тегами head располагается
информация, которая определяет свойства данной страницы, а именно:
тип страницы и кодировка шрифта.
 Первая строчка, которая помещается в теле раздела HEAD имеет
следующий вид:
 <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
 Название страницы помещается в контейнер <TITLE></TITLE>. При
просмотре оно отображается в верхней части браузера.
 Содержание страницы
 Отображаемое содержание страницы помещается в контейнер (тело
документа) <BODY></BODY>.
 Тег <BODY></BODY> может иметь атрибуты. Например:
 bgcolor=”black”- задаёт цвет фона страницы.

Форматирование текста на Web-странице
 Абзацы. Разделение текста на абзацы происходит с помощью контейнера
<p></p>. Для каждого абзаца можно задать тип выравнивания и параметры
форматирования шрифта.
 Заголовки. Размер шрифтов заголовков задаётся парами тегов от <H1></H1>
(самый крупный) до <H6></H6> (самый мелкий).
 Шрифт. Параметры форматирования шрифта задаются с помощью тега FONT и
его атрибутов:
 SIZE – определяет размер шрифта;
 COLOR – определяет цвет шрифта.
 Выравнивание текста. Задаётся с помощью атрибута TEXT-ALIGN.
 Выравнивание по левому краю: TEXT-ALIGN: LEFT;
 Выравнивание по центру краю: TEXT-ALIGN: CENTER;
 Выравнивание по правому краю: TEXT-ALIGN: RIGHT.
 Для того чтобы вставить изображение в Web-страницу нужно использовать тег
<IMG>. Обязательным атрибутом является SRC (SouRCe, источник).
 <IMG SRC=”image.jpg” ALT=”ИЗОБРАЖЕНИЕ”>

Стили
 Стили задают свойства текста (начертание шрифта, цвет, размер,
выравнивание, отступ красной строки, отступ от предыдущего абзаца, отступ
от краёв и т. п.). Можно задать несколько стилей (например стиль заголовка,
стиль абзаца и др.) и в дальнейшем не вводить каждый раз все необходимые
параметры для каждого абзаца, заголовка или другого раздела текста, а просто
указывать название стиля.
 Стили задаются между тегами <style> и </style>, либо стили можно задать в
отдельном файле с расширением .css (тогда одни и те же стили можно будет
использовать для разных страниц). Теги со стилями тоже должны находиться
внутри раздела HEAD
 Итак, для задания стиля нужно написать либо:
 <style type="text/css">
 Здесь задаются стили. Например:
 p {font-size:medium; text-indent:30pt; text-align:justify} h1 {font-size:large; text-
indent:0pt; text-align:center} </style>
 Либо подключить файл, в котором заданы стили:
 <LINK href="название_файла_со_стилями.css"
 rel=STYLESHEET type=text/css>

Простейший пример web-страницы с изображением:
<HTML> В браузере Mozilla Firefox это
<HEAD> будет выглядеть так:
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
<H1>Простейший документ с
изображением</H1>
<IMG SRC=”image.jpg”
ALT=”ИЗОБРАЖЕНИЕ”>
</BODY>
</HTML>

Создание web-страницы с помощью программы
Adobe Dreamweaver CS5.5
 1. Запускаем программу Adobe Dreamweaver CS5.5 и нажимаем Создать => HTML.

 2. Открывается рабочая область программы

 3. Сохраняем документ: Файл => Сохранить как.
 В открывшемся окошке выбираем место сохранения и название файла. В
последующих этапах будем сохранять иначе: Файл => Сохранить.

 4. Далее делаем всё как на слайде, а именно:
 Добавляем таблицу для стилей страницы.
 Добавляем цвет основного фона страницы bgcolor=”#FF9900”.
 С помощью DIV –блоков делаем разметку структуры страницы.
 Не забываем сохранять страницу: Файл => Сохранить.

 5. Далее добавляем свойства стилей для DIV –блоков.
 #verx {border:2px solid #CCC --- рамка блока; background-color:#CCCCCC --- цвет
фона блока;}
 #container {width:98% --- ширина блока; margin: 0 auto --- отступы блока; border:2px
solid #CCC ; background-color:#CCCCCC }
 #left {float:left --- сторона выравнивания блока; width:22% --- ширина; margin: 5px
10px 20px 5px --- отступы; text-align:center; background-color:#9CF - цвет; border:2px
solid #93F --- рамка;}
 #right {float:right --- сторона выравнивания блока; width:22% -ширина; margin: 5px
7px 20px 5px --- отступы; text-align:center; border:2px solid #93F --- рамка;
background-color:#9CF --- цвет;}
 #center {margin: 5px 10px 20px 22% --- отступы; width:55% --- ширина; border:2px solid
#F0F --- рамка; background-color:#CC6600 --- цвет}

 6. Далее заполняем содержимым блок <div id="verx"> </div>, в нашем случаи тремя
картинками из заранее созданной папки с файлами (название папки может быть
любым). Все изображения были взяты из просторов интернета.
 <p><img src="Mazda/mazda.jpg" – путь картинки; width="147" – ширина картинки;
height="118" – высота картинки; title="Mazda" – название; alt="M" --
альтернативный текст; align="left" – выравнивание картинки/>
 <img src="Mazda/glS.jpg" width="684" height="158" title="gl" alt="M" align="top"
style="padding-left:75px" – поля картинки/>
 <img src="Mazda/mazda.jpg" width="147" height="118" title="Mazda" alt="M"
align="right" /></p>

 7. Далее заполняем изображениями левый блок <div id="left"> </div>. Добавляем
горизонтальную линию с помощью тега <hr />. Над изображениями пишем
название модели автомобиля.

 8. Далее заполняем изображениями правый блок <div id="right"> </div>,
аналогично пункту 7.

 9. Далее заполняем текстом центральный блок <div id="center"> </div>.
 Добавляем заголовок первого уровня с помощью тега <h1>"История компании
Mazda"</h1>. Затем сам текст с помощью тега абзаца <p> </p>.
 На слайде пример заполнения текстом центрального блока заголовком и первых
трёх абзацев. Аналогично добавляем оставшиеся 14 абзацев. После всего текста
добавляем заголовок первого уровня <h1>-----"The End"-----</h1>.

 10. Добавляем стили для тегов абзаца, заголовков и изображений.
 h1 {font-size:36px -- размер шрифта; color: #000 -- цвет;
 margin: 0px 0px 40px -- отступы вокруг заголовка; text-align:center –
выравнивание заголовка;}

 После сохранения открываем нашу страничку в Web –браузере (Mozilla Firefox,
Google Chrome, Opera, Internet Explorer) и смотрим готовый результат нашей
работы.

сысоев андрей

More Related Content

What's hot

Similar to сысоев андрей

More from Vlado Sudin

сысоев андрей