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

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

·        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

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

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

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

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

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

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;

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

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

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

Для работы с графикой был использован графический редактор 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.      #"787562.files/image010.gif">

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