Разработка front-end части веб-приложения c блочным подходом к формированию html структуры документа
Министерство
образования и науки, молодёжи и спорта Украины
Донецкий
национальный техничный университет
Институт
информатики и искусственного интеллекта
Кафедра
систем искусственного интеллекта
Курсовая работа
Разработка
front-end части веб-приложения c блочным подходом к формированию html структуры
документа
Задание выдала:
доц. Егошина А.А.
Консультант:
ас. Чубатов Р.Е.
Разработал:
ст. гр. СШИ-11 Домбровский Д.А.
Задание на курсовую работу
1. Тема курсовой работи:
Разработка front-end части веб-приложения c блочным подходом к
формированию html структуры документа
. Входные данные:
Шаблоны PSD, литература
. Перечень вопросов, которые подлежат разработке:
Описание средств реализации сайта, программная реализация
4. Рекомендованые средства:
Средство разработки:, CSS
5. Рекомендованная литература:
Дубаков М. - Создание Web-страниц: искусство вёрстки - Мн.: Новое знание,
2004. - 287 с.
6. Содержание пояснительной записки: типичный, согласно стандартам
7. Термин сдачи работы на кафедру:
. Дата защиты работы по графику: 10/01/2013
Задание выдано 05/10/2012
Задание выдала доц. Егошина А.А.
Консультант асс. Чубатов Р.Е.
Реферат
Пояснительная записка: 40 с., 4 рис., прилож. 2
Объектом исследования являются средства реализации, с помощью которых есть
возможность построить веб-сайт необходимый для упрощения поиска работы и
работников на необходимые должности.
Существует огромное количество сайтов, центров занятости, но большинство
из них несут в себе скрытых характер заработать на пользователях их услуг. В
данном же случае планируется разработать сайт, на котором абсолютно бесплатно
можно выполнять любые действия, размещать объявления, искать другие резюме, а
так же их просматривать.
Развитие такого сайта позволит помочь безработным, или тем, кому необходимы
рабочие кадры. Объединив все усилия для создания такого веб-сайта можно сделать
очень полезный, и социально необходимый продукт. Таким образом, можно
организовать сайт и для существующего центра занятости.
Перечень
условных обозначений, символов, единиц и терминов
ВБС -
веб-базовая система
ПЗ -
пояснительная записка
ЭФ - экранная форма- PHP: Hypertext Preprocessor
КР - курсовая
работа
КС -
компьютерная система
WWW
- World Wide Web- HyperText Markup Language
CSS -
Cascading Style Sheets
Содержание
Введение
. Техническое
задание
.1 Назначение
сайта
.2 Цели
создания сайта
.3 Требования
к сайту
.4
Технические показатели
.
Теоретическая часть
.1
Определение HTML как языка разметки
.2 Структура
HTML документа
.3 Основные
элементы HTML
.4 Стили CSS
.
Практическая часть
.1 Среда
разработки
.2
Практическая реализация
Заключение
Список
литературы
Приложение 1
Приложение 2
Введение
В наше время самой популярным методом вёрстки является блочное создание
страниц основанное на CSS. Однако когда CSS еще не существовало, для верстки
страниц применялась табличная вёрстка. Шаблон представляется в виде сетки.
Каждая ее ячейка предназначена для определенного элемента: картинки, части
текста или рамки, таблицы и т.д.
Основными свойствами таблиц являются:
· способность автоматически изменять размеры в зависимости от
количества содержимого в каждой ячейке;
· возможность сохранять установленные верстальщиком размеры
одних ячеек и при этом делать растяжимыми другие.
Такой тип веб-верстки удобен для создания таблиц данных, вложенных
таблиц, коллажей, обтекающего изображения текста и т.д. Кроме того, табличная
верстка шаблона не представляет особой трудности даже для начинающих.
Однако он имеет ряд минусов:
· Главный недостаток табличной верстки - код. Во-первых, он громоздкий.
Это значит, что даже если на странице нет картинок, загружаться она будет
долго. Во-вторых, программистам потом трудно работать с кодом, который к тому
же не семантический, то есть не логичный.
· Даже при наличии специальных редакторов, правку такого кода
такого кода приходится делать только вручную. Структура его такова, что иногда
невозможно разобраться, какому фрагменту страницы относится тот или иной тег.
· Структура кода при табличной верстке такова, что поисковый
робот начинает читать код страницы, а не контент. Из-за этого страница хуже
проходит индексацию поисковиками, чем при блочной вёрстке.
· Таблицы хорошо отображаются на мониторах с хорошим
разрешением. Но сегодня Интернетом можно пользоваться чуть ли не с любого
электронного устройства. Таблицы в этих форматах попросту не работают.
Ввиду этих проблем большинство верстальщиков перешли от табличной верстке
к блочной.
Принцип блочной верстки состоит в том, что макет страницы разбивается на
прямоугольные области - блоки. Каждому из которых потом задается ряд
параметров: поля, рамки, отступы, цвет, обтекание и т.д. Ограничений как для
оформления, так и для содержимого практически нет. В блок можно вставить текст,
изображение, меню навигации, медийный файл, таблицу, список - что угодно.
Тег div - главное преимущество блочной верстки сайта над табличной. Он
может обозначать и разные функциональные области (меню навигации, шапка,
основной блок, подвал), и отдельные их элементы. В HTML теги, как правило,
жестко привязаны к своему содержимому. Например, в тег <image> вы никогда
не сможете вписать текст, только изображение.
Главными плюсами блочной верстки можно назвать:
· соответствие кода современным стандартам;
· удобочитаемость кода;
· семантически верный код;
· минимальное время загрузки страницы;
Основной проблемой в создании страниц блочным методом вёрстки является
создания кросс-браузерности, т.е. необходимо будет создать универсальный код,
который бы одинаково и без ошибок работал в разных браузерах. Для этого
приходится вникать в тонкости поведения браузеров при использовании различных
элементов стиле
1. Техническое задание
.1 Назначение сайта
Разрабатываемый сайт будет использоваться как сайт библиотека, в которой
будут храниться данные по людям, которые там зарегистрируются. Информация,
которая будет размещена пользователем сайта, может использоваться посетителями
сайта, которые ищут людей для общения или работы. Удобность состоит в том, что
посетитель может без труда осмотреть портфолио каждого, кто зарегистрирован на
этом сайте, при этом, может без труда с ним связаться через сообщения на сайте,
или же через контактную информацию, оставленную зарегистрированным
пользователем. По сути, преимущественное большинство существующих сайтов, с
информацией о ее пользователях, не несут в себе полного объема данных, который
необходим для того, что бы найти посетителю человека с похожими интересами,
либо человека с необходимыми трудовыми качествами. Это в результате оказывается
губительным для зарегистрированного пользователя и посетителя сайта. Так как,
человек, который ищет работу и размещает свое резюме на сайте, не сможет в
полной мере указать все свои профессиональные данные. В этом же случае,
работодатель, заинтересованный в поисках квалифицированных кадров не сможет в
полной мере оценить способности предлагаемой кандидатуры. Такая же ситуация и
относительно тех, кто хочет найти человека по схожим интересам. Ввиду того, что
пользователь из-за узкого набора критерий заполнения своей личной анкеты может
не указать некоторые важные факторы для других пользователей. Собственно, такие
недоработки подавляющего большинства социальных сетей, или электронных анкет,
имеют значительное место в системах общения пользователей интернета в общем.
Так же одним фактов недоработки сайтов такого типа, можно указать платность
некоторых дополнительных функций. Пользователь, который не способен оплатить
эти услуги, просто отрезается в некоторой степени от тех, кто в силах это
делать. Что же касается разрабатываемого проекта, так нужно отметить то, что
абсолютно все функции, предоставленные самим сайтом, будут бесплатными, и
пользователи смогут себя комфортно чувствовать даже в случае их неспособности
вкладывать деньги в свое резюме.
Ввиду всех существующих недостатков остальных сетей или сайтов с
сомнительными функциями центра занятости, разработчиком данного сайта
предлагается новый формат интернет анкет, в которые будут входить максимально
полные объемы заполняемой информации, а так же предоставляемая функция загрузки
видео. С помощью новых форматов анкет, всем посетителям сайта будет более
удобно и комфортно вести поиск интересных им людей. Так же, с помощью
специальной системы поиска, работодатели смогут более быстро искать рабочие
кадры по важным для них рабочим критериям. В общем, такая структура позволит
более прогрессивное ведение общения с другими пользователями, и в общем сможет
обеспечить достаточную информативность.
.2 Цели создания сайта
Создаваемый, сайт разрабатывается с целью создать максимально
информативную базу пользователей, зарегистрированных на сайте. Данная
информативная база данных будет использоваться другими пользователями или
посетителями сайта с целью ознакомится с личными резюме интересующих им
пользователей, прошедших процедуру регистрации и процедуру заполнения
информации о своих интересах и профессиональных данных. Данные анкеты должны
иметь максимально обширные темы полей для заполнения, в которых нужно указать
все свои данные, включая все свои профессиональные данные, с возможностью
дальнейшего ее редактирования.
В связи с тем, что в наше время уже существует достаточно много подобных
сайтов, но не один из них не несет в себе полной и достоверной информации,
главной целью создаваемого сайта будет не только превзойти остальные по
функциональности, но и обеспечить сайту особенную структуру, которая не будет
напоминать другие сайты.
Создание сайта, очень сложный процесс, особенно, если нужно организовать
сайт с настройками, издали напоминающий социальную сеть. Сайт не имеет цель
создать развлекательную страницу, или ее подобие, а только рабочее назначение
для поиска профессиональных кадров и людей с общими интересами.
.3 Требования к сайту
Требования к взаимодействию. Основными требованиями к сайту можно
определить ясность требований к пользователю при вводе им личной информации,
так же следует определить для пользователя какую именно информацию следует
вводить при заполнении информационных полей. Так же на сайте необходимо четко
объяснить, где находятся, какие разделы и для чего они нужны, для более
комфортного и более быстрого ориентирования на сайте. Так же необходимо сделать
удобный интерфейс взаимодействия.
Требования к языкам программирования. Для статических страниц и шаблонов
используются технологии HTML и CSS. HTML (HyperText Markup Language, язык
разметки гипертекста) - специальные инструкции браузера, с помощью которых
создаются веб-страницы. То, что отображается при просмотре страницы в Internet,
- это интерпретация браузером HTML-текста. CSS (Cascading Style Sheets,
каскадные таблицы стилей) - это набор параметров форматирования, который
применяется к элементам веб-страницы для управления их видом и положением.
Стили являются удобным, практичным и эффективным инструментом при верстке
веб-страниц и оформлении текста, ссылок, изображений и других элементов.
Требования к организации гиперссылок. Все ссылки на сайте являются
относительными (за исключением внешних). Относительные ссылки ведут отсчет от
корня сайта или текущего документа, а абсолютные адреса начинаться с указания
протокола (обычно #"787562.files/image001.gif">
· padding
Описание: устанавливает значение полей вокруг содержимого элемента. Полем
называется расстояние от внутреннего края рамки элемента до воображаемого
прямоугольника, ограничивающего его содержимое.
Синтаксис: padding: [значение | проценты] {1, 4} | inherittop - отступ
сверху; padding-left - отступ слева;right - отступ справа; padding-bottom -
отступ снизу.
Кроссбраузерность:
· font
Описание: универсальное свойство, которое позволяет одновременно задать
несколько характеристик шрифта и текста.
Синтаксис: font: [font-style||font-variant||font-weight] font-size [/line-height]
font-family | inherit
Значения:family - устанавливает семейство шрифта, которое будет
использоваться для оформления текста содержимого. Список шрифтов может включать
одно или несколько названий, разделенных запятой. Если в имени шрифта
содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные
или двойные кавычки.size - jпределяет размер шрифта элемента. Размер может быть
установлен несколькими способами. Набор констант (xx-small, x-small, small,
medium, large, x-large, xx-large) задает размер, который называется абсолютным.
По правде говоря, они не совсем абсолютны, поскольку зависят от настроек
браузера и операционной системы.style - определяет начертание шрифта - обычное,
курсивное или наклонное. Когда для текста установлено курсивное или наклонное
начертание, браузер обращается к системе для поиска подходящего шрифта. Если
заданный шрифт не найден, браузер использует специальный алгоритм для имитации
нужного вида текста. Результат и качество при этом могут получиться
неудовлетворительными, особенно при печати документа.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 позволяет установить
одновременно до пяти характеристик фона. Значения могут идти в любом порядке,
браузер сам определит, какое из них соответствует нужному свойству.
Синтаксис:.1 background: [background-attachment || background-color ||
background-image || background-position || background-repeat] | inherit
CSS3 background: [<фон>,]* <последний_фон>color - определяет
цвет фона элемента. Хотя это свойство не наследует свойства своего родителя,
из-за того, что начальное значение устанавливается прозрачным, цвет фона
дочерних элементов совпадает с цветом фона родительского элемента.position -
задает начальное положение фонового изображения, установленного с помощью
свойства background-image. В CSS3 допустимо указывать несколько значений для
каждого фона, перечисляя значения через запятую.repeat - определяет, как будет
повторяться фоновое изображение, установленное с помощью
свойстваbackground-image. Можно установить повторение рисунка только по
горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать
несколько значений для каждого фона, перечисляя значения через запятую.: 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
Значения:- казывает, что элемент абсолютно позиционирован, при этом
другие элементы отображаются на веб-странице словно абсолютно
позиционированного элемента и нет.
Положение элемента задается свойствами 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">
Возможность вводить информацию:
