Немцова Т.И., Назарова Ю.В. Компьютерная графика и web-дизайн

Подождите немного. Документ загружается.

4.2.

Организация

сайта

241

Для

UNIX

это

два

разных

файла,

которые

могут оба

одновре

менно

существовать

одной

папке.

По

вышеуказанной

причине

имена

файлов

ссылки

на

них

тексте

страничек

должны

сов

падать

вплоть

до

регистра.

Это

основная

ошибка

начинающих

wеЬ-мастеров,

резуль

тате

которой

хорошо

работающий

на

локальном

компьютере

сайт

перестает

функционировать,

будучи

опубликованным

Ин

тернете.

Проявляется

это,

первую

очередь,

неработающих

ссылках

исчезновении

картинок

(а

картинка,

точки

зрения

HTML,

это

та

же

ссылка).

Иногда

такая

проблема

возникает

при

ошибочном

использовании

именах

файлов

русских

букв

вме

сто

английских,

похожих

по

начертанию

(например:

с, а,

о).

этом

случае

самый

простой

способ

исправить

ошибку

это

переименовать

файл,

заново

набрав

его

имя

точно

так

же

за

ново

напечатать

имя

файла

исходнике

странички.

Вторая

большая

проблема

именах

файлов

это

русские

буквы.

Если

файл

называется

<<Галерея.htm>>

он

сохранен

ко

дировке

Windows 1251,

то

при

обращении

страничке

браузе

ром

кодировке

koi-8r

ссылка

на

такой

файл

тексте

странич

ки

автоматически

будет

перекодирована

<<3БMETEC.htm>>

(

<<галерея.htm>>

кодировке

koi-8r).

Файл

таким

именем

на

сайте

отсутствует,

и,

следовательно,

найден

не

будет-

посети

тель

получит

страничку

сообщением

о 404-й

ошибке

(файл

не

найден).

Для

того

чтобы

именами

файлов

не

возникало

проблем,

они

должны

удовлетворять

следующим

требованиям:

•

именах

файлов

можно

использовать

только

латинские

буквы

[a-z],

цифры

[0-9],

знак

подчеркивания

<<_>>

де

фис

«->>),

также

точку

«·>>

как

разделитель

собственно

имени

файла

его

расширения;

•

именах

файлов

должны

использоваться

только

символы

нижнего

регистра;

•

имя

файла

должно

начинаться

буквы;

•

во

избежание

проблем

длина

имени

файла

не

должна

пре

вышать

символ

(ограничение

на

длину

имени

н'екото

рых операционных

системах,

первую

очередь

MacOS).

Все

вышесказанное

также

относится

названиям

катало

гов.

ПостарайтесЪ

без

особой

надобности

не

использовать

име

нах

каталогов

расширений.

\6-347S

242

Глава

Web-дll3tlйн

ПРАКТИЧЕСКАЯ

ЧАСТЬ.

Стилевое

оформление

wеЬ-стрitниц.

CSS

ОСНОВНЫЕ

ПРИЕМЫ

РА&ОТЫ

Каскадные

таблицы

стилей

Стиль

это

набор

правил

оформления

элемента

wеЬ-стра

ницы.

Селектор

элемент

стиля,

селекторе

указаны

параметры

форматирования

(цвет

элемента,

фоновый

цвет,

гарнитура

шриф

та,

размер

символов,

отступы,

стили

границ

др).

Типы

селекторов:

селекторы

тегов,

классы

идентификаторы.

Синтаксис

стиля

селектор

{параметрl:

значение;

параметр2:

значение!,

значение2;

При

написании

стиля

можно

использовать

любой

регистр

клавиатуры,

пробелы

необязательны,

значение

можно

помещать

двойные

кавычки,

значок

обозначает

начало

комментария.

Расположение

стиля.

отдельном

файле,

если

одинаковым

стилем

оформлены

разные

страницы.

Стили

записываются

текстовый

файл

рас

ширением

CSS

(например,

mystyle.css):

Пример:

{

color

gold;

background-color:

~990000;

коде

страницы,

на

которой

используется

стиль

из

этого

файла,

делают

ссылку:

Пример:

<head>

<link

rel="stylesheet"

type="text/css"

href="mystyle.css">

</head>

4.2.

Организация

сайта

243

Стиль

применяется,

когда

используют

тег,

оформленный

данным

стилем:

body

р>текст

</body>

разделе

head

теге

style,

если

стиль

на странице

исполь

зуется

несколько

раз

или

разных

тегах.

Пример:

head>

style

type="text/css"

{

col

ld;

background-col

#990000;

}

</style

</head>

любом

теге

атрибуге

style,

если

стиль

используется

редко.

Пример:

<р

style="c

lor:

gold;

background-color:

#990000;">

текст

</р>

Селекторы

тегов.

Любой

тег

HTML

может

быть

селектором

Синтаксис

Тег

{

Параметр:

Значение;

}

Пример:

а)

style>

body

{

text-align:

justify;

color:

Ьlack;

font-family:

Arial;

}

</style>

б)

head><style>

16•

{

font-family:

Arial,

Helvetic

a ,

Verdana,

sans-serif

;

font-size:

150%;

font-weight:

light

/style

></

head>

<b o

dy>

Нl>Заголов

к</Нl

Обычный

текст

/body>

244

Глава

WеЬ-дизайн

Классы.

Классы

используют,

когда

нужно

применить

стиль

разным

тегам

wеЬ-страницы:

ячейкам

таблицы,

ссылкам,

па

раграфам

др.

Синтаксис

класса:

Тег.Имя

класса

{

Параметр:

Значение;

}

тег

добавляется

атрибут

clasS=

"Имя

класса"

Пример:

P.cite

{

color:

navy;

font-size:

80%

margin:

20рх

}

лараграф

классом

cite

</style></head>

<body>

<р>

текст

</р>

<р

class=cite>тeкcт</p>

</body>

Если

для

класса

не

указывать

конкретный

тег,

тогда класс

можно

применять

любому

тегу.

Синтаксис

класса:

.Имя

класса

{

Параметр: Значение;

}

Пример:

.mycolor

{

color:

navy;

color-background:

yellow;

}

</style></head>

<h2

class=mycolor>тeкcт</h2>

<taЬle><tr>

<td

class=mycolor>

текст

</td>

<td>тeкcт</td>

</tr></taЬle>

Тег

span

используют

для

создания

выделенного

текста,

бук

виц,

цитат

др.

Пример:

.capital

{

font-size:

150%;

color:

red;

}

</style></head>

4.2.

Организация

сайта

<body>

<span

class=capital>Б</span>yквицa

</body>

245

Псевдоклассы.

Леевдокласе

используется

только

для

оформ

ления

ссылок.

Виды

псевдоклассов:

непосещенная

ссылка

(link),

состояние

ссылки под

курсором

мыши

(hover),

состояние

ссылки

момент

щелчка

(active),

посещенная

ссылка

(visited).

Синтак-

сие

псевдокласса:

А:псевдокласс

(

Параметр:

Значение;

Пример:

<head><style

type="text/css">

a:link

{

color:

Jt003366;

}

a:visited

{

color:

Jt660066;

}

a:hover

{

color:

Jt800000;

}

a:active

{

color:

JtFFOOOO; }

</style></head>

<body>

<а

href=Jt>Ccылкa

1</а>

<а

href=Jt>Ccылкa

3</а>

</body>

Пример:

<head>

<style

<а

href=Jt

Ccылкa

2</а>

a.linkl

{

font-size:

12рх;

color:

green

a.linkl:hover

{

color:

red

}

a.link2

{font-size:

14рх;

color:

Ьlue

}

a.link2:hover

{

color:

red

}

</style>

</head>

<body

link=JtOOOOff>

<а

href=linkl.html

cылкa

1</а

<а

href=link2.html

class=linkl>Ccылкa

2</а>

<а

href=link3.html

class=link2>Ccьmкa

3</а>

</body>

Пример

использования

наиболее

востребованного

леевдо

класса

(hover):

<head><style

type="te

/css

{color:

#003366;}

a:hover

{color:

#800000;}

</style></head>

246

Глава

WеЬ-дизайн

Пример

использования

различных

классов

для

разных

видов

ссылок:

<head>

<style>

a.linkl

{font-size:

12рх;

color:

green;}

a.linkl:hover

{

color:

red;}

a.link2

{font-size:

14рх;

color:

Ьlue;}

a.link2:hover

{color:

red;}

</style>

</head>

<body>

<а

href=linkl.html>Ccьmкa

1</а>

<а

href=link2.html

class=linkl>Ccьmкa

2</а>

<а

href=linkЗ.html

class=link2>Ccьmкa

3</а>

</body>

Шрифт.

Семейства

шрифтов

font-family

Таблица

4.1.

Примеры

шрифтов,

входящих

различные

семейства

шрифтов

Семейство

шрифтов

Примеры

шрифтов

Описание

семейства

serif Times New Roman,

Шрифт

засечками

Book Antiqua

sans-serif Helvetica, Arial, Yerdana

Шрифт

без

засечек

cursive Zapf-Chancery

Курсивный

шрифт

fantasy

Western, Comic

Декоративный

шрифт

monospace

Courier New

Моноширинный

шрифт

Варианты

шрифтов

разделяются

запятыми,

название

шриф

та,

состоящее

из

нескольких

слов,

заключается

кавычки:

{font-family:

'Western,

Times

New

Roman',

serif;}

Толщина

шрифта

font-weight: lighter, bold, bo/der.

Пример:

p.bold

{font-weight:

bold;}

(относительно

предыдущего

текста).

Размер

шрифта

font-size:

относительный

(проценты

- %),

или

абсолютный

(пикселы

рх,

пункты

- pt,

сантиметры

- cm

миллиметры

- mm).

4.2.

Организация

сайта

Пример:

{font-size:

200%;}

(относительно

основного

текста)

{font-size:

SOpx;}

hЗ

{font-size:

12pt;}

247

Оформление

текста

text-decoration.

Значения:

подчеркива

ние

(under/ine),

надчеркивание

(over/ine),

зачеркивание

(line-

through),

нет

подчеркивания

(поnе).

Примеры:

{text-decoration:

underline;}

{text-decoration:

overline;}

.wrong

{text-decoration:

line-through;}

{text-decoration:

none;}

Цвет.

Цвет

элемента

color -

цвет

элемента

модели

или

по

стандартным

названиям

цветов.

Примеры:

{color:

yellow;}

{color:

yellow;}

.active

{color:

#FFFFOO;}

Цвет

фона

background-color -

цвет

фона

элемента

(фоно

вый

цвет).

Пример:

hl.grayback

{background-color:

#СССССС;}

Отступы.

Выравнивание

text-align -

выравнивание

абзаца

относи

тельно

страницы

или

ячейки

таблицы.

Значения:

по левому

краю

(left),

по

центру

(center),

по

правому

краю

(right),

по

шири

не

(justify).

Пример:

{text-align:

justify;}

Отступ

первой строки

text-indent -

отступ

первой строки

абзаца

(красная

строка).

Значение

задается

пикселах

(рх)

или

пунктах

(pt).

248

Глава

WеЬ-дизайн

Пример:

{text-indent:

SOpt;}

Межстрочные

интервалы

line-heighn -

междустрочный

ин

тервал

абзаца.

Значение

задается

пикселах

(рх),

пунктах

(pt)

или

процентах

от

размера

шрифта(%).

Пример:

{line-height:

50%;}

межстрочные

интервалы.

Отступы

вокруг

элемента

margin-

отступы

вокрут

элемен

та.

Значение

задается

пикселах

(рх)

или

пунтках

(pt).

Различ

ные

типы

этого

параметра:

одинаковый

отступ

со

всех

сторон

(margin),

отступ

слева

(margin-left),

отсуn

справа

(margin-right),

отступ сверху

(margin-top),

отступ

снизу

(margin-bottom).

Примеры:

{margin:

ЗОрх;}

img

{margin-left:

20рх;}

Рамка.

Толщина

рамки

border-width -

толщина

границы.

Различ

ные

типы

этого

параметра:

толщина

левой

границы

(border-

/eft-width),

толщина

верхней

границы

(border-top-width),

толщина

правой

границы

(border-right-width),

толщина

нижней

границы

(border-bottom-width).

Значение

задается

nикселах

(рх).

Пример:

.lineTop

{border-top-width:

Зрх;}

Цвет

рамки

border-color-

цвет

рамки

(границы).

Пример:

.lineRed

{border-color:

#FFOOOO;}

Стиль

рамки

border-style -

стиль

границы.

Значения:

гра

ницы

нет

(попе),

сплошная

линия

(solid),

пунктирная

линия

(dotted),

штриховая

линия

(dashed),

двойная

линия

(dоиЬ/е),

объ

емная

канавка

(groove),

объемный

гребень

(ridge),

объемная

кнопка

внутрь

(iпset),

объемная

кнопка наружу

(outset).

Пример:

.lineSimple

{border-style:

outset;}

4.3.

Графика

на

wеЬ-страницах

249

Обобщающий

стиль

рамки

Ьorder

обобщающий

стиль

границы,

объединяющий

три

параметра:

толщину,

стиль

цвет

границы.

Порядок

записи

параметров

неважен:

border:

ширина

стиль

цвет;

border-tor:

ширина

стиль

цвет;

border-right:

ширина

стиль

цвет;

border-bottom:

ширина

стиль

цвет;

border-left:

ширина

стиль

цвет;

Пример:

td.ЬlueBorder

{border:

4рх

dotted

#003399}

Обобщающий

стиль

можно

задавать

для

определенной

сто

роны

границы:

слева

(border-Jeft),

сверху

(border-top),

справа

(border-right),

снизу

(border-bottom).

Пример:

td.red2line

{border-color:

#FFOOOO;

border-left:

2рх

douЬle;

4.3.

ЗАНЯТИЕ

Графика

на

wеЬ-страннцах

Цель

занятия:

познакомиться

принцилами

создания

главной

страницы;

узнать

правила

тестирования

оптимиза

ции

wеЬ-страниц;

научиться

создавать

GIF-баннеры

про

грамме

Adobe lmageReady.

ТЕОРЕТИЧЕСКАЯ

ЧАСТЬ.

Прннцнпы

создання

главной

страннцы.

Тестнраванне

wеЬ-страннц.

Оптнмнзацня

wеЬ-страннц

Рекомендации

по

созданию

главной

страницы

Название

логотип

компании

должны

выделяться,

но

так,

чтобы

не

притягивать

себе

все

внимание

посетителя

сайта.

То

есть

посетитель

должен

первого

взгляда

понимать,

на

какой

250

Глава

Web-дuзaiin

сайт

он

попал,

но

последующая

работа

сайтом

не

должна

ус

ложняться

излишне

навязчивыми

логотипом

названием

ком

пании.

Очень

полезно

на

главную

страницу

сайта

помещать

реклам

ный

лозунг,

который

бы

четко

характеризовал

сферу

деятельно

сти

компании.

Важно,

чтобы

лозунг

был

простым,

коротким

точным.

Если

название

компании

род

ее

деятельности

выра

жен

достаточно

четко

и определенно,

от

лозунга

можно

отка

заться.

Чрезвычайно

важно

прямо

на

главной

странице

сайта

под

черкнуть

основные

отличия

вашей

компании

от

конкурентов.

PuЬiic

Relations

этот

прием

носит

название

<<отстройка

от

конкурентов».

Очень

хорошо

для

этого

подходит

краткий

ло

зунг,

не

носящий

явно

рекламного

характера.

Кроме

того,

если

эти

отличия

требуют

более

пространных

пояснений,

их

надо

поместить

выделенный

блок,

чтобы

посетитель

не

смог

его

не

заметить.

На

главной

странице

сайта

нужно

четко

выделить

основные

моменты,

которые

компании

наиболее

важно

донести

до

своего

потенциального

клиента.

Как

правило,

такая

информация

рас

полагается

центральной

части

главной

страницы

сайта.

Подбирая

названия

разделов/подразделов

других

пунктов

меню,

необходимо

ориентироваться

на

язык

пользователя,

не

на

профессиональный

сленг,

принятый

компании.

Часто

бывает,

что

названия,

которыми

свободно

оперируют

специалисты

ком

пании,

совершенно

непонятны

пользователям.

Надо

стараться

избегать

повторений,

которые

обычно

делают

ся

для

привлечения

большего

внимания

тем

или

иным

элемен

там

wеЬ-страницы.

Такие

повторения

не только

захламляют

страницу,

но

не

выполняют

своего

предназначения

при

влечь

внимание

пользователя.

Мало

того,

повторяющиеся

эле

менты

запутывают

раздражают

посетителя.

Особенно

это

каса

ется

ссьmок

разными

названиями,

которые

ведут

на

одну

ту

же

страницу.

Вы

наверняка

попадали

такую

ситуацию,

когда

щелкаешь

по

разным

ссылкам,

переходишь

на

одну

ту

же

страницу.

При

этом

не

сразу

поймешь,

что

страница

одна

та

же.

Надо

стараться

избегать

употребления

непонятных

пользова

телю

«умНЫХ>>

фраз

рекламного

жаргона.

Важнейшим

принци

лом

является

информативность

недвусмысленность

построения