Верстка HTML страницы с флеш элементами

[jillkorn]

Добрый день всем.

Встала передо мной такая задача... Нарисовали страницу. В ней хочу вложить несколько флеш баннеров. Естественно хочется что бы эта страница была "резиновой".

Помогите это сделать... Я начинающий в веб верстке, так что хотелось бы детально все и понятно. Что бы в следующий раз уже мог сам.

Вкладываю нарисованную страницу. Белые блоки - естественно место под баннеры.

[rus]

дизайнер явно не понимает что такое html+css, как же вы это вообще собрались верстать? Одной сплошной картинкой что ли?

Да еще и условие - резина!!!

[Vin]

Да какое тут представление про html+css, тут здравого смысла достаточно. Какая тут в принципе может быть резина? Единственное, это всё можно сделать вектором в том же флеше или js, но работы тут будет ну просто ооочень много

[jillkorn]

ну, а если самостоятельно порезать? Я на одном форуме читал, что верстальщики режут изображения макета...

Или мне заново дать переделать? Как поступить???

[Viper]

ну, а если самостоятельно порезать? Я на одном форуме читал, что верстальщики режут изображения макета...

Или мне заново дать переделать? Как поступить???

Можно сверстать что угодно, но по вашему изображению, лично мне, непонятно какой должен получить темплейт/структура на выходе... Это изображение и есть макет, который вам предоставили?

[jillkorn]

Да. Это все что предоставили. Мне хочется что бы в белые блоки получилось впихнуть баннеры... И Что бы они нормально отображались но большинстве мониторах. А не только на одном, на котором буду делать. Я то с горе по палам начитаюсь всего (сейчас тут штудирую всякие статьи), и как то смогу связать css с html в конце концов. Но хочется сделать грамотно...

Edited April 22, 2012 by jillkorn

[Viper]

Да. Это все что предоставили. Мне хочется что бы в белые блоки получилось впихнуть баннеры... И Что бы они нормально отображались но большинстве мониторах. А не только на одном, на котором буду делать. Я то с горе по палам начитаюсь всего (сейчас тут штудирую всякие статьи), и как то смогу связать css с html в конце концов. Но хочется сделать грамотно...

Вы все про баннера, та про баннера... А меню, футер(копирайт), интрфейс та и, в конце-концов, контент будет то на этом сайте? )

[wildhind]

дизайнер явно не понимает что такое html+css, как же вы это вообще собрались верстать? Одной сплошной картинкой что ли?

Да еще и условие - резина!!!

так чего тут…

background-size:cover…

столбы-карандаши-ветки пусть по краям стоят.

Посетитель сайта пусть сходит чаю себе нальёт, пока страничка открывается.

Чего не так?

[jillkorn]

Да. Это все что предоставили. Мне хочется что бы в белые блоки получилось впихнуть баннеры... И Что бы они нормально отображались но большинстве мониторах. А не только на одном, на котором буду делать. Я то с горе по палам начитаюсь всего (сейчас тут штудирую всякие статьи), и как то смогу связать css с html в конце концов. Но хочется сделать грамотно...

Вы все про баннера, та про баннера... А меню, футер(копирайт), интрфейс та и, в конце-концов, контент будет то на этом сайте? )

Нет, никакого контента, меню не будет. Это просто будет отдельная страничка. В которую только надо вставить баннеры и не более...

дизайнер явно не понимает что такое html+css, как же вы это вообще собрались верстать? Одной сплошной картинкой что ли?

Да еще и условие - резина!!!

так чего тут…

background-size:cover…

столбы-карандаши-ветки пусть по краям стоят.

Посетитель сайта пусть сходит чаю себе нальёт, пока страничка открывается.

Чего не так?

Тобишь этот параметр будет очень долго грузить страницу??? Или все зависит от размера изображения? если мы его просто напросто уменьшим? И оно от силы будет весить 100 кб не более... А то и меньше? + сами файлы баннеров.

[Viper]

Тобишь этот параметр будет очень долго грузить страницу??? Или все зависит от размера изображения? если мы его просто напросто уменьшим? И оно от силы будет весить 100 кб не более... А то и меньше? + сами файлы баннеров.

Ну если оно будет весить не более 100-200Кб, то без проблем, раз такое дело. Но я так и не понял, где здесь должна быть "резина"? Банера будут растягиваться в зависимости от размера окна браузера?

Edited April 22, 2012 by Viper

[jillkorn]

Тобишь этот параметр будет очень долго грузить страницу??? Или все зависит от размера изображения? если мы его просто напросто уменьшим? И оно от силы будет весить 100 кб не более... А то и меньше? + сами файлы баннеров.

