Web-дизайн Лекции 2009

Web-дизайн Лекции 2009 - 2014 1

Лекция 1 Основные правила web-дизайна Правило 1. Это удобство конечного пользователя. В современном Интернете принято молчаливое соглашение о том, что - профессиональный сайт должен корректно отображаться при экранном разрешении 640 x 480 точек с цветовой палитрой в 256 цветов. Правило 2. Web-страница должна идентично отображаться в Microsoft Internet. Explorer и других браузерах. Правило 3. Все страницы web-сайта, а также все интегрированные в них графические и интерактивные элементы должны быть минимальными по объему. Правило 4. Созданная web-страница должна обязательно включать навигационные элементы, охватывающие все разделы сайта, причем эти элементы должны всегда быть на виду. Правило 5. Необходимо выдержать весь проект в одном дизайнерском стиле, оформляйте различные его разделы таким образом, чтобы общее художественное решение было схожим для всего сайта. Правило 6. Текст должен без труда читаться, при этом читатель не должен напрягать зрение, его глаза не должны уставать. Перечень цветовых сочетаний рисованного объекта или текста с фоном в 2 порядке ухудшения зрительного восприятия:

• синее на белом; • черное на желтом; • зеленое на белом; • черное на белом; • зеленое на красном; • красное на желтом; • красное на белом; • оранжевое на черном; • черное на пурпурном; • оранжевое на белом; • красное на зеленом. 3

Правило 7. В любом случае для текста рекомендуется выбирать традиционный, привычный глазу черный цвет, в качестве фона лучше всего использовать тусклую, едва различимую заливку произвольного оттенка. Однако наиболее «правильным» решением всегда был и остается «классический» вариант: черным по белому. 4

Дерево документа HTML <TITLE> Моя главная страница </TITLE> тэг Закрывающий тэг 5

Дерево документа HTML <HTML> HEAD T I T L E BODI UL P ОL H 1…H 6 </HTML> тэг Закрывающий тэг 6

Пример документа-источника, кодированного в HTML <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows 1251"> <TITLE> Моя главная страница </TITLE> </HEAD> <BODY> <H 1> Моя главная страница </H 1> <P> Добро пожаловать в мою домашнюю страницу! </P> <P> Великие композиторы: </P> <UL> <LI> Чайковский <LI> Брамс <LI> Шопен </UL> </BODY> </HTML> 7

Основные тэги <HTML> -документ HTML <HEAD> -голова документа <TITLE> -заголовок сайта <BODY> - тело документа <H 1>, <H 2>, <H 3>, <H 4>, <H 5>, <H 6> - заголовок <P> - абзац <UL> - маркированный список <LI> - список <ОL> - нумерованный список <LI> - список <BR> - переход на новую строку 8

Форматирование текста Тэг <Р> атрибут ALIGN= свойства right, center, left <P ALIGN="CENTER">ИBAH-ЦAPEBИЧ И СЕРЫЙ ЗАЯЦ <BR> сказка</Р> <P ALIGN="RIGHT">Hy, погоди!. . </P> <BR> 9

Форматирование заголовка тег <DIV> и </DIV> - оформление абзаца <H 1><DIV ALING="сеntег">Главная страница сайта</DIV></Н 1> Горизонтальная линейка <HR WIDTH="75%"> - от 1% до 100% 10

Управление шрифтом <FONT> с атрибутом SIZE= <FONT SIZE="+1"> и <FONT SIZE="-1"> - указывается относительный размер шрифта <FONT SIZE="1"> - абсолютный размер шрифта или <BASEFONT SIZE="6"> <I> и </I> курсив <CITY></CITY> <Н 2> <Р АLIGN+"center">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ <ВК> <I>сказка</I> </Р> </Н 2> <В>Сергей Сергеев</В> полужирный шрифт <U> и </U> - подчеркивание <STRIKE> Старая цена: <STRIKE>168 рублей </STRIKE> Новая цена: <FONT SIZE="+1">102 рубля</FONТ> 11

Цветовое оформление атрибут ТЕХТ= и атрибут BGCOLOR= Атрибут ТЕХТ= определяет цвет текста на страничке, а атрибут BGCOLOR= — цвет фона. Названия цветов можно вводить по названиям: "black" (черный), "white" (белый), "yellow" (желтый), "green" (зеленый), "fuchsia" (сиреневый) и т. д. 12

