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

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

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

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

информационных технологий №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) и смотрим готовый результат нашей
работы.

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Ähnlich wie сысоев андрей

Ähnlich wie сысоев андрей (20)

Mehr von Vlado Sudin

Mehr von Vlado Sudin (20)

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