Анализ требований к проекту сайта (см табл. 9) 18 Согласование выработанной идеи проекта сайта с заказчиком (преподавателем) 18

Вид материала

Курсовой проект

Содержание Выделение фрагментов текста B, strong S, strike Абсолютные и относительные ссылки Ссылки внутри одного документа Тез базового пути Форматы изображений и графические редакторы GIF (Graphic Interchange Format) Чересстрочные изображения JPEG (Joint Photographic Expert Group – Vspace hspace Usemap ismap Активные изображения или карты навигации Frame-set, frame

Подобный материал:

• План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
• Техническое задание на разработку туристического сайта сайта, 140.48kb.
• Данная статья посвящена теме того, как правильно спланировать техническую концепцию, 219.36kb.
• Коммерческое предложение по созданию сайта для организации цели и задачи проекта, 83.72kb.
• Название доклада, 56.02kb.
• Расчет эффективности создания сайта, 52.25kb.
• Как повысить эффективность сайта и рекламной кампании. Seo оптимизация в примерах, 175.09kb.
• Составление семантического ядра сайта, 26.35kb.
• Техническое задание на выполнение работ по созданию сайта листов, 1081.26kb.
• Проектирование и размещение в сети Интернет административных сайтов образовательных, 1528.71kb.

до

, указывающие отображать текст шрифтами разного размера.

В открывающем теге можно указать дополнительный атрибут ALIGN, определяю­щий способ выравнивания текста заголовка. Данному атрибуту можно задавать одно из трех значений:

Left – выравнивание по левому краю; Right – выравнивание по правому краю; Center – выравнивание по центру.

Абзацы

Текст, относящийся к одному абзацу, заключается между тегами <Р> и ². Каж­дый абзац отделяется от предыдущего увеличенным межстрочным интервалом. Так же как и для заголовков, для абзаца можно задавать способ выравнивания тек­ста с помощью атрибута ALIGN.

Если требуется начать текст с новой строки в пределах одного абзаца, то использу­ется непарный тег
. При использовании этого тега тип выравнивания не изменяется.

В качестве ограничителя для абзацев может также использоваться горизонтальная линейка, задаваемая непарным тегом

---

. Ее длина и ширина задаются атрибутами этого тега.

Списки

HTML-документ может содержать как маркированные, так и нумерованные списки, а также списки определений.

Для создания маркированных списков используется парный тег

, нумеро­ванных -
. В обоих случаях каждый элемент списка помещается между тегами
1. и
³. Допускается создание вложенных списков. С помощью атрибута Type можно задать тип маркера (disc, square, circle) или тип нумерации (арабские либо римские цифры, латинские буквы) списков соответствующего типа.

Список определений задается парным тегом

. Он содержит элементы двух типов: определяемые термины (парный тег

) и определения (парный тег

) Закрывающие тега и

можно опускать. Обычно определяемые термины и определения чередуют, хотя это нигде не оговорено. Определения отображаются экране с отступом от левого края. Такой список может быть сформирован следую­щим образом:





Термин 1



Определение первого термина





Для более компактного расположения элементов списков любого типа существует атрибут Compact.



Выделение фрагментов текста


Язык HTML позволяет выделять отдельные слова и даже символы документа. В таблице 2 приведены основные теги, используемые при выделении.

Для управления параметрами шрифта используется тег . Он должен обязательно содержать один из трех атрибутов: COLOR, FACE, SIZE.

Способы задания цвета с помощью атрибута COLOR были описаны выше. Использование атрибута FACE позволяет задать название шрифта используемого для отображения текста. Однако следует помнить, что у посетителей вашей страницы может и не оказаться этого шрифта.

Атрибут SIZE позволяет управлять высотой символов, которая может находиться в пределах от 1 до 7 (в относительных единицах). Для этого атрибута можно определять значение со знаком (плюс или минус), которое определяет увеличение или уменьшение шрифта относительно текущего размера.

Параметры шрифта, используемые по умолчанию (как базовые) задаются с помощью непарного тега , который лучше располагать в начале документа. Он может использовать те же атрибуты что и FONT.

Таблица 2. Парные теги выделения текста.


Тег	Назначение
B, STRONG	Полужирный шрифт
I, EM	Курсив
U	Подчеркнутый текст
S, STRIKE	Вычеркнутый текст
CITE	Отображение цитат (выводятся курсивом)
BLOCKQUOTE	Отображение цитат (выделяются увеличенным отступом с двух сторон)
SUP и SUB	Верхний и нижний индексы, соответственно.
CODE, VAR, SAMP	Исходный текст, описание переменных и результат работы программы, соответственно.
KBD	Текст, вводимый с клавиатуры
TT	Имитация телетайпного текста, т.е. с постоянной шириной символов.
DIV	Создает новый раздел в документе. Чаще всего служит для задания выравнивания текста из нескольких разделов (атрибут ALIGN).
PRE	Отображает текст с постоянной шириной символов, не пропуская пробелы, символы табуляции и переносы строк, т.е. отображает предварительно отформатированный текст.
BIG и SMAL	Увеличивают и уменьшают (соответственно) размер шрифта на единицу относительно текущего (базового) размера. Аналогично .
CENTER	Аналогично .

Таблицы


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

Каждая строка таблицы содержит ячейки таблицы, которые могут относиться к двум разным типам. Ячейки в заголовках столбцов и строк задают парным тегом

, и строки таблицы, задаваемые при помощи парных тегов

, а обычные ячейки – парным тегом	. Закрывающие теги и	можно опускать. Отличие этих тегов заключается только в том, что	задает ячейку, текст внутри которой отображается жирным шрифтом (т.е. эквивалентен	…) Каждая ячейка может содержать произвольный текст, а также любые теги HTML, допустимые в «теле» документа. В частности, ячейка таблицы может содержать вложенную таблицу или изображение. При отображении таблицы на экране компьютера происходит ее автоматическое форматирование с подбором размеров ячеек в соответствии с объемом размещае­мой информации и заданными атрибутами. Атрибуты элементов позволяют сколь угодно причудливо оформить таблицу по своему вкусу. В таблице 3 приведена краткий перечень допустимых атрибутов. Таблица 3. Атрибуты элементов, используемых при создании таблицы. Атрибут Элемент Назначение ALIGN Таблица, строка, ячейка, заголовок Выравнивание таблицы по горизонтали (по умолчанию выравнивается по левому краю) Выравнивание данных по горизонтали Размещение заголовка над или под таблицей (top или bottom). VALIGN Строка, ячейка Выравнивание по вертикали. Возможные значения: top – по верху, middle – по середине, bottom – по низу, baseline – по базисной линии (по умолчанию выравнивается по середине) WIDTH Таблица, ячейка Ширина задается в пикселях или в процентах от ширины документа (для таблицы) или от ширины таблицы (для ячейки) HEIGHT Ячейка Высота BORDER Таблица Ширина границы (рамки) таблицы в пикселях (по умолчанию 0). CELLSPASING Таблица Расстояние между ячейками. CELPADDING Таблица Расстояние между рамкой ячейки и ее содержимым. BGCOLOR Таблица, строка, ячейка Задает цвет фона. BACKGROUND Таблица, строка, ячейка Задает фоновое изображение для соответствующего элемента. ROWSPAN Ячейка Объединяет указанное количество ячеек в одну по вертикали. COLSPAN Ячейка Объединяет указанное количество ячеек в одну по горизонтали. Поскольку многие атрибуты могут определяться в различных элементах таблицы, при этом их действие зависит от тега, в котором они определены. Основное правило: атрибут, расположенный в элементе более низкого уровня, имеет приоритет над атрибутами, определенными ранее. В заключение приведем пример объединения ячеек: Таблица 1 2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Результат будет иметь следующий вид: Гиперссылки Абсолютные и относительные ссылки Гиперссылки обеспечивают связь между различными HTML-документами. Гипер­ссылка представляет собой фрагмент HTML-документа (текст или изображение), щелчок на котором приводит к загрузке другого документа. Для создания гиперссылки используется пара тегов <А> и . Заключенный меж­ду ними фрагмент HTML-документа при просмотре будет отображаться как ги­перссылка. Тег <А> обязательно должен использоваться совместно с атрибутом HREF. С помощью него задается ссылка на документ, к которому должен быть произве­ден переход при щелчке на гиперссылке. Таким образом, фрагмент HTML-документа, задающий гиперссылку, в общем виде выглядит так: <А HREF-URL_pecypca> фрагмент документа Здесь URL-адрес, задаваемый атрибутом HREF, может быть двух видов: абсолют­ным и относительным: абсолютный URL-адрес начинается с указания протокола обращения к ре­сурсу и адреса Web-узла. относительный URL-адрес указывает расположение ресурса относительно ме­стоположения текущего HTML-документа. Например, строка <А HREF=doc1.phpl>Переход к документу 1 создает гиперссылку, указывающую на гипертекстовый документ, содержащий­ся в файле docl.phpl, который размещен в том же каталоге, что и текущий доку­мент. Если абсолютный адрес документа, содержащего приведенную гиперссылку, вы­глядит, например, как .ru/information/main.phpl, то абсолютным ад­ресом, на который эта гиперссылка ссылается, будет .ru/information/ doc1.phpl. Относительная ссылка сохраняет свою работоспособность в случае изменения адреса Web-узла как целого (например, в результате его переноса на другой сервер), поэтому при потенциальной возможности такого события следует отказываться от полного задания адресов в гиперссылках. Абсолютная запись адреса обычно используется, когда необходимо направить посетителя на другой Web-узел, и рассматривается как внешняя ссылка. Ссылки внутри одного документа Тег <А> имеет еще одно назначение - кроме создания гиперссылок он позволяет устанавливать маркеры (якоря, закладки) для организации переходов по гиперссылкам в пределах одного документа HTML. Для задания якоря тег <А> используется совместно с атрибутом NAME: <А NАМЕ="ИмяМаркера"> текст В этом случае текст, заключенный между тегами <А> и , при отображении ни­как не выделяется, но к помеченному таким образом фрагменту HTML-документа можно перейти с помощью гиперссылки следующего вида: <А НRЕF="#ИмяМаркера"> текст Гиперссылки такого вида удобно использовать в документах большого объема. Например, вы можете создать на каждой странице краткое оглавление. Это облегчает навигацию и позволяет без прокрутки сразу перейти на нужную строку или заголовок. Имя якоря может задаваться произвольной последовательностью (без пробелов) латинских букв и цифр (кроме первого символа). Тез базового пути Как правило, указатели в ссылках на локальные документы используют относительную адресацию. Это удобно, поскольку если перенести документ и связанные с ним файлы в другой каталог, локальные ссылки не перестанут работать. Однако, существует возможность указать и полный путь к местоположению файлов, используя непарный тег для преобразования относительного пути, указанного в ссылке в абсолютный. Например, зададим базовый путь: Если относительный адрес будет выглядеть следующим образом: Переход к документу 1 тогда сервер будет искать этот файл в текущем каталоге, содержащем документы. Если doc1.phpl не будет найден, сервер соединит URL, указанный в этом адресе и базовый путь. В результате этого полный URL будет выглядеть следующим образом: .ru/information/doc1.phpl В заключение отметим, что тег помещается в самом начале HTML-документа. Web-графика Форматы изображений и графические редакторы Графические иллюстрации в большинстве случаев являются неотъемлемой частью Web-документов. Сегодня графические элементы Web-страниц используют два основ­ных формата - GIF и JPEG (новый формат PNG пока еще нельзя считать общеприня­тым). Все графические браузеры, предназначенные для отображения Web-страниц на экране компьютера, способны распознавать и отображать файлы этих форматов. Файлы формата GIF (Graphic Interchange Format) имеют расширение .GIF. Изобра­жения в этом формате содержат 256 цветов, заданных индексной палитрой. Файл упакован и может занимать значительно меньше места, чем неупакованный растро­вый рисунок (например, в формате .BMP). Спецификация формата GIF89a позволяет создавать файлы .GIF, обладающие специ­альными возможностями. Один из цветов изображения может быть объявлен прозрачным. Это означает, что s соответствующих местах сквозь него будет проглядывать фон Web-стра­ницы, что де­лает рисунок более естественным. Чересстрочные изображения при их приеме из Интернета прорисовываются постепенно вначале грубо, а затем все более и более четко. Это скрадывает время, необходимое на их загрузку из Интернета, особенно при приеме инфор­мации по медленным линиям. GIF-анимация превращает обычный рисунок в небольшой видеоролик. В стан­дартном файле с расширением .GIF хранится набор кадров, а также сценарий их отображения. Файлы формата JPEG (Joint Photographic Expert Group – по названию группы исследо­вателей, предложившей этот формат) могут иметь расшире­ние JPEG или JPG. Формат предназначен для хранения фотографических изображе­ний, использующих 24-разрядный цвет. При конвертировании в формат JPEG происходит потеря части информации, приводящая к некоторому ухудшению качества изображения, обычно незаметному на глаз. При выборе формата изображения в первую очередь принимают во внимание объем получающегося файла и во вторую – качество изображения. При загрузке Web-документа львиную долю времени занимает именно загрузка иллюстраций, так что приветствуется любая экономия. При выборе формата рекомендуется создать два файла: в формате GIF и в формате JPEG с минимально приемлемым качеством, после чего выбрать вариант, имеющий меньший объем. Для подготовки изображений можно использовать любой графический редактор, например стандартное приложение Paint (в Windows), которое позволяет сохра­нять файлы в этих форматах. Однако Adobe Photoshop – стандарт де-факто среди программ обработки изображений: ее использует большинство профессиональных дизайнеров, к тому же она существует для всех распространенных платформ – Windows, Unix, Macintosh. Следует отметить, что Macromedia Flash практически является стандартом для использования в Web векторных изображений, обладает собственной средой разработки и позволяет создавать отличную векторную анимацию. Ulead GIF Animator – программа, которая позволит вам создавать GIF-анимацию, обладает мощными средствами анимации и в принципе может заменять на начальном этапе всю работу с анимацией. В современном Internet существуют большое число сайтов, использующих Flashтехнологию. Flash-страницы выглядят очень красочно, но прилично «весят», а следовательно долго загружаются. Использование Flash-анимации целесообразно в презентационных домашних страницах, а также для создания навигационных панелей. Тег Рисунки хранятся на Web-узлах в отдельных файлах, но отображаются как элементы Web-страниц. Для вставки рисунка непарный тег , который должен содержать обязательный атрибут SRC=, задающий адрес URL файла с изображением в относительной или абсолютной форме. В таблице 4 приведены другие атрибуты этого тега. Таблица 4. Атрибуты тега IMG. Атрибут Назначение ALT Задает альтернативный текст, отображаемый вместо картинки, если она по каким-либо причинам не может выводиться. Этот же текст выскакивает в всплывающей подсказке. LOWSCR Источник изображения низкого качества или размера, для быстрой предварительной загрузки. ALIGN Задает выравнивание относительно текущей строки: top выравнивает верхний край изображения по верхнему краю строки; middle выравнивает центр изображения по базовой лини строки; bottom установка по умолчанию, выравнивает нижний край изображения по базовой линии строки; left выравнивает изображение по левому полю right выравнивает изображение по правому полю. WIDTH и HEIGHT Задают горизонтальный и вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое место, что ускоряет отображение загружаемой страницы. BORDER Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение ссылка, то толщина рамки будет равна 2. VSPACE HSPACE Используется для указания ширины пространства сверху и снизу (справа и слева) от изображения. По умолчанию равно 0. USEMAP ISMAP Используются для создания карты ссылок, описание которых будет дано ниже. При отображении рисунка браузер по умолчанию использует его реальные размеры. Если рисунок необходимо отмасштабировать, применяют атрибуты WIDTH и HEGHT, задающие ширину и высоту рисунка (в пикселях), либо в процентах от ширины экрана. При указании высоты и ширины изображения (а также в процентах), не соответствующих его реальным размерам, оно сжимается (расширяется) до заданных размеров. Еще один способ применения изображений на Web-страницах состоит в использо­вании их в качестве фонового рисунка. При отображении документа, содержащего фоновый рисунок, на компьютере рабочая область окна заполняется этим рисунком последовательно (как паркетом), считая от верхнего левого угла документа или окна. Фоновый рисунок задается с помощью атрибута BACKGROUND в теге . Значением этого атрибута должен быть абсолютный или относи­тельный адрес URL для файла с изображением. Активные изображения или карты навигации С помощью элемента IMG можно создавать «изображения-карты». Изображение-карта (image map) представляет собой графическое изображение, в котором определены «горячие точки», используемые в качестве гиперссылок. Изображения-карты позволяют по-новому компоновать интерактивные web-страницы. Например, можно создать изображение, представляющее собой блок из кнопок, каждая из которых предназначена для перехода по ссылке. Еще одним примером использования является их применение для создания карты сайта4. Для того чтобы создать карту в языке HTML используется парный тег