Пошаговое описание выполнения Задания №4 1) Создаем папку

Пошаговое описание выполнения Задания №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 пикселей.