Раскройка шаблона сайта (картинки)

[Dimon.by]

Народ помогите пожалуйста ! Я скачал бесплатный шаблон сайта. В архиве был файл PSD то есть фотошоповский исходник дизайна первой страницы. В фотошопе меняю названия кнопок и ит.д. в шаблоне и затем жму "Сохранить для Web" в итоге имею html-ку, которую открываю через Dreamweaver CS4 и вот ТУТ НАЧИНАЕТСЯ. Когда пытаюсь вставить текст, то дизайн сайта начинает расползаться, то есть части дизайна разъезжаются. Что делать ? Как я понимаю это зависит от раскройки ? Так ? Как и чем мне раскроить эту страницу, чтобы она не разъезжалась и более того, как сделать так что, когда я пишу текст то у меня почему то текс (квадратное окно его) замещает область картинки моего сайта а мне хочется чтобы он наверх ложился на фон сайта и когда его много, то автоматом двигался вниз без разъезжания дизайна сайта.
Заранее прошу прощение за туфтологию. Спасибо

[Kiselyov]

Тема переехала в «верстку».

Видимо Вы слишком много текста вставляете либо переносы не ставите. Некоторые картинки из «картинки просто» надо, видимо, перенести в «фоновая картинка». Лучше даже сразу вставить текст в Фотошопе, а потом лишь раскроить. В общем, ручная работа.

[okey]

Заранее прошу прощение за туфтологию. Спасибо

И правда туфта )

В процессе создания любого сайта можно выделить 3 этапа:
1. Дизайн (разработка psd-макета)
2. Вёрстка (та самая "раскройка" или html-кодинг)
3. Программинг (PHP, Perl, ASP и т.д.)

Фотошоп создаёт примитивный html-код. Он лишь режет одну большую картинку на несколько маленьких.
Процесс создания хорошей работоспособной вёрстки куда сложнее и выполняется только вручную. Тут есть ряд сложностей, таких как кроссбраузерность (воспринимаемость кода разными браузерами), резина (растягиваемость страницы на экранах с разными разрешениями), валидируемость (оценка соответствия вёрстки W3C стандартам). Поисковики вам в помощь
Благо на российском рынке эта услуга совсем недорогая и колеблется в районе 1000-2000 руб. за страницу. Разумеется, есть и более сложные задачи с соответствующим ценником. Внутренние разделы (имеющие схожий дизайн с главной) обычно делаются ещё дешевле.

[Dimon.by]

И правда туфта )

В процессе создания любого сайта можно выделить 3 этапа:
1. Дизайн (разработка psd-макета)
2. Вёрстка (та самая "раскройка" или html-кодинг)
3. Программинг (PHP, Perl, ASP и т.д.)

Фотошоп создаёт примитивный html-код. Он лишь режет одну большую картинку на несколько маленьких.
Процесс создания хорошей работоспособной вёрстки куда сложнее и выполняется только вручную. Тут есть ряд сложностей, таких как кроссбраузерность (воспринимаемость кода разными браузерами), резина (растягиваемость страницы на экранах с разными разрешениями), валидируемость (оценка соответствия вёрстки W3C стандартам). Поисковики вам в помощь
Благо на российском рынке эта услуга совсем недорогая и колеблется в районе 1000-2000 руб. за страницу. Разумеется, есть и более сложные задачи с соответствующим ценником. Внутренние разделы (имеющие схожий дизайн с главной) обычно делаются ещё дешевле.

Подскажите тогда, чем вообще выполняется верстка, точнее какой программой ?

[do!]

Подскажите тогда, чем вообще выполняется верстка, точнее какой программой ?

Ну например тем же Dreamweaver

[Aykroyd]

Благо на российском рынке эта услуга совсем недорогая и колеблется в районе 1000-2000 руб. за страницу.

Бывает и 1000-2000$.

Подскажите тогда, чем вообще выполняется верстка

Руками.

[okey]

Подскажите тогда, чем вообще выполняется верстка, точнее какой программой ?

Да хоть блокнотом. Я использую PHPExpertEditor из-за подсветки синтаксиса.
Dreamweaver вставляет много лишнего мусора в код и страница из-за этого грузится дольше. Правды ради надо сказать, что разницы вы, скорее всего, не почувствуете. Но она есть ) И в солидных крупных проектах подобные потери совершенно недопустимы. Поэтому рекомендую сразу начинать учиться верстать ручками.

Бывает и 1000-2000$.

Одна страница без javascript? Покажите мне это чудо ) И таких заказчиков

[Dimon.by]

В процессе создания любого сайта можно выделить 3 этапа:
1. Дизайн (разработка psd-макета)
2. Вёрстка (та самая "раскройка" или html-кодинг)
3. Программинг (PHP, Perl, ASP и т.д.)

НАРОД, ТОГДА ПОДСКАЖИТЕ КАКИЕ ПРОГРАММЫ НУЖНЫ ДЛЯ КАЖДОГО ИЗ ЭТАПОВ СОЗДАНИЯ САЙТА.
1.ДЛЯ ПЕРВОГО КАК Я ПОНИМАЮ В ОСНОВНОМ ИСПОЛЬЗУЮТ PHOTOSHOP
2.ДЛЯ ВТОРОГО НАСКОЛЬКО Я ПОНЯЛ IMAGEREADY
3.НУ А ТРЕТИЙ И ТАК ПОНЯТНО

Тогда для чего нужен вообще dreamweaver ? Или же им тоже верстку производят ?

И подскажите, как опытные люди в этом, с чего начинать изучение и какие именно
программы разбирать и учить ? не хочется не нужные вещи мусолить ! К примеру в интернете куча статей, но у всех свои мнения как и в какой программе что лучше делать !
Я, правда, сделал несколько сайтов давненько, но знаий никаких не прилагал почти (их просто не было и нет ), так как взял просто готовые шаблоны и через dreamweaver изменил под себя !

[okey]

По программам вам всё уже разжевали выше.
Чтобы начать учиться, нужно [Только зарегистрированные пользователи могут видеть ссылки. ].
Например [Только зарегистрированные пользователи могут видеть ссылки. ].

[eiff]

Чтобы начать мне хватило этого скринкаста: [Только зарегистрированные пользователи могут видеть ссылки. ]. А дальше книжки и практика.

[Aykroyd]

Матерь Божья, конца и края не видно.

Dreamweaver вставляет много лишнего мусора в код и страница из-за этого грузится дольше. Поэтому рекомендую сразу начинать учиться верстать ручками.

Пожалуйста, объясните мне, на основании чего Вы выдвигаете эту космическую гипотезу о том, что в Dreamweaver-е, в отличие от блокнота или PHPExpertEditor, категорически невозможно «верстать ручками»? Откуда берутся такие стереотипы, что, мол, если Dreamweaver, то это обязательно «куча мусора» в коде?

Одна страница без javascript? Покажите мне это чудо ) И таких заказчиков

Не только с JavaScript, но и со строгой валидностью, четким разделением структуры и представления, неуклонным соблюдением семантики структурных элементов, солидной «кучкой» микроформатов, полноценным альтернативным контентом для Flash, обеспечением максимальной доступности контента для людей с ограниченными возможностями, полнейшей кроссбраузерностью и адаптацией контента не только для экранов мониторов, но также и для КПК, скрин-ридеров и печатающих устройств.

Покажите мне специалиста, который будет готов сделать все это за 2000 рублей, и я с превеликим удовольствием познакомлю Вас с реальными примерами подобных «чудес»...

[okey]

Пожалуйста, объясните мне, на основании чего Вы выдвигаете эту космическую гипотезу о том, что в Dreamweaver-е, в отличие от блокнота или PHPExpertEditor, категорически невозможно «верстать ручками»? Откуда берутся такие стереотипы, что, мол, если Dreamweaver, то это обязательно «куча мусора» в коде?

