Оформление веб-страницы с использованием стилей
Наложение элементов веб-страницы
Для полного завершения картины неплохо бы еще добавить какой-либо фоновый рисунок типа “водяного знака”, символизирующий профиль деятельности фирмы. Поскольку фирма называется “Лентяй”, возьмем за основу фотографию компании, занятой бездельем. Чтобы она стала похожа на “ водяной знак ”, вначале обработаем ее в графическом редакторе, например в Adobe Photoshop.
Исходное изображение сначала несколько размоем. В Adobe Photoshop это делается фильтром Фильтр › Размытие › Сильное размытие (Filter › Blur › Blur More). Для усиления эффекта применим этот фильтр несколько раз подряд. Затем дайте команду Изображение › Настройка › Оттенок и насыщенность (Image › Adjust › Hue › Saturation). Здесь можно придать изображению оттенок, сходный с цветом фона. Затем необходимо уменьшить контрастность изображения, чтобы оно не отвлекало на себя слишком много внимания, и увеличить его яркость, поскольку у нас светлый фон: Изображение › Настройка › Яркость/Контраст (Image › Adjust › Brightness/Contrast). После этого обрежем изображение по контуру основного рисунка и сохраним в формате GIF с прозрачным фоном.
– Стоп! – скажете вы, – а что же делать дальше? Ведь у нас уже есть на веб-странице один фоновый рисунок – градиент! Ведь сразу два фоновых рисунка назначить нельзя?!
Ну, во первых, нельзя назначить два фоновых рисунка одному элементу, так что мы можем спокойно назначить его, например, левому (информационному) блоку. Однако хотелось бы подложить этот рисунок не только под информационный блок, а сделать его как бы нейтральным фоновым рисунком всей страницы. Поэтому просто-напросто давайте опять воспользуемся абсолютным позиционированием. Определим класс logo, располагающийся в центре нашей страницы, ближе к низу:
.logo { position: absolute; left: 150; top: 220; } Теперь присвоим этот класс нашему рисунку: <IMG CLASS="logo" SRC="Images/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0">Действительно, при абсолютном (да и относительном) позиционировании блоки могут накладываться друг на друга, и тогда возникает проблема “третьего измерения” – какой из них окажется “выше”? Для решения этой проблемы придумали стилевое свойство z-index. Чем больше его значение, тем “выше” располагается блок при наложении.
Чтобы наш “водяной знак” не загораживал все остальное, определим для класса logo отрицательное значение z-index:
z-index: -5; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitionai//EN"><HTML> <HEAD> <TITLE>ФИРМА "ЛЕНТЯЙ"</TITLE> <STYLE> BODY { background-color: #D2FFFF; color: #003737; background-image: url("Images\grad2.jpg"); background-position: right; background-repeat: repeat-y; } A:link, A:active, A:visited { color: #006A6A; } A:hover { font-weight: bold; text-decoration: none; } .hdr { position: absolute; left: 50px; top: 10px; text-align: center; font-family: OdessaScriptFWF, fantasy, font-size: 60px; font-weight: 900; width: 90%; height: 100px; letter-spacing: 0.05em; line-height: 100px; filter: shadow; border: 10px outset #003163; color: #3163CE; } .rght { position: absolute; font-size: large; left: 565px; top: 160px; width: 160px; height: 400px; overflow-x: visible; } .Ink { border-width: thick; border-style: ridge; margin: 10px; padding: 5px; border-color: #319CFF; background-image: uri("Images/backlnki.jpg"); color: red; text-align: center; } .Ink A { text-decoration: none; color: white; } .1ft { position: absolute; font-size: meduim; left: 10px; top: 160px; width: 550px; height: 400px; overflow: auto; } .bigger { font-size: larger; font-family: sans-serif; } .logo { position: absolute; left: 150; top: 220; z-index: - 5; } </STYLE></HEAD> <BODY> <DIV CLASS="hdr">ФИРМА «ЛЕНТЯЙ»</DIV> <DIV CLASS="rght"> <DIV CLASS="lnk">УСЛУГИ</DIV> <DIV CLASS="lnk"> <A HREF="prices.html">ЦЕНЫ</A> </DIV> <DIV CLASS="lnk"> <A HREF="forml.html">ФОРМА 3AKA3A</AX/DIV><DIV CLASS="lnk"><A HREF”"history.html">ИСТОРИЯ <SPAN STYLE="letter-spacing: - 3px; ">КОМПАНИЯ</SPAN></A> </DIV> <DIV CLASS="lnk"> <A HREF="guestbook.html">КНИГА ОТЗЫВОВ</A> </DIV> </DIV> <DIV CLASS="lft"> <DIV CLASS="bigger">Наша фирма предоставляет услуги:</DIV> <UL STYLE="list-style-image: url('Images\markerl.gif');"> <LI>Бытовые услуги <UL STYLE="list-style-image: url('Images\rriarker2.gif');"> <LI>Вкручивание электрических лампочек <LI>Услуги по наведению чистоты <UL STYLE="list-style-image: url('Images\marker3.gif');"> <LI>Подметание пола <LI>Вынесение мусора из квартиры <LI>Мытье посуды</UL> </UL> <LI>Приготовление пищи <LI Компьютерные услуги <UL STYLE="list-style-image: url('Images\marker2.gif');"> <LI>Дефрагментация жестких дисков <LI>Переустановка Windows</UL> </UL> <DIV CLASS="bigger">Чтобы воспользоваться услугами, следует:</DIV> <OL> <LI>Зарегистрироваться ( <A HREF="reg.htm1">здесь</A>) <LI>Заполнить форму заказа ( <A HREF="forml.htm1">здесь</A>) <LI>Подтвердить заказ: <OL TYPE="I"> <LI>Получив письмо с паролем, послать пустой ответ <LI>Заполнить форму-подтверждение заказа ( <A HREF="form2.htm1">здесь</A>) </OL> <LI>Приготовить деньги для оплаты услуг</OL> </DIV> <IMG CLASS="logo" SRC="Images/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0"></BODY> </HTML>В следующих главах мы еще вернемся к этой страничке и продемонстрируем некоторые методы динамического взаимодействия с пользователем. А сейчас давайте отложим ее на время.
В этой главе мы рассмотрели, разумеется, не все возможности CSS. Однако мы продемонстрировали применение большинства стилевых свойств.