Шестнадцатеричный номер цвета должен состоять из шести цифр. Первые две означают интенсивность красной составляющей, вторые две — зеленой и последние две — синей. Таким образом, красный цвет обозначается как FF 0000, зеленый — 00 FF 00 синий — 0000 FF. черный – 000000 белый — FFFFFF. Можно поэкспериментировать с интенсивностью каждой составляющей отдельно. Если FF 0000 — это красный цвет, 880000 — уже темно-красный, 440000 — красно-коричневый; 220000 похож на коричневый, а 110000 — черный с красноватым оттенком. Точно так же 00 FF 00 — это яркий зеленый, 00 АА 00 — приятный лиственно-зеленый, 007700 — темно-зеленый, 003300 — очень темный зеленый и 001100 — черный с зеленоватым оттенком. 13

Перед шестнадцатеричным номером цвета необходимо поставить знак #. <BODY BGCOLOR="#BABAAO" TEXT="#1 D 1 D 18"> 14

Гиперссылки бывают трех типов: • ссылки в другие места той же страницы; • ссылки на другие страницы этого же сайта или сервера; • ссылки на страницы, расположенные на любом другом сервере в Интернете. Локальные гиперссылки <А> <A NAME="skazka">ИВАН- ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ </А> NAME= — имя якоря <A HREF="#skazka">Сказка Иван-царевич и серый заяц</А> 15

Цвет гиперссылки атрибута VLINK= тега <BODY> цвет гиперссылки, которыми читатель еще не пользовался атрибут ALINK=“посещенные” гиперссылки – другой цвет. 16

Гиперссылки в пределах сайта <A HREF="skazka. html">CKА 3 KА; ИBАHцаревич и серый зaяц; </A>; <A HREF="rasskaz. html"> Paccкaз; Moлоток; </A> 17

Внешние гиперссылки <А HREF="http: //www. altavista. com"> "Altavista" </А> 18

Списки • Маркированные <UL> <LI> </UL> • Нумерованные списки <OL> <LI> </OL> Каждый элемент списка должен быть при этом обозначен тегом <LI> , который можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать: • <LI>Вкручивание электрических лампочек или • <LI>Вкручивание электрических лампочек</LI> 19

Вложенные списки <UL> </UL> 20

Списки определений Алфавитные списки определений: <A HREF="#Bukva. V">B</A> - ссылка <A NAME="Bukva. V">B</A> - якорь 21

Создание таблиц <TABLE> <TR> - строка таблицы <TD> - ячейки таблицы <TABLE BORDER="3"> <TR> <TD> Это уже таблица! </TD> </TR> </TABLE> 22

Основные атрибуты таблицы • WIDTH= ширина • BORDER= бордюр • CELLPADDING= отступ от края ячейки <TABLE WIDTH="50%" BORDER="3" CELLPADDING="20"> <TR> <TD> Это уже таблица! </TD> </TR> </TABLE> 23

Цветовое оформление таблицы • BORDERCOLOR= цвет бордюра • BORDERCOLORLIGHT= задают цвет светлой сторон рамки • BORDERCOLORDARK= задают цвет, соответственно, темной сторон рамки <TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" BORDERCOLORLIGHT="lime" BORDERCOLORDARK="green"> <TR> <TD> Это уже таблица! </TD> </TR> </TABLE> 24

Объединение ячеек • COLSPAN= для объединения соседних столбцов • ROWSPAN= для объединения соседних строк <TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF"> 25

<TR> <TD WIDTH="33%">Этo первая ячейка</ТD> <TD WIDTH="33%">Это вторая ячейка</ТD> <TD ROWSPAN="3">A это три ячейки третьего столбца объединились в одну большую ячейку</ТD> </TR> 26

<TR> <TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</ТD> </TR> 27

<TR> <TD>Это первая ячейка третьей строки </ТD> <TD>A это вторая ячейка третьей строки </ТD> </TR> </TABLE> 28

Вид таблицы 29

Элементы таблицы • <TBODY> - основное содержание таблицы обозначить тегом. • <THEAD> - заголовок таблицы • <TFOOT> - заключение 30

Графика на веб-странице Фоновое изображение атрибут BACKGROUND= <BODY BACKGROUND="Images/back 1. jpg"> Файл рисунка 31

Графические иллюстрации • тег <IMG> атрибуты WIDTH= HEIGHT= <IMG SRC="Images/clavi. gif"> 32

