Разработка стилей для реализации интерфейса web-сайта

На основе структуры первой страницы определите перечень используемых стилей для позиционирования элементов web-сайта в соответствии с выданным заданием.

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

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

Таблица 4.1 Стили описания элементов разметки

Название css-селектора	Правила для устройства «Screen»	Правила для устройства «Адаптивное устройство»

* Адаптивное устройство выбирается в соответствии с вариантом.

Ориентируясь на цветовую схему выданного шаблона, доработайте цветовое оформление разрабатываемого сайта.

При принятии решения о выборе цветовой схемы рекомендуется воспользоваться рекомендациями [] и специальными инструментами [].

Разделите стили на несколько файлов:

- создание структуры сайта

- форматирование текста

- форматирование изображений

- форматирование списков и меню.

Приведите в приложении текст всех CSS-файлов.

5 Требования к оформлению пояснительной записки

5.1 Общие требования

5.1.1 Пояснительную записку оформляют на листах формата А4 (210х297 мм).

5.1.2 Пояснительную записку печатают машинным (при помощи компьютерной техники) способом на одной стороне листа белой бумаги.

5.1.3 Объем пояснительной записки без приложений должен составлять 50-60 страниц печатного текста на украинском (русском) языке, шрифт Times New Roman, размер 14, интервал 1.5. Приложения могут составлять 10 – 20 страниц. Максимальный объем пояснительной записки – 80 страниц.

5.1.4 Текст записки следует печатать, соблюдая следующие размеры полей: верхнее, и нижнее - 20 мм, левое – 30, правое - 15 мм.

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

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

5.1.7 Абзацы в тексте начинают отступом, равным 15-17 мм.

5.1.8 Каждый пункт, подпункт и перечисление записываются с абзацного отступа.

5.1.9 Разделы и подразделы должны иметь заголовки.

5.1.10 Заголовки структурных элементов записки и заголовки разделов следует располагать в середине строки и печатать прописными буквами без точки в конце, не подчеркивая. Заголовки подразделов, пунктов и подпунктов записки следует начинать с абзацного отступа и печатать кроме первой прописной строчными буквами, не подчеркивая, без точки в конце. Если заголовок состоит из двух предложений, их разделяют точкой. Расстояние между заголовком и текстом – не менее двух строк.

Расстояние между строками заголовка, а также между двумя заголовками принимают таким же, как в тексте.

5.1.11 Каждый раздел текстового документа следует начинать с нового листа.

5.1.12 Переносы слов в заголовке не допускаются.

5.1.13 Текст пояснительной записки должен быть кратким, четким и не допускать различных толкований. При изложении обязательных требований должны применяться слова: «должен», «следует», «необходимо», «требуется, чтобы», «разрешается только», «не допускается», «запрещается», «не следует». При изложении других положений следует применять слова: «как правило», «при необходимости», «может быть», «могут быть» и т.д.

5.1.14 Структурные элементы «Реферат», «Перечень условных обозначений и сокращений», «Введение», «Заключение», «Перечень ссылок» не нумеруют, а их наименования служат заголовками структурных элементов.

5.1.15 Разделы, подразделы, пункты, подпункты следует нумеровать арабскими цифрами.

5.1.16 Разделы записки должны иметь порядковую нумерацию в пределах изложения сути, например 1, 2, 3, и т.д.

5.1.17 Подразделы должны иметь порядковую нумерацию в пределах каждого раздела

5.1.18 Номер подраздела состоит из номера раздела и порядкового номера подраздела,разделенных точкой.

5.1.19 После номера подраздела точку не ставят, например 1.1, 1.2 и т.д.

5.1.20 Пункты должны иметь порядковую нумерацию в пределах каждого раздела или подраздела, например, 1.1, 1.2 или 1.1.1, или 1.1.2 и т.д.

5.2 Нумерация страниц записки

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

5.2.2 «Титульный лист», «Задание» включают в общую нумерацию страниц записки. Номера страниц на титульном листе не проставляют.

5.2.3 Иллюстрации и таблицы, расположенные на отдельных страницах, включают в общую нумерацию страниц записки.

5.3 Иллюстрации

5.3.1 Количество иллюстраций должно быть достаточным для пояснения излагаемого текста.

5.3.2 Иллюстрации (чертежи, рисунки, графики, схемы, диаграммы, фотоснимки) следует располагать в пояснительной записке непосредственно после текста, в котором они упоминаются впервые, или на следующей странице. На все иллюстрации должны быть даны ссылки в записке. При ссылках на иллюстрации следует писать «... в соответствии с рисунком 3» или «… в соответствии с рис. 3» при сквозной нумерации и «...в соответствии с рисунком 1.2» или «...в соответствии с рис. 1.2» при нумерации в пределах раздела.

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

5.3.4 Чертежи, рисунки, графики, схемы, диаграммы, помещенные в записке, должны соответствовать требованиям стандартов «Единой системы конструкторской документации» (ЕСКД) и «Единой системы программной документации» (ЕСПД).

5.3.5 Допускается помещать в пояснительную запискуиллюстрации, выполняемые методом ксерокопии.

5.3.6 Ксерокопии и фотоснимки размером меньше формата А4 должны быть наклеены на листы белой бумаги формата А4.

5.3.7 Иллюстрации могут иметь название, которое помещают под иллюстрацией.

При необходимости под иллюстрацией помещают поясняющие данные (подрисуночный текст).

Иллюстрация обозначается словом «Рисунок», которое вместе с названием иллюстрации помещают после поясняющих данных, например: «Рисунок 3.1 - Схема размещения».

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

5.3.9 Номер иллюстрации состоит из номера раздела и порядкового номера иллюстрации, разделенных точкой, например 3.2 - второй рисунок третьего раздела.

5.4 Построение таблиц

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

5.4.2 При переносе части таблицы на ту же или другие страницы название помещают только над первой частью таблицы.

5.4.3 Цифровой материал оформляют, как правило, в виде таблиц согласно рис. 5.1.

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

5.4.5 Таблицы каждого приложения обозначают отдельной нумерацией арабскими цифрами с добавлением перед цифрой обозначения приложения. Если в документе одна таблица, она должна быть обозначена «Таблица 1» или «Таблица В. 1», если она приведена в приложении В.

5.4.6 На все таблицы должны быть приведены ссылки в тексте записки. При ссылке следует писать слово «таблица (табл.)» с указанием ее номера. Например, таблица 5.1, что означает, что это первая таблица второго раздела.

5.4.7 Головка таблицы должна быть отделена от остальной части таблицы.

5.4.8 Таблицу, в зависимости от ее размера, помещают под текстом, в котором впервые дана ссылка на нее, или на следующей странице, а, при необходимости в приложении к документу.

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

Таблица______ _________________________

(номер)

(название таблицы)

Заголовки граф

Подзаголовки граф

Строки (горизонтальные ряды)

Боковик (графа для заголовков строк)

Графы (колонки)

Рисунок 5.1 – Пример оформления таблицы и ее структура

5.4.10 Слово «Таблица» указывают один раз слева над первой частью таблицы. Над другими частями пишут слова «Продолжение таблицы» с указанием номера (обозначения) таблицы в соответствии с рис. 5.2.

Таблица 5.1 Размеры в миллиметрах

Нормальный диаметр резьбы болта, винта, шпильки	Внутренний диаметр шайбы	Толщина шайбы
Легкой	Нормальной	Тяжелой
а	в	а	в	а	в
2,0	2,1	0,5	0,8	0,5	0,5	-	-
2,5	2,6	0,6	0,8	0,6	0,6	-	-
3,0	3,1	0,8	1,0	0,8	0,8	1,0	1,2

Продолжение таблицы 5.1 Размеры в миллиметрах

Нормальный диаметр резьбы болта, винта, шпильки	Внутренний диаметр шайбы	Толщина шайбы
Легкой	Нормальной	Тяжелой
а	в	а	в	а	в
4,0	4,1	1,0	0,8	1,0	1,2	1,2	1,6
…	…	…	0,8	0,6	0,6	-	-
	42,5	-	-	-	-	-	-

Рисунок 5.2 – Пример разрыва таблицы

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

Таблица 5.3 Размеры в миллиметрах

Условный проход, Dy	D	L	L1	L2	Масса,кг,не более

Рисунок 5.3 –Пример нумерации граф таблицы

5.5 Формулы и уравнения

5.5.1 Формулы и уравнения располагают непосредственно после текста, в котором они упоминаются, посередине страницы.

Выше и ниже каждой формулы или уравнения должно быть оставлено не менее одной свободной строки.

5.5.2 Формулы и уравнения в записке следует нумеровать порядковой нумерацией в пределах раздела.

5.5.3 Номер формулы или уравнения состоит из номера раздела и номера формулы или уравнения в нем, разделённых точкой, например, формула (5.3) - третья формула пятого раздела.

5.5.4 Номер формулы или уравнения указывают на уровне формулы или уравнения в скобках в крайнем правом положении на строке.

5.5.5 Пояснение значений символов и числовых коэффициентов, входящих в формулу или уравнение, следует приводить непосредственно под формулой в той последовательности, в которой они даны в формуле или уравнении.

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

Пример:

Время выполнения программы процессором оценивается с помощью «формулы оценки производительности»:

, (5.1)

где T – время выполнения программы, сек;

N – количество команд, выполняемых в программе;

S – среднее число тактов на одну команду;

F – тактовая частота, Гц.

5.6 Перечисления

5.6.1 Перечисления, при необходимости, могут быть приведены внутри пунктов или подпунктов. Перед перечислением ставят двоеточие.

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

Пример:

а) контактные механические термометры:

- дилатометрические;

- жидкостные;

- газовые;

б) контактные электрические термометры:

- термометры сопротивления;

- термоэлектрические термометры;

- особые типы электрических контактных термометров;

5.6.3 Перечисления первого уровня детализации пишут (печатают) строчными буквами с абзацного отступа, второго уровня - c отступом относительно месторасположения перечислений первого уровня.

5.7 Ссылки

5.7.1 Ссылки в тексте записки следует указывать порядковым номером по перечню ссылок, выделенных двумя квадратными скобками, например, «... в работах [1 - 7]».

5.7.2 При ссылках на разделы, подразделы, пункты, подпункты, иллюстрации, таблицы, формулы, уравнения, приложения указывают их номера. Примеры ссылок: «.. в разделе 4...», «... смотри 2.1...», «...3.3.4...», «на рис. 1.3...», или «на рисунке 1.3...», «... в таблице 3.2...», «... (см табл. 3.2...)», «по формуле (3.2)...», «в уравнениях (1.23) - (1.25)...», «... в приложении Б..».

5.8 Приложения

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

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

5.8.3 В тексте пояснительной записки на все приложения должны быть даны ссылки.

5.8.4 Приложения располагают в порядке ссылок на них в тексте пояснительной записки.

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

5.8.6 Приложения обозначают заглавными буквами украинского языка, начиная с А, за исключением Г, Є, 3, І, Ї, Й, О, Ч, Ь. После слова «Приложение» следует буква, обозначающая его последовательность. Допускается обозначение приложений буквами латинского алфавита за исключением букв J и О.

5.8.7 Приложения, как правило, выполняют на листах формата А4.

5.8.8 Допускается оформлять приложения на листах формата АЗ и других, с соблюдением требований ГОСТ 2.301-68.

5.8.9 Все приложения должны быть перечислены в содержании пояснительной записки с указанием их номеров и заголовками.

Список рекомендуемой литературы

1. Квинт И., HTML и CSS на 100%, - СПб.: Питерб 2010, - 384с.

2. Орлов Л. В., Web_сайт без секретов.— М.: Бук_пресс, 2006. — 512 с.

3. Полонская Е.Л., Язык HTML. Самоучитель.: — М.: Издательский дом "Вильяме", 2003. — 320 с.

4. Robert G. Fuller, HTML in 10 Simple Steps or Less, 2004 by Wiley Publishing, Indianapolis, Indiana.

5. Гончаров А., Самоучитель HTML. — СПб.: Питер, 2002. — 240с.

6. Мержсвич В. В. HTML и CSS на примерах. — СПб.: БХВ-Петербург, 2005. —448 с.

7. Laura Lemay, Rafe Colburn, Web publishing with HTML and CSS, Sams Teach Yourself, - 2011, -760c.

8. Ши Д., Хольцшлаг М. Е., Философия CSS-дизайна / Дэйв Ши, Молли Е. Хольцшлаг; пер. с англ. А. А. Слинкина. - М.: НТ Пресс, 2005. - 312 с.

9. Jason Cranford Teague, Visual Quickstart Guide CSS, DHTML, and Ajax, Fourth Edition, - Peachpit Press, - 2006, -576с.

10. Элизабет Кастро, HTML и CSS для создания Web-страниц, Пер. с англ. И.В. Диева, -М.: НТПресс, 2006, -144с.

Приложение А.