Alastor

Как ты понимаешь, меня тут давно не было. Картинки в ту тему добавлю, только проблема в том, что аккаунт Verder'а ни за что забанен добрым Psywalker'ом, поэтому редактировать тему не могу. Пока что начал цикл мини-заметок о полезных вещах: http://forum.htmlbook.ru/index.php?showtopic=19869

http://www.wacom.eu/index2.asp?lang=ru&pid=253 Больше для счастья не требуется. Рисую как на бумаге. Можно L взять - http://www.wacom.eu/index2.asp?lang=ru&pid=254 он не хуже по впечателниям, дешевле, но размер... Особоенно когда для форматной полиграфии рисуешь размер важен. Как нить выложу иллюстрации.

Как обещал, открою серию мини-уроков по всеми нами любимому продукту компании Adobe - Adobe Photoshop CS4. До этого я пользовался версией CS3, но он не очень удобен при работе с масками, поэтому пришлось раскошелиться на новую версию. Многие думают, что знают фотошоп хотя бы на 50% его возможностей. Я не буду в этих, назовем это заметками, уроках, описывать создание различных эффектов с помошью этого редактора. Такого добра в инете полно. А коснусь я простейших вещей, которые, несмотря на всю свою простоту, иной раз могут очень пригодиться. Итак, заметка первая. Использование инструментов Slice Tool и Slice Select Tool для разрезки пунктов меню Естественно, этот инструмент может использоваться и для разрезки всего макета, но я остановлюсь именно на меню, так как иногда, особенно если пунктов в меню много, использовать ручной способ (хотя я стараюсь делать вручную) создания пунктов довольно муторно. 1. Для начала создадим новый файл (Ctrl+N) размером, например, 400х400px покрасим его для контраста в синий цвет. 2. В меню View отметьте пункты Extras, Rulers, Snap: Теперь напишем сами пункты меню. Для этого возьмем обычный Arial, размер 18pt, цвет белый, расстояние между строками регулируем с помощью панели Character - поставим для примера интервал 24pt. *Чтобы вам было проще, просто скопируйте эти строки в созданный файл: Lorem ipsum Dolor sit amet Consectetuer Adipiscing elit Sed diem nonummy Nibh euismod Tincidunt ut lacreet Dolore magna Aliguam erat volutpat 3. Выбираем инструмент Move Tool (клавиша V), зажимаем левую кнопку мышки (курсор должен находиться на линейке с делениями) и тащим направляющие со всех четырех сторон. Так как мы отметили пункт View --> Snap, направляющие автоматически будут "прилипать" к краям текста очерчивая наше меню. В итоге получится: 4. Далее выбираем инструмент Slice Tool и тянем от верхнего-левого угла меню к правому нижнему (как выделение в виндах). Выделение тоже будет "прилипать" к направляющим, так что не ошибетесь: Наше меню обведено желтой рамкой: 5. Далее выбираем инструмент Slice Select Tool ( С ), в верхнем меню нажимаем копку Divide, так как у нас 9 пунктов меню, в верхнем поле ставим число 9, смотрим на результат. Наше меню автоматически поделено на равные блоки: Если мы щелкнем два раза на любом пункте меню, то можем заранее задать имя нашего графического файла и некоторые другие параметры (если кто не знал, фотошоп предоставляет возможности верстки напрямую из файла): Продолжение следует, извините, работа.

Об этом можно бесконечно спорить. Но согласись, когда человек заходит с конкретной целью заказать сайт, то он подсознательно готов к тому, что на сайте студии будет графика и не факт, что она будет легкой.

Ну понаписал Плохо то что контактной инфы не увидел? А разве кто-то сказал, что ее не будет? Собственно и как разделов по логотипам, иллюстрациям, баннерам, фирменному стилю, рекламной продукции. В разделе "Предлагаем", в первом же абзаце про это написано и написано вполне прозрачно. Соответственно, в разделе "Сделали" (и его подразделах) будут блоки с представлением всех этих вещей. Я поражаюсь, что люди никак не поймут разницы между макетом и полноценным сайтом, на котором уже представлена вся информация и контактная в том числе. Да, ты прав, из богатых надо выжимать все. И если человек, зашедший на сайт чтобы заказать себе представительство в интернете, логотип, баннер, рекламу не может позволить себе загрузить 100-200кб картинок, то да, это не мой клиент. P.S. Сейчас посмотрел специально - объем всей графической составляющей главной страницы - 55кб. Внутренней - 60 с небольшим. Это много? Надо быть ужасно богатым, чтобы прожечь такое количество траффика Ребят, вы когда пишите, хоть сначала проверьте то, о чем вы пишите. Для примера: - 1.73кб.

