Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Создание навигации


Автор: Miako 19.5.2009, 20:59
Разъясните плз такой момент:
Нарисовал я например навигацию сайта в фотошопе,т.е. получилась картинка с текстом(будущими ссылками).
Как потом сделать из этого нарисованного текста те самые ссылки?

Автор: bars80080 19.5.2009, 22:30
режешь картинку на кусочки, потом читаешь книжку, где написано, как делаются ссылки с картинками, и пишешь


почитать можно хотя бы здесь: http://stepbystep.htmlbook.ru/?id=1

Автор: Miako 19.5.2009, 22:40
Понятия я эти знаю,я же именно поэтому и написал что бы помогли сделать ссылки.Я так понял,что придется в фотошопе ничего не заполнять,т.е. оставлять место для ссылок пустыми,а уже потом непосредственно вставлять ссылки на эти места?

Автор: bars80080 20.5.2009, 10:12
всё зависит от конкретной задачи и от мысли верстальщика. к примеру, совершенно не сложно сделать одной картинкой. надо всего лишь почитать про карты map и области ссылок <area>
в этом случае мы можем просто определить для разных частей картинки разные ссылки

Автор: Miako 20.5.2009, 16:34
К примеру такое простенькое меню:

http://ipicture.ru/Gallery/Viewfull/19191708.html

Автор: bars80080 20.5.2009, 18:03
а причём здесь картинки? тут нужна всего одна - задний фон, а ссылки - текстовые, самые обычные

Автор: Miako 20.5.2009, 23:47
Так ,что то я запутался smile 
Допустим задний фон есть,монотонный.А откуда остальное возьмется?CSS?
Почитал про мапы и ареа...вроде все понятно,берешь картинку и указываешь какие ее области будут ссылкой.Непонятно только как реализовать анимацию нажатия на ссылку.

Автор: bars80080 21.5.2009, 00:58
в данном случае никаких областей с картами


Код

<div id="menu">
<a href="http://server.ru/link1">Home</a>
<a href="http://server.ru/link1">Blog</a>
<a href="http://server.ru/link1">Photoshop</a>
....
</div>



и стили:

Код

* { margin: 0px; padding: 0px; }
#menu { width: 200px; height: 400px; background: url(fon.jpg) no-repeat; padding: 30px 10px; }
#menu a { display: block; width: 180px; height: 20px; font: 10pt Tahoma; color: #dddddd; }
#menu a:hover { color: #ffffff; }
в принципе этого должно хватить

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)