Вы говорите за других, поэтому и не видно ни конца, ни края )
Я не выдвигал никаких гипотез, тем более о том, что в дримвивере "категорически невозможно верстать ручками".
"Стереотипы" о мусоре берутся после ознакомления с этой программой и применением её функций на деле. Если не использовать эти функции, а писать код как в блокноте, то зачем ставить такую массивную софтину?
Правда, я давно с ней не работал. Возможно, в современных версиях появилось много нового, полезного и интересного. Если так, поделитесь, плиз.

Не только с JavaScript, но и со строгой валидностью, четким разделением структуры и представления, неуклонным соблюдением семантики структурных элементов, солидной «кучкой» микроформатов, полноценным альтернативным контентом для Flash, обеспечением максимальной доступности контента для людей с ограниченными возможностями, полнейшей кроссбраузерностью и адаптацией контента не только для экранов мониторов, но также и для КПК, скрин-ридеров и печатающих устройств.

Даже если не обращать внимания на шквал незнакомых для меня слов , одни только яваскрипты могут иметь стоимость в десятки тысяч доляров... Но звучит убедительно ) Благодарю вас, буду теперь ламеров стращать понятиями
Если вас не затруднит, раскройте, пожалуйста, эти диковины:
1. Четкое разделение структуры и представления (это о html и css?)
2. Неуклонное соблюдение семантики структурных элементов (это о валидации опять же?)
3. Солидная «кучка» микроформатов (вот это очень интересно)
4. Обеспечение максимальной доступности контента для людей с ограниченными возможностями (что в себя включает?)
5. Адаптация контента не только для экранов мониторов, но также и для КПК, скрин-ридеров и печатающих устройств (можно дополнить wap-версией)

Покажите мне специалиста, кто будет готов сделать все это за 2000 рублей, и я с превеликим удовольствием познакомлю Вас с реальными примерами подобных «чудес»...

А за так не покажете?

[okey]

Почитал ваш [Только зарегистрированные пользователи могут видеть ссылки. ].
Качаю его )

[Aykroyd]

Я не выдвигал никаких гипотез, тем более о том, что в дримвивере "категорически невозможно верстать ручками".

Простите великодушно, но я вроде бы пока еще не разучился читать по-русски:

Dreamweaver вставляет много лишнего мусора в код и страница из-за этого грузится дольше. Поэтому рекомендую сразу начинать учиться верстать ручками.

Разве это не прямое утверждение, что Dreamweaver и «верстать ручками» – есть суть понятия несовместимые?

Если не использовать эти функции, а писать код как в блокноте, то зачем ставить такую массивную софтину?

Смею предположить, что, если уж Вы нашли мой «труд о дримвивере», по всей видимости Вы уже нашли и ответ на данный вопрос)

Если вас не затруднит, раскройте, пожалуйста, эти диковины

1. [Только зарегистрированные пользователи могут видеть ссылки. ].
2. [Только зарегистрированные пользователи могут видеть ссылки. ] (не имеет ничего общего с валидацией).
3. [Только зарегистрированные пользователи могут видеть ссылки. ]-[Только зарегистрированные пользователи могут видеть ссылки. ]-[Только зарегистрированные пользователи могут видеть ссылки. ]-[Только зарегистрированные пользователи могут видеть ссылки. ]-[Только зарегистрированные пользователи могут видеть ссылки. ].
4. [Только зарегистрированные пользователи могут видеть ссылки. ], [Только зарегистрированные пользователи могут видеть ссылки. ].
5. Wap-версия тут совсем ни при чем. Речь шла о возможности просматривать веб-сайты с помощью широчайшего спектра различных устройств вывода, что достигается посредством CSS.

А за так не покажете?

не) так не честно)

[okey]

Разве это не прямое утверждение, что Dreamweaver и «верстать ручками» – есть суть понятия несовместимые?

Блин, вы меня поймали за хвост На самом деле, я имел в виду нецелесообразность использования дрима в качестве блокнота, ибо не знал о его многочисленных полезностях. Но вы мне раскрыли на них глаза, за что примите мой виртуальный поклон )

Смею предположить, что, если уж Вы нашли мой «труд о дримвивере», по всей видимости Вы уже нашли и ответ на данный вопрос)