Размеры картинки атрибуты WIDTH = - ШИРИНА HEIGHT = - ВЫСОТА <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200"> 33

атрибут ALT= - просмотр графики <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова"> Выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство textalign со значением center. При этом тег <img> должен располагаться внутри абзаца (тег <p>). 34

атрибут BORDER= - рамка вокруг рисунка <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова" BORDER="0"> 35

атрибут ALIGN= выравнивание • ALIGN="left" — текст обтекает рисунок, который располагается слева; • ALIGN="right" — текст обтекает рисунок, который располагается справа; • ALIGN="top" — рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границей букв текста (можно также применять значение "texttop"); • ALIGN="middle" — рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центру рисунка (можно также при менять значение "absmiddle"); • ALIGN="bottom" — рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста 36

Изображение-карта Возможно установить несколько гиперссылок с одного рисунка, не “разрезая” его! Такое изображение называется картой графических ссылок (imagemap). 37

Схема выполнения: 1. Сначала рисунок внедряется на веб-страницу обычным образом, с помощью тега <IMG>: <IMG SRC="Images/computer. gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI 800"> 2. Затем необходимо установить в этом теге атрибут USEMAP=. Его значение должно содержать имя карты графических ссылок, с предварительным знаком #, Если карта еще не создана, как в нашем случае, то ей можно дать любое имя: <IMG SRC="Images/computer. gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap"> 38

3. Теперь нужно создать собственно карту ссылок. Вообще говоря, эта карта может располагаться где угодно, хоть в другом файле — тогда в атрибуте USEMAP= нужно будет указать, кроме имени карты, имя этого файла, например: “mapfile. html#mymap”). В нашем случае давайте рас положим ее в конце того же файла. 4. Карта графических ссылок начинается с тега < МАР> и завершается зак рывающим тегом </МАР>. В теге <МАР> следует установить (обязательно!) единственный возможный атрибут NAME=. Его значением должно быть имя карты, на которое мы ссылались в теге <МАР> (с помощью атрибута USEMAP=). В данном случае это должно быть имя "compmap": <МАР NAME="compmap"> 39

5. Между тегами <МАР> и </МАР> должна находиться основная часть карты. Она состоит из нескольких тегов <AREA> , каждый из которых определяет активную область рисунка. 6. “Активные области” могут быть либо прямоугольной формы, либо круглой, либо многоугольной. Это определяется установкой значения атрибута SHAPE= в теге <AREA> (он употребляется без закрывающего тега). Если значение этого атрибута — "rect", область будет прямоугольной, если "circle" — круглой, а если "poly" — многоугольной. 7. Определить координаты каждой из активных областей и записать их как значения атрибута COORDS=. 40

8. В теге <AREA> необходимо установить еще самое главное — атрибут HREF=, определяющий гиперссылку, то есть куда же должен попасть пользователь при щелчке мышью на этой “активной области”. 9. Определить также атрибут ALT=. 41

Система координат 120, 0 х 0, 100 120, 100 у 42

Оформление кнопок <BUTTON> • <BUTTON>ЭТO KHОПKА</BUTTON> - стандартная кнопка • < BUTTON > <img SRC="Images/bl. gif" BORDER="0" WIDTH="26" HEIGHT="23" ALT=""> </BUTTON> - кнопка-картинка 43

Оформление веб-страницы с использованием стилей Каскадные таблицы стилей (CSS) 1. Самый примитивный способ использования CSS — это ввести в код HTML атрибут STYLE= с соответствующим значением. Его можно добавить практически ко всем тегам (кроме <HEAD> и <HTML> ). 2. В таблице стилей кода HTML 3. Создание отдельного файла с расширением . CSS 44

1. Использование атрибута STYLE= • <Н 1 STYLE="text-align: center; ">Домашняя страница </Н 1> или <Н 1 ALIGN="center">Домашняя страница </Н 1> • <DIV STYLE="font-size: larger; "> 45

2. Определение стилей в специальной таблице <STYLE> и </STYLE> <STYLE> BODY { background-color: #ВАВААО; color: red); } </STYLE> Н 1, Н 2 { text-align: center; } 46

3. Внешние стилевые таблицы <LINK REL="Stylesheet" HREF="mainstyle. css" TYPE="text/css"> - подключение таблицы стилей 47

Web-дизайн Лекции 2009 — 2014 1 Лекция