Разработка front-end части веб-приложения c блочным подходом к формированию html структуры документа

Введение

1. Техническое задание

1.1 Назначение сайта

1.2 Цели создания сайта

1.3 Требования к сайту

1.4 Технические показатели

2. Теоретическая часть

2.1 Определение HTML как языка разметки

2.2 Структура HTML документа

2.3 Основные элементы HTML

2.4 Стили CSS

3. Практическая часть

3.1 Среда разработки

3.2 Практическая реализация

Заключение

Список литературы

Приложение 1

Приложение 2

Введение

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

Основными свойствами таблиц являются:

· способность автоматически изменять размеры в зависимости от количества содержимого в каждой ячейке;

· возможность сохранять установленные верстальщиком размеры одних ячеек и при этом делать растяжимыми другие.

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

Однако он имеет ряд минусов:

· Главный недостаток табличной верстки -- код. Во-первых, он громоздкий. Это значит, что даже если на странице нет картинок, загружаться она будет долго. Во-вторых, программистам потом трудно работать с кодом, который к тому же не семантический, то есть не логичный.

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

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

· Таблицы хорошо отображаются на мониторах с хорошим разрешением. Но сегодня Интернетом можно пользоваться чуть ли не с любого электронного устройства. Таблицы в этих форматах попросту не работают.

Ввиду этих проблем большинство верстальщиков перешли от табличной верстке к блочной.

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

Тег div -- главное преимущество блочной верстки сайта над табличной. Он может обозначать и разные функциональные области (меню навигации, шапка, основной блок, подвал), и отдельные их элементы. В HTML теги, как правило, жестко привязаны к своему содержимому. Например, в тег <image> вы никогда не сможете вписать текст, только изображение.

Главными плюсами блочной верстки можно назвать:

· соответствие кода современным стандартам;

· удобочитаемость кода;

· семантически верный код;

· минимальное время загрузки страницы;

· совместимость не только с мониторами ПК, но и с КПК, iPod, iPhone и другими подобными устройствами.

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

1. Техническое задание

1.1 Назначение сайта

Разрабатываемый сайт будет использоваться как сайт библиотека, в которой будут храниться данные по людям, которые там зарегистрируются. Информация, которая будет размещена пользователем сайта, может использоваться посетителями сайта, которые ищут людей для общения или работы. Удобность состоит в том, что посетитель может без труда осмотреть портфолио каждого, кто зарегистрирован на этом сайте, при этом, может без труда с ним связаться через сообщения на сайте, или же через контактную информацию, оставленную зарегистрированным пользователем. По сути, преимущественное большинство существующих сайтов, с информацией о ее пользователях, не несут в себе полного объема данных, который необходим для того, что бы найти посетителю человека с похожими интересами, либо человека с необходимыми трудовыми качествами. Это в результате оказывается губительным для зарегистрированного пользователя и посетителя сайта. Так как, человек, который ищет работу и размещает свое резюме на сайте, не сможет в полной мере указать все свои профессиональные данные. В этом же случае, работодатель, заинтересованный в поисках квалифицированных кадров не сможет в полной мере оценить способности предлагаемой кандидатуры. Такая же ситуация и относительно тех, кто хочет найти человека по схожим интересам. Ввиду того, что пользователь из-за узкого набора критерий заполнения своей личной анкеты может не указать некоторые важные факторы для других пользователей. Собственно, такие недоработки подавляющего большинства социальных сетей, или электронных анкет, имеют значительное место в системах общения пользователей интернета в общем. Так же одним фактов недоработки сайтов такого типа, можно указать платность некоторых дополнительных функций. Пользователь, который не способен оплатить эти услуги, просто отрезается в некоторой степени от тех, кто в силах это делать. Что же касается разрабатываемого проекта, так нужно отметить то, что абсолютно все функции, предоставленные самим сайтом, будут бесплатными, и пользователи смогут себя комфортно чувствовать даже в случае их неспособности вкладывать деньги в свое резюме.

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

1.2 Цели создания сайта

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

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

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

1.3 Требования к сайту

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

Требования к языкам программирования. Для статических страниц и шаблонов используются технологии HTML и CSS. HTML (HyperText Markup Language, язык разметки гипертекста) - специальные инструкции браузера, с помощью которых создаются веб-страницы. То, что отображается при просмотре страницы в Internet, - это интерпретация браузером HTML-текста. CSS (Cascading Style Sheets, каскадные таблицы стилей) - это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением. Стили являются удобным, практичным и эффективным инструментом при верстке веб-страниц и оформлении текста, ссылок, изображений и других элементов.

Требования к организации гиперссылок. Все ссылки на сайте являются относительными (за исключением внешних). Относительные ссылки ведут отсчет от корня сайта или текущего документа, а абсолютные адреса начинаться с указания протокола (обычно http://) и содержат имя сайта.

Требования к иллюстрациям. Изображения и иллюстрации, находящиеся на сайте должны иметь не очень маленький размер (но максимальный размер: 320х240px) и формат JPEG, GIF, PNG или BMP. В картинок, которые размещаются на сайте с помощью HTML-тега IMG прописаны атрибуты ALT и TITLE. Во всяком случае, атрибут ALT в HTML-тега картинки IMG должен быть прописан обязательно. Иначе поисковые системы просто не включать данные изображения в свой индекс поиска по картинкам.

Требования к объему одной страницы. За объем страницы принимается чистая разметка и текст, то есть баннеры и различные изображения в расчет не идут, для пользователей средним объемом есть страница объемом в 45кб HTML кода и текста. Средний объем страницы данного проекта составляет 5-10кб, что увеличивает скорость загрузки сайта на медленных интернет-соединениях.

1.4 Технические показатели

Для функционирования сайта необходимо следующее техническое обеспечение со следующими минимальными характеристиками:

- процессор - Intel Pentium III 1 Ghz и выше;

- оперативная память - 512 Mb RAM и больше;

- жесткий диск - 20 Gb HDD;

- мышь;

- клавиатура;

- монитор.

2. Теоретическая часть

2.1 Определение HTML как языка разметки

HTML (от англ. HyperText Markup Language -- "язык разметки гипертекста") -- стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

HTML является приложением ("частным случаем") SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые "браузерами" или "интернет-обозревателями", обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari.

2.2 Структура HTML документа

Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.

Документ HTML содержит текст (содержимое страницы) и встроенные теги - инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок - head и тело - body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера).

Пример структуры документа:

<html> <head> <title>HTML struct</title> </head> <body> <h3>header</h3> <p>paragraph</p> </body> </html>

2.3 Основные элементы HTML

Тег - элемент языка разметки гипертекста. Более правильное название - дескриптор. Используют только два тега - открывающий, или начальный, и закрывающий, или конечный, или еще дополнительно в зависимости от реализации языка возможно применение одиночного тега и тега пустого элемента. Например, тег отступа абзаца может оформлять абзац между <p> </p>, а может в одиночной форме до следующего первого попавшегося <p>.

Пример пустого элемента: <HR></HR> - разрыв текста без сохранения отступов, но вы можете использовать специальную форму записи тега, используя меньшее число символов: <HR/>

Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.

Большинство тегов являются контейнерами. Это означает, что у них имеется начальный (открывающий или стартовый) и конечный (закрывающий) теги. Текст, находящийся между тегами, будет выполнять содержащиеся в них инструкции.

Конечный тег имеет то же имя, что и начальный, но перед ним стоит слеш (/). Его можно рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.

В некоторых случаях конечный тег не обязателен, и браузер определяет конец тега из контекста. Чаще всего опускают конечный тег <р> (абзац). Браузеры раньше поддерживали этот тег без соответствующего завершения, поэтому многие авторы Web привыкли использовать краткую форму. Поэтому, если есть сомнения, стоит включить в текст закрывающий тег. Это особенно важно, когда в документе используются каскадные таблицы стилей.

