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

Разработка 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 - устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.