Основы Интернет-технологий Web-дизайн Лекция 2 -3
Основные понятия о Web-дизайне Веб-дизайн (web page design) – это процесс проектирования, планирования, моделирования и реализации доставки электронного содержимого через сеть Веб с использованием технологий (на основе языков разметки), подходящих для интерпретации и визуализации веб-браузером или другим графическим вебинтерфейсом пользователя. Основными аспектами веб-дизайна (в первую очередь для коммерческих вебсайтов) являются следующие: Содержимое. Информационное наполнение должно быть релевантным тематике сайта и ориентированным на целевую аудиторию сайта. Удобство в использовании (usability). Сайт должен иметь дружественный пользовательский интерфейс с простой и надежной навигацией. Внешний вид. Графика и текст должны быть выполнены в одном стиле и согласованы на всех страницах сайта. Стиль оформления должен демонстрировать профессионализм, привлекательность и релевантность. Видимость. Сайт должен легко находиться с помощью большинства поисковых систем и рекламных площадок.
Компоненты Web-приложений Веб-сайт - это информационная система, которая содержит две основные компоненты: Компоненту представления (front-end). Видимое содержимое (разметка страниц, графика, аудио и текст). Компоненту реализации (back-end). Связана с организацией и эффективной реализацией исходных кодов. Включает в себя неотображаемые сценарии, серверные компоненты, являющиеся основой для компоненты представления.
Процесс разработки веб-приложений Работа с заказчиком начинается с составления краткого описания, в котором излагаются пожелания заказчика по визуальному представлению и структуре сайта. С учетом возможностей программных и дизайнерских средств и исходя из краткого описания, менеджер составляет требования к проекту, которые должны быть утверждены заказчиком. Этапы проектирования веб-сайта зависят от объема сайта, его функциональности и многого другого. Разработка веб-сайта включает в себя следующие этапы: • Дизайн главной и типовых страниц сайта. (выполняетя обычно в графическом редакторе). • HTML-кодирование, в результате которого создаётся код, который можно просматривать с помощью браузера. • Программирование сайта. Может осуществляться как "с чистого листа", так и с помощью специального высокоуровнего пакета - системы управления сайтом (CMS). • Размещение сайта в Веб, наполнение контентом и публикация. • Оптимизация веб-сайта с целью повышения его видимости в Веб. • Сдача сайта заказчику. Для дизайна веб-сайта и разработки веб-приложений для него имеет широкий спектр инструментальных средств.
Технологии, которые обеспечивают деятельность World Wide Web: • • • Язык разметки гипертекста (HTML) Протокол передачи гипертекста (HTTP) Система имен доменов (DNS) Серверы и браузеры Web Статический и динамический контент
Типы контента: Контент можно разделить на четыре типа : • простой текст, • стандарты Web, • динамические Web-страницы • форматы, требующие других приложений или подключаемых модулей (плагинов). Стандарты Web Базовыми строительными блоками Всемирной паутины WWW являются три основных стандарта Web : • HTML (или XHTML) – (Extensible) Hyper. Text Markup Language , • CSS - Cascading Style Sheets, • Java. Script.
Стандарты WEB Язык разметки гипертекста (HTML) используется для разбиения документа, определения его содержания и структуры, и определения значения каждой части (того, что содержит весь текст и т. д. , что мы видим на страницах Web). Он использует специальные элементы для определения на странице различных компонентов. Каскадные таблицы стилей (CSS) предоставляют полный контроль над тем, как выводится элемент. Очень легко, используя объявления стилей, вывести все параграфы через две строки (line-height: 2 em; ), или сделать все заголовки второго уровня зеленого цвета (color: green; ). Существует множество преимуществ разделения структуры и форматирования, и мы рассмотрим это более подробно в следующей лекции. Язык Java. Script предоставляет Web-сайту динамические функции. Можно писать небольшие программы на Java. Script, которые будут выполняться на клиентском компьютере, не требуя установки на сервере какого-либо специального программного обеспечения. Java. Script позволяет добавить на Web-сайт некоторые базовые функции и интерактивность, но он имеет свои ограничения, что ведет нас к серверным языкам программирования и динамическим Web страницам.
Динамические страницы Web. Статический Web-сайт является Web-сайтом, контент которого, HTML и графика, всегда статичны — он обслуживает любого посетителя одинаково, если только создатель Web-сайта не решит вручную изменить его копию на сервере. На динамическом Web-сайте, с другой стороны, контент сервера будет таким же, но кроме обычного кода HTML он содержит также динамический код, который может выводить различные данные, в зависимости от информации, которая передается на Web-сайт. На сервере должно быть установлено специальное программное обеспечение, позволяющее создавать динамический Web-сайт. В то время как обычные статические файлы HTML хранятся с расширением файла . html, эти файлы содержат специальный динамический код в дополнение к HTML, и хранятся со специальным расширением файлов, чтобы сообщить серверу Web, что они требуют дополнительной обработки перед отправкой клиенту (такой как вставка данных из базы данных) — файлы PHP, например, имеют обычно расширение файла. php. Существует множество динамических языков программирования —PHP, Java, Python, Ruby on Rails, ASP. NET и Coldfusion.
Разметка-основа каждой страницы HTML и XHTML являются языками разметки, состоящими из элементов, которые содержат атрибуты (некоторые по выбору и некоторые обязательные). Эти элементы используются для разметки различных типов контента документов, определяя, как каждый элемент контента будет представлен в браузерах Web (например, заголовки, параграфы, таблицы, размеченные списки и т. д. Элементы определяют тип реального контента, в то время как атрибуты определяют дополнительную информацию об этих элементах, такую как ID для идентификации элемента, или некоторое место, на которое указывает ссылка. Необходимо помнить, что разметка предполагается насколько возможно семантической, т. е. предполагается, что она описывает функцию контента как можно более точно.
Разметка-основа каждой страницы
HTML Hyper. Text Markup Language (HTML) - язык определения (разметки) гипертекста. Под гипертекстом обычно понимается текст, содержащий ссылки на другие документы. Кроме того, гипертекст на вебстраницах, как правило, содержит форматирование (разнообразные начертания, размеры, цвета и выравнивания символов, а также графические элементы и таблицы). Разметка - процедура внедрения в текст специальных обозначений (тэгов), которые определяют ссылки и форматирование.
HTML Ещё одно правило тэговой разметки, которое иллюстрируют приведённые примеры, заключается в том, что тэги могут быть открывающими и закрывающими: <h 1> и </h 1>, <a> и </a> и т. д. , причём закрывающий тэг отличается от открывающего наличием символа слэша перед именем тэга и отсутствием атрибутов. В целом структура, определяемая открывающим и парным ему закрывающим тэгами, называется элементом и имеет следующий общий вид: <имя_элемента имя_атрибута 1="значение_атрибута 1" имя_атрибута 2="значение_атрибута 2". . . > Текст </имя_элемента> Варианты определения элемента: Элемент без атрибутов и содержимого, оформленный как самозакрывающийся тег: <hr /> Элемент, вложенный в другой элемент: <p><a href="http: //www. bing. com/">Поиск</a></p>
Тестування за класами еквівалентності Переваги застосування методу класів еквівалентності : Метод класів еквівалентності дозволяє значно скоротити кількість тестів у порівнянні з методом випадкового тестування. Недоліки застосування методу класів еквівалентності : Основний з них - це складність виділення класів еквівалентності, особливо НКЕ, а також можливий пропуск певних типів високоефективних тестів (тобто тестів, що характеризуються великою ймовірністю виявлення помилок). Так, наприклад, мінімальні й максимальні припустимі значення вхідних параметрів дозволяють виявити більшість помилок, пов'язаних з відповідностями й переповненнями типів даних. Для вирішення даної проблеми був запропонований метод аналізу граничних умов
Структура документа HTML На первом месте HTML-документа, согласно стандарту, находится определение типа документа (ОТД). Cмысл ОТД заключается в том, чтобы указать, согласно каким правилам написан HTML-документ. В рамках стандарта HTML 4. 01 возможны вариации: документ может быть написан в строгом соответствии с рекомендациями стандарта (которые предписывают отказываться от ряда элементов и атрибутов, унаследованных от предыдущих версий HTML и пользоваться вместо этого новыми, оптимизированными средствами); документ может содержать некоторые нерекомендованные элементы и атрибуты, не нарушая в остальном правил стандарта - в этом случае он будет соответствовать переходному ОТД; Вставляя ОТД в HTML-документ, следует ввести в его начало следующий текст: Строгое ОТД: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> Переходное ОТД: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> HTML 5: <!DOCTYPE html>
Раздел head ("шапка") head - шапка документа - его заголовок, метаданные (информация о самом документе, а не о его содержимом), стили, скрипты. Пример минимального раздела head: <head><title>Заголовок документа</title></head> Элемент title - единственный обязательный элемент раздела head. Метаданные могут включать в себя информацию об авторах, ключевых словах документа и т. п. , <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Эти данные не видит пользователь, просматривающий страницу, но могут анализировать поисковые роботы. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Раздел body ("тело документа") Здесь размещается основное содержимое документа. Выглядит это, например, так: <body><p>Hello, World!</p></body> Пример пустого, но корректного документа HTML 4. 01 Transitional: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> <html> <head> <title></title> </head> <body>< /body> </html>
Заголовки и абзацы Заголовок (h 1. . h 6 - header 1. . . 6) Заголовки имеют большое значение. Для пользователя они создают ориентиры в документе и проясняют его структуру, а поисковые серверы используют заголовки, чтобы индексировать структуру и содержание веб-страниц. Элемент h 1 определяет наиболее крупный заголовок; h 6 - наименее крупный. Заголовки h 1 должны использоваться как главные заголовки, сопровождаемые заголовками h 2, затем менее важными заголовками h 3, и так далее. Обычно авторы применяют h 1 для названия документа, h 2 для названий разделов и т. д. <h 1> Это заголовок 1</h 1> <h 2> Это заголовок 2</h 2> <h 3> Это заголовок 3</h 3> <h 4> Это заголовок 4</h 4> <h 5> Это заголовок 5</h 5> <h 6> Это заголовок 6</h 6>
Заголовки и абзацы Заголовок (h 1. . h 6 - header 1. . . 6)
Абзац (p - paragraph) Служит для смысловой разбивки текста. Браузеры, отображая содержимое этого элемента (также блочного), обычно вставляют перед ним вертикальный отступ, немного больший по высоте, чем одна строка - таким образом абзацы отделяются друг от друга по умолчанию. При помощи стилей можно достичь и более привычного, "книжного" вида - горизонтального отступа первой строки каждого абзаца. Возможны и другие варианты. p { text-indent: 2. 5 em; margin-top: 0. 2 em; margin-bottom: 0. 2 em; } . . . <p> По умолчанию браузер визуально отделяет абзацы друг от друга вертикальным отступом, что эквивалентно установке свойств margin -top и margin-bottom в некоторое отличное от нуля значение. </p> <p> В данном примере этим свойствам задано небольшое значение (0. 2 em, т. е. 20% высоты символа M). </p> <p> Вместо этого абзацы разделены отступом первой строки, который задан CSSсвойством text-indent. </p>
Списки В HTML имеется три типа списков: • Неупорядоченный список – маркированный список, используется для объединения в группу множества связанных объектов без определенного порядка. • Упорядоченный список – нумерованный спмсок, используется для объединения в группу множества связанных объектов в определенном порядке. • Список определений - используется для вывода пар имя/значение, таких как термины и их определения, или время и события. Каждый из них имеет определенное назначение - они не являются взаимозаменяемыми! Разметка неупорядоченного списка Неупорядоченные списки используют одну пару тегов <ul></ul>, охватывающих множество пар тегов <li></li>: <ul> <li>хлеб </li> <li>кофе в зернах </li> <li>молоко </li> </ul>
Списки Разметка упорядоченного списка Упорядоченные списки используют одну пару тегов <ol></ol>, охватывающих множество пар тегов <li></li>: <ol> <li>хлеб </li> <li>кофе в зернах </li> <li>молоко </li> </ol> Начало упорядоченных списков с числа, отличного от 1 <ol start="4"> <li>молоко </li> </ol>
Списки определений отличаются от других видов списков, так как они используют определяемые термины и описания определений вместо объектов списка. Поэтому списки определений используют одну пару элементов <dl></dl>, охватывающую группы тегов <dt></dt> и <dd></dd>. Необходимо располагать парами как минимум одну группу тегов <dt></dt> с одной группой <dd></dd> ; теги <dt></dt> должны всегда быть первыми по порядку. Простой список определений одного термина с одним определением будет выглядеть следующим образом: <dl> <dt>Термин </dt> <dd>Определение термина </dd> <dt>Термин </dt> <dd>Определение термина </dd> </dl> Который выводится следующим образом: Термин Определение термина …
Вложенные списки Элемент списка может содержать другой целый список — он называется "вложенным" списком. Это может быть полезно для таких вещей как таблица контента: 1. Глава один 1. Раздел один 2. Раздел два 3. Раздел три 2. Глава два 3. Глава три Вложенный список должен относиться к одному конкретному элементу списка. Чтобы отразить это в коде, вложенный список помещается внутрь этого элемента списка. <ol> <li>Глава один <ol> <li>Раздел один </li> <li>Раздел два </li> <li>Раздел три </li> </ol> </li> <li>Глава два </li> <li>Глава три </li> </ol>
Ссылки являются частью Web-сайта (созданного обычно с помощью HTML, но не всегда), которые указывают на другие ресурсы — другие документы HTML, текстовые файлы, файлы PDF, и т. д. Они называются анкерами (якорями), и их можно добавлять в документ с помощью элемента a. Анкер имеет несколько атрибутов, которые можно использовать: • href - ресурс, на который указывает анкер (внешний файл или ID анкера ). • id - ID анкера, если анкер является целью, а не ссылкой. • title - дополнительная информация о внешнем ресурсе. Элемент a может играть несколько ролей в зависимости от заданных атрибутов. Наиболее часто используется атрибут href , который может содержать различные значения: URL, который может задаваться в той же папке (help. html), относительно текущей папки (например, ". . /help/help. html" ), абсолютно, относительно корня сервера (например, "/help. html" ) или вообще на другом сервере (например, "http: //wait -till-i. com", или "ftp: //ftp. opera. com/", или "http: //developer. yahoo. com/yui" ). Идентификатор фрагмента или имя анкера с предшествующей решеткой (например, "#menu" ). Это является указателем на цель внутри того же самого документа. Смесь обоих - можно соединиться прямо с разделом другого документа, указывая атрибут href с URL, за которым следует идентификатор фрагмента (например, "http: //developer. yahoo. com/yui/#cheatsheets" ).
Ссылка на адрес электронной почты Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto: адрес электронной почты <a href="mailto: olena_matat@mail. ru">Задавайте вопросы по электронной почте</a> В атрибуте href тега <a> пишется ключевое слово mailto, затем через двоеточие - желаемый почтовый адрес. Подобная ссылка ничем не отличается от ссылки на веб-страницу, но при нажатии на нее запускается почтовая программа, установленная по умолчанию. Можно также добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (? ) параметр subject=тема сообщения. При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически. <a href="mailto: olena_matat@mail. ru? subject=Вопрос по HTML">Задавайте вопросы по электронной почте</a>
Изображения Добавление изображения происходит в два этапа: вначале готовится графический файл желаемого размера, затем он добавляется на страницу через тег <img>. Сам HTML предназначен только для того, чтобы отобразить требуемую картинку, при этом никак ее не меняя. Для добавления изображения на веб-страницу используется тег <img>, атрибут src которого определяет адрес графического файла. <img src="URL" alt="альтернативный текст"> URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample. gif и хранится в папке images корня сайта.
Изображения • • Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http: //baklan. narod. ru, значит, написав путь к изображению как /images/bird. jpg, мы, тем самым говорим серверу, что показать следует файл http: //baklan. narod. ru/images/bird. jpg. Подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут. Если перед адресом добавляется упоминание протокола http (http: //), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер. Двоеточие со слэшем (. . /) в начале адреса говорит о том, что и рисунок и вебстраница находятся в разных папках, которые размещены на одном уровне. На рис. 10. 1 показан файл index. html, в который требуется поместить рисунок pic. gif. Тогда относительный путь к изображению из index. html будет . . /images/pic. gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: . . /images/pic. gif. Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне.
Таблицы Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12. 1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.
Таблицы
Таблицы Группы столбцов. Объединение столбцов и строк Элементы colgroup и col Предназначены для того, чтобы назначать свойства столбцам или группам столбцов. Вообще, таблица задаётся набором строк, но работа со столбцами часто бывает необходима - например, для задания ширины или фонового цвета столбца - и поэтому HTML предоставляет эти два специальных элемента. Для того чтобы назначить свойства всем ячейкам одного столбца, используйте элемент col. Этот элемент может появляться только в элементе colgroup, а colgroup - только в table: <table> <colgroup> <col class="middle"> <col class="top"> </colgroup> . . . Если же одинаковые свойства нужно применить к нескольким подряд расположенным столбцам, то их можно присвоить элементу colgroup, тем самым немного сократив запись: <colgroup span="4" width="20%"> </colgroup> <colgroup span="2" width="10%"> </colgroup>
Таблицы Атрибуты colspan и rowspan Обычно в каждой строке таблицы количество ячеек одинаково. Если их окажется меньше, то браузер создаст пустые ячейки вместо недостающих; если больше - лишние будут выступать за границы таблицы. В тех случаях, когда нужно объединить горизонтальную группу ячеек, пользуются атрибутом colspan: <td colspan="3"> Браузер создаст ячейку, занимающую то же пространство по горизонтали, как указанное количество ячеек в строках, расположенных выше или ниже. Аналогичным образом объединяется и вертикальная группа ячеек: <td rowspan="3"> В обоих случаях, если значения атрибутов слишком большие (требуется объединить больше ячеек, чем их реально существует), то браузер объединит столько ячеек, сколько возможно, не создавая новых.
Блочные элементы Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h 1>, . . . , <h 6>, <hr>, <ol>, <pre>, <table>, <ul> и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in. Для блочных элементов характерны следующие особенности: Блоки располагаются по вертикали друг под другом. На прилегающих сторонах элементов действует эффект схлопывания отступов. Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h 1>Заголовок</h 1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h 1><a>Заголовок</a></h 1>. По ширине блочные элементы занимают всё допустимое пространство. Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа. Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока. Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока. Текст по умолчанию выравнивается по левому краю.
Тег <div> Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки. Синтаксис <div>. . . </div> Атрибуты align Задает выравнивание содержимого тега <div>. title Добавляет всплывающую подсказку к содержимому. Также для этого тега доступны универсальные атрибуты и события. Закрывающий тег Обязателен.
Строчные элементы Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др. , а также элементы, у которых свойство display установлено как inline. В основном они используются для изменения вида текста или его логического выделения. Характерные особенности. Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено. Эффект схлопывания отступов не действует. Свойства, связанные с размерами (width, height) не применимы. Ширина равна содержимому плюс значения отступов, полей и границ. Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости. Можно выравнивать по вертикали с помощью свойства vertical-align. Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.
Скачать презентацию Основы Интернет-технологий Web-дизайн Лекция 2 -3 Основные
Lektsia2_3_Web_dizayn_HTML.pptx