Некоторые теги не имеют завершающих тегов, потому что они используются для размещения отдельных (автономных) элементов на странице. Одним из них является тег изображения <img>. Он просто помещает графику в поток страницы. Другие автономные теги - это разрыв строки (<br>), горизонтальная линия (<hr>) и теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как <meta> и <base>.

Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных). Правила записи значения следующие:

· если значение представляет собой одно слово или число и состоит только из букв (a-z), цифр (0-9) и специальных символов (точка <.> или дефис <->), то можно поместить его после знака равенства без кавычек;

· если значение содержит несколько слов, разделенных запятыми или пробелами, или содержит специальные символы, отличные от точки или дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют кавычек, потому что они содержат символы "://". Также кавычки необходимы при задании значений цветов с использованием формата "#rrggbb".

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

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

· разрывы строк. Символы конца строк в документе HTML игнорируются. Текст и элементы будут переноситься до тех пор, пока в потоке текста документа не встретится тег <р> или <br>. Разрывы строк выводятся, если текст обозначен как текст с заданным форматом (<рrе>);

· символы табуляции и множественные пробелы. Когда браузер встречает в документе HTML символ табуляции и несколько последовательных символов пробела, он выводит только один пробел. Таким образом, если документ содержит: "far, far away", браузер выведет "far, far away". Дополнительные пробелы можно добавить в текстовый поток, используя символ неразрывного пробела (&nbsp;). Кроме того, все пробелы выводятся, если текст является форматированным (находится в тегах <рrе>);

· множественные <р>-теги. Последовательность тегов <р>, не прерываемых текстом, всеми браузерами интерпретируется как избыточная. Содержимое будет выводиться так, как если бы был только один тег <р>. Большинство браузеров выведет несколько тегов <Br> в виде нескольких переходов на новую строку;

· нераспознаваемые теги. Если браузер не понимает тег или тот был неверно задан, то браузер его просто игнорирует. В зависимости от тега и браузера это может привести к различным результатам. Либо браузер ничего не выведет, или он может отобразить содержимое тега как обычный текст.

2.4 Стили CSS

CSS (англ. Cascading Style Sheets -- каскадные таблицы стилей) -- формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик необходимо один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который нужно оформить соответствующим образом, должен принять свойства стиля, описанного ранее. CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.

Преимущества блочной верстки при создании сайта:

· корректная блочная верстка соответствует всем стандартам html;

· правильное отображение страниц разными устройствами (например, КПК);

· легкость верстки;

· компактный код, элементы "весят" меньше, следовательно, страница веб-сайта загружается быстрее;

· в отличии от таблиц, блоки - универсальное средство для создания любого дизайна.

Для просмотра интернет-сайтов пользователи сети Интернет используют специальные программы - браузеры. Если несколько лет назад посетителям интернета были известны лишь один-два разных браузера, то теперь число таких программ исчисляется десятками, особенно, если учитывать, что каждая из них имеет по нескольку версий, отличающихся пофункциональности. В связи с этим появилось понятие кроссбраузерности. Это свойство сайта идентично работать и отображаться во всех браузерах (обычно учитываются лишь наиболее распространенные). Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности.

Стили, использованные в проекте:

· margin

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

Синтаксис: margin: [значение | проценты | auto] {1,4} | inherit

auto - указывает, что размер отступов будет автоматически рассчитан браузером.

Inherit - наследует значение родителя.

margin-top - отступ сверху; margin-left - отступ слева;

margin-right - отступ справа; margin-bottom - отступ снизу.

Кроссбраузерность:

· padding

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

Синтаксис: padding: [значение | проценты] {1, 4} | inherit

padding-top - отступ сверху; padding-left - отступ слева;

padding-right - отступ справа; padding-bottom - отступ снизу.

Кроссбраузерность:

· font

Описание: универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Синтаксис: font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Значения:

font-family - устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

font-size - jпределяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

font-style - определяет начертание шрифта -- обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.

font-weight - устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное -- 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст -- значению 700.

Кроссбраузерность:

сайт поиск работа зарегистрированный

· border

Описание: универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента используются свойства border-top, border-bottom, border-left, border-right.

Синтаксис: border: [border-width || border-style || border-color] | inherit

Кроссбраузерность:

· background

Описание: универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.

Синтаксис:

CSS2.1 background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

CSS3 background: [<фон>,]* <последний_фон>

background-color - определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.

background-position - задает начальное положение фонового изображения, установленного с помощью свойства background-image. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

background-repeat - определяет, как будет повторяться фоновое изображение, установленное с помощью свойстваbackground-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

background: url - устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.

Кроссбраузерность:

· list-style

Описание: Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.

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

Синтаксис: list-style: list-style-type || list-style-position || list-style-image | inherit

Кроссбраузерность:

· text-align

Описание: определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис: text-align: center | justify | left | right | start | end

Кроссбраузерность:

· text-decoration

Описание: добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.

Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис: text-decoration: [blink | line-through | overline | underline] | none | inherit

Кроссбраузерность:

· position

Описание: устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис: position: absolute | fixed | relative | static | inherit

Значения:

absolute - казывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет.

Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера.

Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

relative - положение элемента устанавливается относительно его исходного места.

Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

Кроссбраузерность:

3. Практическая часть

3.1 Среда разработки

Документы HTML являются обычными текстовыми ASCII-файлами. Это означает, что для их создания можно использовать любой текстовый редактор, даже с минимальными возможностями. Существуют средства редактирования, разработанные специально для написания HTML. Они позволяют экономить время, так как содержат клавиши быстрого доступа для выполнения повторяющихся операций, например, задания начальных установок документов, таблиц или просто применения стилей к тексту. Редакторы HTML отличаются от авторского WYSIWYG-инструментария (рассматриваемого далее) тем, что требуют знания правил составления HTML вручную, редакторы лишь упрощают и ускоряют этот процесс.

Для разработки сайта портфолио было средство разработки Adobe Dreamweaver. WYSIWYG HTML-редактор компании Adobe. Изначально разработан и поддерживался компанией Macromedia, вплоть до 8-й версии (2005 год). Следующие версии, начиная с Dreamweaver CS3 (2007), выпускает Adobe. Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс и другие особенности сделали Dreamweaver одним из наиболее популярных HTML-редакторов в мире. Его особенность состоит в том что при верстке страницы можно сразу видеть результат изменения кода. Так же полезная функция - подсвечивание вариантов тэга во время его написания. Это позволяет быстро набирать длинные названия тэгов, а так же

Особенности Adobe Dreamweaver:

- Html код, создаваемый программой, проходит проверку на валидность, а это значит что не будет проблем с отображением сайта в разных браузерах и с индексацией сайта;

- три режима создания сайта;

- подсветка ошибок в коде для их быстрого нахождения. Кроме того программа сама скажет, в чем причина ошибки и как ее лучше устранить;

- множество готовых шаблонов сайтов как на основе табличного дизайна так и на основе css;

- мастер создания стилей в css;

- возможность создания визуальных эффектов;

- поддержка самых современных стандартов;

- мощная система справки. Фактически, это уже готовый учебник по созданию сайта.

Для работы с графикой был использован графический редактор Adobe Photoshop. Adobe Photoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop. Исходные данные к проекту были в формате PNG, этот формат принадлежит программе Photoshop. Благодаря разумному подходу к возможностям это программы, можно создавать качественные шаблоны для разработки сайтов. Так же ряд дополнительных возможностей ,позволяющие мгновенно исправить графические недочеты в изображениях на создаваемом сайте, помогают корректно отображать всю задумку дизайнера сайта.

3.2 Практическая реализация

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

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

При создании меню сайта использовались списки <li>. За счет этого удалось сделать так, что меню находилось в одной строчке и одновременно имело свои собственные спецификации. Для каждого уникального <li> использовались классы (class). Так в стиле css удалось задать параметры для замены фона при наведении курсора.

· text-decoration: none; - отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию;

· class id="***" - устанавливает класс для каждого <li>, что позволяет определять уникальные настройки;

