29. Особенности веб-дизайна, категории узлов, этапы разработки сайта.
Веб-страницей называется отдельный текстовый файл, отформатированный для просмотра в сети. Веб-узел – набор взаимосвязанных веб-страниц, поддерживаемых определенной организацией, частным лицом или группой лиц. Страницы узла соединены между собой гиперссылками.
Веб-дизайн – сравнительно молодая разновидность дизайна. Задачей веб-дизайна является разработка веб-интерфейсов для пользовательских сайтов. Поскольку обучения конкретно на веб-дизайнера в России как такового не предусмотрено, то, как правило, веб-дизайнеры - это люди, знакомые с последними веб-технологиями и при этом обладающие определёнными художественными качества. Термин веб-дизайн означает примерно следующее – проектирование структуры какого-либо интернет-ресурса и обеспечение удобства пользования им для пользователей. Основные этапы создания какого-либо интернет-ресурса:
1) обсуждение с заказчиком и получение единой картины, показывающей то, как он представляет себе будущий сайт. На этом этапе веб-дизайнеру следует ознакомиться с тематикой сайта и разобраться в терминологии, применяющейся в данной области 2) на основе полученных данных составляется соответствующее техническое задание;
3) непосредственно процесс веб-дизайна сайта с периодическим согласованием каждой разработанной детали;
4) вёрстка сайта для оптимизации его под основные браузеры;
5) программирование, наполнение сайта контентом и отладка ресурса;
6)тестирование. Веб-дизайн в данном алгоритме занимает довольно важную позицию. Но здесь есть свои особенности. Иногда исполнитель предлагает разработку сайта с использованием некоторых шаблонов, что, конечно, упрощает его разработку и уменьшает цену. Зачастую, используя такой шаблон, достаточно его лишь адаптировать под конкретный случай. Уникальный же веб-дизайн стоит заметно дороже стандартного. Но при этом каждая деталь является полностью уникальной и тщательно обрисовывается исполнителем. Результатом работы любого веб-дизайнера является так называемый дизайн-макет. Это такая специфическая многослойная картинка, представляющая собой набросок будущего вида каждой страницы сайта в соответствии с привязкой к различным разрешениям экранов мониторов. Для макета обычно используются фотографии, иллюстрации, иконки и т.д. Изначально изображение может быть как векторным, так и растровым. Возможно выполнение в таких продуктах, как Adobe Photoshop, Scribus или других визуальных редакторах. Верстальщик же получает все изображение в растровом виде. Клиент для простоты восприятия при демонстрации получает на выходе однослойный формат для всех изображений.
30.Синтаксис html, виды тегов, вложенность тегов, элементы и атрибуты, средства форматирования текста.
HTML код практически полностью состоит из команд, называемых тегами (от английского "tag"). В спецификации (документации по языку HTML) теги именуются "элементами.HTML код представляет собой соответствующим образом оформленный текст. Чтобы обозреватель при обработке страницы не путал его с простым текстом, элементы кода принято заключать в угловые <html код> скобки. Таким образом оформленный html тег выглядит так: <тег>. У тегов есть свои настройки, которые позволяют влиять на результат их работы. Эти настройки называются АТРИБУТАМИ. Атрибут может иметь одно или несколько значений. Таким образом общий вид команд HTML выглядит так:
<ТЕГ атрибут="значение">
В языке HTML существует два вида тегов:
Пустой элемент (тег): команда, имеющая только открывающий тег (<ТЕГ>), которая выполняет определенное действие. Например, тег <HR> построит линию, а тег <LI> укажет, что все, следующее после него, будет элементом списка.
Контейнер (парный тег): элемент, имеющий открывающий (<ТЕГ>) и закрывающий (</ТЕГ>) теги. Пара тегов образует контейнер, который влияет на свое содержимое. Контейнеры еще называют парными тегами.
<ТЕГ>содержимое контейнера</ТЕГ>
Контейнер может быть строгим - например, контейнер ссылки <A>ссылка</A> (закрывающий тег обязателен) и свободным - например, ячейка таблицы <TD>. В случае с ячейками сигнализировать о том, что контейнер закрыт, может закрывающий тег ячейки (</TD>); тег, открывающий следующую ячейку (<TD>); тег, закрывающий ряд ячеек (</TR>); а также закрывающий тег таблицы (</TABLE>), в которой расположены ячейки.
Тег может иметь обязательные атрибуты. Теперь поговорим о вложениях. Теги и контейнеры могут быть содержимым.
<DEL>123 <INS>456</INS> 789</DEL>
Контейнер <INS> (подчеркнутый текст) вложен в контейнер <DEL> () и является его содержимым. Результат вложения следующий:
123456
Заметьте, что контейнер <DEL> влияет и на содержимое контейнера <INS> (456), зачеркивая его. Можно делать и большее количество вложений при надобности, главное соблюдать принцип матрешки - следить за тем, чтобы открывающий и закрывающий тег находились в одном контейнере, иначе будут ошибки и большие.
Со свободными контейнерами нужно быть начеку, потому что концом такого контейнера может оказаться не закрывающий необязательный тег, а открывающий тег совершенно другого контейнера.
Форматирование текста
<EM> … </EM> — логическое ударение (обычно отображается курсивным шрифтом)
<STRONG> … </STRONG> — усиленное логическое ударение (обычно отображается жирным шрифтом)
<I> … </I> — выделение текста курсивом
<B> … </B> — выделение текста жирным шрифтом
<U> … </U> — подчёркивание текста
<S> … </S> — зачёркивание текста. Вот так:
зачёркнутый текст.<STRIKE> … </STRIKE> — то же самое, что <S> … </S>
<BIG> … </BIG> — увеличение шрифта
<SMALL> … </SMALL> — уменьшение шрифта
<BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег может не работать в браузере Internet Explorer версий 5 и ниже без применения JavaScript
<MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст.
<SUB> … </SUB> — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H2O.
<SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc2.
<FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:
COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.
FACE=шрифт меняет шрифт
SIZE=размер меняет размер шрифта. Размер от 1 до 7, стандартный по умолчанию 3. (Есть много способов изменить стандартный размер для данной страницы.)
SIZE=+размер или SIZE=-размер — размер задаётся по сравнению со стандартным. Например, +2 означает размер на 2 больше стандартного.