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

Информатика. 11кл

Только сегодня: скидка до 20% в подарок на первый заказ.
Какую работу нужно написать?

Другую работу

Помощник Анна

Г. А. Заборовский А. Е. Пупцев Учебное пособие для 11 класса общеобразовательных учреждений с русским языком обучения Допущено Министерством образования Республики Беларусь Минск «Народная асвета» 2010

Образовательный портал www.adu.by/ Национальный институт образования

УДК 004(075.3=161.1) ББК 32.81я721 З-41 Авторы: Г. А. Заборовский (главы 1, 2), А. Е. Пупцев (главы 1, 3, 4) Рецензенты: кафедра информатики и компьютерного моделирования Гродненского государственного университета имени Янки Купалы (канд. пед. наук, доцент Н. П. Макарова ); старший преподаватель кафедры естественнонаучных дисциплин и информационных технологий Минского областного института развития образования А. А. Буславский Заборовский, Г. А. З-41 Информатика : учеб. пособие для 11-го кл. общеобразоват. учреждений с рус. яз. обучения / Г. А. Заборовский, А. Е. Пупцев. — Минск : Нар. асвета, 2010. — 150 с. : ил. ISBN 978-985-03-1370-6.

УДК 004(075.3=161.1)
ББК 32.81я721
ISBN 978-985-03-1370-6	© Заборовский Г. А., Пупцев А. Е., 2010
© Оформление. УП «Народная асвета»,
2010

Образовательный портал www.adu.by/ Национальный институт образования

От авторов Уважаемые школьники! В одиннадцатом классе Вы продолжите углублять свои знания в области информационных технологий, основ алгоритмизации и программирования. В первой главе пособия Вы познакомитесь с инструментами и методами веб-конструирования, изучите основы языка разметки гипертекстовых документов HTML, познакомитесь с особенностями подготовки графики для сети Интернет, научитесь создавать веб-сайты. Во второй главе будет продолжено изучение основ алгоритмизации и программирования. Полученные ранее знания и умения Вы научитесь применять для решения практических задач из различных предметных областей. Третья глава посвящена обработке информации в системах управления базами данных. Четвертая, заключительная, глава завершает знакомство с информационными системами и технологиями. Вопросы, отмеченные знаком , предназначены для закрепления изученного материала. Дополнительный материал для любознательных отмечен знаком . После параграфов предлагаются упражнения, которые позволят Вам закрепить свои знания и практические умения работы на компьютере. Желаем успехов в изучении информатики и информационных технологий. Хорошие знания помогут Вам выбрать профессию и приносить пользу Родине.

Образовательный портал www.adu.by/ Национальный институт образования

4	ГЛАВАл а в а 1

ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ § 1. Представление о веб-конструировании 1.1. Инструменты и методы разработки веб-сайтов Большинство информационных ресурсов сети Интернет представлено в виде веб-страниц, которые объединяются в веб-сайты. Благодаря развитию телекоммуникационных технологий размещенная на веб-страницах информация доступна множеству людей. В отличие от информации на бумажных носителях, например книг, она может оперативно изменяться и практически мгновенно доставляться в любое место по запросу пользователя. Для создания веб-страниц используется язык разметки гипертекстовых доку- ментов 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) . Затем созданный веб-сайт публикуется в сети Интернет, т. е. размещается на вебсервере.

Образовательный портал www.adu.by/ Национальный институт образования

Основы веб-конструирования

