Embed Size (px)
DESCRIPTION
Citation preview
«Лучшая профессия – моя»
Андрей Сысоев
Меня зовут Андрей Сысоев, я студент Колледжа автоматизации и
информационных технологий №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><HEAD><TITLE>Заголовок</TITLE></HEAD><BODY><H1>Простейший документ с изображением</H1><IMG SRC=”image.jpg” ALT=”ИЗОБРАЖЕНИЕ”></BODY></HTML>
В браузере Mozilla Firefox это будет выглядеть так:
Создание 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) и смотрим готовый результат нашей работы.
