Введение в web дизайн. Введение в дизайн web-страниц

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. Дронов Владимир

ГЛАВА 1 Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц

Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц

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

Современный Web-дизайн. Концепция Web 2.0

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

"Я буду везде", - заявляет Интернет. - "Я стану вездесущим. Все готовьтесь к моему приходу!"

Что требуется от современного Web-сайта

Будем готовиться… Но что нам, как будущим Web-дизайнерам, для этого следует сделать? Соблюсти три несложных правила.

1. Строго соблюдать все интернет-стандарты.

2. Тщательно продумать наполнение Web-страниц.

3. Позаботиться о доступности Web-страниц.

Рассмотрим их подробнее.

Интернет грозится прийти на самые разные устройства, которые могут быть основаны на разных аппаратных и программных платформах, зачастую сильно отличающихся друг от друга. Так, персональные компьютеры построены на аппаратной платформе Intel и программной платформе Microsoft Windows (по крайней мере, большинство). Мобильный телефон автора основан на аппаратно-программной платформе Samsung. А на чем будет работать интернет-пылесос, сейчас не может сказать никто.

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

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

Первое правило также требует отказа от устаревших и закрытых, фирменных интернет-технологий. С устаревшими технологиями все понятно: старье - не помощник новому. Закрытые же технологии неудобны тем, что зачастую контролируются единственной фирмой, которая единолично "заказывает музыку" и далеко не всегда прислушивается к мнению интернет-сообщества. К таким технологиям относятся, в частности, Adobe Flash и Microsoft ActiveX.

Открытыми интернет-стандартами, в том числе и Web-стандартами, занимается организация World Wide Web Consortium (Консорциум Всемирной паутины), или сокращенно W3C. Она разрабатывает стандарты, согласует их с требованиями участников рынка и публикует на своем Web-сайте http://www.w3.org . Все опубликованные там стандарты обязательны к применению.

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

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

Отсюда вытекает второе правило - Web-дизайнеры должны заботиться о полноте и удобстве наполнения Web-страниц.

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

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

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

Одним словом - все для удобства посетителя! (Пожалуй, это правило следовало бы поставить в начале списка…)

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

Вот и третье правило - Web-дизайнеры должны заботиться о доступности страниц.

Web-страницы следует делать как можно более компактными. Чем компактнее файл, тем быстрее он загружается по сети - это аксиома.

Web-страницы не должны быть чересчур сложными. Чем сложнее Web- страница, тем больше времени и системных ресурсов требует ее обработка и вы- вод.

Web-страницы не должны требовать для отображения никакого дополнительно- го программного обеспечения. В идеале для их вывода достаточно только Web- обозревателя.

Но как эти правила реализуются на практике? Давайте откроем какой-нибудь со- временный Web-сайт, например, принадлежащий организации W3C (рис. 1.1). Как мы помним, его можно найти по интернет-адресу http://www.w3.org .

Рис. 1.1. Главная Web-страница Web-сайта организации W3C

Рис. 1.1. Главная Web-страница Web-сайта организации W3C

Что же мы здесь видим?

Web-сайт создан с учетом всех современных интернет-стандартов. Он отображается во всех Web-обозревателях практически одинаково.

Web-сайт не использует ни устаревших, ни закрытых интернет-технологий.

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

Web-страница прекрасно читается. Тонкий шрифт без засечек, спокойная серо- голубая цветовая гамма, тонкие рамочки со скругленными углами, минимум графики - ничто не бросается в глаза.

Есть даже видеоролик!

Web-страница быстро загружается и мгновенно выводится на экран.

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

Именно такие Web-страницы мы и будем учиться создавать в данной книге.

Из книги Adobe InDesign CS3 автора Завгородний Владимир

Создание шаблонов страниц Прежде всего, нам потребуется выбрать (указать) формат страницы, создать новый документ и хотя бы предварительно оформить мастер-страницы.Предположим, что наша книга будет формата 60 ? 90/16. Как мы знаем из первой части книги, без консультации в

