Просмотр полной версии : Свой САЙТ
}I{. R[]stuk
20.11.2005, 22:07
Хочу с друганом сайт замутить, подскажите где взять инфу. В общем помогите те кто этим занимается.Плиииз!!! С чего начать и 4то надо???
Знатоки, объясните пожалуйста а чем плох Microsoft Word (вернее его мастер создания Web– страниц) ?
Знатоки, объясните пожалуйста а чем плох Microsoft Word (вернее его мастер создания Web– страниц) ?
мусора много добавляет =) страницы кривые бывают +)
вот проимер набрал в ворде hello world и сохранил как хтмл
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List href="Hello%20world.files/filelist.xml">
<title>Hello world</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>Lamo</o:Author>
<o:Template>Normal</o:Template>
<o:LastAuthor>Lamo</o:LastAuthor>
<o:Revision>1</o:Revision>
<o:TotalTime>0</o:TotalTime>
<o:Created>2005-11-20T14:03:00Z</o:Created>
<o:LastSaved>2005-11-20T14:03:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Words>1</o:Words>
<o:Characters>11</o:Characters>
<o:Company>***</o:Company>
<o:Lines>1</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:CharactersWithSpaces>11</o:CharactersWithSpaces>
<o:Version>11.5606</o:Version>
</o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:GrammarState>Clean</w:GrammarState>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:UseWord2002TableStyleRules/>
<w:UseFELayout/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" LatentStyleCount="156">
</w:LatentStyles>
</xml><![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"MS Mincho";
panose-1:2 2 6 9 4 2 5 8 3 4;
mso-font-alt:"\FF2D\FF33 \660E\671D";
mso-font-charset:128;
mso-generic-font-family:modern;
mso-font-pitch:fixed;
mso-font-signature:-1610612033 1757936891 16 0 131231 0;}
@font-face
{font-family:"\@MS Mincho";
panose-1:2 2 6 9 4 2 5 8 3 4;
mso-font-charset:128;
mso-generic-font-family:modern;
mso-font-pitch:fixed;
mso-font-signature:-1610612033 1757936891 16 0 131231 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"MS Mincho";}
@page Section1
{size:595.3pt 841.9pt;
margin:2.0cm 42.5pt 2.0cm 3.0cm;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"╬с√ўэр* ЄрсышЎр";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style>
<![endif]-->
</head>
<body lang=RU style='tab-interval:35.4pt'>
<div class=Section1>
<p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'>Hello world<o:p></o:p></span></p>
</div>
</body>
</html>
тоже самое только сохранить с фильтром
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta name=Generator content="Microsoft Word 11 (filtered)">
<title>Hello world</title>
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"MS Mincho";
panose-1:2 2 6 9 4 2 5 8 3 4;}
@font-face
{font-family:"\@MS Mincho";
panose-1:2 2 6 9 4 2 5 8 3 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
@page Section1
{size:595.3pt 841.9pt;
margin:2.0cm 42.5pt 2.0cm 3.0cm;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=RU>
<div class=Section1>
<p class=MsoNormal><span lang=EN-US>Hello world</span></p>
</div>
</body>
</html>
stuk']Хочу с друганом сайт замутить, подскажите где взять инфу. В общем помогите те кто этим занимается.Плиииз!!! С чего начать и 4то надо???
начать надо с изучения хтмл =)
надо найти книжку по хтмл +)
}I{. R[]stuk
20.11.2005, 22:53
Даа туговато придётся!!!
вот проимер набрал в ворде hello world и сохранил как хтмл
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List href="Hello%20world.files/filelist.xml">
<title>Hello world</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>Lamo</o:Author>
<o:Template>Normal</o:Template>
<o:LastAuthor>Lamo</o:LastAuthor>
<o:Revision>1</o:Revision>
<o:TotalTime>0</o:TotalTime>
<o:Created>2005-11-20T14:03:00Z</o:Created>
<o:LastSaved>2005-11-20T14:03:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Words>1</o:Words>
<o:Characters>11</o:Characters>
<o:Company>***</o:Company>
<o:Lines>1</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:CharactersWithSpaces>11</o:CharactersWithSpaces>
<o:Version>11.5606</o:Version>
</o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:GrammarState>Clean</w:GrammarState>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:UseWord2002TableStyleRules/>
<w:UseFELayout/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" LatentStyleCount="156">
</w:LatentStyles>
</xml><![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"MS Mincho";
panose-1:2 2 6 9 4 2 5 8 3 4;
mso-font-alt:"\FF2D\FF33 \660E\671D";
mso-font-charset:128;
mso-generic-font-family:modern;
mso-font-pitch:fixed;
mso-font-signature:-1610612033 1757936891 16 0 131231 0;}
@font-face
{font-family:"\@MS Mincho";
panose-1:2 2 6 9 4 2 5 8 3 4;
mso-font-charset:128;
mso-generic-font-family:modern;
mso-font-pitch:fixed;
mso-font-signature:-1610612033 1757936891 16 0 131231 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"MS Mincho";}
@page Section1
{size:595.3pt 841.9pt;
margin:2.0cm 42.5pt 2.0cm 3.0cm;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"╬с√ўэр* ЄрсышЎр";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style>
<![endif]-->
</head>
<body lang=RU style='tab-interval:35.4pt'>
<div class=Section1>
<p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'>Hello world<o:p></o:p></span></p>
</div>
</body>
</html>
а можно так :)
<html>
<head><title>my 1st page</title></head>
<body>
hello world
</body>
</html>
stuk']Даа туговато придётся!!!
ни чего трудного если есть желаение =)
дальше после хтмл желательно изучить какой нить язык программирования пхп или перл.
а можно так :)
<html>
<head><title>my 1st page</title></head>
<body>
hello world
</body>
</html>
ну ворд стили вставил =)
}I{. R[]stuk
20.11.2005, 23:05
Ну спасибо!!!
ни чего трудного если есть желаение =)
дальше после хтмл желательно изучить какой нить язык программирования пхп или перл.
Ну, допустим если человеку интересно и есть желание то, что посоветуете изучить? Чтобы потом через короткое время не оказаться знатоком мертвого "языка". Что считаете более прогрессивным, перспективным, «модным»?
А если человек сделал "сайт" (ну, пару страниц) использую Microsoft Word, допустят ли размещение на http://pages.ya1.ru/ ?
А если человек сделал "сайт" (ну, пару страниц) использую Microsoft Word, допустят ли размещение на http://pages.ya1.ru/ ?
конечно =)
Ну, допустим если человеку интересно и есть желание то, что посоветуете изучить? Чтобы потом через короткое время не оказаться знатоком мертвого "языка". Что считаете более прогрессивным, перспективным, «модным»?
дело личного вкуса =)
оба языка развиваются и совершенствуются =)
изучив один не что не помешает изучит другой =)
для личного изучения и отладки я бы рекомендовал комплект ПО под названием денвер брать тут (http://www.denwer.ru/). книгу по языкам программирования купить в магазине или скачать в инете =) + готовые скрипты с cgi.ru.
дальше изучить язык sql запросов для работ с базами данных.
для личного изучения и отладки я бы рекомендовал комплект ПО под названием денвер брать тут (http://www.denwer.ru/). книгу по языкам программирования купить в магазине или скачать в инете =) + готовые скрипты с cgi.ru.
дальше изучить язык sql запросов для работ с базами данных.
Предполагаю что у тебя все это есть. А как насчет поделиться с народом?
Предполагаю что у тебя все это есть. А как насчет поделиться с народом?
давно не занимаюсь уже с год =)
учебника у меня нету, есть справочники по пхп и мюскл ... хотя может есть учебник в эл виде. посмотрю вечером.
денвер у нас на yahost валялся где-то
Я уже лет пять не занимался этим, помочь не смогу, но есть учебник по ХТМЛУ, только че-то он какой-то урезанный, выложить?
Как сделать, чтобы на сайте оставляли свою пожелания юзеры??? Мня интересует хтмл - код...
Как сделать, чтобы на сайте оставляли свою пожелания юзеры??? Мня интересует хтмл - код...
ХТМЛ тебе не поможет смотри в сторону пхп или перл.. =)
ХТМЛ тебе не поможет смотри в сторону пхп или перл.. =)А, у кого есть учебник по php & perl???:004:
www.phpnuke.ru
книга основы пхп (ftp://yahost.ru/upload/xchange/by_dima/Osnovi_PHP.zip)
книга Энди Харрис PHP MySQL для начинающих (ftp://yahost.ru/upload/xchange/by_dima/Harris_phpmysql.zip)
Мне тут в голову пришла одна мысль. А ведь главное в Web-сайте не умение, не дизайн, а оригинальная идея. Зачем, для чего, для кого (возраст, интересы) создавать свой сайт – наверное, решение этих вопросов самое трудное и главное.
Самые посещаемые сайты (это: эротические, дайджест новости, обзоры новинок, тематические и так сказать «крутой замес» из всего этого) давно и прочно застолблены. Создавать дубликаты? А кому они нужны?! Если только сидеть на безлимитке и просто задавить конкурентов.
Наиболее реальным кажется - образовательные сайты. В последнее время «Чайников» развелось, а не так давно чё то нас мало было. :) Тогда надо быть «гуру», а ему проще написать книгу «……- для Чайников» и капусту срубить. А если сказать себе: «Ну ладно может я и не гуру, но больше знаю чем Чайник и как ни будь то смогу помочь», то на первом же вопросе и понимаешь, что проще самому сходить и сделать. Да и чтобы получить ответ - нужно правильно задать вопрос, а грамотно спросить «Чайнику» слабо (потому что он тогда он уже и не чайник). Опять же проще на Форуме спросить и кто ни будь да подскажет. Получается и образовательные сайты – не проходят.
Ну вот, опять вернулись к мысли о необходимости оригинальной идеи, фишке.
Какие сайты с http://pages.ya1.ru/ вам кажутся наиболее интересными и почему?
[/SIZE]
Какие сайты с http://pages.ya1.ru/ вам кажутся наиболее интересными и почему?
вот самый интересный и клёвый сайт : http://pages.ya1.ru/Sith/ , почему ? потомучто тама все про Аврил Лавинь ! :)
А, у кого есть учебник по php & perl???:004:
как успехи ? :)
Самое сложное не создать сайт или страничку, а поддерживать жизнедеятельность .
Много что делалось в якт полезным, но информация там актуальна только на время создания =)
книга основы пхп (ftp://yahost.ru/upload/xchange/by_dima/Osnovi_PHP.zip)
книга Энди Харрис PHP MySQL для начинающих (ftp://yahost.ru/upload/xchange/by_dima/Harris_phpmysql.zip)Thank's!!!:dance3:
как успехи ? :)Только что скачал и веч. уже будет готово!!!:dance3:
Ха-ха, только что узнал, что и в Web-строительстве "читеры" есть. Ловко поисковикам мозги пудрят.
ftp://yahost.ru/pub/Soft/Denver/
собственно денвер
Самое сложное не создать сайт или страничку, а поддерживать жизнедеятельность .
Много что делалось в якт полезным, но информация там актуальна только на время создания =)
я то и создать толком не могу времени нет
http://www.mobile.lghost.ru
Только что скачал и веч. уже будет готово!!!:dance3:Сделал!!!:dance3:
Хочу спросить,через что можно поставить на сайт флеш или gif???И что лучше ставить на сайт(flash или gif?).Через какие проги.
Хочу спросить,через что можно поставить на сайт флеш или gif???И что лучше ставить на сайт(flash или gif?).Через какие проги.
http://soft.ya1.ru/folder.php?id=171
Хочу спросить следующее : в какой проге(имеется ввиду для создания сайтов) есть "анимационный текст"(такая функция обычно есть в прогах для создания авторанов)?А то пытался зделать через авторан,а потом в Nvu или Publisher и не получается нив какую.(или если знаете как это зделать - то подскажите).2.И еслить ли у кого русификатор на DreamWeaver 2004 MX?Очень надо.
Вообще говоря, веб-технологий куча: php, perl, cgi, asp, asp.net, jsp, но пользователи в Якутске могут без проблем использовать только PHP (провайдеры бесплатно предоставляют только его), так что учите PHP :).
Можно ли как-нибудь прогу AutoPlay Menu Builder "переделать" или с помощью неё создавать странички?
mifootka
02.02.2006, 11:50
Нет, нельзя. Autorun можно, странички нельзя.
Помогите в следующем: я вот написал название страницы(например главная) и написал чёрным цветом,а когда задаю функция гиперссылки(перехода на другую страницу) у меня почему то цвет текста меняется.Как быть?И что надо в коде прописать,чтобы всё по центру выровнялось,а то у меня получается что сайт как в право сдвинут.
Martin_Logan
05.03.2006, 11:42
Помогите в следующем: я вот написал название страницы(например главная) и написал чёрным цветом,а когда задаю функция гиперссылки(перехода на другую страницу) у меня почему то цвет текста меняется.Как быть?И что надо в коде прописать,чтобы всё по центру выровнялось,а то у меня получается что сайт как в право сдвинут.
По-умолчанию цвет ссылки устанавливается синим. Чтобы поменять его можно например дописать: <a href="ссылка" style="color:black">ссылка</a> А выравнивать можно по-разному, в зависимости от верстки.
Спасибо,с ссылками разобрался.А что такое верстка?
Martin_Logan
05.03.2006, 14:27
Спасибо,с ссылками разобрался.А что такое верстка?
Кинь сюда свой код. Посмотрим, что можно сделать...
Кинь сюда свой код. Посмотрим, что можно сделать...
Вот :
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>medveland</title>
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'button10.jpg', /*url*/'button11.jpg', /*url*/'button2B.jpg', /*url*/'button2C.jpg', /*url*/'button64.jpg', /*url*/'button65.jpg', /*url*/'button67.jpg', /*url*/'button68.jpg', /*url*/'button6A.jpg', /*url*/'button6B.jpg', /*url*/'button6D.jpg', /*url*/'button6E.jpg', /*url*/'button70.jpg', /*url*/'button71.jpg')" link="#000000" vlink="#000000" alink="#000000">
<div style="position: absolute; width: 788px; height: 100px; z-index: 1; left: 4px; top: 8px; border-style: solid; border-color: #FFFFFF; background-color: #008000" id="layer1">
<p align="center"><b><font face="Comic Sans MS" size="7" color="#0000FF">
<span lang="en-us">medveland</span></font></b></div>
<div style="position: absolute; width: 133px; height: 428px; z-index: 2; left: 4px; top: 109px; border-style: solid; border-color: #FFFFFF; background-color: #996600" id="layer3">
<p><span lang="en-us"> </span><a href="index.htm">
<img border="0" id="img3" src="button63.jpg" height="20" width="100" alt="Главная" fp-style="fp-btn: Braided Column 1; fp-font: Comic Sans MS; fp-font-style: Bold; fp-bgcolor: #996600" fp-title="Главная" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button64.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button63.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button65.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button64.jpg')"></a></p>
<p><span lang="en-us"> </span><a href="нов_стр_1.htm">
<img border="0" id="img4" src="button66.jpg" height="20" width="100" alt="Софт" fp-style="fp-btn: Braided Column 1; fp-font: Comic Sans MS; fp-font-style: Bold; fp-bgcolor: #996600" fp-title="Софт" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button67.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button66.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button68.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button67.jpg')"></a></p>
<p><span lang="en-us"> </span><a href="нов_стр_2.htm">
<img border="0" id="img5" src="button69.jpg" height="20" width="100" alt="Книги" fp-style="fp-btn: Braided Column 1; fp-font: Comic Sans MS; fp-font-style: Bold; fp-bgcolor: #996600" fp-title="Книги" onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button6A.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button69.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button6B.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button6A.jpg')"></a></p>
<p><span lang="en-us"> </span><a href="нов_стр_3.htm">
<img border="0" id="img6" src="button6C.jpg" height="20" width="100" alt="Статьи" fp-style="fp-btn: Braided Column 1; fp-font: Comic Sans MS; fp-font-style: Bold; fp-bgcolor: #996600" fp-title="Статьи" onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'button6D.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'button6C.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button6E.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'button6D.jpg')"></a></p>
<p><span lang="en-us"> </span><a href="medveland.htm">
<img border="0" id="img7" src="button6F.jpg" height="20" width="100" alt="Обо мне" fp-style="fp-btn: Braided Column 1; fp-font: Comic Sans MS; fp-font-style: Bold; fp-bgcolor: #996600" fp-title="Обо мне" onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'button70.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'button6F.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'button71.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'button70.jpg')"></a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </div>
<div style="position: absolute; width: 133px; height: 428px; z-index: 3; left: 659px; top: 109px; border-style: solid; border-color: #FFFFFF; background-color: #996600" id="layer4">
</div>
<p>
<img border="0" id="img1" src="buttonF.jpg" height="20" width="100" alt="Текст кнопки" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button10.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonF.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button11.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button10.jpg')" fp-style="fp-btn: Embossed Rectangle 1" fp-title="Текст кнопки"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<img border="0" id="img2" src="button2A.jpg" height="20" width="100" alt="Текст кнопки" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button2B.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button2A.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button2C.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button2B.jpg')" fp-style="fp-btn: Braided Row 1" fp-title="Текст кнопки"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
Martin_Logan
05.03.2006, 15:18
Поскольку ты использовал <div>`ы для позиционирования элементов, такая верстка называется блочной. Хоть её использование и похвально, но на лицо:
Злоупотребление скриптами и грубое нарушение стандартов (свойств fp-style и fp-title у тега <IMG> не существует, равно как и у остальных тегов).
Осутствие отдельного листа стилей практически свело на нет все преимущества блочной верстки.
В данной реализации выравнивание по центру скорее всего невозможно, т.к. все элементы позиционированы абсолютно:
position: absolute;
Что можно сделать:
1. Отказаться от существующего скрипта. В интернете можно найти и более элегантные решения для замены картинок (в том числе и полностью на CSS см. ниже).
2. Присвоить нужным элементам классы или идентификаторы и вынести все оформление в отдельный лист стилей.
3. Отказаться от абсолютного позиционирования.
* Собственно сам HTML-код (меню):
<ul id="mainmenu">
<li class="about"><a href="#"><span>About</span></a></li>
<li class="products"><a href="#"><span>Products</span></a></li>
<li class="contacts"><a href="#"><span>Contacts</span></a></li>
</ul>
* Содержимое файла CSS:
/* Спрячем весь текст */
#mainmenu a span {
display: none;
}
/* Сделаем ссылки блоковыми, установим размеры */
#mainmenu a {
width: 100px;
height: 20px;
display: block;
}
/* Зададим фоновую картинку по умолчанию */
#mainmenu .about a {
background: url(images/about.gif) no-repeat;
}
/* Зададим картинку, которая показывается при наведении мыши */
#mainmenu .about a:hover {
background: url(images/about_over.gif) no-repeat;
}
/* ... и т.д. для остальных картинок */
Но есть одна проблема — картинки, которые описаны в hover, не загружаются изначально браузерами. Это дает неприятный эффект при первом наведении на ссылку.
Решение — использовать сдвиг видимой части картинки с помощью background-position. Изменим CSS следующим образом:
/* Зададим фоновую картинку по умолчанию */
#mainmenu .about a {
background: url(images/about.gif) 0 0 no-repeat;
}
/* Зададим картинку, которая показывается при наведении мыши */
#mainmenu .about a:hover {
background-position: 0 -20px;
}
/* ... и т.д. для остальных картинок */
Суть заключается в том, что мы рисуем картинку в два раза больше нужной, на одной половине рисуем исходное состояние, а на другой по наведению мыши. Пользователь видит только нужную ему часть.
Для решения же проблемы с центрированием рекомендую воспользоваться следующими статьями — Any Order Columns (http://www.positioniseverything.net/articles/onetruelayout/anyorder), In Search of Holy Grail (http://www.alistapart.com/articles/holygrail).
P.S. Начинающим всё же лучше пользоваться табличной версткой, т.к. она не столь требовательна к знаниям HTML и CSS и более проста в понимании.
vBulletin® v3.6.3, Copyright ©2000-2024, Якутск-Online. Перевод: zCarot