Сборник теоретического материала и практических работ для элективного курса "WEB-дизайн"

Муниципальное общеобразовательное учреждение

«Средняя общеобразовательная школа № 35

имени летчика-космонавта Героя Советского Союза П.И. Беляева»

СБОРНИК ПРАКТИЧЕСКИХ ЗАДАНИЙ

WEB-ДИЗАЙН

Дарченкова Екатерина Романовна

Вологда

2019

Урок 1. Представление о веб-конструировании 4

1.1 Инструменты и методы разработки веб-сайтов 4

Вопросы 6

1.2 Проектирование сайта 6

Вопросы 9

Упражнение 1. 10

Урок 2. Основы языка HTML. Создание HTML-документа в редакторе «Блокнот» 10

Вопросы 17

Упражнение 2 17

Урок 3. Создание гиперссылок 18

Вопросы 22

Упражнение 3 22

Урок 4. Подготовка изображений для Интернета 22

Вопросы 29

Упражнение 4 30

Урок 5. Фреймовые структуры. Часть 1 30

Упражнение 5 36

Урок 6. Фреймовые структуры. Часть 2 37

Упражнение 6 41

Урок 7. Фреймовые структуры. Часть 1 42

7.1 Создание таблицы 42

7.2 Рамка таблицы (границы) 42

7.3 Отступы в таблице 43

7.4 Объединение ячеек таблицы 44

7.5 Заголовок таблицы 45

7.6 Размеры таблицы 47

7.7 Выравнивание таблицы 47

7.8 Фон таблицы 49

7.9 Объединение ячеек 51

Упражнение 7 52

Урок 8. Дополнительные функции форматирования текста 54

8.1 Отступ к первой строке каждого абзаца 54

8.2 Установление вокруг изображения рамки заданного цвета и толщины 55

8.3 Бегущая строка 56

8.4 Маркированный и нумерованный списки 57

8.5 Кнопки 61

8.6 Кнопка с функциональностью ссылки 62

Упражнение 8 62

Приложение 1 66

Приложение 2 67

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

Для создания веб-страниц используется язык разметки гипертекстовых документов HTML (HyperText Markup Language).

В качестве инструментов могут использоваться офисные программы, например, входящие в состав Microsoft Office (Word, PowerPoint), которые не являются специальными средствами разработки веб-страниц. Лучших результатов можно достичь, используя специальные программы – веб- редакторы, например, Microsoft FrontPage.

Выделяют две основные группы методов и соответствующих инструментов: визуальные и ручные (программные).

Визуальные методы позволяют производить все работы по созданию веб- сайта с высокой степенью автоматизации и не требуют знания HTML. Они уменьшают трудоемкость и сроки разработки сайта. Суть визуальных методов отражена в принципе WYSIWYG (от английского “What you see is what you get - Что видишь, то и получишь”).

Разработано немало инструментов - редакторов визуального конструирования. Наиболее известными являются: Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor и др. С помощью таких редакторов веб-страницы создаются (рисуются) в интерактивном режиме, при этом автоматически генерируется соответствующий HTML-код, который представляет собой набор команд языка разметки HTML. Отметим, что упомянутые редакторы позволяют выполнять все работы по созданию сайта без непосредственного подключения к сети Интернет, или, как говорят в режиме оффлайн (offline). Затем созданный веб-сайт публикуется в сети Интернет , т.е. размещается на веб-сервере.

В последнее время для конструирования и сопровождения веб-сайтов используются системы управления их содержимым (контентом) - CMS (Content Management System), которые предоставляются специальными платными или бесплатными службами. Системы CMS представляют собой своего рода конструкторы, позволяющие создавать сайт в режиме непосредственного подключения к сети, или онлайн (online), и сопровождать его в дальнейшем. При создании структуры и навигации по сайту в системе CMS также не требуется знаний языка HTML.