Ну если оно будет весить не более 100-200Кб, то без проблем, раз такое дело. Но я так и не понял, где здесь должна быть "резина"? Банера будут растягиваться в зависимости от размера окна браузера?

Да, хочется что бы баннеры растягивались пропорционально увеличению/уменьшению экрана. И на всех мониторах стояли на своих местах, в блоках.

ну или же при уменьшении окна, они соответственно тоже уменьшались.

Edited April 22, 2012 by jillkorn

[Int]

Тогда каким местом должны тянуться карандаши? Предположим, их можно сделать отдельным слоем? Но у них же нет ни одного прямого места, которое можно растянуть.

[hedgehog]

А ежели использовать вектор, ну там canvas или svg?

[Viper]

А ежели использовать вектор, ну там canvas или svg?

немного поправлю: svg - вектор, canvas - растр (Растровая графика)

[hedgehog]

немного поправлю: svg - вектор, canvas - растр (Растровая графика)

А чем не вектор отрисованный путь при помощи графических примитивов? Те же кривые, прямые.

[Viper]

Viper (23 Апрель 2012 - 11:57) писал:

немного поправлю: svg - вектор, canvas - растр (Растровая графика)

А чем не вектор отрисованный путь при помощи графических примитивов? Те же кривые, прямые.

Вектор и растр (вики), неплохая статься про canvas & svg (статья)

В canvas мы рисуем не линии, как обьекты. Мы создаем пиксели которые "выстраиваються" в линию...

П.С. Стравни Photoshop(растр) и Illustrator(вектор), вектор можно увеличивать без потери качества - это линии, обьекты. А растр теряет качество при увеличении, так как - это пиксели, которые при увеличении, увеличиваються, а не размножаються )).

Edited April 23, 2012 by Viper

[hedgehog]

В canvas мы рисуем не линии, как обьекты. Мы создаем пиксели которые "выстраиваються" в линию...

Можно ведь описать тот же объект в JS и отрисовывать его в разных масштабах http://jsfiddle.net/kcwHH/

[Viper]

Можно ведь описать тот же объект в JS и отрисовывать его в разных масштабах http://jsfiddle.net/kcwHH/

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

П.С. Если ты не понял разницы, то советую все же посмотреть те ссылки, что я кидал ранее.

Edited April 23, 2012 by Viper

[hedgehog]

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

Я понимаю разницу между вектором и растром. Понятно, что при зуме в браузере изображение на канвасе не ведет себя как вектор, сам холст-то растровый. Я имел ввиду, что макет ТС можно отрисовать на канве и масштабировать его по мере изменения размеров окна (резина). Правда, решение извращено-костыльное и требует перерисовки при каждом ресайзе окна.

А за ссылку все равно спасибо.

[Great Rash]

Это подобие макета тянуть нельзя. Верстать его тоже нельзя. Его надо выкинуть и забыть как страшный сон. Тот кто нарисовал это ничего не понимает ни в дизайне вообще, ни в веб-дизайне в частности. Поэтому и говорить тут не о чем.

[Vin]

Тобишь этот параметр будет очень долго грузить страницу??? Или все зависит от размера изображения? если мы его просто напросто уменьшим? И оно от силы будет весить 100 кб не более... А то и меньше? + сами файлы баннеров.

Учитывая размеры изображения, можно колонки вырезать, точнее отслоить, а остальное поставить фоном. Будет какое-то подобие резины, если так можно сказать. Сжать его меньше чем до 100кб? Ну, попытка — не пытка: уменьшить его в два раза, а потом долго и мучительно оптимизировать.

[jillkorn]

Не радостные новости... Абсолютно не радостные....(

Если не резина, какие варианты есть???

Пропорциональное просто уменьшение фона и флешек??? Такое возможно??? Что бы хотя бы на стандартных мониторах все выглядело нормально???

[rus]

Если не резина, какие варианты есть???

1) фикс+цельная картинка, которая бог знает сколько будет грузиться.

2) уволить дизайнера и отдать заказ другому

3) не знаю поможет ли, но как вариант попробуйте в направлении адаптивной верстке

Пропорциональное просто уменьшение фона и флешек??? Такое возможно??? Что бы хотя бы на стандартных мониторах все выглядело нормально???

это как бэ и есть резина вобщем то...

[jillkorn]

В общем фикс картинку делать и все...

Более я не вижу других вариантов, т.к. деньги уже уплачены, а но новый проект нет денег...(

[Vin]

Как и говорили, backgrounв-size, такие огромные размеры не нужны — уменьшить вдвое, сильно тоже не надо, а то обрубком будет выглядеть и поколупаться с оптимизацией, может, вес изображения будет приемлемым (но меньше 100кб — очень маловероятно).