ОСНОВЫ WEB-ДИЗАЙНА Лекция 10 LOGO
9. 5. Гиперссылки Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому. Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL-адрес в интернете.
9. 5. Гиперссылки <A> </a> - один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон: Произвольный текст <A href="адрес ссылки">Текст для щелчка </a> Например, так выглядит гиперссылка в тексте: Если вы хотите вернуться к материалам урока «Гиперссылки» , то вам <A href="links. htm">сюда. </a>
9. 5. Гиперссылки Шаблон создания гиперссылки, представленной рисунком: <A href="Адрес ссылки"> <IMG src="Ссылка на рисунок"> </a> Например: Чтобы вернуться к уроку "Гиперссылки" нажмите на кнопку <A href="links. htm"><IMG src="knopka. gif" width="112" height="50"></a>
9. 5. Гиперссылки Внутри тега <BODY> используются атрибуты: link - задает цвет ссылок на всей Web-странице, vlink - задает цвет посещенных ссылок, alink - задает цвет активных ссылок (цвет появляется при нажатии мыши). Пример: <BODY link="0000 FF" vlink="CC 0066" alink="FF 0000">
9. 5. Гиперссылки По умолчанию используется ссылка на файлы текущей папки (той, где расположен файл Web-страницы). В этом случае просто указывается имя файла, например: page 2. htm, photo 35. gif и т. д. Часто используются относительные ссылки на папки: что позволяет легко менять местоположение комплекса страниц на диске. Если в текущей папке есть другая, в которой размещены необходимые файлы то гиперссылка строиться по такому шаблону: href=". /Папка/файл. тип" На структуру вложенных папок указывает точка перед наклонной чертой.
9. 5. Гиперссылки Если необходимо указать папку, которая находится на том же уровне вложения что и текущая, добавляют еще одну точку: href=". . /Папка/файл. тип" Если ссылка указывает на какой-либо Web-ресурс, то она выглядит следующим образом, например: href="http: //www. netscape. com"
9. 5. Гиперссылки Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например: <A href="mailto: goncharov@online. ru>Алексей Гончаров</a>
9. 6. Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т. д. При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элементы для описания каждой ячейки в с строке TD.
9. 6. Таблицы <TABLE> </table> - внешний элемент талицы. <TR> </tr>- элемент, задающий строку таблицы. Конечный тег можно не использовать, т. к. строка заканчивается там, где начинается следующая строка. <TD> </td> - элемент, задающий ячеку таблицы. Конечный тег также можно не использовать.
9. 6. Описание таблицы, состоящей из двух строк и двух столбцов: <TABLE> Начало таблицы <TR> Начало первой строки <TD> Первая ячейка первой строки</td> Первая ячейка первой строки <TD> Вторая ячейка первой строки</td> Вторая ячейка первой строки </tr> Конец первой строки <TR> Начало второй строки <TD>Первая ячейка второй строки </td> Первая ячейка второй строки <TD>Вторая ячейка второй строки</td> Вторая ячейка второй строки </tr> Конец второй строки </table> Конец таблицы
9. 6. Таблица, состоящей из двух строк и двух столбцов: <TABLE> </table> - внешний элемент талицы. <TR> </tr>- элемент, задающий строку таблицы. Конечный тег можно не использовать, т. к. строка заканчивается там, где начинается следующая строка. <TD> </td> - элемент, задающий ячеку таблицы. Конечный тег также можно не использовать.
9. 6. Задание ширины таблицы: Ширину таблицы можно задавать точно в пикселях или в процентном отношении к ширине страницы в окне браузера. Например, если нужно задать таблицу определенного размера, то необходимо указать: <TABLE width="500"> <TR> <TD> Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца. </td> </tr> </table>
9. 6. Задание ширины таблицы: Если необходимо получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800 х600, 1024 х 768, 1280 х 1024) у того, кто будет просматривать Web-страницу, то задаётся ширина страницы как 100%. <TABLE width="100%"> <TR> <TD> Ширина этой таблицы 100%. </td> <TD> и она состоит из одной строки и двух столбцов </td> </tr> </table>
9. 6. Задание ширины таблицы:
9. 6. Задание цвета фона таблицы: Для всей таблицы цвет фона задаётся: bgcolor="Цвет" или bgcolor="#RRGGBB", например: <TABLE width="100%" bgcolor="#00 CC 99"> <TR> <TD> Ширина этой таблицы 50%. </td> </tr> <TR> <TD> и она состоит из двух строк и одного стобца </td> </tr> </table>
9. 6. Задание цвета фона таблицы:
9. 6. Задание цвета отдельной ячейки таблицы: < table width="600" border="1" cellspacing="0" cellpadding="5" align="center"> <tr> <td bgcolor="#00 FFFF"></td> <td bgcolor="#CCFF 00"></td> <td bgcolor="#FF 6633"></td> </tr> <td bgcolor="#0000 FF"></td> <td bgcolor="#33 FF 66"></td> <td bgcolor="#FF 00 FF"></td> </tr> <td bgcolor="#CCCCCC"></td> <td bgcolor="#9933 FF"></td> <td bgcolor="#FFFFCC"></td> </tr> </table>
9. 6. Задание цвета отдельной ячейки таблицы:
9. 6. Задание ширины боковой грани таблицы в пикселях. Шириной боковой грани таблицы управляет атрибут border. <TABLE width="100%" bgcolor="#00 CC 99" border="3" > <TR> <TD> </td> <TD> Ширина этой таблицы 300 пикселов</td> <TD> </td> </tr> <TR> <TD> и она состоит из двух строк и трех столбцов</td> <TD></td> </tr> </table>
9. 6. Задание ширины боковой грани таблицы в пикселях.
9. 6. Задание грани таблицы невидимой: Для этого ширину бордюра таблицы нужно задать равной 0: <TABLE width="100%" bgcolor="#00 CC 99" border="0" > <TR> <TD> </td> <TD> Ширина этой таблицы 300 пикселей</td> <TD> </td> </tr> <TR> <TD> и она состоит из двух строк и трех столбцов</td> <TD></td> </tr> </table>
9. 6. Задание грани таблицы невидимой:
9. 6. Выравнивание данных в ячейках таблиц Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения: left - выравнивание влево; right - выравнивание вправо; center - центрирование. Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие: top - выравнивание по верхнему краю ячейки center - выравнивание по центру baseline - выравнивание по первой строке.
9. 6. Выравнивание данных в ячейках таблиц <table width="100%" border="1" cellspacing="0" cellpadding="5" align="center"> <tr> <td width="257">Выравнивание по горизонтали</td> <td width="233" align="center"> По центру </td> <td width="217" align="left"> По левому краю </td> <td width="246" align="right"> По правому краю </td></tr> <td width="257" height="112">Выравнивание по вертикали</td> <td width="233" height="112" valign="top">По верхнему краю</td> <td width="217" height="112" valign="middle">По центру</td> <td width="246" height="112" valign="baseline">По нижнему краю</td> </tr> </table>
9. 6. Выравнивание данных в ячейках таблиц
9. 7. Разметка Web-страницы с использованием таблицы Разметку Web-страницы удобно производить с использованием таблицы. Возможны различные варианты разметки. Разметка страницы производится с использованием таблицы шириной на весь экран, независимо от того, каково разрешение экрана (width=100%). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web-сайта.
9. 7. Разметка Web-страницы с использованием таблицы
9. 7. Разметка Web-страницы с использованием таблицы Разметка страницы производится с использованием таблицы шириной 760 пикселей, выровненной по центру экрана. В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню Web-сайта, а третья строка отведена непосредственно под содержание сайта.
9. 7. Разметка Web-страницы с использованием таблицы Если необходимо разместить внутри текста странички какие -либо иллюстрации, фотографии и пр. , то в этом случае также используются таблицы. В приведенном примере во вторую ячейку второй строки вставлена таблица, состоящая из двух строк и трех столбцов. В первую и в третью ячейки первой строки вставлены рисунки, а во вторую ячейку первой строки - название страницы. Во все ячейки второй строки введен текст странички.
9. 7. Разметка Web-страницы с использованием таблицы
LOGO
