Разработка web-документов. Выбор средств разработки
Имеется ряд компонентов, без которых не обходится ни одна веб-страница:
Текст оказывает существенное влияние на оформление всего веб-сайта. Внешний вид страницы в значительной мере определяется такими параметрами, как: используемый шрифт, стили заголовков, цвет текста и фона.
Размещение текстовых блоков на странице
Для выделения наиболее важных моментов повествования на веб-страницах можно использовать подчеркивание, полужирное или курсивное начертание. Можно создавать на страницах маркированные и нумерованные списки различных стилей. Текст может быть организован в виде таблиц. Правильное оформление текста так же в значительной мере определяет удобство восприятия информации посетителем.
Графическое оформление. Этот компонент позволяет дополнить оформление страницы и оживить его. Использование графики определяет уникальность оформления веб-сайта и позволяет выделить его из числа других. Тем не менее при разработке сайта необходимо учитывать, что графические файлы имеют значительно больший объем, нежели текстовая информация и соответственно увеличивают время загрузки страниц. Также перезагруженность веб-страницы графическими элементами может затруднить восприятие содержащейся на ней информации.
Средства навигации (гиперссылки, карта сайта). Перемещение по веб-сайту осуществляется с использованием гиперссылок, которые могут содержаться непосредственно в тексте страницы и направлять посетителя к другим страницам или сайтам, содержащим дополнительную информацию по рассматриваемой теме. Для удобства гиперссылки на все основные разделы сайта объединяются в отдельные панели навигации, доступные на каждой веб-странице. Обычно эти панели размещаются в левой, верхней или (реже) нижней части страницы и могут содержать как текстовые ссылки, так и графические элементы, оформленные в виде кнопок. Еще одним средством навигации является карта сайта, которая содержит ссылки на все страницы сайта, оформленные в виде списка. Список, как правило, имеет иерархическую структуру: основные разделы сайта располагаются в верхнем уровне списка, а подразделам соответствуют более низкие уровни. Карта сайта обычно размещается на отдельной странице и используется совместно с панелью навигации, в которой размещается ссылка на страницу карты.
Поисковая система. Сайт может содержать ее, если объем представленной на сайте информации достаточно велик. Поисковая система позволяет осуществлять поиск по ключевым словам (необходимо специальное ПО, размещенное на веб-сервере).
Дополнительные компоненты. Определяются тематикой сайта.В их чиле можно назвать цифровые звукозаписи, видеофильмы, специальные программы или сценарии, предназначенные для динамической обработки и публикации данных.
Выбор средств разработки
(эл. вариант + теги)
Основные элементы HTML
Основу web составляют документы, называемые web-страницами. Каждая web-страница может содержать текстовую информацию, графические элементы, дополнительное оформление, а также гиперссылки для открытия других web-страниц или прочих ресурсов, содержащихся в web. Для создания web-страниц используются специальные языки разметки, позволяющие управлять форматированием, размещением и функциональностью содержащихся на страницах элементов. Пример такого языка: HyperText Markup Language – язык гипертекстовой разметки. Был разработан в 1991-1992г. британским ученым Тимом Бернесом-Ли, который чуть раньше предложил идею гипертекстовой паутины.
Документы HTML представляют собой текст, в котором содержатся специальные команды (или теги), определяющие форматирование элементов страницы и позволяющие размещать на ней гиперссылки, изображения, специальные элементы оформления и некоторую служебную информацию. (англ. tag)-языковая конструкция, имеющая вид: <ИМЯ атрибуты> (имя обязательно)
Элементы могут описываться
одиночными тегами
парными тегами
Т.е. описание элемента на HTML может иметь одну из двух форм:
Форма 1: Конструкция с двумя парными тегами. Такая пара тегов называется контейнером.
Форма 2: одиночный (непарный) тег
Атрибут – это средство для описания свойств элемента. Он задается ключевым словом или ключевым словом, за которым через знак «=» в “ ” записывается его значение.
имя= “значение”
Если значение атрибута содержит только буквы, цифры, дефиз и точки, то кавычки можно не использовать
От имени тега и между собой атрибуты отделяются одним или несколькими пробелами.
Регистр, в котором набрано имя элемента, имена атрибутов и их значения в HTML может быть любым. (Исключение: unix и Linux).
Элементы могут вкладываться друг в друга и все они расположены внутри элемента html.
Непарные теги обычно не относятся к определенным фрагментам текста страницы и определяют независимые объекты и, соответственно, не имеют закрывающих тегов.
<HR> - горизонтальная разделительная линия.
<HR width=75%>
Текст HTML-кода, соответствующий пустой странице:
<html> начало HTML-документа
<head> начало головной части
<title> </title> название документа
</head> конец головной части
<body> начало тела документа
… тело
</body> конец тела документа
</html> конец документа
…В качестве значения параметра name указывается имя некоторого свойства, а в качестве значения параметра content – значение этого свойства.
keywords (ключевые слова) – слова, которые, скорее всего, будут использованы для поиска вашей web-страницы;
description (описание) – описание вашей web-страницы (ее краткая аннотация);
author (имя автора web-страницы) – ваш имя.
Простейшие команды форматирования
<BR>-тег перехода на другую строчку.
<P> - разбиение текста на абзацы. Для задания каждого отдельного абзаца используется тег <p>. В отличие от тега <br>, между абзацами будет вставлена пустая строка.
Задание цвета – атрибуты тега <body>:
bgcolor – цвет фона страницы;
text – цвет текста для всей страницы;
link – цвет еще не посещенной ссылки;
Vlink – цвет ранее посещенной ссылки.
Напимер,
<body bgcolor = “pink” text= “red”> Текст</body>
Задание шрифта – тег <font>
face – вид шрифта;
size – размер;
color – цвет.
Например,
<font face = “Monotype Coursiva” size= “7” color = “red”>Текст</font>
Задание горизонтального выравнивания текста на странице
атрибут align
justify – выравнивание по ширине;
left – выравнивание влево;
вправо
по центру
Например,
<h1 align= “center”>Заголовок</h1>
Создание web-страницы
Создадим web-страницу «7 чудес света». Это предполагает создание 8-ми отдельных файлов. Каждый файл представляет собой текст с картинками и ссылки на другие страницы. Начинаем с главной страницы, которую наберем в блокноте и назовём index.html. Просмотрим полученный html документ в internet explorer.
Редактирование web-страницы
Можно изменить цвет фона фоновым рисунком, используя библиотеку рисунков. в теге body вместо атрибута bgcolor используем атрибут background
<body background = “fon1.jpg” text= “red”>
Цвета в HTML можно задавать их английскими названиями и 16-тиричными кодами.
RGB-red, green, blue
Размещение списков в html документе
В HTML можно задавать списки двух видов: маркированные и нумерованные. Для задания маркированных списков используется
<ul>
<li> 1-ый эл-т
<li> 2-ой эл-т списка
<li> 3-й
</ul>
Форму маркера можно определить с помощью атрибуда type , который может принимать след. значения :
square – в виде квадратов
disc – маркеры имеют вид закрашенных кругов
circle – маркеры имеют вид незакрашенных кругов
Для использования ненумерованных списков:
<ol>
<li> 1-ый эл-т
<li> 2-ой эл-т списка
<li> 3-й
</ol>
Номера устанавливаются автоматически. атрибут type позволяет указывать тип нумерации
A – эл-ты списка отмечаются пропис лат букв
a – эл-ты списка отмечаются строч лат букв
I - эл-ты списка отмечаются боль шримс циф
i - эл-ты списка отмечаются мал римс циф
Добавим на созданную страницу список из 7 эл-тов(нумерованный). редактируем в блокноте.
Построение графических изображений
В браузере картинку не нарисуешь, он может только растянуть или сжать рисунок на экране. Самый простой способ получения графических иллюстраций – это windows+буфер обмена+PS(Paint). Для сохранения изображения в формате gif на диске в PS нужно файл-> сохр для web.
Использование графических элементов
Атрибут src=имя_файла
Для включения графических изображений в документ используется тег <img>
Атрибут src этого тега используется для задания имени файла, в котором хранится изображение.
Например, вставить изображение, хранящееся в файле piramida.gif
<img src= “piramida.gif”>
на другом компе, необходимо указать ее URL-адрес
<img src = “www.homepage/one/piramida.gif”>
На компе, но на другом диске
<img src = “d:/one/two/piramida.gif”>
По кмолчанию картинка выравнивается по нижней границе текста абзаца.
Но можно изменить это выравнивание атрибутом align тега img
Этот атрибут позволяет определить положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:
align = top – вертикальное выравнивание по верхнему краю
align = middle – вертик выр по центру
align = bottom – вертик выр по нижн краю
align = left – гориз выр по лев краю
align = right – гориз выр по прав краю
<img align=top scr= “piramida.gif”>
Пример1
<p>
…
<img scr = “sova.jpg” align=left width=141 height=114 alt= “”>
…
Пример2
<p>
…
<img scr = “sova.jpg” align=right width=141 height=114 alt= “”>
…
Атрибут alt= “текст_надписи”
<img scr= “monstr.jpg” alt = “страншый зверь”>
рекомендуется использовать всегда.
Атрибуты width=n и height=m задают ширину и высоту( в пикселях) прямоугольника, в который выводится картинка.
<img scr = “zevs.gif” width= “140” height= “150” >
если атрибуты не заданы, картинка рисуется в естественных размерах.Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.
Размеры рисунков могут указываться в процентах к тому размеру, который имел изначально в файле.
<img scr = “zevs.gif” width= “20%” height= “20%” >
атрибуты hspase vspace позволяют задать размеры пустого пространства (по горизонтали и вертикали соответственно), которое будет оставлено между изображением и другими элементами документа (поля)
<img scr = “zevs.gif” hspase= “10” vspase= “20” >
Выровняем иллюстрации в нашей веб-странице по центру и изменим их размер.
<img src= “piramida.gif”> align= “middle” height= “20%” weight= “20%”>
Атрибут border=n
позволяет задать рамку вокруг иллюстрации толщиной в n пикселей
При отсутствии атрибута или при значении 0 рамка не рисуется.
Какой графич формат можно использовать
Браузеры понимают 2 формата gif & jpg
GIF
Картинки в этом формате поддерживают 256 цветов, что достаточно для получения качественных иллюстраций, но далеко до фотографического качества.
GIF формат имеет 3 доп возможности:
мультипликация – используя анимационный gif-редактор легко собрать простой мультик: нарисовать отдельные кадры, настроить время задержки в последовательности показа, зациклить кино или показывать кадры только 1 раз. Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML между заданием вывода на экран простого gif или анимированного
прозрачная графика – gif-формат позволяет 1 или несколько цветов в картинке объявить прозрачными, что помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом. Прозрачный цвет задается в редакторе при записи gif-файла на диск. Чтобы обычный gif-файл сделать прозрачным, загрузите его в gif-редактор или PS и снова запишите на диск.
чересстрочная развертка – применяется для больших gif. иллюстрация разделяется на 4 части, размером с оригинальную картинку. 1-я часть содержит 1, 5, 9 и т.д. строки исходного изображения. 2-я – 2,6,10 … 3 – 3,7,11…, 4 – 4,8,12… Браузер строит на экране сначала первую часть картинки, потом 2-ю, 3-ю и 4-ю. Получается эффект постепенного проявления изображения. Если картинка загружается не по сети, то различие вывода обычного и чересстрочного gif практически незаметны.
Формат jpg
изобретен спец для передачи фото
поддерживает миллионы цветов, позволяет получать изображения очень высокого качества.
Выс кач-во отражается на размерах файла, но этот формат имеет одну особенность. в jpg-редакторе при записи на диск можно указать ту степень качества, которая нужна. jpg-формат поддерживает режим, похожий на чересстрочную развёртку gif, но в отличае от gif деление на части происходит не по строкам, а по алгоритму выделения из картинки полноформатных частей. При этом каждая следующая часть по качеству выше предыдущей. jpg в таком режиме называется прогрессивным