|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Описание содержания страницыСтр 1 из 4Следующая ⇒
Элементы web-страницы. 1. Заголовок web-страницы 2. Рекламный баннер. 3. Логотип компании-владельца данного сайта или ссылку на сервер, осуществляющий web-хостинг. 4. Основную часть документа занимает так называемое текстовое поле – участок где размещается смысловое наполнение страницы: содержательный информационныи текст и иллюстрации. Перечисленные элементы еще называют «контент» (content – содержание). 5. Элементы навигации – гиперссылки, связывающие данный документ с другими разделами сайта. 6. В нижней части документа принято публиковать информацию о разработчиках сайта и адрес электронной почты. 7. Если Web-страница является стартовым документом, в нижней ее части также размещают счетчик посещений. Что такое дизайн? Основные постулаты WEB -дизайна: 1. Сайт должен корректно отображаться при различных экранных разрешениях. 2. Web-страница должна идентично отображаться в различных браузерах. 3. Все страницы web-сайта должны быть минимальными по объему. 4. Web-страница должна обязательно включать навигационные элементы, охватывающие все разделы сайта, причем эти элементы должны всегда быть на виду. 5. Весь проект должен быть выдержан в одном дизайнерском стиле. 6. На одной web-странице не должно быть более трех различных шрифтов. 7. Необходимо использовать только корректные цветовые схемы.
Как образуются цвет на экране монитора Красный, зеленый, синий – основные. Сложение 2-х основных цветов дает три дополнительных цвета: Красный + Зеленый = Желтый , Синий +Зеленый = Голубой, Красный + Синий = Пурпурный. Для того что бы понять основы работы с цветом удобно использовать цветовой круг полученный из трех основных цветов и трех дополнительных: Основные принципы цветового круга:
Гармоничные цветовые сочетания
Помимо, этого способа, если нет под рукой интернета, можно подобрать контрастные цвета, элементарно инвертировав цвет, любого растрового элемента, командой Ctrl+i или простейшим математическим действием, зная что самый насыщенный цвет это 255, то если наш цвет r=102 g=51 b=51, наиболее контрастный цвет по отношению к нему будет r=255-102=153 g=255-51=204 b=255-21=204. Имеет еще большую популярность выбор цветов, в палитре Photoshopв режиме O nly W eb C olor. Если его установить, то цветовое поле будет отображать цвета, cовместимые с Web.
Рекомендации по работе с цветом · Как правило, мелкие детали (пиктограммки, стрелочки, иконки) необходимо делать более насыщенных цветов, и наоборот чем объект больше, тем меньше он требует насыщения цветом. · Старайтесь не использовать яркие, кислотные цвета, их обилие утомляет. · При выборе цвета всегда отталкивайтесь от задач, которые стоят перед сайтом. Форма – это наиболее важная часть большинства объектов. Мы можем опустить информацию о цвете, текстуре, размере, но помнить о форме придется всегда. Наиболее часто в веб-дизайне используются простые формы: 1) Линия (разделяет или соединяет); 2) Прямоугольник – самая распространенная и очевидная фигура в веб-дизайне. Самое главное при работе с прямоугольниками — правильно подобрать пропорции. 3) Треугольник Этой фигурой можно достичь двух эффектов: 1. Треугольник повернутый основанием вниз создает иллюзию устойчивости. 2. Указание направления.
4) Круг Так же, как и треугольник, хорош в маленьких форматах (иконки). Типографика Старайтесь использовать не более трех шрифтов в оформлении сайта. Базовый шрифт – основной шрифт материалов сайта. Базовый шрифт должен быть читабельным. Используйте простые шрифты без засечек. Контрастность. Самый сильный контраст для текста это черный текст на белом фоне. Разделяйте большие блоки текста на абзацы, это в разы упростит восприятие. Рекомендуемый размер базового шрифта 11-14pt. Акцидентный – шрифт для заголовков. В некоторых случаях используются дополнительные шрифты для: • Логотипа меню и навигации; • блоков выделения (важной информации, цитат, выносок); • для мелкого текста, с целью повысить читабельность.
Безопасные шрифты • Verdana • Arial • Tahoma • Myriad Pro • Century Gothic
Тег – это команда html, указывающая интерпретатору браузера, каким образом он должен обрабатывать значение, соответствующее каждой конкретной директиве. Это значение называется атрибутом тега. Тег может иметь атрибут или не иметь его. Тег верхнего уровня <HTML> не имеет атрибутов. Синтаксис записи тега в совокупности с его атрибутом: <ТЕГ имя_атрибута_1=”значение” … имя_атрибута_n=”значение”> Каждый тег начинается с символа < и заканчивается символом >, например: <p>. Все теги можно разделить на парные и одиночные. Каждый парный тег состоит из двух частей: открывающего тега и закрывающего. Внутри закрывающего тега используется символ /. Вот пример парного тега: <p>Абзац</p>Как вы видите, у тега <p> есть пара в виде закрывающего тега </p>. Теги, которые добавляют на страницу одиночный объект, и не заключающие в себе какой-то текст, одиночными. Примеры таких тегов: <br>, <hr>, <img>. Раньше одиночные теги писались с закрывающим слешом перед закрывающей скобкой. Например: <br/>. Структура HTML документа <HTML> <HEAD> Заголовок документа <TITLE>Внешний заголовок </TITLE> </HEAD> <BODY> Тело документа, содержащее основной код </BODY> </HTML>
Комментарии. Формат комментария: <!-- текст комментария -->
Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу. Например, для старой версии HTML 4.01 доктайп выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">А для последней версии HTML уже намного проще: Тег <html> — это контейнер, в котором находится всё содержимое страницы, включая теги<head> и <body>. Как правило, тег <html> идёт в документе вторым после доктайпа. Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую. Тег <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.
Заголовок страницы — это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках. Чтобы задать заголовок страницы, нужно использовать тег <title> внутри тега <head>.
Кодировка HTML-страницы Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега <head>использовать тег: <meta charset="имя кодировки">Самая распространённая современная кодировка — utf-8. Для кириллицы в Windows charset часто задавали как windows-1251. Но сейчас это считается плохой практикой. Ключевые слова Мета-теги хранят полезную для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы. <meta name="keywords" content="разные, ключевые, слова">В атрибуте content через запятую перечисляются самые важные слова из содержания страницы Цветовые спецификации Определить цвет при создании web-страницы можно двумя методами: посредством задания специальных цветовых меток, обозначающий названия цветов словами, или с помощью шестнадцатеричного цифрового кода, заменяющего эти метки (перед ним ставится #).
Escape -последовательности.
Абзацы Рассмотрим теги для логической разметки текста. Использовать их можно только внутри тега <body>. Начнём с простейшего тега <p>, с помощью которого создаются абзацы. Формат записи: <P align=аргумент> Текст, заключенный в абзац </P> Аргументы ALIGN: right – выравнивание текста по правому краю; left – выравнивание текста по левому краю; center – выравнивание текста по центру; justify – выравнивание текста по ширине.
Заголовки и подзаголовки В языке HTML для выделения заголовков предусмотрено целое семейство тегов: от <h1> до<h6>. Тег <h1> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6>обозначает подзаголовок самого нижнего уровня. Формат записи: <Нn аlign="параметр"> Текст заголовка </Нn> Атрибут align дает возможность web-мастеру определить расположение заголовка в окне браузера. Параметр этого атрибута может принимать одно из трех возможных значений: right – позиционирование заголовка по правой границе документа; left – позиционирование заголовка по левой границе документа; center – позиционирование заголовка по центру документа. Шрифты. Элемент <FONT> определяет свойства шрифта. Синтаксис записи тега <FONT>: <FONT face=”значение1” size=”значение2” color=”значение3”> текст </FONT> Значением атрибута face является название шрифта, который используется для отображения текста, заключенного в теги <FONT> </FONT>. <FONT face=” Courier New, Arial”> Атрибут size указывает на размер шрифта. Параметр этого атрибута может быть описан либо абсолютной, либо относительной величиной. По умолчанию 12pt. <FONT size="+1"> Атрибут color определяет цвет шрифта.
<FONT face=”Arial" size="+2" color="#OOOOFF"> отрывок текста </FONT>. В HTML 5 этот тег отсутствует. Важность. Теги strong и b Тег <strong> определяет важность отмеченного текста. Тег <b> предназначен для выделения текста без придания ему особой важности. Визуально оба тега одинаковы, они выделяют текст полужирным. Цитаты В HTML существует несколько тегов для обозначения цитат: · <blockquote> предназначен для выделения длинных цитат. · <q> предназначен для выделения коротких цитат в тексте предложения. Текст внутри этого тега автоматически обрамляется кавычками. · <cite> используется для того, чтобы выделить источник цитаты, название произведения, но не автора цитаты.
Верхние и нижние индексы Тег <sup> отображает текст в виде верхнего индекса. Тег <sub> отображает текст в виде нижнего индекса.
Просто выделенный текст Иногда при работе с объёмными текстами мы используем маркер, чтобы выделять ключевые слова, идеи или что-то другое на что стоит обратить внимание. Такое же назначение и у тега<mark>. В современных браузерах текст внутри <mark> подсвечивается жёлтым фоном. Преформатированный текст Тег <pre> обозначает «предварительно отформатированный текст». Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre>.
Цвет текста. Для определения цвета шрифта можно пользоваться одним способов: · назначить цвет символов всего документа с помощью атрибута text тега <BODY> <BODY text=”green”> · для текстовых фрагментов цвет задается с помощью атрибута color в тегах <FONT>, при этом такое задание цвета отменяет действие атрибута text тега <BODY> <FONT color=”red”> Атрибуты тега <BODY>. Общий формат записи тега <BODY> со всеми допустимыми атрибутами имеет вид: <BODY background=”URL” bgcolor=”значение1” text=”значение2” link=”значение3” vlink=”значение4” alink=”значение5”> тело документа HTML </BODY> Атрибут background позволяет поместить на web-страницу фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. Атрибут text позволяет задать цвет текста для всего документа в целом. Однако он может быть изменен в определенном участке текста путем использования команды <FONT> с атрибутом color. Атрибут bgcolor используется для задания фонового цвета всему документу. Атрибуты bgcolor и background не исключают друг друга, однако у последнего имеется приоритет. Атрибут link задает цвет, которым отображается непосещенная гиперссылка(По умолчанию "blue" (#0000FF)). Атрибут vlink указывает на цвет посещенной ссылки, значение которой по умолчанию – "purple" (#800080). Атрибут alink определяет цвет гиперссылки в момент нажатия. По умолчанию данный атрибут также имеет значение "purple". Пример использования тега <BODY> со всеми допустимыми атрибутами: <BODY background=http://www.myserver.com/1mages/back.jpg bgcolor="#000000" text="#FFFFFF" link="#008000" vlink="#800080" alink="#FF0000"> Тело документа HTML </BODY>
Списки Многоуровневый список Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.
Списки определений. Эти списки представляют собой списки терминов вместе с их определениями, то есть они напоминают толковый словарь. Формат записи списка: <DL> <DT> Тег, задающий определяемый термин </DT> <DD>Тег, задающий определение термина</DD> <DD> Тег, задающий определение термина </DD> <DТ> Тег задающий определяемый термин </DT> <DD> Тег, задающий определение термина </DD> <DD> Тег, задающий определение термина </DD> </DL>
Что такое ссылка? Ссылки создаются с помощью тега <a>. Например, вот так: <a href="http://www.gsu.by/">Универ</a>Формат записи тега: <А href="URL" target=”параметр” title=”альтернативный текст"> Текст гиперссылки </А> Атрибут href указывает на адрес страницы, с которой нужно установить гиперсвязь. Атрибут target содержит правила открытия целевого документа в браузере. Значения атрибута target: _self - в текущем окне браузера; _blank - в новом окне; _parent загружает страницу во фрейм-родитель, если фреймов нет – в текущее окно; _top отменяет все фреймы и загружает страницу в полном окне, если фреймов нет – в текущем окне. Атрибут title предназначен для создания альтернативного текста – всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит курсор мыши над гиперссылкой на несколько секунд. Абсолютные адреса Абсолютные адреса содержат в себе протокол, имя сервера и путь. Например, в адресе https://vk.com/id1234567: https:// — это протоколvk.com — имя сервера, также называется домен или хост/id1234567 — путьИногда абсолютные адреса записываются в укороченном виде, например вот так: /id1234567. Используйте укороченные абсолютные адреса при задании ссылок внутри своего сайта, так как в случае изменения домена сайта вам не придётся ничего менять. Относительные адреса В относительных адресах нет ни протокола, ни имени сервера, а путь не начинается со слэша /. Использовать относительные адреса для навигации по сайту не рекомендуется. Однако, относительные адреса бывают полезны, например, во внешних CSS-файлах. Ссылка на файл <А href="http://www.myserver.com/files/archive.zip"> Teкст гиперссылки </А> Рассмотрим пример ссылки на изображение
Ссылка с якорем Ссылка с якорем содержит символ #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега. Можно задать адрес, состоящий из одного якоря, например: <a href="#glava1">Глава 1</a>
После нажатия на ссылку «Структура URL»
Всплывающая подсказка Для того, чтобы добавить ссылке всплывающую подсказку, надо использовать атрибут title. Например: <a title="Подсказка" href="#">
Изображение-ссылка Обернуть тег <img> в тег <a>. Например: <a href="http://keksby.ru"> <img src="cat.png" alt="Кекс"></a>
Формат задания и общие параметры таблицы.
Для создания таблиц применяется тег <TABLE>. Состав таблицы по строкам и ячейкам задается с помощью следующих элементов: TR – элемент, формирующий отдельную строку; TD – элемент, определяющий содержимое ячейки данных; TH – элемент, задающий ячейку заголовка; CAPTION – элемент названия таблицы.
Структура записи тега <TABLE> <TABLE аlign=”значение” - выравнивание - ширина height=”значение” - высота background=”URL” - изображение в качестве фона bgcolor=”значение” - цвет фона border=”целое число” – толщина рамки borderсolor=”значение” borderсolordark=”значение” borderсolorlight=”значение” cellpadding=”целое число” cellspacing=”целое число” cols=”значение” frame=”значение” rules=”значение”> </TABLE>
<CAPTION align=”top” bottom Название таблицы </CAPTION> <TR align=”значение” middle baseline width=”значение” height=”целое число” bgcolor=”значение” borderсolor=”значение” borderсolordark=”значение” borderсolorlight=”значение”> <TH align=”значение” width=”значение” height=”целое число” background=”URL” bgcolor=”значение” borderсolor=”значение” borderсolordark=”значение” borderсolorlight=”значение” colspan=”целоe число” rowspan=”целое число” nowrap> Ячейка заголовка таблицы </TH> </TR> <TR> <TD align=”значение”
width=”значение” height=”целое число” background=”URL” bgcolor=”значение” borderсolor=”значение” borderсolordark=”значение” borderсolorlight=”значение” colspan=”целоe число” rowspan=”целое число” nowrap> Содержимое ячеек </ТD>
Простые таблицы Элементы web-страницы. 1. Заголовок web-страницы 2. Рекламный баннер. 3. Логотип компании-владельца данного сайта или ссылку на сервер, осуществляющий web-хостинг. 4. Основную часть документа занимает так называемое текстовое поле – участок где размещается смысловое наполнение страницы: содержательный информационныи текст и иллюстрации. Перечисленные элементы еще называют «контент» (content – содержание). 5. Элементы навигации – гиперссылки, связывающие данный документ с другими разделами сайта. 6. В нижней части документа принято публиковать информацию о разработчиках сайта и адрес электронной почты. 7. Если Web-страница является стартовым документом, в нижней ее части также размещают счетчик посещений. Что такое дизайн? Основные постулаты WEB -дизайна: 1. Сайт должен корректно отображаться при различных экранных разрешениях. 2. Web-страница должна идентично отображаться в различных браузерах. 3. Все страницы web-сайта должны быть минимальными по объему. 4. Web-страница должна обязательно включать навигационные элементы, охватывающие все разделы сайта, причем эти элементы должны всегда быть на виду. 5. Весь проект должен быть выдержан в одном дизайнерском стиле. 6. На одной web-странице не должно быть более трех различных шрифтов. 7. Необходимо использовать только корректные цветовые схемы.
Как образуются цвет на экране монитора Красный, зеленый, синий – основные. Сложение 2-х основных цветов дает три дополнительных цвета: Красный + Зеленый = Желтый , Синий +Зеленый = Голубой, Красный + Синий = Пурпурный. Для того что бы понять основы работы с цветом удобно использовать цветовой круг полученный из трех основных цветов и трех дополнительных: Основные принципы цветового круга:
Гармоничные цветовые сочетания
Помимо, этого способа, если нет под рукой интернета, можно подобрать контрастные цвета, элементарно инвертировав цвет, любого растрового элемента, командой Ctrl+i или простейшим математическим действием, зная что самый насыщенный цвет это 255, то если наш цвет r=102 g=51 b=51, наиболее контрастный цвет по отношению к нему будет r=255-102=153 g=255-51=204 b=255-21=204. Имеет еще большую популярность выбор цветов, в палитре Photoshopв режиме O nly W eb C olor. Если его установить, то цветовое поле будет отображать цвета, cовместимые с Web.
Рекомендации по работе с цветом · Как правило, мелкие детали (пиктограммки, стрелочки, иконки) необходимо делать более насыщенных цветов, и наоборот чем объект больше, тем меньше он требует насыщения цветом. · Старайтесь не использовать яркие, кислотные цвета, их обилие утомляет. · При выборе цвета всегда отталкивайтесь от задач, которые стоят перед сайтом. Форма – это наиболее важная часть большинства объектов. Мы можем опустить информацию о цвете, текстуре, размере, но помнить о форме придется всегда. Наиболее часто в веб-дизайне используются простые формы: 1) Линия (разделяет или соединяет); 2) Прямоугольник – самая распространенная и очевидная фигура в веб-дизайне. Самое главное при работе с прямоугольниками — правильно подобрать пропорции. 3) Треугольник Этой фигурой можно достичь двух эффектов: 1. Треугольник повернутый основанием вниз создает иллюзию устойчивости. 2. Указание направления.
4) Круг Так же, как и треугольник, хорош в маленьких форматах (иконки). Типографика Старайтесь использовать не более трех шрифтов в оформлении сайта. Базовый шрифт – основной шрифт материалов сайта. Базовый шрифт должен быть читабельным. Используйте простые шрифты без засечек. Контрастность. Самый сильный контраст для текста это черный текст на белом фоне. Разделяйте большие блоки текста на абзацы, это в разы упростит восприятие. Рекомендуемый размер базового шрифта 11-14pt. Акцидентный – шрифт для заголовков. В некоторых случаях используются дополнительные шрифты для: • Логотипа меню и навигации; • блоков выделения (важной информации, цитат, выносок); • для мелкого текста, с целью повысить читабельность.
Безопасные шрифты • Verdana • Arial • Tahoma • Myriad Pro • Century Gothic
Тег – это команда html, указывающая интерпретатору браузера, каким образом он должен обрабатывать значение, соответствующее каждой конкретной директиве. Это значение называется атрибутом тега. Тег может иметь атрибут или не иметь его. Тег верхнего уровня <HTML> не имеет атрибутов. Синтаксис записи тега в совокупности с его атрибутом: <ТЕГ имя_атрибута_1=”значение” … имя_атрибута_n=”значение”> Каждый тег начинается с символа < и заканчивается символом >, например: <p>. Все теги можно разделить на парные и одиночные. Каждый парный тег состоит из двух частей: открывающего тега и закрывающего. Внутри закрывающего тега используется символ /. Вот пример парного тега: <p>Абзац</p>Как вы видите, у тега <p> есть пара в виде закрывающего тега </p>. Теги, которые добавляют на страницу одиночный объект, и не заключающие в себе какой-то текст, одиночными. Примеры таких тегов: <br>, <hr>, <img>. Раньше одиночные теги писались с закрывающим слешом перед закрывающей скобкой. Например: <br/>. Структура HTML документа <HTML> <HEAD> Заголовок документа <TITLE>Внешний заголовок </TITLE> </HEAD> <BODY> Тело документа, содержащее основной код </BODY> </HTML>
Комментарии. Формат комментария: <!-- текст комментария -->
Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу. Например, для старой версии HTML 4.01 доктайп выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">А для последней версии HTML уже намного проще: <!DOCTYPE html>Тег <html> — это контейнер, в котором находится всё содержимое страницы, включая теги<head> и <body>. Как правило, тег <html> идёт в документе вторым после доктайпа. Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую. Тег <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.
Заголовок страницы — это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках. Чтобы задать заголовок страницы, нужно использовать тег <title> внутри тега <head>.
Кодировка HTML-страницы Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега <head>использовать тег: <meta charset="имя кодировки">Самая распространённая современная кодировка — utf-8. Для кириллицы в Windows charset часто задавали как windows-1251. Но сейчас это считается плохой практикой. Ключевые слова Мета-теги хранят полезную для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы. <meta name="keywords" content="разные, ключевые, слова">В атрибуте content через запятую перечисляются самые важные слова из содержания страницы Описание содержания страницы Ещё один полезный для поисковых систем мета-тег — краткое описание страницы. Оно задаётся так: <meta name="description" content="краткое описание">В атрибуте content должно быть краткое содержание или аннотация страницы. Оно часто используется поисковиками при отображении результатов поиска.
Цветовые спецификации Определить цвет при создании web-страницы можно двумя методами: посредством задания специальных цветовых меток, обозначающий названия цветов словами, или с помощью шестнадцатеричного цифрового кода, заменяющего эти метки (перед ним ставится #).
|
Последнее изменение этой страницы: 2019-03-22; Просмотров: 117; Нарушение авторского права страницы
Цвет в web- дизайне:
