Пошаговое описание

Пошаговое описание выполнения Задания №4
1) Создаем папку site5
2) Скачиваем с сайта архив Задание №5 и распаковываем содержимое архива в папку
site5
3) Создаем файл default.html
4) Создаем файл style.css
5) Пишем в default.html основную структуру HTML-страницы (теги: html, head, body)
6) Указываем в теге title заголовок страницы: Site Example 5
7) Подключаем css-файл style.css к нашей веб-странице, тегом link, внутри head
<link rel="stylesheet" href="style.css" />
8) Начинаем писать CSS-код в наш style.css:
сбрасываем внешние и внутренние отступы для всех элементов на странице
следующим образом:
* { padding: 0; margin: 0; }
9) Устанавливаем фон для страницы bg.jpg из папки images
body {background: #fff url(bg.jpg) repeat-x;}
также свойства margin и padding выставляем в 0 для body.
Устанавливаем шрифт для всей страницы (для body):
font: normal .72em/1.5em 'Trebuchet MS', sans-serif;
цвет шрифта (color) для всей страницы: #333;
высоту страницы (height) равную 100%
10) Задаем стиль для ссылок (тега а):
цвет: #72A545;
стиль для ссылок над которыми находится курсор
a:hover {color: #006699;}
11) Добавляем внутрь тега body первый слой (тег div)— контейнер для содержимого
всего нашего сайта. Указываем для данного тега атрибут id с значением: sitebox.
Прописываем стили для данного блока в CSS (#sitebox):
ширина (width): 790px;
выравниваем по центру страницы, для этого нужно свойству margin присвоить
значение: 0 auto;
12) Внутри блока c id равным sitebox, создаем еще 3-и div-блока, со следующими
значениями атрибута id по порядку: head, content, footer
13) Для #head указываем в CSS высоту в 100px;
14) Внутри блока #head начинаем реализовывать логотип.
1. Открываем ссылку (тег: a)
2. в адресе (href) указываем имя файла нашей html-страницы.
3. Пишем внутри ссылки текст: pixelgreen Put your site slogan here...
4. Слово pixelgreen поменящаем в тег h1
5. Предложение: Put your site slogan here... в h2
6. Слово green помещаем в тег span
7. В качестве id для нашей ссылки указываем: logo.
8. Начинаем стилизовать наш логотип через CSS, для элемента h1 внутри ссылки
#logo (#logo h1) пишем:
font: bold 4em 'Trebuchet Ms', Sans-serif;
letter-spacing: -2px;
значением цвета: #fff;
9. Цвет слова green (#logo h1 span) меняем на #BFBFBF;
10. Стилизуем слоган (#logo h2)
font: bold 1.1em 'Trebuchet Ms', Sans-serif;
15) Начинаем позиционировать наш логотип #logo внутри шапки #head
1. Выставляем родительское позиционирование для #head, а именно свойство
position в значение: relative;
2. Свойство position для #logo ставим в: absolute;
свойство top и left выставляем в 0
убираем подчеркивание ссылки: text-decoration: none;
3. Позиционируем слоган внутри ссылки #logo (#logo h2):
position: absolute;
top: 55px; right: 0px;
16) Создаем div-блок для верхнего меню в шапке. Данный блок должен иметь id равный
top-menu и находиться внутри блока #head. Внутри блока #top-menu создаем 5ссылок меню (Home News Downloads Support About) с одним одинаковым адресом
(default.html).
17) Начинаем стилизовать меню:
1. Ставим абсолютное позиционирование для блока #top-menu, т. е. свойство position
должно быть равно absolute;
2. Далее позиционируем по правой строне относительно шапки:
отступ справа (right) в 0, отступ сверху (top) должен быть 15px;
3. Делаем ссылки внутри #top-menu блочными элементами, чтобы можно было
задать им внутренние отступы и др. свойства блочных элементов – для этого
свойство display для них должно быть равно значению: block;
4. Выставляем обтекание справа для всех ссылок float: left;
5. Определяем шрифт ссылок:
font: bolder 1.3em 'Trebuchet MS', sans-serif;
6. Цвет должен быть: #FFF
7. Внутренние отступы: padding: 3px 12px;
8. Цвет фона (background-color) выставляем в #333
9. Отменяем подчеркивание ссылок (см. 15.2 — свойство text-decoration)
10. Делаем рамку: border-right: 1px solid #272727;
11. Меняем стиль ссылки меню при наведении курсора (#top-menu a:hover):
цвет фона меняется на #65944A, цвет ссылки на #FFF;
12. Первой ссылке с текстом Home, припысываем id равный current и в CSS
добавляем для него такие же свойства как и в предыдущем пункте (17.11)
18) В блок c id=”content” вставляем картинку headerphoto.jpg из папки images
19) Для блока c id=”content” выставляем цвет фона в #ffffff, а также внутренние отступы
со всех сторон (padding) в значение: 15px;
20) Далее после картинки вставляем div-блок с id равным content-wrap, а в нем пишем еще
2а блока: сначала div-блок с id равным: post, а затем div с id равным sidebar.
21) Внутри блокаc id=”post” создаем h1 теги с текстом Sample Tags
22) Внутри блока id=”sidebar” создаем 3-и div блока с атрибутом класса (class) равным
sidebox. В каждом из таких блоков создаем h1 — тег с заголовком соотв. блока, по
порядку как на скрине: Sidebar Menu, Support Styleshout, Search Box
23) Начинаем стилизовать новые блоки на странице. Первое что нужно сделать это
верхний внешний отступ (margin-top) нашего div-блока c id =”content-wrap” от
картинки — поставить значение:15px;
24) Далее расставляем правую (#post) и левую (#sidebar) колонки сайта. Для #post
указываем float: left; и ширину 68%. Для #sidebar float: right; и ширину 30%;
25) Далее для всех блоков с классом: sidebox (.sidebox) внутри блока #sidebar выставляем
следующие свойства: фон: #F2F2F2; рамка border: 1px solid #EFEDED; и внешний
нижний отступ (margin-bottom) с значеним: 10px;
26) Выставляем стили для всех элементов h1 внутри блоков с классом sidebox:
padding: 10px 0px 5px 10px;
margin: 0;
font-size: 1.4em;
color: #65944A;
text-align: left;
27) Для тегов h1 внутри #post те же самые стили что и в предыдущем пункте кроме
размера шрифта (font-size), который должен быть: 1.6em;
28) Начинаем наполнять основное содержимое, весь исходный текст находится в файле
текст_страницы.txt
29) Заголовки: Example Lists, Blockquote, Image and text, Table Styling, Example Form
должны быть реализованы с помощью тега заголовка третьего уровня - заголовка
третьего уровня – h3.
30) Стилизуем заголовки третьего уровня h3, которые находятся внутри блока #post.
цвет текста: #444
выравнивание текста (text-align) по левому краю
далее: margin: 10px 15px;
размер шрифта: 1.2em
31) Вставляем после Example Lists два списка, сначала нумерованный с пунктами: 1) Here
is an example и 2) of an ordered list, затем маркированный: Here is an example и of an
unordered list.
32) Далее стилизуем наши списки (находящиеся внтури #post):
выравниваем текст внутри списков по левому краю,
выставляем левый внутренний отступ (padding-left) для всего элемента списка в 50px
и внешний нижний (margin-bottom) отступ в размере 10 пикселей.
33) Меняем вид маркеров в маркированном списке на фон-картинку (bullet.gif), для этого
используем CSS-свойство: list-style-image для ul.
34) Вставляем цитату «Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat....» внутри тега
blockquote.
35) Стилизуем тег blockquote.: назначем свойства:
внешний отступ (margin) равный 15px;
внутрениий отступ (padding) равный 10px;
внутренный отступ слева: 20px;
цвет фона: #FAFAFA;
цвета рамки (границ): 1px solid #f2f2f2;
цвет левой границы: 3px solid #72A545;
шрифт: bold 1.2em/1.5em "Trebuchet MS", Tahoma, sans-serif;
цвет текста: #666666;
выравнивание: по левому краю
36) Далее вставляем картинку и текст под заголовком «Image and text».У картинки атрибут
align должен быть равен left. Также для картинки выставляем следующие свойства:
внешний отступ: 5px 15px 5px 0px;
границы вокруг элемента (border): 1px solid rgb(218, 218, 218);
внутрений отступ: 5px;
37) Выставляем выравнивание текст внутри #post по левому краю.
38) Вставляем заголовок Table Styling в h3-теге
39) Создаем таблицу. Свойства cellspacing и cellpadding выставляем в 0.
В первой строке таблицы, вместо тегов td для ячеек используем тег th.
40) Прописываем все остальные ячейки таблицы наполняя их информацией. Каждой
второй строке (tr) таблицы не считая первой строки, указываем атрибут class с
значением gr.
41) Начинаем стилизовать таблицу (#post table)
1. задаем ширину для всей таблицы равную 100%
2. для всех строк (#post table tr) указываем высоту равную 30px;
3. Выставляем общие стили для ячеек разного типа (#post table tr td, #post table tr
th):
padding-left: 11px;
padding-right: 11px;
border-left: 1px solid #FFF;
border-bottom: solid 1px #ffffff;
4. Для заголовочных ячеек (#post table tr th) прописываем стили:
цвет фона: #74A846;
внутрение отступы слева: 11px;
Внутрение отступы справа: 11px;
цвет текста: #fff;
выравнивание текста: left;
border-left: 1px solid #B6D59A;
border-bottom: solid 2px #FFF;
5. Для ячеек основного содержимого таблицы (#post table tr td) изменяем цвет
фона в #F8F8F8;
6. Для ячеек с классом gr (#post table tr.gr td) цвет фона должен быть: #EFEFEF;
42) Встваляем заголовок «Example Form» в h3.
43) Открываем парнй тег form, закрываем его. Внутри него вставляем 3и элемента формы
(тег input). Первые два элемента – текстовое поле (см. значение атрибута type:
http://htmlbook.ru/html/input/type). Кнопка имеет тип «Кнопка для отправки данных
формы на сервер.»
44) Большое (многострочное) поле ввода реализуется через тег textarea (см. справочник!)
45) Стилизуем саму форму (#post form):
внутренние отступы: 20px;
границы: 1px solid #f2f2f2;
цвет фона: #FAFAFA;
46) Стилизуем элементы input (#post form input)
делаем элементы блочными: display: block;
внешний отступ сверху: 3px; внешний отступ снизу: 7px;
47) Стилизуем многострочное поле ввода (#post form textarea):
делаем элемент блочным (см. предыдущий пункт)
внешний отступ сверху: 3px; внешний отступ снизу: 7px
высота: 100px; ширина: 400px;
48) Установите для кнопки атрибут id равный sbmt. В CSS обратитесь через #sbmt и
назначте следующие свойства:
внутрениие отступы: 2px; цвет фона: #f5f5f5; границы: 1px solid #cacaca; размер
шрифта: 1.2em;
49) Стилизуем подвал (#footer)
отменяем свойство float предыдущего элемента, т.е. свойству clear выставляем
значение: both;
граница сверху: 1px solid rgb(234, 234, 234)
выравнивание текста: left;
внутренние отступы сверху: 10px;
высота: 50px