Доклад на тему веб дизайн
Обновлено: 08.07.2024
Веб-дизайн является одним из основных элементов веб-разработки, веб-дизайнеры часть работы заключается в том, чтобы представить и создать/спроектировать веб-страницу с использованием изображений, форматирование HTML , стандартизация и удобство использования веб-страницы.
Веб-дизайн требует много различных навыков, стандартов и дисциплин, которые используются при создании и обслуживании веб-сайта.
Под термином "веб-дизайн" мы подразумеваем веб-и графический дизайн, дизайн интерфейса, авторство, стандартизированное кодирование, пользовательскую среду и поисковую оптимизацию.
В то время как некоторые люди охватывают все эти навыки самостоятельно, большинство людей обычно работают в командах для более быстрого производства и более профессионального подхода. Точнее говоря, слово web-design используется для описания лицевой части (видимой части) веб-сайта, в то время как веб-разработка заботится о функциональности и бэкэнде веб-сайта (кодирующей части).
История web и веб-дизайна
Хотя веб-дизайн является относительно новой отраслью бизнеса, он может быть связан с графическим дизайном. В 1989 году, работая в ЦЕРНе, Тим Бернерс Ли объявил о создании глобального гипертекстового транспортного протокола, который впоследствии получил более популярное название World Wide Web (W3, WWW), а в период с 1991 по 1993 год была создана Всемирная паутина.
Марк Андреессен и Эрик Бина создали Mozaic browser еще в 1993 году. В то время было много различных браузеров, и большинство из них были сделаны для платформы Unix, а веб-страницы были очень насыщены текстом. Не было никакой поддержки для графических элементов, таких как изображения или звуки, и мозаика была сделана, чтобы преодолеть это.
W3C была основана в октябре 1994 года, поэтому она могла бы "привести WWW к полному раскрытию своего потенциала путем разработки собранных протоколов и обеспечить его совместимость".
Это отбило у компаний охоту брать монополию на языки программирования и браузеры. В 1994 году Андреессен основал компанию "Netscape Communications", которая делала свои собственные HTML-теги без традиционного процесса стандартизации. Например, в Netscape 1.1 были команды для изменения цвета фона и форматирования текста в диаграммах.
В 1996-1999 годах начались первые браузерные войны. Две ведущие компании, Microsoft и Netscape, боролись за самый популярный браузер на рынке. В этот период появилось много новых технологий в этой области, особенно с CSS, jаvascript и динамическим HTML.
Эволюция веб-дизайна
1996 год. Microsoft анонсировала свой первый конкурентоспособный браузер, который имел свои собственные характеристики и теги. Это был также первый браузер, который поддерживал список различных CSS.
Теги диаграмм сначала использовались для отображения диаграмм и данных, но вскоре дизайнеры выяснили потенциал использования HTML-диаграмм для создания сложных мультиколонов и формаций, которые до тех пор были невозможны. В то время наибольшее внимание уделялось веб-дизайну и эстетике, и очень мало внимания уделялось семантике и веб-доступности.
HTML-сайты уже были ограничены в своих дизайнерских возможностях, и даже больше с предыдущими версиями HTML. Для создания сложных проектов веб-дизайнерам приходилось использовать сложные структуры диаграмм и даже использовать пустое GIF-изображение, чтобы оставить пустое пространство в ячейках диаграммы.
Официальные правила CSS были приняты в декабре 1996 года. И это позволяет HTML-коду быть более семантическим, чем презентация, и таким образом улучшить доступность веб-страниц. В этот период была разработана Flash (ранее известная как Futuresplash). Вначале это был простой инструмент поиска, и он позволял веб-дизайнерам выходить за рамки стандартного HTML-кода в тот момент.
Инструменты и технологии
Веб-дизайнеры используют различный набор инструментов в зависимости от процессов, в которых они участвуют. Этот инструмент был обновлен временем для поддержки новых стандартов и версий программного обеспечения, но принципы остались.
Веб-и графические дизайнеры используют векторную и растровую графику для создания изображений для веб-дизайна или прототипа. Технологии для создания веб-сайта, которые используются сегодня, включают стандартизированные теги, которые могут быть написаны вручную или программным обеспечением WYSIWYG.
Типография сайта
Успешный сайт имеет только несколько типографий, шрифты которых похожи, вместо того, чтобы использовать много разных шрифтов. Рекомендуется использовать шрифты Sans Serif или Serif, но не оба сразу.
Типография веб-сайта также должна быть тщательно организована. Большинство браузеров распознают и поддерживают ряд шрифтов по умолчанию, и дизайнеры любят использовать их, чтобы избежать проблем. Большинство частей на веб-сайте содержит разделители с целью разделить текст на абзацы, а также оставить более удобный для пользователя веб-сайт.
Внешность сайта
Веб-сайты должны быть правильно организованы, чтобы улучшить удобство использования для посетителей. Одним из решающих факторов в веб-дизайне является наличие веб-сайта, поскольку он упорядочивает внутренние элементы веб-страницы. Большинство веб-сайтов имеют ширину 1024 пикселя, с текстом и изображениями в центре, поэтому он будет лучше отображаться на больших экранах.
Fluid arrangements были разработаны около 2000 года, как замена HTML-диаграмм, с намерением отказаться от традиционного дизайна сетки. Обычно предполагалось, что у читателей будет установлена ОС Windows с разными разрешениями экрана, и веб-дизайнер ничего не сможет с этим поделать.
Итак, дизайн должен быть разделен на блоки (боковая панель, блоки в контенте, рекламные блоки, области навигации и т. д.), которые были отправлены в браузер, а затем встроены в экран пользователя браузера, потому что браузер знает подробности о размере и разрешении экрана пользователей, размере окна, шрифтах и т. д.,
Поэтому браузер будет делать лучшую работу, чем веб-дизайнеры, даже несмотря на то, что такие настройки часто меняют позиции основных блоков контента, все равно гораздо лучше размещать объекты ниже тела текста, а затем размещать его сбоку. Таким образом, удобство использования намного лучше, особенно если избегать горизонтальной прокрутки.
Адаптивный веб-дизайн-это новый подход, основанный на стандартах CSS3, и он имеет более глубокий уровень спецификаций по элементам вне каскадного стиля веб-страницы, с лучшим использованием ПСЕВДО СЕЛЕКТОРОВ CSS media
Качество кода имеет значение
При создании веб-сайта лучше всего было бы приспособиться к стандартам. Это включает в себя ошибки кодирования и предположение, что идентификаторы и классы будут распознавать друг друга надлежащим образом.
Обычно это делается с помощью описания функции элемента. Создание веб-сайта, а не соблюдение стандартов, может быть действительно плохой идеей, потому что это может сделать ваш сайт непригодным для использования.
Стандарты существуют из-за правильного расписания веб-страниц, дизайна и обеспечения того, чтобы кодированные элементы были закрыты надлежащим образом. Проверка с помощью валидатора V3C может быть выполнена только после завершения правильного объявления веб-страницы (DOCTYPE), которое используется для поиска ошибок кодирования в определенных строках кода.
Система определяет ошибки и области, которые не соответствуют стандартам веб-дизайна, и эта информация может быть изменена позже.')
Визуальная идентичность и дизайн
Внешний вид веб-сайта должен быть адаптирован к планируемой целевой группе. Это может быть возрастная группа или особый взгляд на культуру, которую дизайнер должен понимать, чтобы он мог визуально отразить это.
Более опытные пользователи обычно имеют лучшее представление о функциональности веб-сайта, и если они найдут ваш веб-сайт полезным, они вернутся. Менее опытные пользователи не будут часто видеть преимущества или недостатки.
Веб-дизайнер должен быть сосредоточен на хорошем дизайне и на том, что как опытный, так и неопытный пользователь найдет нужную ему информацию.
1. Определение веб-дизайна
Прочитав множество определений веб-дизайна, я остановилась на следующем. Веб-дизайн — это процесс производства веб-сайтов, который включает техническую разработку, структурирование информации, визуальный (графический) дизайн и доставку по сети.
2. Этапы веб-дизайна
Давайте рассмотрим подробнее из каких этапов состоит процесс создания веб-сайта. Детальное понимание процесса создания сайта даст нам возможность определить кто чем занимается на каждом этапе и кого исходя из этого называть веб-дизайнером.
1. Техническое задание (ТЗ)
Исходя из четкого понимания цели, для которой создается сайт, объемов сайта, его функциональности задаются основные параметры визуального представления и структуры сайта. Этап заканчивается после утверждения технического задания заказчиком. Занимается менеджер проекта.
2. Структурирование информации (юзабилити)
Сюда входят форма и организация содержимого сайта. Включает широкий ряд вопросов от продумывания логической структуры веб страниц до выбора наиболее удобных форм подачи информации. Занимается дизайнер, менеджер проекта.
3. Графическое оформление
В графическом редакторе компануется визуальное пространства сайта с помощью графических элементов в качестве украшения или навигации. Собственно дизайн страницы представляет собой графический файл. Выполняется дизайнером.
4. Верстка
На этой стадии графическая картинка нарезается на отдельные элементы и с использованием технологий HTML и CSS трансформируется в код, который можно просматривать с помощью браузера. Выполняется кодером, программистом.
5. Вебмастеринг
На этой стадии осуществляются действия, способствующие распространению и эффективной доставки сайта по сети. Включает размещение на хостинге и поисковую оптимизацию. Выполняется админом, вебмастером.
3. Кто такой веб-дизайнер
Веб-дизайнер — это тот, кто самостоятельно осуществляет запуск сайта и выполняет все этапы создания сайта своими силами. При этом следует понимать, что веб-дизайнер может делегировать сторонним лицам выполнение некоторых этапов, но при этом сам контролирует весь процесс. Да и сам веб-дизайнер должен быть специалистом широкого профиля и разбираться во всех аспектах веб-дизайна.
Итак, мы видим существенную разницу между понятием дизайнер и веб-дизайнер. Дизайнер — это тот, кто разрабатывает юзабилити и графическую составляющую сайта. Я думаю, что у нас эти два понятия слились по причине отсутствия узкой специализации исполнителей. И в основном делается акцент именно на создание графической составляющей сайта, хотя это далеко не все.
4. Элементы веб-дизайна
Элементы веб-дизайна — это те абстрактные материалы, с которыми приходится работать дизайнеру. К основным элементам дизайна относятся: пространство, линия, фигура, цвет, текстура, шрифт, форма, светотень, размер. Именно из них, как из кирпичиков, строится вся композиция дизайна.
Чтобы правильно ими пользоваться, надо знать их характерные свойства, сильные и слабые стороны, поведение в разных ситуациях. Более подробно об элементах дизайна можно прочитать в статье «Основные элементы дизайна, участвующие в создании композиции«, где каждый элемент рассмотрен отдельно.
5. Принципы веб-дизайна
Но чтобы научиться строить здания, недостаточно знать свойства кирпичей. Именно принципы веб-дизайна определяют правила взаимодействия всех элементов. К основным принципам веб-дизайна относятся: баланс, контраст, подчиненность, направление внимания, пропорции, масштаб, ритм, единство.
Фундаментальные принципы дизайна определяют что хорошо и что плохо среди бесчисленного множества сочетаний элементов. Более подробно о принципах дизайна можно прочитать в статье «Основные принципы создания гармоничной композиции в дизайне«, где каждый принцип рассмотрен отдельно.
6. Как научиться веб-дизайну
Меня часто спрашивают, что надо сделать, чтобы научиться веб-дизайну и можно ли научиться дизайнить уже в зрелом возрасте. Во-первых, научиться веб-дизайну можно абсолютно в любом возрасте. Здесь главное не возраст, а наличие желания и терпения учиться. А во-вторых, процесс обучения веб-дизайну практически ничем не отличается от других процессов обучения.
Но основное в процессе обучения веб-дизайну — это практика. Начинать надо с самых несложных уроков для новичков. Нужны именно простые уроки, потому что когда получается — это дает сильный стимул двигаться дальше. Тренируясь на уроках приобретаются необходимые навыки, которые в дальнейшем необходимо развивать.
Попутно очень полезно смотреть на лучшие образцы дизайнерского творчества. Потом можно попробовать сделать что-то аналогичное своими силами. И всегда надо верить, что у вас все получится! Более подробно своим дизайнерским опытом я поделилась в статье «33 совета начинающим дизайнерам или как не совершать ненужных ошибок«.
- Для учеников 1-11 классов и дошкольников
- Бесплатные сертификаты учителям и участникам
госудаственное бюджетное профессиональное образовательное учреждение
Выполнила: Анохина Д.С.
Проверила: Мамедова С.А.
2. Создание сайта
3. Веб-дизайн; Веб-верстка; Веб-программирование
4. Структура сайтов
Создание сайтов
1 Способ. Заказываем сайт в веб-студии
Первый способ наилучшим образом подходит занятым и вполне обеспеченным лицам. В любом случае, этот вариант предостережет заказчика от ненужных экспериментов при разработке ресурса.
2 Способ. Используем систему управления сайтом (CMS)
При использовании CMS необходимо самому зарегистрировать доменное имя, определиться с хостингом, пройти регистрацию в поисковых системах, каталогах. Необходимы знания по CSS и HTML.
3. Способ. Создаем сайт с нуля
Веб-дизайн; Веб-верстка; Веб-программирование
1 Разработка дизайна
Веб-дизайнеры разрабатывают макеты шаблонов страниц. Дизайнер определяет, каким образом конечный потребитель будет получать доступ к информации и услугам сайта - то есть, занимается непосредственно разработкой пользовательского интерфейса. В большинстве случаев страницы включают в себя графические элементы. Их подготовкой занимаются художники иллюстраторы, фотографы, технические дизайнеры, шрифтовики, и т. д. Готовые шаблоны показываются заказчику. В этот момент страницы ещё не могут содержать конечного наполнения (это в обязанности дизайнера не входит). Чтобы макеты выглядели более наглядно, в них помещается произвольное содержимое. На сленге дизайнеров такое содержимое называется рыбой. Если заказчик удовлетворён внешним видом шаблонов, то наступает следующая фаза разработки - вёрстка страниц сайта.
Верстальщик получает макеты шаблонов в виде простых изображений (например, в формате JPEG или PNG), либо разбитых по слоям (например, в PSD или AI). Его задача - получить из этих графических макетов гипертекстовые веб-страницы с подготовленными для интернета изображениями. Одним из сложных моментов в работе верстальщика является обеспечение совместимости со множеством браузеров - программами для просмотра веб-страниц (так называемая кроссбраузерность). Браузеры могут одни и те же элементы разметки или правила CSS интерпретировать по-своему, в результате чего некоторые пользователи могут увидеть содержимое не так, как задумывал дизайнер и ожидает увидеть заказчик. Когда верстальщик убедится, что большинство браузеров одинаково отображают готовые шаблоны, наступает следующая фаза разработки - веб-программирование.
К программистам поступают готовые шаблоны страниц и указания дизайнеров по работе и организации элементов сайта. Программист создаёт программную основу сайта, делая её с нуля, используя фреймворк или CMS. Выбор языка программирования в данном случае - вопрос непринципиальный.После того, как сайт готов к эксплуатации, наступает следующая фаза - наполнение сайта информацией.
Структура сайтов
World Wide Web (WWW)– это большая компьютерная сеть, которая содержит огромное количество сайтов, на которых размещена всевозможная информация. Доступ к этой информации люди получают за счет технологии Internet. В наше время Интернет стал неотъемлемой частью жизни всего человечества. Доступ к нему имеют миллионы людей по всей планете.
Содержание
Введение 3
1. Web-дизайн 5
2. Выбор структуры Web-страницы 6
2.1. Создание фиксированных и гибких Web-страниц 6
2.2. Разработка комбинированных Web-страниц 7
2.3. Язык HTML 8
2.4 Тэги HTML 8
2.5. Структура HTML документа 10
3. Основные правила создания сайта 15
3.1 Правила Web-дизайна 15
3.2 Что такое стиль? 15
3.3 Цветовые ассоциативные и эмоциональные модели 17
3.4 Браузеры 17
4. Инструменты для создания сайта. 20
5. Заключение 22
6. Список литературы 23
Работа содержит 1 файл
Web дизайн.doc
Комитет по связи и информатизации
Государственное образовательное учреждение высшего профессионального образования
Сибирский государственный университет телекоммуникаций и информатики
Реферат по основам телекоммуникаций:
Выполнил: Поляков А.А.
Проверил: Катунин Г.П.
Новосибирск, 2009 г.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.
Пользователю приятно посещать те Web-страницы, которые быстро загружаются и правильно отображаются в окне Web-браузера, имеют стильное оформление, не отягощены чрезмерно графикой и анимацией.
Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера и создать свой сайт. Следовательно, целью работы станет изучение процесса Web-дизайна.
Для достижения цели передо мной были поставлены следующие задачи:
- Изучить специализированную литературу
- Определить круг важнейших умений и навыков для создания Web-страницы
- Выделить основные правила создания сайтов
- Рассмотреть основы языка программирования Web-страниц – HTML
- Проанализировать некоторые программы для создания Web-страниц
Главными программами по сайто-строению являются HomeSite и DreamWeaver, с их помощью можно создавать сайты любой сложности.
И так что же такое Web-дизайн? Web-дизайн (от англ. Web design) — отрасль Web-разработки и разновидность дизайна , в задачи которой входит проектирование пользовательских Web-интерфейсов для сайтов или Web-приложений . Web-дизайнеры проектируют логическую структуру Web-страниц, продумывают наиболее удобные решения подачи информации, а так же занимаются художественным оформлением Web-проекта. В результате пересечения двух отраслей человеческой деятельности грамотный Web-дизайнер должен быть знаком с последними Web-технологиями и обладать соответствующими художественными качествами.
Web-дизайнер — сравнительно молодая профессия , и профессиональное образование в области Web-дизайна в России пока не распространено. В связи с увеличением спроса на услуги в сфере Интернет , растет и спрос на дизайн сайтов , увеличивается количество Web-дизайнеров и таковым может работать человек, совершенно не связанный с дизайнерским образованием.
2.1. Создание фиксированных и гибких Web-страниц
С особенностями разрешения дисплея связан вопрос выбора между изменяющимися страницами (изменяется размер и осуществляется настройка под разные размеры окон) и фиксированными по размеру (что позволяет разработчику лучше управлять размерами страницы). В пользу каждого из подходов есть веские аргументы. Естественно, можно найти хорошие доводы за и против каждого из них.
Разработка гибких страниц. Web-страницы по умолчанию гибкие. Текст и элементы HTML-файла попадают в окно браузера, заполняя все доступное пространство, вне зависимости от размеров дисплея. Если размер окна браузера изменяется, элементы повторно выводятся, чтобы настроиться на новые размеры. В этом и проявляется сущность Web. Многие дизайнеры сознательно разрабатывают страницы таким образом, чтобы они выдерживали расширения и сжатия Web-окна. Этот подход имеет свои достоинства и недостатки.
– реальность такова, что Web-страницы будут отображаться на дисплеях с разным разрешением; гибкую страницу можно настроить для вывода на любом дисплее;
– заполнено все пространство дисплея, отсутствует нежелательное свободное место, наличие которого часто планируется разработчиками страниц с фиксированными размерами;
– на больших дисплеях длина строки может оказаться чрезмерной, когда текст заполняет всю ширину окна браузера. Длинные строки особенно неудобны для чтения с экрана, поэтому, при заполнении текстом всей ширины окна или фрейма, значительно ухудшаются условия чтения многим пользователям;
– на больших дисплеях элементы будут расположены на экране достаточно гармонично, на маленьких дисплеях они оказываются скученными;
– результаты гибкого дизайна непредсказуемы, и страница у разных пользователей будет выглядеть по-разному.
Разработка страниц фиксированного размера. Тем, кто хочет иметь больший контроль над разметкой страницы, следует разрабатывать страницы фиксированной ширины, которая будет постоянной для всех пользователей, независимо от размера дисплея или изменений размеров окна. Этот подход основан на принципах создания страниц в издательском деле, таких как поддержание постоянной сетки, отношений элементов, расположенных на странице, и удобные длины строк.
– страница будет выглядеть одинаково независимо от размеров дисплея. Это особенно важно для компаний, стремящихся представить свой имидж одинаково для всех посетителей;
– страницы и столбцы с фиксированной шириной обеспечивают лучшее управление длинами строк. Чтобы строки не становились слишком длинными при просмотре на больших дисплеях, можно использовать таблицы.
– если размер данного окна браузера меньше сетки страницы, части страницы не будут видны и может потребоваться горизонтальная прокрутка. Она почти всегда воспринимается как помеха, усложняющая работу, поэтому в большинстве случаев ее надо избегать. Одно из решений – выбрать размер страницы, который подойдет большинству;
– сложно контролировать размер выводимых символов в браузерах, так что элементы могут непредсказуемо смещаться в результате использования большего или меньшего размера, по сравнению с тем, который использовался при разработке;
– стремление полностью контролировать отображение страницы означает своего рода выступление против среды. Web – это не печатное издание, у него свои сильные стороны и особенности. Защитники стратегии гибкого дизайна скажут, что фиксированному дизайну нет места в Web.
2.2. Разработка комбинированных Web-страниц
Конечно, не обязательно, чтобы Web-страницы были полностью фиксированными или гибкими. Можно разработать страницу, объединяющую оба подхода.
Один общеизвестный метод заключается в том, что создается разметка фиксированной страницы с использованием таблиц, а затем производится ее центрирование на странице таким образом, чтобы при выводе на большие дисплеи она выглядела более сбалансированной (избегая эффекта пустого экрана с правой стороны). При использовании этого метода невозможно точно расположить таблицу относительно фонового изображения.
Другой подход заключается в использовании таблиц или групп фреймов, которые состоят из столбцов (или фреймов), заданных комбинациями абсолютных и относительных размеров 4 . В этом случае при изменении размера окна один столбец или фрейм сохраняет прежнюю ширину, в то время как остальные изменяют размер и заполняют свободное место.
Таким образом, пользователь сам должен сделать выбор при создании того или иного типа веб-страниц.
2.3. Язык HTML
Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта.
Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах.
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем.
Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.
HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.
2.4 Тэги HTML
Документ HTML содержит текст (содержимое страницы) и встроенные теги – инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок – head и тело – body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержим документа (то, что выводится в окне браузера).
Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок . Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег будет работать так же, как . Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL. 5
Читайте также: