SlideShare a Scribd company logo
WEB- страница    и ее   дизайн
Для того, что бы говорить о  web-  дизайне ,  надо сначала узнать что есть  web-  страница. Что создают ее с помощью  языка  HTML , и какие  программы  могут для этого понадобиться.
Что есть  “Web-  дизайн ” ,[object Object],Весь дизайн несет в себе определенный смысл, иногда играя со зрителем, иногда подталкивая его к какому-то действию. Вобщем, завлекает не раздражая. Мы заходим на такой сайт и чувствуем, что нам приятно здесь находиться. Однако этого оказывается мало. Занимаясь дизайном сайта по своей структуре не укладывающегося в рамки стандартов (а иногда сознательно выведенного за эти рамки), я столкнулся с другой составляющей web-дизайна — дизайн структуры сайта. Он необходим, чтобы пользователю было удобно и приятно не только смотреть на страницы сайта, но и с легкостью перемещаться между ними. При этом он всегда должен точно представлять, где он в данный момент находится, куда он собирается перейти и как он сможет вернуться.
[object Object],[object Object],Все эти три момента крайне необходимы, а если учесть, что после дизайнера сайтом занимаются только программисты и люди отвечающие за наполнение сайта информацией, то кому из них придется выполнять оставшуюся после дизайнера работу? И что из этого выйдет? Лично мне нравится, что на мои плечи складывается вся эта работа. Это дает возможность почувствовать, что ты создаешь что-то целое, с нуля отстраиваешь большое красивое здание. И потом, смотря на этот сайт, перемещаясь по страницам, оперируя различными функциями, наблюдая как четко, сглажено и логично работает эта машина, испытываешь удовлетворение от прекрасно выполненной работы, где каждый пиксель кричит, что ты над ним постарался.
Создание Web-страницы с помощью языка HTML.   ,[object Object],[object Object],Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах. Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web,  как сейчас, так и в будущем.
[object Object],[object Object],[object Object]
HTML-редакторы   ,[object Object],[object Object],Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.  Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.
DreamWeaver 3.0 ,[object Object],HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).
HomeSite 4.0 ,[object Object],[object Object]
Как правильно писать в формате  HTML. ,[object Object],[object Object],  Все теги начинаются символом '<' и заканчиваются символом '>'.   Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация: <p>Информация</p>  Здесь стартовым тегом является тег  <P> , а завершающим -  </P> . Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ ' / ' (слэш).   Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части:  A) Объявление HTML; B) Заголовочная часть; C) Тело документа.
Объявление HTML   ,[object Object],[object Object]
Заголовочная часть .   ,[object Object],<HTML>  <HEAD>  <TITLE>Моя первая страница</TITLE>  </HEAD>  </HTML>
Тело документа .   ,[object Object],[object Object]

More Related Content

What's hot

PHP micro-frameworks (PHP микрофреймворки)
PHP micro-frameworks (PHP микрофреймворки)PHP micro-frameworks (PHP микрофреймворки)
PHP micro-frameworks (PHP микрофреймворки)
Bohdan Vorona
 
Прототип сайта: виды, плюсы и минусы
Прототип сайта: виды, плюсы и минусыПрототип сайта: виды, плюсы и минусы
Прототип сайта: виды, плюсы и минусы
Сергей Кондауров
 
^5(2)
^5(2)^5(2)
Html для блоггеров #2
Html для блоггеров #2Html для блоггеров #2
Html для блоггеров #2vdas us
 
Сайт с нуля на полном стеке БЭМ-технологий
Сайт с нуля на полном стеке БЭМ-технологийСайт с нуля на полном стеке БЭМ-технологий
Сайт с нуля на полном стеке БЭМ-технологий
Yandex
 
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницуВебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Yandex
 
Создание прототипа как этап разработки сайта: задачи, методы, преимущества
Создание прототипа как этап разработки сайта: задачи, методы, преимуществаСоздание прототипа как этап разработки сайта: задачи, методы, преимущества
Создание прототипа как этап разработки сайта: задачи, методы, преимуществаTechart Marketing Group
 
Beminar js
Beminar jsBeminar js
Beminar jsYandex
 

What's hot (9)

PHP micro-frameworks (PHP микрофреймворки)
PHP micro-frameworks (PHP микрофреймворки)PHP micro-frameworks (PHP микрофреймворки)
PHP micro-frameworks (PHP микрофреймворки)
 
Wordpress promo
Wordpress promoWordpress promo
Wordpress promo
 
Прототип сайта: виды, плюсы и минусы
Прототип сайта: виды, плюсы и минусыПрототип сайта: виды, плюсы и минусы
Прототип сайта: виды, плюсы и минусы
 
