34

1. Введение. Что такое веб-дизайн.

1. Понятие веб дизайна.

Веб-дизайн (от англ. web design) — в узком смысле это визуальное оформление веб-страниц. Он играет такую же роль для сайта, как полиграфический дизайн и вёрстка для бумажного издания. В широком смысле «веб-дизайном» называют веб-разработку, то есть создание сайта вообще, проектирование структуры, навигации и иногда движка сайта.

В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей. Также непосредственно с дизайном сайтов смежны маркетинг в интернете (интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация. Таким образом, визуальными средствами решаются самые разнообразные задачи, такие как, повышение продаж, укрепление доверия, создание определенного имиджа и другие.

 

2. Кто такой веб дизайнер. Его функции.

Веб-дизайнер — специалист, выполняющий отрисовку графического дизайна сайта. Чаще всего сотрудник дизайн-компании (веб-студия).

Веб-дизайнеры могут работать как в составе коллективов дизайн-студий, так и дистанционно — в последнем случае речь идёт о веб-дизайнерах-фрилансерах.

Часто веб-дизайнер занимается также html-кодированием (вёрсткой типовых веб-страниц в формате html). В крупных студиях, этим занимаеся специальный сотрудник - веб-кодер.

Но даже "чистый" веб-дизайнер должен знать основы html, что бы не создавать макет, которые не смогут быть в дальнейшем реализованы средствами html.

Веб-дизайнеры часто владеют простыми языками программирования для интернета и могут предложить дополнительные услуги по вёрстке и программированию сайта. Если дизайнер владеет полным пакетом работ по веб-разработке сайта (от дизайна и верстки до сложного программирования и управления), то его стоит отнести к категории веб-мастер.

«Веб-дизайнер» — сравнительно молодая профессия, и профессионального образования в области именно веб-дизайна в России пока толком не существует, а законодателями моды в этой сфере дизайна выступают, по сути, дизайнеры-первопроходцы. Как правило, веб-дизайнер — художник или дизайнер (полиграфии или рекламы) по образованию. Но в связи с увеличением спроса на Интернет, растет и спрос на дизайн сайтов, множится и количество веб-дизайнеров, и среди опытных и талантливых веб-дизайнеров можно встретить человека с совершенно не связанным с дизайном образованием.

2. Язык верстки html. Основные понятия.

2.1. Начало.

HTML (HyperText Markup Language) - язык гипертекстовой разметки. Это некий язык разметки(вёрстки) на основе которого создаётся большинство сайтов в интернете. Даже самые серьёзные и сложные web-сайты имеют свою основу, скелет именно на этом языке вёрстки, html. 

HTML позволяет верстать страницы, создавать сайты,  то есть на языке html может быть создан очень хороший сайт. Все существующие на текущий момент браузеры умеют и читают html страницы и выводят уже в привычном для нашего взгляда и в красивом виде. Чтобы увидеть HTML-код страницы  сайта, нажмите правой кнопкой мыши на пустом месте сайта и выберите "просмотр html-кода".

HTML это сокращение от "HyperText Mark-up Language/язык гипертекстовой разметки" - и на данном этапе этого знания вам вполне достаточно. Однако, чтобы всё было путём, давайте разъясним некоторые детали.

• Hyper противоположно linear/построчно. В добрые старые времена - когда кошки ловили мышей - компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить HTML.net.

• Text - всё понятно.

• Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.

• Language это язык - HTML. В нём используется много английских слов.

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

Разметка html - это расставление элементов страницы на сайте. 

Откроем блокнот.

<!--Пример HTML документа.--> <html> <head> <!--Следующая строчка - кодировка.--> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ваш заголовок</title> </head> <body> <!--Теперь указываем название шрифта (лучше два, можна и больше, через запятую), его размер и цвет.--> <font face="Verdana,Sans-serif" size="2" color="#000000"> <b>Название Вашего раздела</b><p> Здесь Ваш текст. <p> <!--Далее встраивается графический файл в документ. По центру.--> <center> <img border=0 src="Имя графического файла с расширением" Width="Его размер по горизонтали" Height="Его размер по вертикали" alt="Здесь Вы указываете выпадающую подсказку"> </center> </font> </body> </html>

Сохраните документ как htm файл (например, 001.htm) и запустите.

Большинство тегов имеют открывающийся элемент <> и закрывающийся </>. Между ними и находятся коды, которые распознает Обозреватель. HTML-документ всегда начинаться отрывающимся тегом <HTML> и заканчиваться закрывающим </HTML>. Дальше идет заголовок <HEAD></HEAD>. Между этими тегами всегда должна находиться информация о кодировки страницы, в этом примере <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">, и теги определяющие название страницы <TITLE></TITLE>.

Между тегами содержимого документа <BODY></BODY> можно располагать свою информацию, рисунки, видеофайлы, аудиофайлы...

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

2. Текст.

Большинство HTML документов имеют заголовок. Для его создания используют теги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера.

<H1>Заголовок</H1>

<H2>Заголовок</H2>

<H3>Заголовок</H3>

<H4>Заголовок</H4>

<H5>Заголовок</H5>

<H6>Заголовок</H6>

Для создания нового абзаца используется тег <P>, а для перехода на новую строчку без создания абзаца - тег <BR>. Эти теги закрывать не обязательно. Конечно, если Вы не используете в теге <P> элемент ALIGN, которым может задаватся выравнивание абзаца:

<P ALIGN=LEFT> По левому краю </P>

<P ALIGN=CENTER> По центру </P>

<P ALIGN=RIGHT> По правому краю </P>

<P ALIGN=JUSTIFY> Текст, находящийся между этими элементами выравнивается по ширине </P>

Для придания тексту определенного начертания - жирный, курсив, подчеркнутый и т.д., поместите его между соответствующими тегами:

<B> Жирный текст </B>

<I> Курсив </I>

<U> Подчеркнутый </U>

<STRIKE> Перечеркнутый </STRIKE>

<SUP> Верхний индекс </SUP>

<SUB> Нижний индекс </SUB>

Некоторые теги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тега (можно сразу указывать несколько параметров в одном теге). Например, открывающийся тег <FONT> (закрывающийся тег </FONT> обязателен) может иметь несколько атрибутов:

SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тегами <FONT SIZE=n></FONT>, где n - цифровое значение, Вы придадите ему нужный вам размер:

<font size="1"> Пример 1 </font> <font size="2"> Пример 2 </font> <font size="3"> Пример 3 </font> <font size="4"> Пример 4 </font> <font size="5"> Пример 5 </font> <font size="6"> Пример 6 </font>

FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае Обозреватель будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows, Ms Office. В самой нижней строке данной таблицы представлено использование семейства шрифта - имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке - Tahoma.

<font face="Times New Roman"> Times New Roman </font>

<font face="System"> System </font>

<font face="Arial"> Arial </font>

<font face="Courier"> Courier </font>

<font face="Verdana"> Verdana </font>

<font face="Comic Sans MS, Tahoma"> Comic Sans MS </font>

COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).

<font COLOR="red"> Красный </font> <font COLOR="#FF0000"> Красный </font>

С помощью элемента STYLE тега <SPAN> (закрывающийся тег </SPAN> обязателен) можно задавать выделение текста любым цветом:

<SPAN STYLE="BACKGROUND-COLOR: lightgreen"> Светлозеленый </SPAN>

<SPAN STYLE="BACKGROUND-COLOR: yellow"> Желтый </SPAN>

<SPAN STYLE="BACKGROUND-COLOR: lightblue"> Светлосиний </SPAN>