· list-style: none; - отменяет маркеры для списка;

· position: relative; - положение элемента устанавливается относительно его исходного места и в дальнейшем изменяется при помощи координат.

Так же для некоторых элементов создавались специальные ячейки, они же <div>, но сложность состояла в том, что бы написать многоуровневую структуру, позволяющую с легкостью переносить большие объемы других блоков, изменяя параметры всего лишь главного. Это очень удобно, ведь для того что бы поправить огромную часть элементов страницы необходимо внести коррективы лишь в малую часть исходного кода. К тому же создаются условные стандартные классы объектов которые можно использовать для быстрого создания таких же классов.

Необходимо учесть и то, что удобно размещать объекты на странице при помощи position: relative; Это свойство заключает в себе особенность размещать объект в заданной структуре или блоке исключительно по пиксельным координатам, что позволяет точно настраивать размещение того или иного объекта. Единственным негативным явлением при использовании такого типа размещения - при заключении рядом нескольких таких объектов, или при изменении их размеров, вся структура сдвинется на определенное расстояние, равное самими изменениям элементов.

Заключение

Главным ресурсом электронной информации в наше время, как ни странно, является именно интернет. Интернет, по своей структуре, напоминает огромную паутину, в которой заплетено просто невообразимое количество информации. Именно к интернету обращается каждый день миллионы жителей всего мира, для того что бы удовлетворить свои потребности. Хороший дизайн, рабочая система и многие другие аспекты влияют на то, будут ли пользователи обращаться именно к разработанному сайту.

В результате этой работы, мне удалось на хорошем уровне многие тонкости языка разметки HTML, а так же прилегающий к нему, и как неотъемлемую его часть CSS. Язык разметки HTML имеет просто огромный ряд особенностей, которые позволяют создавать очень красивые сайты. Помимо всего, мне удалось освоить рабочие программы Adobe Photoshop, Adobe Dreamweaver, и специальный блокнот с подсветкой кода NotePad++. Все эти программы имеют свои спецификации, которые по разному помогают создавать сайты. Так же я научился работать с разными форматами документов, к примеру: PNG, PDF и так далее. Это умения очень ценны, и помогут при разработке сайтов в дальнейшем.

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

Список литературы

1. http://htmlbook.ru

2. www.websitegarage.com

3. Google.com

4. www.yandex.ru

5. http://devoid.com.ua

6. http://www.xn----dtbefdmd6clie.xn--p1ai/content-view-7.html

7. http://ktonanovenkogo.ru

8. http://ruseller.com

9. http://www.xiper.net

10. http://www.w3schools.com

11. http://www.dejurka.ru

12. http://anton.shevchuk.name

Приложение 1

Код html (файл ind.html)

<!DOCTYPE>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>You Personal World</title>

<link rel="stylesheet" type="text/css" href="st.css" />

</head>

<body link="white">

<div id="wrap">

<div id="header">

<ul id="navigation2">

<li class="navigation4"> <a href="ind.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>

<li class="navigation1"> <a href="about.html">&nbsp;&nbsp;&nbsp;ABOUT AS&nbsp;&nbsp;&nbsp;</a></li>

<li class="navigation1"> <a href="port.html">&nbsp;&nbsp;&nbsp;PORTFOLIO&nbsp;&nbsp;&nbsp;</a></li>

<li class="navigation1"> <a href="servise.html">&nbsp;&nbsp;&nbsp;SERVISES&nbsp;&nbsp;&nbsp;</a></li>

<li class="navigation3"> <a href="blog.html">&nbsp;&nbsp;&nbsp; BLOG &nbsp;&nbsp;&nbsp;</a></li>

<li class="navigation1"> <a href="contact.html">&nbsp;&nbsp;&nbsp;CONTACT&nbsp;&nbsp;&nbsp;</a></li>

</ul>

</div>

<div id="cont1">

</div>

<div id="body1">

<div id="boder1">

<ul id="text1">

<li class="text11"> <a href="about.html">WHO ARE WE</li>

<li class="text12"> <a href="port.html">WHY HIRE US</a></li>

