Здравствуйте Гость ( Вход | Регистрация ) | Выслать повторно письмо для активации |
Ser777 |
Отправлено: Apr 6 2007, 11:28 PM
|
Капитан Группа: Members Сообщений: 96 Пользователь №: 549 Регистрация: 6-April 07 |
Мой сайт www.ser777.by.ru написан на фреймах напишите плиз скрипт css для моего сайта заранее спасибо
-------------------- |
Hryak |
Отправлено: Apr 17 2007, 09:43 PM
|
Генерал Группа: Super moderator Сообщений: 243 Пользователь №: 83 Регистрация: 31-October 06 |
Примерный элементарный css можно реализовать следующим образом (я позволил себе уменьшить общее графическое наполнение.
http://luchkinru.narod.ru/other/export/ser777/ скачать для локального изучения http://luchkinru.narod.ru/other/export/ser777/ser777.rar комментарии по ходу. *** файл index.htm *** <html> <head> <!-- index.html --> <!-- created by Hryak url: http://luchkinru.narod.ru --> <!-- owned by SER777 url: http://www.ser777.by.ru--> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <!-- включает таблицу стилей--> <title>сайт SER777</title> </head> <body> <!-- навигация слева + реклама --> <div class="leftnav"> <h1 class="link">Меню</h1> <!-- класс link мною не используется, но в будущем может понадобиться--> <p class="link"> <a href="info/main.htm"target="maintext">Главная</a> <br> <a href="http://ser777gyestbook.borda.ru/" target=_blank>Гостевая</a> <br> <a href="info/links.htm" target="maintext">Друзья сайта</a> <br> <a onclick="window.open('http://ser777.by.ru/radio.html', 'newWin', 'Toolbar=0, Location=0, Directories=0, Status=0, Menubar=0, Scrollbar=0, Resizable=0, Copyhistory=1, Width=400, Height=400')" href="http://www.ser777.by.ru/content.html#1">Радио Next</a> <br> <a href="info/mailform.htm" target="maintext">Mail Form</a> <br> <a href="info/aboutme.htm" target="maintext">Обо мне</a> <br> <a href="info/info.htm" target="maintext">Баннеры</a> <br> <a href="info/probki.htm" target="maintext">Пробки</a> <br> <a href="http://ser777forum.borda.ru/" target=_blank>Форум</a> <br> <a href="info/games.htm" target="maintext">Игры</a> <br> <a href="info/rep.htm"target="maintext">Реп</a> <br> <a onclick="window.external.addFavorite('http://www.ser777.by.ru/', 'Сер777 сайт'); return false;" href="http://www.ser777.by.ru/content.html#nul">Добавить в Избранное</a> <br> <a onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.ser777.by.ru/'); return false;" href="http://www.ser777.by.ru/content.html#nul">Сделать стартовой</a> <!-- кнопки и рекламы --> <h1 class="link">Ссылки</h1> <p class="link"> <a href="href="http://porsche-info.ru/" target=_blank"><img src="graph/porsche.gif" border="1" width="88" height="38" alt="Перейти на оффициальный сайт Porshe"></a> <br> <a href="http://www.mygif.narod.ru" title="Основы WEB графики" target="_blank"><img src="graph/mygif.gif" border="1" width="88" height="31" alt="Основы WEB графики"></a> <br> <a href="http://www.luchkinru.narod.ru" title="Владимирский портал" target="_blank"><img src="graph/hryak.gif" border="1" width="88" height="31" alt="Владимирский портал"></a> </div> <!--END навигация слева --> <!-- Здесь и далее END означает конец слоя (это комментарий для удобства)--> <!--подложка навигации слева --> <!-- это просто слой, который выступает справа вниз серебристым цветом (для красоты :-) --> <div class="leftnav_bot"> </div> <!--END подложка навигации слева --> <!--основной текст --> <!-- можно здесь просто написать наполнение.. но я вставил "плавающий" фрейм, а наполнение лежит в папке info--> <div class="text"> <iframe width="100%" height="100%" frameborder="0" src="info/main.htm" name="maintext"></iframe> <!-- данный фрейм заполнит как раз весь слой и не оставит видимой границы--> </div> <!--END основной текст --> <!--подложка основной текст --> <!-- тоже для красоты--> <div class="text_bot"> </div> <!--END подложка основной текст --> </body> </html> <!-- Разумеется это простая реализация и она накладывает определенные ограничения (в первую очередь на высоту слоя), но сперва предлагаю перейти непосредственно к файлу стилей.--> *** файл style.css *** /* Обрати внимание, что комментарий в css прописывается иначе */ body {background-color:#FC9600; font-family: Comic Sans MS;} /*общий цвет, общий шрифт */ body.text {background-color:#FFE26E;} /* цвет фона в "плавающем" фрейме */ div {position:absolute;} /* общий параметр для всех слоев, работаем от единой системы координат */ div.text_bot {z-index: 1;} div.text {z-index: 2;} div.leftnav_bot {z-index: 3;} div.leftnav {z-index: 4;} /* порядок расположения слоев */ div.leftnav, div.text {background-color: #FFE26E;} div.leftnav_bot, div.text_bot {background-color: silver;} div.leftnav {width: 170px; height: 500px; margin: 10px;} div.leftnav_bot {width: 170px; height: 500px; margin: 15px;} div.text {width: 70%; height: 550px; margin-left: 200px; margin-top: 20px;} div.text_bot {width: 70%; height: 550px; margin-left: 205px; margin-top: 25px;} /* Обрати внимание, что слои в процентном отношении "подстроятся" под ширину экрана пользователя */ /* здесь часть слоев сгруппирована через "," для экономии размера файла стилей */ h1 {font-size: 17px; margin: 10px; font-weight: normal; color: navy;} p {font-size: 14px; text-align: justify; margin: 5px;} /* задаю параметры для всех абзацев и заголовков, если нужно разнообразие - то можно ввести классы через "." */ A {font-size:12px; Text-decoration: none; line-height: 15px;} A:Link{Color:blue;} A:Visited{Color:purple;} A:Active{Color: brown;} A:Hover{Color:#3467FA;} /* изменение гипертекстовых ссылок */ /* Это впринципе "скелет", но на его основе вполне можно разработать собственный вариант дизайна */ |