WEB- страница и ее дизайн Для того, что бы говорить о web- дизайне, надо сначала узнать что есть web- страница.web- дизайне Что создают ее с помощью. - презентация

1

2 WEB- страница и ее дизайн

3 Для того, что бы говорить о web- дизайне, надо сначала узнать что есть web- страница.web- дизайне Что создают ее с помощью языка HTML, и какие программы могут для этого понадобиться.языка HTMLпрограммы

4 Что есть Web- дизайн Об этом много говорилось, но однозначного ответа на вопрос «Что есть web-дизайн» я так и не нашел. Ну что ж, придется доходить до этого самому (в этом есть своя прелесть, не так ли?)Думаю, все согласятся, что прежде всего web-дизайн это создание привлекательного внешнего вида сайта. Когда все элементы дизайна составляют устойчивую композицию и находятся на своем логичном месте. Цветовая гамма не раздражает глаз, а плавно втекает в общий дух сайта. Нужное подчеркивается, второстепенное отодвигается на второй план. Все самое необходимое на странице всегда доступно и легко идентифицируемо. Весь дизайн несет в себе определенный смысл, иногда играя со зрителем, иногда подталкивая его к какому-то действию. Вобщем, завлекает не раздражая. Мы заходим на такой сайт и чувствуем, что нам приятно здесь находиться. Однако этого оказывается мало. Занимаясь дизайном сайта по своей структуре не укладывающегося в рамки стандартов (а иногда сознательно выведенного за эти рамки), я столкнулся с другой составляющей web-дизайна дизайн структуры сайта. Он необходим, чтобы пользователю было удобно и приятно не только смотреть на страницы сайта, но и с легкостью перемещаться между ними. При этом он всегда должен точно представлять, где он в данный момент находится, куда он собирается перейти и как он сможет вернуться.

5 Но и это еще не все. Большинство сайтов сейчас стали интерактивными. Они реагируют на действия пользователя, расширяют функциональные возможности сайта, предлагая посетителям интересные сервисы. Встает проблема, как не испугать кажущейся сложностью предлагаемых функций, не запутать, а наоборот помочь посетителю выполнить необходимые действия. Превратить сложную машину с помощью легкого и логичного интерфейса в удобный инструмент. Здесь появляется еще одна составляющая дизайна дизайн функциональной части сайта. Итак, для себя как web-дизайнера я вывел следующую формулу создания дизайна сайта: дизайн структуры + дизайн оформления + дизайн функциональности. Все эти три момента крайне необходимы, а если учесть, что после дизайнера сайтом занимаются только программисты и люди отвечающие за наполнение сайта информацией, то кому из них придется выполнять оставшуюся после дизайнера работу? И что из этого выйдет? Лично мне нравится, что на мои плечи складывается вся эта работа. Это дает возможность почувствовать, что ты создаешь что- то целое, с нуля отстраиваешь большое красивое здание. И потом, смотря на этот сайт, перемещаясь по страницам, оперируя различными функциями, наблюдая как четко, сглажено и логично работает эта машина, испытываешь удовлетворение от прекрасно выполненной работы, где каждый пиксель кричит, что ты над ним постарался.

6 Создание Web- страницы с помощью языка HTML. Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта. Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудноНо писать непосредственно на HTML Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах. Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем.

7 Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами. Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо. HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

8 HTML-редакторы Каждый выбирает свой инструмент для создания Web- страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).Macromedia DreamWeaverAllaire HomeSite Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста..., в общем, работать крайне неудобно. Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web- страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже. Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.

9 DreamWeaver 3.0 DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности. Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera). HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).

10 HomeSite 4.0 Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для корректировки HTML-кода. Одним из последних HTML-редакторов является EVR Soft 1st Page 2000 v2. Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

11 Как правильно писать в формате HTML. Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор. Обычно HTML-документ - это файл с расширением.html или.htm, в котором текст размечен HTML- тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается. Все теги начинаются символом ' '. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация: Информация Здесь стартовым тегом является тег, а завершающим -. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках стоит символ '/' (слэш). Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML- тегов. В каждом HTML-документе должны присутствовать три главных части: A) Объявление HTML; B) Заголовочная часть; C) Тело документа.

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

13 Заголовочная часть. и. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML- документу текст помещается между тегами и. Моя первая страница

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