Из бесплатных CMS наиболее популярны Joomla! (http://joomla.ru/) и Drupal (http://www.drupal.ru).

Конечно трудно создать хороший сайт, не зная основ HTML Для работы с HTML-кодом могут использоваться специальные инструменты разработки, например редакторы HotDog, Adobe HomeSite и др. Эти инструменты облегчают ввод и редактирование кода. Однако, вводить основные команды (теги) языка HTML можно даже в простейшем текстовом редакторе Блокнот, а затем просматривать результаты работы с помощью браузера.

Важную роль в выборе инструментов и методов веб-конструирования играет статичность или динамичность создаваемых страниц, а также наличие интерактивных элементов. Статические страницы отображаются браузером пользователя в том виде, в каком были созданы и размещены на веб-сервере. Динамические страницы генерируются по запросу пользователя - информация на них загружается серверными программами из баз данных. Такие базы данных обычно содержат информацию, которая требует постоянного обновления. Например, интернет-магазин пополняется сведениями о новых товарах и изменяющихся ценах.

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

Кроме языка разметки гипертекстовых документов HTML при создании веб-сайтов используют и специальные языки веб- программирования. Широкое применение получил язык сценариев Java Script. Написанные на нем конструкции или скрипты вставляются непосредственно на веб-страницы и интерпретируются браузером. Они используются для создания отдельных, как правило, интерактивных, элементов веб-страниц, например, динамических меню, часов, календарей, форм запросов, счетчиков посещений страниц, систем голосований и т.п. Для программирования на стороне сервера наиболее часто используют языки PHP (от англ. Hypertext Preprocessor - препроцессор гипертекста), Perl (от англ. Practical Extraction and Report Language - практический язык для извлечения данных и составления отчётов).

1. В чем разница между визуальными и ручными методами веб-конструирования?

2. Какие инструменты могут использоваться при создании веб-сайтов?

3. Какие страницы называют статическими? динамическими? интерактивными?

При разработке веб-сайта выделяют следующие основные этапы:

• определение тематики сайта, его целей и задач;

• проектирование структуры сайта, определение разделов и связей между страницами;

• разработка дизайна сайта, т.е. стиля оформления страниц;

• подготовка материалов (текстовых и графических) для размещения на веб- страницах;

• конструирование страниц сайта (создание HTML-кода);

• размещение в сети (публикация) и тестирование сайта. Рассмотрим на примере, как спроектировать web-сайта кинотеатра.

Определим основную цель сайта:

• привлечение зрителей и задачи:

• информирование о репертуаре кинотеатра, реклама фильмов.

Разработку проекта начнем с построения информационной модели сайта. Пусть, для простоты наш первый сайт будет состоять из четырех веб-страниц. Структуру этого сайта для наглядности изобразим в виде двухуровневой схемы (рис. 1).

Рисунок 1. Двухуровневая схема

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

На втором уровне схемы изобразим веб-страницы, посвященные фильмам определенных жанров, например, «Драмы», «Комедии», «Детективы». Они имеют схожую структуру и будут отличаться лишь содержанием (рис. 2).

Рисунок 2 Второй уровень

Теперь спроектируем дизайн сайта. Основными структурными элементами оформления веб-страниц являются текстовые блоки (основной текст, заголовки, списки, текстовые гиперссылки), графические объекты: изображения (рисунки, фотографии, анимации), обои (фоновые рисунки), изображения-гиперссылки, разделительные линии. Для размещения элементов в заданных местах страниц будем использовать таблицы.

Сочетание свойств элементов веб-страницы определяет стиль ее оформления. Стиль текста задается совокупностью атрибутов формата: шрифт, размер символов, начертание; отступы, выравнивание, межсимвольный и междустрочный интервалы и др. Стиль графических элементов задается совокупностью параметров формы, размеров, цвета, фактуры материала, а также разнообразных эффектов: тени, блеска, прозрачности и т.п.

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

Все страницы одного уровня мы будем оформлять в едином стиле.

Непосредственное конструирование страниц сайта начнем с подготовки всех материалов (текстов, рисунков) его элементов. Для простоты используем готовые шаблоны, которые будем заполнять требуемым содержанием, вставлять подготовленные элементы (например, фрагменты текста) или ссылки на них.

Файлы всех страниц веб-сайта будем сохранять в одной папке, например, KINO. Это упрощает размещение сайта на веб-сервере. В случае большого количества страниц или изображений их следует размещать во вложенных папках, например, KINO\FOTO\. Файлу главной веб-страницы обычно дают имя index или main с расширением .htm.

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

1. Какие этапы можно выделить при разработке веб-сайта?

2. Что понимают под стилем оформления веб-страницы?

Разработайте проект веб-сайта по одной из тем, например, «Моя семья» «Моя школа» «Мои друзья» «Мои любимые занятия» «Моя Родина – Россия» «Природа родного края» «Интересные профессии»

Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером. Например, эти команды могут указывать, как должно отображаться содержание страницы на экране.

HTML-документ можно создавать в простейших текстовых редакторах, например, редакторе Блокнот, а затем сохранять в файле с расширением .htm или .html. Разметка HTML-документа состоит в расстановке тегов – заключенных в угловые скобки команд языка HTML. Их можно набирать строчными или прописными латинскими буквами.

Краткое описание основных тегов приведено в приложении 1.

Большинство тегов парные. Открывающим тегом описывается команда и начинается ее действие, а закрывающим тегом, который повторяет открывающий, но предваряется косой чертой / (слешем), это действие прекращается. Например, тег задает жирное начертание. Размеченный текст “Второе слово выделено жирным” браузером будет отображаться так “Второе слово выделено жирным”.