Исчерпывающий )

не) так не честно)

Ну и ладно

P.S. Спасибо вам за сцылочки!

[Dimon.by]

Всем спасибо за советы, НО на последок хотелось бы добавить и спросить. Дело в том что учебники и т.д. начинаются и долго тянуться с всякого рода примеров тегов и т.д. Этим я владею наполовину и знаю теги. У меня вопрос скорее более не базовый. Вот к примеру, сделал я макет в PSD, А ЗАТЕМ что ? Как я понял я должен создать, к примеру, в Дриме таблицу и уже с PSD макета в Photoshope вырезать и вставлять в таблицу в Дриме фрагменты сайта, подгонять их под нужный размер и т.д. ? Так я понимаю ? Точнее будет правильнее спросить на верном ли я пути ? Дело в том что когда я делаю макет в Photoshope то жму "Сохранить для Web" и мне уже тут и готовый Index.html и папка Images к нему, НО как я понял за основу этот index.html брать нельзя ? То есть все что мне в конечном виде выдал фотошоп мне следует расценивать ТОЛЬКО как нарезанные картинки (кнопки, элементы дизайна и т.д.) а файл index.html который сделал фотошоп можно вообще удалить ?????? Или же нужно делать верстку на основе этого index файла фотошопа ? То есть если быть короче, сначала делается макет в PSD а затем разрезается и уже монтируется и корректируется в ТАБЛИЦУ, созданную в Дриме ?
Заранее спасибо. Простите неопытного ламера

[eiff]

Dimon.by, повторюсь.
[Только зарегистрированные пользователи могут видеть ссылки. ] — здесь всё понятно и наглядно.

[Dimon.by]

Dimon.by, повторюсь.
[Только зарегистрированные пользователи могут видеть ссылки. ] — здесь всё понятно и наглядно.

Так там же всё на английском....

[eiff]

=) Там и так всё понятно должно быть. А вообще английский надо знать, без него в наше время трудно.

[Aykroyd]

Блин, вы меня поймали за хвост

Вот такой я вредный)

Спасибо вам за сцылочки!

Да простят меня окружающие за небольшой оффтоп, но тема «1000 рублей за верстку» – весьма больная тема. Ведь вот что удивительно: отдать, к примеру, 30-60 тысяч рублей за хороший дизайн сайта – это как бы в порядке вещей. Или взять, опять же, к примеру, стоимость работы программиста: за хороший интернет-магазин можно запросто выставить счет тыщ на 50, а то и на 100. Но вот что касается верстки – это 1000 рублей. И все тут. Складывается такое впечатление, что данный этап веб-разработки совершенно не требует ни знаний, ни ума, ни времени. В то время как именно от качества верстки зависят такие наиважнейшие свойства сайта как правильное отображение в браузерах нынешнего и будущих поколений, скорость загрузки веб-страниц, успех индексации контента поисковыми роботами и совместимость с различными устройствами вывода...

Дело в том что учебники и т.д. начинаются и долго тянуться с всякого рода примеров тегов и т.д.

И правильно делают. Потому что без четкого и досконального понимания той или иной технологии ни один «вспомогательный инструмент» не будет Вам полезен.

Вот к примеру, сделал я макет в PSD, А ЗАТЕМ что ?

А затем – забыть о существовании Дрима до тех пор, пока Вы не выучите должным образом HTML и CSS и не сверстаете парочку сайтов в обычном блокноте Windows.

Как я понял я должен создать, к примеру, в Дриме таблицу

[Только зарегистрированные пользователи могут видеть ссылки. ] слово «таблица».

НО как я понял за основу этот index.html брать нельзя ?

Нельзя.

То есть все что мне в конечном виде выдал фотошоп мне следует расценивать ТОЛЬКО как нарезанные картинки (кнопки, элементы дизайна и т.д.)

Как редкостную блевотину это следует расценивать.

а файл index.html который сделал фотошоп можно вообще удалить ??????

Проще изначально его не создавать.