В последнее время для конструирования и сопровождения веб-сайтов используются системы управления их содержимым (контентом) — CMS ( Content Management System ), которые предоставляются специальными платными или бесплатными службами. Системы CMS представляют собой своего рода конструкторы. Они позволяют создавать сайт в режиме непосредственного подключения к сети, или онлайн (online) , и сопровождать его в дальнейшем. При создании структуры сайта и разработке навигации по нему в системе CMS также не требуется знаний языка HTML. Из бесплатных систем CMS наиболее популярны Joomla! (http://joomla.ru/) и Drupal (http://www.drupal.ru). Конечно, трудно создать хороший сайт, не зная основ языка разметки HTML. Для работы с HTML-кодом могут использоваться специальные инструменты разработки, позволяющие набирать команды HTML вручную , например редакторы HotDog, Adobe HomeSite и др. Эти инструменты облегчают ввод и редактирование кода. Однако, вводить основные команды ( теги ) языка HTML можно даже в простейшем текстовом редакторе Блокнот , а просматривать результаты работы можно с помощью браузера. Важную роль в выборе инструментов и методов веб-конструирования играет статичность или динамичность создаваемых страниц, а также наличие интерактивных элементов. Статические страницы отображаются браузером пользователя в том виде, в каком были созданы и размещены на веб-сервере. Динамические страницы генерируются по запросу пользователя — информация на них загружается серверными программами из баз данных. Такие базы данных обычно содержат информацию, которая требует постоянного обновления. Например, интер- нет-магазин пополняется сведениями о новых товарах и изменяющихся ценах. Интерактивные (т. е. управляемые пользователем) элементы веб-страниц используются для ввода пароля, выбора товара, оценки его качества, ввода ответа при тестировании или голосовании, для формирования запроса на поиск информации в удаленной базе данных и т. п. Кроме языка разметки гипертекстовых документов HTML, при создании веб-сайтов используют и специальные языки веб-программирования. Широкое применение получил язык сценариев Java Script. Написанные на нем конструкции, или скрипты , вставляются непосредственно на веб-страницы и интерпретируются браузером. Они используются для создания отдельных, как правило, интерактивных элементов веб-страниц, например динамических меню, часов, календарей, форм запросов, счетчиков посещений страниц, систем голосования и т. п. Для серверного программирования наиболее

Образовательный портал www.adu.by/ Национальный институт образования

6	Г л а в а 1

часто используют языки PHP (от англ. Hypertext Preprocessor — препроцес- соргипертекста), PERL (отангл. Practical Extraction and Report Language — практический язык для извлечения данных и составления отчетов). 1. В чем разница между визуальными и ручными методами веб-конструиро- вания? 2. Какие инструменты могут использоваться при создании веб-сайтов? 3. Какие страницы называют статическими? Динамическими? 1.2. Проектирование сайта Выделяют следующие основные этапы разработки веб-сайтов: • определение тематики сайта, его целей и задач; • проектирование структуры сайта, определение разделов и связей между страницами; • разработка дизайна сайта, т. е. стиля оформления страниц; • подготовка материалов (текстов и графики) для размещения на веб-стра- ницах; • конструирование страниц сайта (создание HTML-кода); • размещение в сети (публикация) и тестирование сайта. Рассмотрим на примере, как спроектировать веб-сайт кинотеатра. Определим основную цель сайта: привлечение зрителей, и задачи: информи- рование о репертуаре кинотеатра, реклама фильмов. Разработку проекта начнем с построения информационной модели сайта. Пусть для простоты наш первый сайт будет состоять из четырех веб-страниц. Структуру этого сайта для наглядности изобразим в виде двухуровневой схемы (рис. 1.1). Кинотеатр . приглашает Фотография кинотеатра Драмы Комедии Детективы

Драмы

Комедии

Детективы

Рис. 1.1

Образовательный портал www.adu.by/ Национальный институт образования

Основы веб-конструирования

На первом (верхнем)		уровне
			Название фильма
					схемы изобразим первую (главную)
веб-страницу. На ней будут разме-						Фрагмент	Жанр
щены: общая информация о кино-			Режиссер
				фильма
театре (например, фотография, ад-			Актеры
				(фотография)
рес) и гиперссылки.		Студия, год
На втором уровне схемы изоб-			Краткое содержание
разим веб-страницы, посвященные
			фильмам	определенных	жанров,
например	«Драмы», «Комедии»,

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

Образовательный портал www.adu.by/ Национальный институт образования

8	Г л а в а 1

Непосредственное конструирование страниц сайта начнем с подготовки всех его элементов (текстов, рисунков). Затем эти элементы и (или) ссылки на них будем вставлять в готовые шаблоны. Файлы всех страниц веб-сайта будем сохранять в одной папке, например KINO. Это упростит размещение сайта на веб-сервере. В случае большого количества страниц или изображений их следует сохранять во вложенных папках, например KINO\FOTO\. Файлу главной веб-страницы обычно дают имя index или main с расширением .htm. Только после размещения файлов в папках можно создавать гиперссылки, с помощью которых выполняется навигация по сайту — переходы со страницы на страницу. В нашем примере удобно сначала разработать страницы нижнего уровня, а затем оформить главную страницу и создать гиперссылки для вызова страниц нижнего уровня. Затем следует проверить работу ссылок в режиме оффлайн. Лишь после тщательной проверки и исправления ошибок созданный вебсайт можно опубликовать, т. е. разместить на веб-сервере. 1. Какие этапы можно выделить при разработке веб-сайта? 2. Что понимают под стилем оформления веб-страницы? Упражнение Разработайте проект веб-сайта по одной из тем: Моя семья. Моя школа. Мои друзья. Мои любимые занятия. Моя Родина — Беларусь. Природа родного края. Интересные профессии. § 2. Использование офисных приложений для создания веб-страниц 2.1. Создание веб-страниц в редакторе MS Word Любой документ MS Office можно сохранить в виде веб-страницы. Для этого достаточно выполнить команду Файл I Сохранить как веб-страницу . Однако далеко не всякий подготовленный для печати на бумаге документ будет хорошо выглядеть в браузере. Наилучшего результата можно достичь, если с самого начала готовить документ для размещения в сети Интернет. Использование текстового редактора MS Word является одним из самых простых способов разработки веб-страниц. Рассмотрим на примере, как это делается. Начнем со страниц нижнего уровня, а затем оформим главную страницу и создадим гиперссылки.

Образовательный портал www.adu.by/ Национальный институт образования

Основы веб-конструирования

Рис. 1.3 Пример 1. Создать веб-cтраницу фильма «Анастасия Слуцкая» (рис. 1.3). Прежде всего с помощью команды Файл I Создать выберем пункт Вебстраница (этот пункт можно выбрать и в области задач Создание документа ). Затем, выполнив команду Формат I Тема , выберем для оформления страницы тему Перетекание (рис. 1.4). Для размещения на странице фотографии и текстов используем таблицу из двух строк и двух столбцов. Объединим ячейки нижней строки. Вставим подготовленные заранее тексты и изображение из файлов. Оформим их в соответствии с рисунком 1.3. Созданный документ сохраним как веб-страницу в папке KINO под именем drama.htm. Выберем тип сохраняемого файла Веб-страница (*.htm; *.html) . При этом все используемые в документе изображения будут помещены в отдельную папку с именем веб-страницы и расширением .files (в нашем примере — drama.files).

Образовательный портал www.adu.by/ Национальный институт образования

10	Г л а в а 1

Рис. 1.4 Аналогичным способом создаются страницы других фильмов и жанров, например «Комедии» и «Детективы». Поскольку они имеют сходную структуру и отличаются лишь содержанием, то новые страницы можно получать редактированием уже созданных, заменяя изображения и тексты и сохраняя их под новыми именами. Создадим веб-cтраницу фильма «В августе 44-го…» (рис. 1.5) на основе уже созданной нами страницы «Анастасия Слуцкая». Сохраним ее под именем avgust44.htm. Пример 2. Создать главную страницу сайта кинотеатра «Беларусь» (рис. 1.6), содержащую гиперссылки на страницы фильмов.

Образовательный портал www.adu.by/ Национальный институт образования

Основы веб-конструирования (выполненные задания по учебнику информатики 11 класс).

Нажмите, чтобы узнать подробности

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

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

Выделяют следующие основные этапы разработки веб-сайтов:
- определение тематики сайта, его целей и задач;
- проектирование структуры сайта, определение разделов и связей между страницами;
- разработка дизайна сайта, т.е. стиля оформления страниц;
- подготовка материалов (текстов и графики) для размещения на веб-страницах;
- конструирование страниц сайта (создание HTML-кода);
- размещение в сети (публикация) и тестирование сайта.
Под стилем оформления веб-страницы понимают сочетание свойств элементов веб-страницы: стиля текста (совокупности параметров формата символов и абзацев) и стиля графических элементов (совокупности параметров формы).

УпражнениеРазработайте проект веб-сайта по одной из тем: Моя семья. Моя школа. Мои друзья. Мои любимые занятия. Моя Родина – Беларусь. Природа родного края. Интересные профессии. Технология разработки: При разработке проекта веб-сайта будем придерживаться этапов разработки веб-сайта.

Возьмём первую из предложенных тем: Моя семья.

Цель: рассказать о своей семье. Задачи: рассказать о каждом члене семьи (имя, возраст, род занятий, предпочтения).

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

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

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

Разработка проектов веб-сайтов по другим темам может производиться по схеме, указанной выше. § 2. Использование офисных приложений для создания веб-страниц 2.1 Создание веб-страниц в редакторе MS Word Коротко о главном:

Любой документ MS Office можно сохранить в виде веб-страницы. Для этого достаточно выполнить команду Файл – Сохранить как веб-страницу.
Для создания гиперссылки необходимо выполнить следующие действия:

выделить текст гиперссылки;
выполнить команду Встака – Гиперссылка, выбрать пункт Связать с файлом, веб-страницей, выделить имя файла, подтвердить выбор нажатием кнопки Ок.

УпражнениеСоздайте фрагмент сайта по одной из тем: Моя Родина – Беларусь. Моя школа. Мои друзья. Мои любимые занятия. Моя семья (пример главной страницы представлен на образце). В качестве гиперссылок используйте картинки из коллекции клипов.образец Технология создания:

Сохранить документ MS Office в виде веб-страницы:
1. выполнить команду Файл – Создать;
2. выбрать пункт Веб-страница;
3. выполнить команду Формат – Тема;
4. выбрать для оформления тему Пласты.
Внести текст и изображения как показано на рис. 2.1.1:

рис. 2.1.1

для вставки рисунков из коллекции клипов воспользоваться командой Вставка – Рисунок – Картинки;
форматировать размер рисунка командой Формат – Рисунок… — вкладка Размер (рис. 2.1.2).

рис. 2.1.2

Сохранить веб-страницу под именем family.mht.
Создать веб-страницы второго уровня mama.mht, papa.mht, iam.mht:
1. выполнить команду Файл – Создать;
2. выбрать пункт Веб-страница;
3. выполнить команду Формат – Тема;
4. выбрать для оформления тему Кипарис.
5. заполнить веб-страницу информацией (пример: рис. 2.1.3);

рис. 2.1.3

сохранить веб-страницу под именем mama.mht;
аналогично пп. 4а)-4f) создать веб-страницы papa.mht и iam.mht.