^5(2)
^5(2)^5(2)
^5(2)
 
Html для блоггеров #2
Html для блоггеров #2Html для блоггеров #2
Html для блоггеров #2
 
Сайт с нуля на полном стеке БЭМ-технологий
Сайт с нуля на полном стеке БЭМ-технологийСайт с нуля на полном стеке БЭМ-технологий
Сайт с нуля на полном стеке БЭМ-технологий
 
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницуВебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
 
Создание прототипа как этап разработки сайта: задачи, методы, преимущества
Создание прототипа как этап разработки сайта: задачи, методы, преимуществаСоздание прототипа как этап разработки сайта: задачи, методы, преимущества
Создание прототипа как этап разработки сайта: задачи, методы, преимущества
 
Beminar js
Beminar jsBeminar js
Beminar js
 

Viewers also liked

Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнерvaxden
 
Создание сайтов: как всё устроено и первые шаги.
Создание сайтов: как всё устроено и первые шаги.Создание сайтов: как всё устроено и первые шаги.
Создание сайтов: как всё устроено и первые шаги.
Александр Лысяк
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
ir_556
 
Web дизайн
Web дизайнWeb дизайн
Web дизайнSimpapu
 
Cоздание эффективного сайта
Cоздание эффективного сайтаCоздание эффективного сайта
Cоздание эффективного сайта
Darya Karelina
 
Автоцентр Нагатино
Автоцентр НагатиноАвтоцентр Нагатино
Автоцентр Нагатиноkirillgubin
 
Trends of Web-design
Trends  of Web-designTrends  of Web-design
Trends of Web-design
Irina Shults
 
Эволюция веб-дизайна
Эволюция веб-дизайнаЭволюция веб-дизайна
Эволюция веб-дизайнаArtjoker
 
Веб - дизайн
Веб - дизайнВеб - дизайн
Веб - дизайн
Ольга Куликова
 
Инструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIXИнструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIX
Вячеслав Гладышев
 
Разработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. ВинницыРазработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. Винницы
Artem Laptev
 
Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение
Alexander Kolotov
 

Viewers also liked (15)

урок2
урок2урок2
урок2
 
Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнер
 
6.4
6.46.4
6.4
 
Создание сайтов: как всё устроено и первые шаги.
Создание сайтов: как всё устроено и первые шаги.Создание сайтов: как всё устроено и первые шаги.
Создание сайтов: как всё устроено и первые шаги.
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
 
Web дизайн
Web дизайнWeb дизайн
Web дизайн
 
Cоздание эффективного сайта
Cоздание эффективного сайтаCоздание эффективного сайта
Cоздание эффективного сайта
 
Автоцентр Нагатино
Автоцентр НагатиноАвтоцентр Нагатино
Автоцентр Нагатино
 
Trends of Web-design
Trends  of Web-designTrends  of Web-design
Trends of Web-design
 
Lect1
Lect1Lect1
Lect1
 
Эволюция веб-дизайна
Эволюция веб-дизайнаЭволюция веб-дизайна
Эволюция веб-дизайна
 
Веб - дизайн
Веб - дизайнВеб - дизайн
Веб - дизайн
 
Инструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIXИнструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIX
 
Разработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. ВинницыРазработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. Винницы
 
Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение
 

Similar to WEB

Vvedenie html 1
Vvedenie html 1Vvedenie html 1
презентация сайтостроение
презентация сайтостроениепрезентация сайтостроение
презентация сайтостроение
Palados
 
сервисы веб 2.0 в практике работы педагога Антонова Анна Александровна Кострома
сервисы веб 2.0 в практике работы педагога  Антонова Анна Александровна Костромасервисы веб 2.0 в практике работы педагога  Антонова Анна Александровна Кострома
сервисы веб 2.0 в практике работы педагога Антонова Анна Александровна КостромаAntonova_Anna
 
пр 12.docx
пр 12.docxпр 12.docx
пр 12.docx
ssuser6d63bc1
 
сервисы веб 2.0 в практике работы педагога
сервисы веб 2.0 в практике работы педагогасервисы веб 2.0 в практике работы педагога
сервисы веб 2.0 в практике работы педагогаAntonova_Anna
 
FrontEnd: JS + css + html
FrontEnd: JS + css + htmlFrontEnd: JS + css + html
FrontEnd: JS + css + html
Intersog
 
Как создать сайт с нуля за 1 день
Как создать сайт с нуля за 1 деньКак создать сайт с нуля за 1 день
Как создать сайт с нуля за 1 день
Александр Лысяк
 