Старый вариант. Не знаю, может его верну. Но блин тяжеловат он. http://www.freeway-design.ru/old/

Обновил макет. Не потружусь. В любом случае я не буду делать справа текстовые ссылки, а если понадобится градиент, то я нормально нарисую его в растре или векторе и использую как мне нравится. Сейчас главное наполнение. А на винте валяется еще 7 вариантов дизайна. Пока выбираю между первым и этим. Этот все же полегче.

Дело не в правильности транскрипции (правильно [ə'baυt] [ʌs] ) - просто захотелось так написать и подчеркнуть. Хотя скорее всего изменю. Тетку и клубнику вообще уберу, просто проверяю как будет выглядеть, если туда визуал впихнуть. Градиентом (а тем более JS, я кстати года 3 знаю как это делается) и текстовые ссылки делать не буду, любой шрифт из стандартных все испортит (проверял). Я не знаю что такое подвал. По английски footer переводится как нижняя сноска. А подвал есть в доме. Потому что мне именно плевать на мнения о верстке. Если ты не в курсе, то именно я это написал - http://forum.htmlbook.ru/index.php?showtopic=16868

Решил, что прошлый вариант был слишком мрачный. Обновил. Думаю оставить так. Основной упор на типографику, "воздушность". Работают главная страница и страница "Предлагаем".Текстовое наполнение этих страниц так же готово и меняться не будет (если только по мелочи, но раздел о моем отношении к SEO не уберу). Думаю полностью (наконец-то) закончить сайт в этом месяце. http://www.freeway-design.ru/ http://www.freeway-design.ru/offer.html (внутренняя) P.S. Как обычно, обсуждение верстки не интересует, о чем ясным английским языком сказано в начале кода каждой страницы. Главное, что идентично выглядит во всех браузерах, начиная с IE5. Удачи. P.P.S. Старый вариант. Вибираю - http://www.freeway-design.ru/old/

Молодцы, объяснили. А я просто послал страницей ранее, так как тупость она с рождения или от удара по голове. Этот человек ничего не слушает, не тратьте время.

Сам кого хочешь исповедую и грехи отпущу.

Ага, сорри, увлекся. Тут только бейсбольная бита поможет, по другому не получится. Примера уже нет, причину объяснил выше.

Вообще-то тему ты открыл. В чем собственно проблема? Это ровно то, что ты выложил, только без абсолютно позиционированного дерьма, которое ты не знаешь куда впихнуть и как это работает. Естественно я не стал все подгонять как тебе надо. Если нужна фиксированная ширина блоков, то просто поменяй % на пиксели и все. P.S. В очередной раз убедился, что SEO делает из человека идиота.

Ладно, вот: Удалено по причине SEOшной тупоголовости автора темы. Дальше думаю сам разберешься.

Неа, не буду, а то для вашего заказчика главное SEO. Так что не по феншую будет.

Посмотрел. Если ТАКАЯ верстка заточена под SEO (которого не существует), то тот кто верстал... Ладно, промолчу, а то опять забанят. Все то же самое верстается без геморроя за 10 минут и в 3 основных блока без такого уебланства (это не мат в чей то адрес, просто по другому не назовешь) как сейчас. Но если это будут использовать в целях "оптимизации", то даже не буду пример приводить, из принципа.

От ссылки на страницу толку никакого и никто не будет искать лист стилей. Но даже и без него понятно, что левая колонка (если это она конечно - <div id="left">) не входит в основной контейнер. <body> <div id="left"> <div id="container"> P.S. 1. SEO не существует. Все SEOшники - дебилы и тунеядцы. 2. Всех дармоедов, кто занимается якобы таким важным делом как SEO-оптимизация, надо либо расстрелять (что предпочтительней) либо отправить в колонию-поселение (что слишком мягкое наказыание).

Да можно как хочешь навертеть. Только кому это надо. А вообще-то мне все равно, тема неинтересна, задача скучна, конечный результат, я уверен, будет какашкой.

А вообще, если честно, я не понимаю, зачем такую задачу как создания блока сообщения на форуме делать слоями. Таблицами такая задача решается и логичнее и проще. Точнее не совсем таблицами, а правильным совмещением таблиц и блоков. Основные контейнеры делаются таблицами, а внутренние - блоками.

Ну если навскидку то можно так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Absolute position layers sample</title> </head> <body> <div style=" background-color: #FF6699;height:100px; position: absolute; width:100%;"> </div> <div style="height:100px;"> </div> <div style=" background-color: #6600CC;height:100px; position: absolute; width:100%;"> </div> </body> </html>

Тянется серый блок. Просто это я так сделал высоту фиксированную, чтобы наглядно было. Удали height:400px; совсем, напихай туда текста всякого, поймешь. Будет тянуться как миленький. P.S. А вообще я не верстальщик.

Вот, даже оформил чтобы понятней было. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Пример</title> <style type="text/css"> * {margin:0; padding:0;} html,body {width:100%; height:100%;} #mainpage {font: normal 62.5% Verdana, Geneva, sans-serif;} #wrap {width:100%; height:100%; min-height:100%; height:auto !important;} #left-shift {width:250px; margin-top:-150px; background: #A7B1C5; float:left;} .left-shift-inside-top {position:relative; margin: 0 auto; margin-top:30px; margin-bottom: 80px; border: 1px solid #666; background:#FFF; width:150px; height:100px;} .left-shift-inside-bottom {position:relative; margin: 0 auto; margin-top:80px; margin-bottom: 80px; border: 1px solid #666; background: #FFF; width:150px; height:400px;} #head-layout {height:150px; background: #81C460;} .username {float:left; margin-left: 250px; _margin-left:125px; margin-top:60px; padding-left: 30px; font: bold 1.2em Arial, serif;color: #fff;} .name {float:right; margin-right: 50px; margin-top:60px; font: bold 1.2em Arial, serif; color: #fff;} #middle-wrap {padding-left:250px;} h3 {padding-bottom:14px; color:#2D4248; font: normal 1.6em Arial, Serif; } .content {font: normal 1.3em Arial, serif #666; padding-bottom: 10px;} #middle-wrap-inside {padding: 50px 50px 0px 30px;} .clear {clear:both;} #bottom-layout {height:150px; background: #fff;} .left-bottom-layout {width:250px; height:150px; background:#A7B1C5; float:left;} .buttons {position:relative; width:88px; height:31px; background: #425397; float:right; margin-right:30px; margin-top:119px;} </style> </head> <body id="mainpage"> <div id="wrap"> <div id="head-layout"> <div class="username"> <p>Ник пользователя</p> </div> <div class="name"> <p>Номер сообщения: #1</p> </div> </div><div id="left-shift"> <div class="left-shift-inside-top"> </div> <div class="left-shift-inside-bottom"> </div> </div> <div id="middle-wrap"> <div id="middle-wrap-inside"> <h3>Хрень всякая</h3> <p class="content">позиционирование плохо так как тут этот шаблон будет повторяться и наслаиваться на предыдущий. И он будет находиться на слое без абсолютного позиционирования. К тому же как сделать чтобы слой тянулся по высоте и был 100% по ширине. Если задать высоту и ширину в 100% то ничего не измениться.</p> <p class="content">То есть я сейчас делаю шаблон для сообщения на форуме. Если к примеру будет 2 сообщения, то они будут лежать друг на друге (это я щас про верстку шаблона сообщения с обсол. позиционированием), а не идти последовательно друг за другом.</p> </div> </div> <div class="clear"> </div> <div id="bottom-layout"> <div class="left-bottom-layout"> </div> <div class="buttons"> </div> <div class="buttons"> </div> </div> </div> </div> </body> </html>

Ниже смотри.

Ниже смотри

Абсолютно согласен. Как сказал известный человек - "я называю фиксированный сайт - скриншотом". Помимо этого: 1. Краски не веселые, а грязные, с претензией на "веселость". Просто напихали кучу векторов не понимая, что такое количество бессмысленных загогулин прямопропорционально идиотизму дизайнера. 2. Чувак какой-то инопланетный. Из откушенных руки и ноги хлещет разноцветная кровь. Да и жить ему недолго осталось - инопланетные треуголные капканы его перекусят. Уже прокусили мочевой пузырь. Да и кед надет не на ту ногу (поворачивать картинку тоже с умом надо). 3. За выкладывание в портфолио чужих работ надо морду бить. Вообще не понимаю, зачем делать студию, когда ваш "дизайнер", кроме как стырить бесплатный клипарт, ничего не умеет. Я тоже сейчас делаю сайт, скажем так, с работами. Но, во-первых, я занимаюсь этим лет 7-8 уже, во-вторых, имея в багаже более 40 работ, считаю, что делать сайт студии очень большая ответственность. Свой до сих пор не заполнен именно по этой причине. То, что висит сейчас на freeway-design.ru только первый вариант, набросок. А на винте еще 8 вариантов. А ведь тоже могу напихать красивеньких клипартов и сказать -"у меня студия". Только зачем? Не знаю как насчет Казахстана, да это и не так важно, но я бы просто постеснялся создавать тут пост с просьбой "оценить сайт студии", имея такой сайт.