На главной веб-странице файла family.mht сделать гиперссылки на соответствующие веб-страницы:
1. выделить рисунок (текст) – Вставка – Гиперссылка …;
2. в поле Папка выбрать соответствующий файл (mama.mht);
3. при необходимости изменить текст подсказки или ввести текст;
4. Ок;
5. повторить действия, опираясь на пп.5а)-5d), для остальных гиперссылок.
Сохранить изменения на всех веб-страницах.
Презентации по темам, указанным в упражнении, выполнить аналогично пп. 1-6.

2.2 Сохранение презентаций PowerPoint в виде веб-страниц Коротко о главном:

Презентацию PowerPoint можно сохранить в виде веб-страницы выполнив следующие действия: выбрать меню Файл – выбрать пункт Сохранить как веб-страницу – в окне Сохранение документа выбрать тип сохраняемого файла Веб-страница (*.htm, *.html) – ввести имя файла – нажать кнопку Сохранить.
Параметры веб-страницы можно настраивать в окне Публикация веб-страницы по нажатию кнопки Опубликовать. В этом окне можно выбрать публикуемые объекты (Полная презентация или Слайды), поддержку браузеров, изменить заголовок таблицы.

УпражнениеСоздайте фрагмент сайта на основе готовой презентации:а) «Электрический ток»;б) «Пространственные фигуры»;в) «Животные родного края»;г) «Оптические приборы». Технология создания:

Открыть предложенный учителем файл с презентацией по одной из указанных тем.
Сохранить презентацию в виде веб-страницы: Файл — выбрать пункт Сохранить как веб-страницу – в окне Сохранение документа выбрать тип сохраняемого файла Веб-страница (*.htm, *.html) – ввести имя файла (или оставить прежнее) – нажать кнопку Сохранить.
Изменить настройки и параметры веб-документа во время сохранения презентации: нажать кнопку Опубликовать (рис. 2.2.1)

рис. 2.2.1

Настроить цветовые эффекты: в окне Публикация веб-страницы нажать кнопку Веб-параметры (рис 2.2.2) – вкладка Общие – выбрать цветовую схему Цвета презентации (рис. 2.2.3) – если а презентации есть гиперссылки, то снять флажок Добавить панель смены слайдов – Ок — Опубликовать.

рис. 2.2.2 рис 2.2.3

Просмотреть сохранённый фрагмент веб-сайта в браузере.

§ 3.Основы языка разметки HTML. 3.1 Создание HTML-документа в редакторе Блокнот Коротко о главном:

Абзац задаётся тегом . При просмотре в браузере абзацы отделяются друг от друга пустой строкой. Для принудительного перехода на новую строку без создания абзаца используется непарноый тег
.
Полужирное начертание символов задаётся тегом , курсивное начертание символов задаётся тегом i.