конструктор сайтов2
конструктор сайтов2конструктор сайтов2
конструктор сайтов2
UNTag59
 
Kak cozdat sait
Kak cozdat saitKak cozdat sait
Kak cozdat sait
fioggy
 
9773
97739773
9773
nreferat
 
ThemeForest: Как пробиться и стоит ли игра свеч? | Odessa Frontend Meetup #9
ThemeForest: Как пробиться и стоит ли игра свеч? | Odessa Frontend Meetup #9ThemeForest: Как пробиться и стоит ли игра свеч? | Odessa Frontend Meetup #9
ThemeForest: Как пробиться и стоит ли игра свеч? | Odessa Frontend Meetup #9
OdessaFrontend
 
Создание веб-ресурса: задачи, процесс, коммуникации, результат
Создание веб-ресурса: задачи, процесс, коммуникации, результатСоздание веб-ресурса: задачи, процесс, коммуникации, результат
Создание веб-ресурса: задачи, процесс, коммуникации, результат
Дмитрий Подлужный
 
Create a site in a preschool educational
Create a site in a preschool educationalCreate a site in a preschool educational
Create a site in a preschool educationalVictor Filimonov
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
IT-Доминанта
 
WUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного веба
WUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного вебаWUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного веба
WUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного веба
Yury Vetrov
 
Ошибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений КонцевойОшибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений Концевой
Леонид Гроховский
 
1 занятие
1 занятие1 занятие
1 занятие
Елена Шевцова
 
Web сайт - гиперструктура данных
Web сайт - гиперструктура данныхWeb сайт - гиперструктура данных
Web сайт - гиперструктура данныхЕлена Ключева
 

Similar to WEB (20)

Vvedenie html 1
Vvedenie html 1Vvedenie html 1
Vvedenie html 1
 
презентация сайтостроение
презентация сайтостроениепрезентация сайтостроение
презентация сайтостроение
 
сервисы веб 2.0 в практике работы педагога Антонова Анна Александровна Кострома
сервисы веб 2.0 в практике работы педагога  Антонова Анна Александровна Костромасервисы веб 2.0 в практике работы педагога  Антонова Анна Александровна Кострома
сервисы веб 2.0 в практике работы педагога Антонова Анна Александровна Кострома
 
пр 12.docx
пр 12.docxпр 12.docx
пр 12.docx
 
сервисы веб 2.0 в практике работы педагога
сервисы веб 2.0 в практике работы педагогасервисы веб 2.0 в практике работы педагога
сервисы веб 2.0 в практике работы педагога
 
FrontEnd: JS + css + html
FrontEnd: JS + css + htmlFrontEnd: JS + css + html
FrontEnd: JS + css + html
 
Как создать сайт с нуля за 1 день
Как создать сайт с нуля за 1 деньКак создать сайт с нуля за 1 день
Как создать сайт с нуля за 1 день
 
конструктор сайтов2
конструктор сайтов2конструктор сайтов2
конструктор сайтов2
 
Front Page
Front PageFront Page
Front Page
 
Kak cozdat sait
Kak cozdat saitKak cozdat sait
Kak cozdat sait
 
9773
97739773
9773
 
ThemeForest: Как пробиться и стоит ли игра свеч? | Odessa Frontend Meetup #9
ThemeForest: Как пробиться и стоит ли игра свеч? | Odessa Frontend Meetup #9ThemeForest: Как пробиться и стоит ли игра свеч? | Odessa Frontend Meetup #9
ThemeForest: Как пробиться и стоит ли игра свеч? | Odessa Frontend Meetup #9
 
Создание веб-ресурса: задачи, процесс, коммуникации, результат
Создание веб-ресурса: задачи, процесс, коммуникации, результатСоздание веб-ресурса: задачи, процесс, коммуникации, результат
Создание веб-ресурса: задачи, процесс, коммуникации, результат
 
Create a site in a preschool educational
Create a site in a preschool educationalCreate a site in a preschool educational
Create a site in a preschool educational
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
 
WUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного веба
WUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного вебаWUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного веба
WUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного веба
 
Ошибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений КонцевойОшибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений Концевой
 
1 занятие
1 занятие1 занятие
1 занятие
 
Web tehn
Web tehnWeb tehn
Web tehn
 
Web сайт - гиперструктура данных
Web сайт - гиперструктура данныхWeb сайт - гиперструктура данных
Web сайт - гиперструктура данных
 

WEB

  • 1. WEB- страница и ее дизайн
  • 2. Для того, что бы говорить о web- дизайне , надо сначала узнать что есть web- страница. Что создают ее с помощью языка HTML , и какие программы могут для этого понадобиться.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.