sam_rab_1
.pdfСначала установим для страницы общие правила форматирования (вставим данные строчки
вфайл style_7.css):
* {margin: 0; padding: 0; border: 0}
body{padding: 2% 0 0; background: #fff; color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif}
#container {width: 760px; margin: 0 auto}
Уточним некоторые моменты.
1)Первая запись стилевого файла. Под звездочкой (*) подразумевается одновременно вся страница. Она не является тегом, тем не менее, все браузеры понимают информацию, которую она заключает в себе, а именно используют ее данные для всей страницы. Итак, для всей страницы последовательно записали:
Отступы – равны 0, Поля – равны 0, Рамка – равна 0.
Это сделано с целью, чтобы в ненужных местах не всплыли рамки, поля или отступы. Если упустить эти строки, то браузер может интерпретировать данные совсем не так, как задумано. Их можно указать двумя способами – пикселями или процентами. Если значение равно нулю, то единицу измерения указывать не надо.
2)Вторая запись стилевого файла – определяет форматирование тела страницы: отступы 2% от верхнего поля, а по обоим бокам и внизу задано значение 0. Это подразумевает то, что страница будет подходить к верхнему полю не впритык, а отступать от него 2% полного размера окна.
Замечание: стоит заметить важный факт – все значения вписываются одно за другим, без запятых. Точка с запятой вписывается только после последнего значения.
Для равномерного отступа с обеих сторон, можно задать только три значения. Три - потому что отступ с правой и левой стороны одинаковый. Это будет выглядеть так - 2% 0 0, или если удобнее, то 15px 0 0 – это значение в пикселях. Ноль посредине обозначает одинаковый интервал отступа с обеих сторон. Рассмотрим на примерах:
а. 5px 10px 15px 20px; — сверху отступ в 5 пикселов, справа 10, снизу 15, а слева 20. б. 5px 10px 15px; — сверху 5, с обеих сторон по 10, внизу 15.
в. 5px 10px; — сверху и снизу по 5, с боков по 10.
г.5px; — отступ со всех сторон равен 5 пикселям.
Впунктах б, в и г представлена сокращенное задание отступов.
Вернемся к странице: цвет фона – белый, шрифт – темно-серый (#333).
Замечание: по идее, символов, задающих цвет должно быть шесть, но для сокращения возможно писать меньше.
Далее идут перечисления используемых шрифтов. Напомним, если название шрифта состоит более, нежели из одного слова, то его необходимо записывать в кавычках (например, "Times New Roman").
3) Третья запись стилевого файла – представлена запись #container. Решетка (#) значит, что атрибут является уникальным. Конкретнее это означает, что тег div и данный атрибут будут
21
использованы на странице единожды. Тег div в данном случае имеет уникальный атрибут id. Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используется атрибут
class.
Понятие контейнер используется для помещения страницы в середину окна. Для контейнера четко указали отступы – верх и низ – 0, а по обоим бокам – auto. Это значит то, что какая бы не была страница размером – страничка всегда будет размещена по центру.
В принципе, для этого можно было бы использовать тег body, но не все так просто – браузер бы обязательно отдал всю видимую область, а страничка размером в 760 пикселей, однозначно бы расположилась с левой стороны окна, что крайне нежелательно.
Шаг 2.
Внесем запись в стилевой файл для шапки страницы:
style_7.css
#header {
background: url(Pic/header.jpg) no-repeat; width: 760px;
height: 158px
}
Выполнили следующее – в вверху страницы размещена картинка, имеющая размеры 760х158 пикселей (это не существенно, размер может изменяться), а url(Pic/header.jpg) – это соответственно ссылка на саму картинку.
Далее записан атрибут no-repeat - это означает, что картинка (или другая запись) используется единожды и не повторяется. Если бы это не было прописано, то браузер бы располагал картинку в окне бесконечно долго, пока не заполнится экран по ширине. Кроме этого можно использовать repeat-x или repeat-y, если необходимо размножить фон по вертикали или горизонтали соответственно.
Откроем главную страницу и в промежутке между <body> </body> добавим участок кода:
index.html
<div id="container"> <div id="header"> </div> </div>
Сначала добавили тег контейнера строкой <div id="container">, после чего развернули тег шапки <div id="header">, после чего его сразу и закрыли строчкой </div>. После чего окончательно закрыли тег контейнера </div>.
div id в данном случае обозначает тег (блок) с индивидуальным атрибутом. Атрибут обязательно заключается в кавычки.
Cохраните и откройте страничку в любом браузере. Возникнет страница и картинка, находящаяся ровно посредине и вверху. Это контейнер с шапкой добавился к телу страницы.
Шаг 3.
Продолжим формирование странички. Добавим панель навигации, которая будет в единственном экземпляре располагаться прямо под шапкой и будет реализована с помощью маркированного списка.
Откроем стилевой файл. Допишем в нем записи, определяющие элементы навигации на странице:
style_7.css
#nav {
background: url(Pic/nav-bg.jpg) repeat-x; color: #f00;
font-size: 80%; font-weight: bold; line-height: 1.8em;
22
text-align: center;
}
#nav ul { list-style-type: none;
}
#nav li { display: inline; margin: 0 8px;
}
#nav li a { color: #000000;
}
#nav li a:hover { color: #f00;
}
a {
text-decoration: none;
}
Откроем файл страницы index.html, находим в коде следующее место:
<div id="header"> </div>
и за ним записываем следующее:
<div id="nav"> <ul> <li>Главная</li>
<li><a href="#">О нас</a></li> <li><a href="#">Наши работы</a></li> <li><a href="#">Наша страна</a></li> <li><a href="#">Звонки</a></li> <li><a href="#">Программа</a></li>
</ul>
</div>
Все пункты навигации оформляются как пункты единого списка. Все, кроме первого – ссылки. Для того, чтобы не переходить на ненаписанные ссылки добавляем решетку, она всегда перенаправит на исходную страницу.
Напомним о каскадности стиля. В стилевом файле задана глобальной настройка блока #nav и маркированный список ul данного блока. В данном случае каждое следующее правило форматирования передается от предыдущего. Кроме этого они все находятся в контейнере, и таким способом перенимают часть правил из него. Именно из-за этого все называется каскадом.
Рассмотрим веденные записи стилевого файла. Атрибутом nav обозначили блок навигации. Укажем некоторые настройки для него. В качестве фонового рисунка выбрали обычный столбикградиент серого цвета. Для того, чтобы он равномерно растянулся в его значении написали repeat-x, это «повторило» его по оси горизонтали. После чего обозначили цвет шрифта как яркокрасный - #f00. И, соответственно все остальные параметры – размер, толщина, вертикальная высота. Здесь ведена новая величина – em, которая соответствует высоте обычной прописной буквы.
Рассмотрим запись #nav ul {list-style-type: none;}. Она определяет, что в списке не должно быть никаких маркеров. Для этого использовали значение none.
Если не указывать дополнительных параметров, то по умолчанию, отдельные элементы списка (строки списка) располагаются в столбик. Для задания горизонтального расположения используем display: inline; Кроме этого добавим отступы по 8 пикселей по бокам, и нулевые сверху и снизу:
#nav li { display: inline; margin: 0 8px;
}
23
Пропишем реакцию пунктов меню на наведение курсора с помощью тега <а>:
#nav li a { color: #000000;
}
#nav li a:hover { color: #f00;
}
Впервом элементе кода обозначили цвет ссылки в обычном состоянии, а во втором случае
—в активном, то есть после наведения на нее курсора.
Затем добавили следующую запись:a {text-decoration: none;}
Эта запись – общее для всех ссылок. Она вводится для того, чтобы все ссылки не могли использовать подчеркивание по умолчанию.
Шаг 4.
Продолжим разработку дальше.
Шаг 4.1
Уже имеем на странице контейнер и блок навигации. Давайте допишем еще пару строк в список:
index.html
<li><a href="#">Контакты</a></li> <li><a href="#">Справка</a></li>
А ниже строк
</ul>
</div>
добавим:
<div id="text">
<img class="img1" src="Pic/img1.jpg" alt="Бизнес"> <p>Бизнес это ……… </p>
<p>Теперь ………. </p> <br>
<a href=#> Ссылка из текстового блока </a> <br>
<img class="poloska" src="Pic/poloska.jpg" alt="Бизнес"> <img class="img2" src="Pic/img2.jpg" alt="Бизнес"> </div>
Разместив любой текст (в тегах <p>), сохраним страничку, и снова запустим ее в браузере. Видим, что текст размещен плохо, а, следовательно, требует доработки таблица стилей.
Рассмотрим новые строки кода. Тег div и атрибут text – это и есть место, где размещается информация на страничке. Под этим и понимают понятие контент.
Шаг 4.2
Продолжим разрабатывать главную часть кода, а именно настроим отображение контента. Откроем стилевой файл и произведем настройку оформления текстового содержания странички.
Для этого воспользуемся атрибутом text. Внесем следующие изменения в CSS:
style_7.css
#text { width: 545px;
font-size: .8em; color: #333; margin: 10px auto;
24
float: left;
}
#text p { text-align: justify; text-indent: 1.5em; margin: 0;
padding: 0 15px;
}
#text a { color: #396;
}
#text a:hover { color: #f36;
border-bottom: #f36 dotted 8px;}
В начальной записи указали, что 545 пикселей является шириной области, в которой расположен текст. Затем указали размер - 0.8em (.8em означает абсолютно то же). Отступы – стандартные по бокам, верх и низ – 10 пикселей.
Последняя строчка float: left; указывает обтекание текстового блока: сам текстовый блок будет расположен слева, а его обтекание будет происходить справа. В общем случае обтекание создается с помощью стилевого свойства float. Значение left выравнивает текстовый блок (или, например, изображение) по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
Данное действие делаем со следующей целью – с помощью значения right, используемого для атрибута float в пустое место сможем добавить колонку новостей.
Рассмотрим следующую запись стилевого файла, в которой для всех абзацев определили выравнивание по четко выделенной площади. Для этого использовали значение justify параметра text-align. Если его не применить, то весь набранный текст будет выровнен по левому краю, что смотрится некрасиво. Теперь слова в строке выровнены равномерно о ширине, что смотрится значительно приятнее.
Далее встречаем text-indent - устанавливает величину отступа первой строки блока текста (другими словами, позволяет задавать «красную строку»).
Последними двумя записями задаем оформление ссылок – салатовый цвет выбрали для ссылок, которые не активны. Активные ссылки обозначили красным, еще и с подчеркиванием линией из точек, имеющим толщину в 8 пиксель.
Шаг 4.3
Произведем настройку картинок. Добавим в стилевой файл.
style_7.css
.img1 { width: 200px;
height: 287px; margin: 0 0 0 15px; float: right;
}
.img2 { width: 200px;
height: 200px;
margin: 10px 15px 0 15px; float: left;
}
.poloska { width: 300px; height: 23px;
margin: 10px 10px 0 15px; float: left;
}
Определили каждому рисунку свой класс - img1, img2, poloska. Четко определили размеры картинок, а также отступы. Сначала картинки можно попробовать подвигать опытным способом, перемещая их в нужное место, меняя параметры. Стоит заметить, что значения позволительно
25
указывать и с минусом. В этом случае картинка будет двигаться в противоположную сторону. Для правильного положения на страничке стоит задать каждой картинке свое обтекание. Таким образом можно разместить различные картинки справа и слева от текста.
Теперь можно снова сохранить страничку и открыть ее в браузере. Если все сделано правильно, то страничка уже обретет привлекательный вид.
Шаг 5
Еще в текстовом блоке зададим размещение списка для новых участников. Оформим его самым элементарным списком. Используем не маркированный список, а нумерованный.
Откроем страничку в этом месте:
<img class="poloska" src="Pic/poloska.jpg" alt="Бизнес"> <img class="img2" src="Pic/img2.jpg" alt="Бизнес"> </div>
И перед </div> вставим следующий код:
<div id="members">
<h2>Список жителей сайта:</h2> <ol>
<li><a href="#">Степан</a></li> <li><a href="#">Елена</a></li> <li><a href="#">Клава</a></li> <li><a href="#">Владислав</a></li> </ol>
<ol> <li><a href="#">Коля</a></li> <li><a href="#">Татьяна</a></li> <li><a href="#">Миша</a></li> <li><a href="#">Мария</a></li> </ol>
</div>
Получаем:
<img class="poloska" src="Pic/poloska.jpg" alt="Бизнес"> <img class="img2" src="Pic/img2.jpg" alt="Бизнес">
<div id="members">
<h2>Список жителей сайта:</h2> <ol>
<li><a href="#">Степан</a></li> <li><a href="#">Елена</a></li> <li><a href="#">Клава</a></li> <li><a href="#">Владислав</a></li> </ol>
<ol> <li><a href="#">Коля</a></li> <li><a href="#">Татьяна</a></li> <li><a href="#">Миша</a></li> <li><a href="#">Мария</a></li> </ol>
</div>
</div>
Создали новый блок members, в котором разместили два пронумерованных списка со следующими настройками в стилевом файле:
style_7.css
#members { width: 300px; height: 100px; float: right;
26
}
#members h2 { color: #f60; font-size: 120%; font-weight: bold; text-align: center;
}
#members ol { color: #999; font-size: 120%; margin: 10px; float: left;
list-style-type: none;
}
#members li { margin: 0 5px;
}
#members li a { color: #0066CC;
}
#members li a:hover { color: #0066CC;
}
Рассмотрим только что внесенные изменения:
1)первая запись стилевого файла - задали блоку определенный размер (ширину и высоту).
2)вторая запись - настройка заголовка второго уровня
3)третья запись – настройка списка - обтекание слева. Таким образом, оба списка будут располагаться один возле другого.
4)пятая и шестая запись - имена, которые находятся в списке, созданы в идее ссылок (ориентированы на профили участников). Задали для них только цвета, но и они при наведении на них указателя мыши подчеркиваются точечной линией – это следствие каскада, т.к. список лежит в разделе, где действует атрибут text, поэтому с него берется и часть правил.
Шаг 6
Необходимо открыть страничку и найти следующие строки:
<li><a href="#">Мария</a></li> </ol>
</div>
</div>
Добавим далее следующие строки:
<div id="news"> <h3>Свежие новости:</h3> <ul>
<li>Сначала….</li>
<li>Именно тогда….Именно тогда….Именно тогда…. Именно тогда….Именно тогда….
Именно тогда….Именно тогда…. Именно тогда….Именно тогда….</li>
<li>Только сейчас….Только сейчас….Только сейчас…. Только сейчас….Только сейчас….Только сейчас…. Только сейчас….Только сейчас….Только сейчас….</li> </ul>
</div>
<div class="clearfloat"></div>
Дадим некоторые пояснения.
27
После тега </div>, который обозначает окончание области нового текста, расположили новый блок <div id="news"> с маркированным списком - в нем расположим новости.
Последним добавлен блок clearfloat – «очистка обтекания». Это означает, что верстка данной страницы является «плавающей». Такое название она имеет благодаря множеству блоков, которые обтекаются. Необходимо отметить, что различные браузеры по-разному относятся к этой строчке. Для того, чтобы не возникло некорректного воспроизведения блоков, ее, обязательно необходимо добавить.
Откроем стилевой файл и добавим в него еще несколько строк:
style_7.css
#news { background: #ffc; width: 185px; color: #665; margin: 10px 5px; float: right;
}
#news h3 { color: #f60; font-size: 120%;
font-weight: bold; text-align: center;
}
#news ul {
list-style: url(Pic/marker.jpg) inside;
}
#news li { font-size: 75%; padding: 5px 10px;
}
В данных строках внесены следующие изменения: для визуального разделения колонки с новостями от остальных блоков изменили в ней фон, уточнили ширину блока, а также шрифт и порядок обтекания.
Кроме этого определили стиль маркеров для используемого списка. Любой браузер нарисует на месте маркеров кружки черного цвета. Но для придания странице лучшего вида кружки можно поменять на более приятные формы, даже на лично нарисованный маркер. Для этого нужно совсем немного, нарисовать красивый маркер, и указать на него ссылку в виде url(Pic/marker.jpg). Следом стоит приписать inside - это делается для размещения маркера именно в колонке с текстом (по умолчанию маркеры стоят вне текстового блока).
Сохраните и посмотрите результаты изменений.
Шаг 7
Оформим нижнюю часть странички – «подвал». «Подвал» (footer) является, не смотря на расположение, довольно важной частью сайта и страницы в отдельности. Как правило, в этом месте повторяются ссылки на различные страницы сайта. Это делается для удобства. Другой важной информацией, которая размещена там, являются авторские права и контакты организации, которой принадлежит сайт.
Часто приходится наблюдать, когда разделы меню, расположенные слева на странице, дублируются или вверху, или внизу. Разместим пункты меню внизу, в «подвале».
Кроме того, «подвал» принято немного выделять, но не особо, чтобы он не бросался в глаза. Сделаем его немного контрастнее и несколько уменьшим высоту.
Найдет в коде следующее место:
</ul>
</div>
<div class="clearfloat"></div>
28
Добавим далее следующий код:
<div id="footer">
<p>Главная | <a href="#">О нас</a> | <a href="#">Наша работа</a> | <a href="#">Наша страна</a> | <a href="#">Звонки</a> | <a href="#">...</a></p>
</div>
Откроем стилевой файл и добавим в него следующее:
style_7.css
#footer { background: #0066CC; color: #fff; font-size: 70%; padding: 5px;
clear: both;
}
#footer a { color: #ff0;
}
#footer a:hover { color: #f00;
}
#footer p { padding: 2px; text-align: center;
}
.clearfloat { clear: both;
}
В данных строках внесены следующие изменения: фон сделали синего цвета, а текст – белым. Самая нижняя строчка, в которую вписано (clear: both) определяет, что обе стороны подвала должны быть пустыми. Исходя из этого понятно, что "подвал" будет занимать всю ширину контейнера, которая расположена в нижней части. Изменили и цвет ссылок, они желтые в неактивном состоянии, если навести курсор - становятся красными. Уменьшили размер текста.
Теперь можно снова сохраниться.
При просмотре уже прослеживается четкость и завершенность. Но вид немного подпорчен полностью белым фоном. Для решения проблемы этого однообразия стоит добавить серую рамочку. Найдите следующий код:
#container {width: 760px; margin: 0 auto}
Добавьте строчку:
border: 1px solid #999
В результате получим::
#container {width: 760px; margin: 0 auto;
border: 1px solid #999}
План выполнения работы части 2 самостоятельной работы 1
Используя теоретическую часть, реализуйте:
1)блочную верстку Вашей странички, для которой Вы реализовывали табличную верстку;
2)сравните объем исходного кода страничек при табличной и блочной верстке. Опишите результаты сравнения в отчете;
3)оформите отчет, в котором перечислите, объясните назначение и приведите примеры использования всех изученных html-элементов табличной и блочной верстки.
29
Рекомендация:
Для более подробного изучения HTML, CSS и JavaScript можно использовать информацию различных источников Интернет. Например,
http://htmlbook.ru/ http://css.manual.ru/ http://html.manual.ru/
Глоссарий
Макет
Модель будущего сайта, сверстанная по утвержденному дизайну и включающая в себя все необходимые для его функционирования элементы.
Дизайн
Способ расположить и подать материалы на странице так, чтобы не пришлось задумываться в поисках нужной информации – от десятка ссылок до многочисленных информационных блоков и новостей, включая работу со шрифтами и графикой.
Подвал, футер
Самый нижний блок веб-страницы, визуально отделенный линией или цветом текста от основного контента.
Шапка
Верхний блок веб-страницы, в котором располагается логотип со ссылкой на главную страницу, название компании, контактные координаты, форма поиска по сайту.
Контент
В широком смысле слова это содержимое веб-сайта, его наполнение, в основе которого лежат различные материалы: новости, статьи, рисунки, фотографии, таблицы.
Копирайтинг
Процесс написания различных текстов, статей и обзоров, на основе имеющейся в свободном доступе информации.
30