Из книги Microsoft Windows SharePoint Services 3.0. Русская версия. Главы 9-16 автора Лондер Ольга

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

Из книги Искусство оформления сайта. Практическое пособие автора Бердышев Сергей Николаевич

Глава 2. Веб-дизайн как технология

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

ГЛАВА 1 Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница - все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Из книги XSLT автора Хольцнер Стивен

Из книги Веб-Самоделкин. Как самому создать сайт быстро и профессионально автора Гладкий Алексей Анатольевич

ГЛАВА 16. Создание интерактивных Web-страниц В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?Этому будет целиком посвящена данная глава. Мы научимся создавать

Из книги Знакомьтесь, информационные технологии автора Воловник Аркадий Авральевич

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

Из книги Access 2002: Самоучитель автора Дубнов Павел Юрьевич

ГЛАВА 10. Контейнерный Web-дизайн В предыдущей главе мы рассматривали атрибуты стиля CSS, задающие параметры абзацев и отображения. Их было совсем немного, и глава получилась небольшой.Теперь мы займемся Web-дизайном. Согласитесь - наши Web-странички, несмотря на созданное

Из книги Цифровой журнал «Компьютерра» № 195 автора Журнал «Компьютерра»

ГЛАВА 16. Создание интерактивных Web-страниц В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?Этому будет целиком посвящена данная глава. Мы научимся

Из книги автора

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

Из книги автора

Создание номеров страниц: Встроенный форматирующий объект создает встроенную область, отображающую номер текущей страницы. Например: You are now reading page .С элементом можно применять следующие

Из книги автора

Создание, открытие и сохранение веб-страниц С помощью программы вы можете создавать новые веб-страницы, а также редактировать созданные ранее.Чтобы создать новую веб-страницу, нужно выполнить команду главного меню Файл?

Из книги автора

Глава 1 Современный мир. Эра информационных технологий Одним из парадоксов развития человечества является то, что на протяжении всего своего развития человек использовал, накапливал, передавал информацию, не понимая и даже не задумываясь о ней.Реальная цивилизация

Из книги автора

Глава 6 Создание страниц доступа к данным Страница доступа к данным – файл особого типа, предназначенный для просмотра и работы через Internet или intranet с данными, хранящимися в базах данных Microsoft Access или Microsoft SQL Server. Страница доступа к данным загружается в базу данных Access 2002

Введение

Первый в мире сайт info.cern.chпоявился в 1990 году, далее сайты развивались, и появилась необходимость оформления сайтов, с целью приятного визуального восприятия его пользователем.

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

web дизайн компьютерный графика

Понятие web-дизайна

Понятие web-дизайна

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

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

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

Фактически, собственно графика, внешний вид и оформление сайта не являются главным моментом и отправной точкой в проектировании Интернет-страницы.

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

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

Основные принципы web-дизайна

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

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Подобные документы

    Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.

    курсовая работа , добавлен 09.01.2014

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

    дипломная работа , добавлен 10.11.2015

    Подготовительный этап работы над корпоративным сайтом. Оценка его дизайна. Структура корпоративного сайта. Конвертирование посещений в сделку как задача целевой страницы. Преимущества и виды веб-сайтов. Основные правила, необходимые для PR-специалиста.

    курсовая работа , добавлен 08.10.2013

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

    курсовая работа , добавлен 13.01.2014

    Практическая значимость создания сайта. Язык программирования JavaScript. Основные области использования языка JavaScript при создании интерактивных HTML-страниц. Язык программирования PHP. Программная основа сайта. Создание оформления дизайна сайта.

    дипломная работа , добавлен 05.03.2013

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

    дипломная работа , добавлен 25.03.2013

    Особенности создания сайта интернет-магазина для частных лиц и организаций. Анализ финансовой и технико-экономической деятельности фирмы. Создание информационной модели сайта, ее базовые элементы. Выбор программного и аппаратного обеспечения сайта.

    дипломная работа , добавлен 08.12.2013

Интернет