Цвет фона всей страницы задаётся атрибутом bgcolor, цвет текста – атрибутом text.

Для задания шрифта, цвета и размера символов используется тег . Шрифт задаётся арибутом face, значением которого является название шрифта, например Arial. Размер символов задаётся атрибутом size и может выражаться в условных единицах, которые могут принимать значения от 1 до 6. Цвет символов задаётся атрибутом color.

УпражнениеОткройте предложенный учителем текстовый документ в редактореБлокнот. Оформите и сохраните его в виде веб-страницы, изображённой на одном из рисунков. Для создания цвета фона воспользуйтесь Приложением 2.образец 1 Технология оформления:

Открыть предложенный учителем текстовый документ в редакторе Блокнот (рис. 3.1.1).

рис. 3.1.1

Добавить в документ (рис. 3.1.2):

теги для открытия и закрытия HTML-документа ( — );

теги для размещения неотображаемой на странице служебной информации ( — );

теги с текстом для информации, отображаемой в заголовке окна браузера ( Образец 1 );

теги для размещения информации, отображаемой в браузере ( —

Выбор стилистики сайта

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

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

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

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

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

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

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

– Готический или органический

Отличительная черта этого стиля – использование неправильных органических форм, разнообразных коллажей из предметов или фотографий, абстрактных элементов и вертикальной прокрутки.

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

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

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

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

– Футуристический стиль или хай-тек

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

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

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

Характеризуется хаотичным расположением объектов, использованием различных искажений, абстрактных элементов, случайным образом сгенерированных изображений, а также режущими слух звуками.

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

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

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

Оформление стилей веб-страниц

Стилистическое оформление всех страниц Web-сайта является одним из важных условий создания хорошего сайта. Казалось бы, что сделать это достаточно просто, стоит только установить одинаковые значения для всех визуальных свойств объектов. Но, если Web-страницы, входящие в проект, имеют достаточно большой объем, этот процесс может отнять много времени. Для автоматизации данного процесса можно использовать технологию каскадных таблиц стилей — CSS (Cascading Style Sheets).

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

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

Статья: Оформление стилей веб-страниц

Поможем написать реферат за 48 часов
Определение 1

Таблица стилей — это обычный текстовый файл, имеющий специализированный формат.

В спецификациях этот формат обозначается как text/ess. CSS-файл хранит правила отображения некоторых тегов. Запись такого правила выглядит следующим образом:

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

Правила CSS

Замечание 1

Любое правило CSS состоит из 2 частей. Первая часть содержит наименование тега, к которому будет применено указанное правило оформления. Это объявление в спецификации CSS называется selector. Иногда наименования тегов в стилевых таблицах называют селекторами.

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

«Оформление стилей веб-страниц» ��
Готовые курсовые работы и рефераты
Решение задач по учебе за 24 часа
Реферат по этой теме за 48 часов

В фигурных скобках могут быть записаны сразу несколько правил отображения содержимого. Но бывает и такое, что одновременно для нескольких тегов задаются одинаковые правила отображения. Можно не указывать одинаковые правила для каждого тега в отдельности, а объединить теги в одну группу и задать правила отображения для всех тегов одновременно. В этом случае наименования тегов будут разделяться запятой. Например: a, hi

Правило в приведенном примере указывает на то, что текстовое содержимое гиперссылок и заголовков 1 уровня отобразится темно-синим цветом.

Правила синтаксиса CSS содержат также правила оформления комментария. Комментарий в CSS создается в стиле языка С: начинается с символов наклонной черты и звездочки ($/*$), а завершается обратным сочетанием символов ($*/$). Например: $/*$ Это комментарий $*/$

Теперь разберемся с понятием каскадности таблиц данного типа.

Каскадный принцип построения таблиц

Компьютерная индустрия развивается очень быстро. И как следствие появляется много самых разнообразных тенденций и течений. Часть из которых не находит применения, а часть возводится в ранг идеологии. К категории последних можно отнести повторное применение кода и наследование ранее созданных решений. Все это относится и к CSS.

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

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

Познакомимся с этой концепцией на примере. Допустим, имеется 2 файла стилевых таблиц. В файле style_Les будут содержаться объявления правил отображения 2 элементов документа: list и item. Имеем программный код:

list item (color: blue; font-family: Arial>

Дополнительный файл style2.css будет содержать правила отображения для элементов item и part следующим образом:

При подключении к HTML-документу этих двух файлов получим, что элементу item будут соответствовать два различных правила отображения. Первый файл style_Les содержит указание на то, что текст элемента item должен отобразиться синим цветом, а второй файл содержит правило, указывающее на применение для отображения содержимого этого же элемента зеленого цвета. Какой цвет будет использован в действительности, будет зависеть от того, в каком порядке к XML-документу подключатся файлы стилевых таблиц.

Применяется всегда последнее правило. Если вначале подключить файл styleLes, а затем файл style2.css, то текстовое содержимое элемента item отобразится зеленым цветом.

Замечание 2

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

Например, при модификации кода файла styleLes получим совокупность правил отображения:

Теперь, при установленном ранее порядке подключения стилевых файлов styleLes и style2.css текстовое содержание элемента item отобразится исключительно синим цветом.

Замечание 3

Таким образом, при необходимости получения определенным правилом привилегии необходимо после него ставить символ «!» и записывать ключевое слово important после пробела.

Если несколько CSS-файлов для одного и того же элемента имеют модификатор important, то будет сформирована дополнительная иерархия из данных привилегированных правил, а для отображения будет использовано самое последнее подключенное правило.

Естественно для успешного применения стилевых таблиц нужно знать параметры изображений (их названия).

Возможности использования технологии CSS

Имеются 2 возможности использования данной технологии. При первой устанавливается значение атрибута style для тех тегов HTML-страниц, которые будут подвержены стилевой обработке. Вторая возможность предусматривает подключение внешнего файла, содержащего определение стилевой таблицы. Однако, ASP.NET не разрешает указывать подключаемую к странице стилевую таблицу в качестве свойства страницы. Будем создавать стилевую таблицу, содержащую правила отображения, ассоциированные не с наименованиями тегов, а с наименованиями классов-селекторов. Для всех визуальных компонентов Web; Forms предусмотрено свойство CssClass, в котором и будет указываться название класса-селектора.

Вначале создается CSS-файл. Чтобы включить в состав проекта внешний стилевой файл нужно выполнить команду Project — Add New Item (Проект — Добавить новый элемент). После завершения этой команды на экране отобразится диалоговое окно Add New Item (Добавить новый элемент). В группе Templates (Шаблоны) выберем элемент Style Sheet (Стиль). В результате в составе проекта появится дополнительный файл.

По умолчанию в создаваемой стилевой таблице появляется заготовка для определения стиля, предназначенная для тега , т. е. в данном правиле можно задать правила отображения, влияющие на весь документ.

Для добавления нового правила оформления в стилевую таблицу необходимо воспользоваться кнопкой Add Style Rule (Добавить правило оформления), находящейся на панели инструментов Style Sheet (Стиль). В результате чего активизируется диалоговое окно Add Style Rule (Добавить правило оформления) (рис.1).

Замечание 4

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

Заготовки создаются для всех классов, после чего для них создаются правила оформления. Для этого курсор устанавливается на том селекторе, на который накладываются условия оформления, и нажимается кнопка Build Style (Создать стиль), которая активизирует диалоговое окно интерактивного построителя стилей Style Builder (Построитель стилей).

С помощью данного окна задаются правила отображения для всех классов-селекторов в визуальном режиме. При этом разработчик может сам по желанию написать код правил CSS вручную. После создания CSS-файла подключаем его к Web-странице. Для этого переходим на разрабатываемую Web-страницу, к которой будет подключаться стилевая таблица, и выполняем команду Format — Document Styles (Формат — Стили документа), которая делает активным диалоговое окно Document Styles (Стили документа). В открывшемся окне нажимаем кнопку Add Style Link (Добавить ссылку на стилевую таблицу), привязывающую к Web-странице существующий стилевой файл. Для этого используется диалоговое окно Select Style Sheet (Выбор стилевой таблицы). Таким образом, стилевой файл привязали к данной Web-странице, в HTML-коде которой в разделе заголовка документа появляется строка:

Теперь остается только подключить созданную CSS-таблицу ко всем Web-страницам проекта, установив значения свойств cssciass для нужных компонентов, и стилевое оформление сайта выполнено.

Похожие публикации:

Css diner как играть

Как сохранить файл в dxf

Чем отличаются лоли от милф

Что такое цифровые камеры