Главная | Обратная связь | Поможем написать вашу работу!

Пример использования CSS

Рассмотрим пример описанный в разделе 1.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<meta http-equiv="Content-Language" content="ru"/>
	<meta name="description" content="Это теставая страница." />
	<meta name="keywords" content="HTML, CSS, DTD, теги" />
	<meta name="robots" content="index, follow" />
	<title>Тестовая страница</title>
	<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
	<link type="text/css" href="reset.css" rel="Stylesheet" />
	<link type="text/css" href="main.css" rel="Stylesheet" />
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	</head>
	<body>
	<div class="container">
	<NOINDEX>
	<div class="header">
	<div class="navArea">
	<table cellpadding="0" cellspacing="0" border="0">
	<tr>
	<td>
	<h1>
	<a href="index.html" title="На главную">Главная<span /> </a>
	</h1>
	</td>
	<td>
	<a href="http://www.yandex.ru" title="Яндекс">Яндекс</a>
	</td>
	<td>
	<a href="#" title="Услуги">Услуги</a>
	</td>
	<td>
	<a href="#" title="Товары">Товары</a>
	</td>
	<td>
	<a href="#" title="Контактная информация">Контактная информация</a>
	</td>
	</tr>
	</table>
	</div>
	</div>
	</NOINDEX>
	<div class="textArea">
	<div class="leftMenu">
	<ul>
	<li>
	<span>Общее описание</span>
	</li>
	<li>
	<a href="advantages.html" title="Преимущества">Преимущества</a>
	</li>
	</ul>
	</div>
	<div class="mainText">
	<h2>Описание тестовой страницы</h2>
	<p>HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.</p>
	<p>HTML является приложением («частным случаем») SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.</p>
	<p><img src="images/ex.jpg" alt="Картинка" /></p>
	</div>
	</div>
	<NOINDEX>
	<div class="footer">
	<div class="downMenu">
	<div style="padding-top:7px; padding-bottom: 5px;">© 2009-2010 Examle</div>
	<div>E-mail: <a href="mailto:mailbox@example.com">mailbox@example.com</a></div>
	</div>
	</div>
	</NOINDEX>
	</div>
	</body>
	</html>

Без использования CSS браузер будет отображать данный код, как показано на рисунке 4.

Рисунок 4 – Пример HTML-страницы без использования CSS

Если применить следующий CSS, описанный в файле main.css:

/************************** General ******************************/

body

{

font-family:Arial, Sans-Serif;

}

.container

{

overflow:visible;

width: 980px;

margin: 0 auto;

position:relative;

}

{

font-size:200%;

color: #3A9C20;

font-weight:normal;

}

{

font-size:145%;

color: #8f8f8f;

font-weight:normal;

padding-top:10px;

padding-bottom:5px;

text-align:right;

font-style:italic;

}

{

padding-top:5px;

padding-bottom:5px;

}

a, a:link

{

color: #537ABC;

}

a:visited

{

}

a:hover

{

color: #DB762A;

}

/*****************************************************************/

/************************** Header *******************************/

.header

{

padding-top:10px;

float:left;

width:100%;

position:relative;

}

.header h1

{

float:left;

left: -70px;

position:relative;

height:72px;

width:86px;

}

.header h1 a

{

padding:10px;

}

.navArea

{

overflow:visible;

}

.navArea a,.navArea a:link,.navArea a:visited

{

text-decoration:none;

color: #537ABC;

}

.navArea a:hover

{

color: #DB762A;

}

.navArea table

{

width:100%;

}

.navArea td

{

vertical-align:bottom;

height:72px;

text-align: left;

}

/********************************************************************/

/******************* Main text area ********************************/

.textArea

{

position:relative;

font-size:90%;

width:980px;

}

.mainText

{

position:relative;

float:right;

width:780px;

line-height:1.2em;

}

.leftMenu

{

position:relative;

float:left;

width: 200px;

}

.leftMenu ul

{

padding-right:10px;

}

.leftMenu ul li

{

padding-bottom: 10px;

}

/*******************************************************************/

/*********************** footer ************************************/

.footer

{

position:relative;

float:left;

border-top: 1px solid #7383C0;

margin-top: 20px;

padding-top:5px;

width:100%;

}

.downMenu

{

float:left;

width: 652px;

font-size:10pt;

color:#777777;

vertical-align: bottom;

}

/*******************************************************************/

Браузер будет отображать наш пример, как показано на рисунке 5.

Рисунок 5 – Пример HTML-страницы с использованием CSS

7 Использование редактора GIMP для верстки страниц [1] и дополнения для FF -PixelPerfect

Наиболее частые операции, используемые при верстке макета:

- вырезание слоев;

- объединение слоев;

- расчет величины элемента;

- сохранение в формате PNG;

- расчет цвета элемента;

- обрезка изображения (кадрирование).

Краткая документация по этим и другим операциям расположена по адресу http://docs.gimp.org/2.6/ru

При верстке макета необходимо следить за тем, чтобы макет был сверстан максимально близко к оригиналу в PSD формате. Для этого существует специальный плагин к дополнению FireBug – PixelPerfect. Пример использования этого плагина приведен по адресу http://www.maczone.ru/linux/827/.

Задание

1) Оформить HTML документ в соответствии с выбранным ранее макетом с помощью CSS-файлов.

2) Ответить на вопросы:

- Что такое CSS?

- В чем состоит преимущество использования внешних файлов CSS по сравнению с тегом <style>?

- Каким образом можно добавить CSS в HTML документ?

3) Оформить элемент документа по заданию преподавателя.

---------------------------------------------------------------------------------------------------------------------

Дополнительные ссылки для ознакомления:

1) http://www.maczone.ru/linux/827/

2) http://docs.gimp.org/2.6/ru

3) http://habrahabr.ru/post/114256/

4) http://www.everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize/

5) http://vremenno.net/html-css/css-drop-down-menu/

[1] http://translate.google.ru/translate?sl=en&tl=ru&js=n&prev=_t&hl=ru&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.websiterepairguy.com%2Febooks%2Fgimp%2FHow_Slice_Image.html&act=url

⇐ Предыдущая 1 2 34