<li class="text13"> <a href="servise.html">WE CAN OFFER</a></li>

<li class="text14"> <a href="blog.html">TESTIMONIALS</a></li>

</ul>

</div>

<div id="enteredtext1">

Something about us

</div>

<div id="enteredtext2">

Look at how we work

</div>

<div id="enteredtext3">

The best services

</div>

<div id="enteredtext4">

Customers testimonials

</div>

<div id="text2">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl felis, lobortis ac vulputate et, cursus eget tellus. Donec in ipsum nec tellus malesuada sodales non ac sem. Aliquam erat volutpat. Proin in velit nec tellus egestas auctor et eget nulla.

</div>

<div id="text3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl felis, lobortis ac vulputate et, cursus eget tellus. Donec in

ipsum nec tellus malesuada sodales non ac sem. Aliquam erat volutpat. Proin in velit nec tellus egestas auctor et eget nulla.

Maecenas gravida lacus non leo congue elementum. Praesent tincidunt lectus nec felis hendrerit id blandit ante consequat.

Proin bibendum, arcu eu lobortis egestas, massa leo ullamcorper dolor, non ullamcorper neque magna quis diam. Praesent

interdum neque id nulla accumsan euismod. Curabitur sit amet ornare purus. Aliquam erat volutpat.

</div>

<div id="funnyman"></div>

<div id="contacts1">Read More</div>

<div id="contacts2">Follow As</div>

<div id="contacts3">Facebook</div>

<div id="contacts4">Get in touch</div>

</div>

<div id="body2">

<div id="eggs1">

</div>

<div id="eggs12">

</div>

<div id="eggstext1">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et turpis et neque molestie mattis eu vitae lectus.

</div>

<div id="eggsbutton1">Go to Tour

</div>

<div id="eggs22"></div>

<div id="eggs2"></div>

<div id="eggstext2">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et turpis et neque molestie mattis eu vitae lectus.

</div>

<div id="eggsbutton2">App Store

</div>

<div id="eggs32"></div>

<div id="eggs3"></div>

<div id="eggstext3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et turpis et neque molestie mattis eu vitae lectus.

</div>

<div id="eggsbutton3">Get a Job

</div>

</div>

<div id="body3">

</div>

<div id="down1">

<div id="search1">

<input class="inputt" type="text" size="31">

<div id="searchbutton1">

</div>

</div>

</div>

<div id="down2">

<div id="down21">

<div id="down211">Site Navigation

</div>

<ul>

<li>Home</li>

<li>About</li>

<li>Porfolio</li>

<li>Services</li>

<li>Blog</li>

<li>Contact</li>

</ul>

</div>

<div id="down22">

</div>

<div id="down23">

<div id="down231">Blog Gategories

</div>

<ul>

<li>App Media</li>

<li>Branding</li>

<li>Case studio</li>

<li>Devises</li>

<li>Jobs</li>

<li>Networks</li>

</ul>

</div>

<div id="down24">

</div>

<div id="down25">

<div id="down251">Jobs Board

</div>

<ul>

<li>Animation</li>

<li>Brand identy</li>

<li>Development</li>

<li>Graphic Design</li>

<li>Marketing</li>

<li>Web Design</li>

</ul>

</div>

<div id="down26">

</div>

<div id="down27">

<div id="down271">Connect

</div>

<ul>

<li>Twitter</li>

<li>Facebook</li>

<li>Youtube</li>

<li>Flickr</li>

<li>Vimeo</li>

<li>Tumblr</li>

</ul>

</div>

<div id="down_picture">

</div>

<div id="down_last1">

</div>

<div id="down_last2">

Copyright © 2010-2011 BrandMedia.<br>All rights reserved.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam elit turpis, semper sed consequat a, malesuada

vel neque.

</div>

<div id="down_last3">

Terms & Conditions | Privacy | Contact Us

</div>

</div>

</div>

</body>

</html>

Приложение 2

При наведении курсора на пункт меню:

Возможность вводить информацию:

Размещено на Allbest.ru