HTML верстка

(Ответов: 8, Просмотров: 602)
  1. Новичок
    • Регистрация: 30.01.2015
    • Сообщений: 13
    • Репутация: 1
    Предлагаю верстку HTNL+CSS+JavaScript.
    При необходимости сверстаю XML-XSL.

    Вот пример моей верстки блоками.

    Страница адаптируется к разрешению экрана. Чтобы посмотреть как это происходит, можно зажать клавишу Ctrl и покрутить колесико мышки в обе стороны. Вы увидите, как страница будет отображаться на экранах с большим и меньшим разрешением.

    Без JavaScript.

    Документ валиден по W3C.
    • -1

    Спасибо сказали:

    inetdomrabota(28.02.2015),
  2. Новичок
    • Регистрация: 30.01.2015
    • Сообщений: 13
    • Репутация: 1
    Минус без комментария попахивает нечестной конкуренцией.
    • 0
  3. Дипломник Аватар для Ispanec
    • Регистрация: 27.04.2010
    • Сообщений: 142
    • Репутация: 33
    aveugle, почитайте https://ru.wikipedia.org/wiki/%D0%90...B0%D0%B9%D0%BD

    И как Вы написали "Ctrl и покрутить колесико " не проверишь адаптивную верстку, для этого нужно запустить режим адаптивного дизайна в браузере и там уже смотреть как выглядит страничка при различных разрешениях экрана.

    Да и если посмотреть страничку при большом разрешении - http://puu.sh/gf7T9/2265e9eadf.jpg - как то не видно, чтобы блоки меняли свое расположение для приятного просмотра.

    Отсюда, видимо, и минусы.
    «Если кто не хочет трудиться, тот и не ешь!» © Послание апостола Павла к Фессалоникийцам, гл. 3, ст. 10
    • 0
  4. Новичок
    • Регистрация: 30.01.2015
    • Сообщений: 13
    • Репутация: 1
    Ispanec, колесико в другую сторону не пробовали крутить?

    (И вместо ссылок на статьи в википедии дали бы лучше ссылки на свои работы, было бы о чем говорить.)

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

    Смысл адаптации: уйти от горизонтального скролинга для маленьких экранов (планшетя телефоны), и максимально использовать возможности экранов с большим разрешением, избегая по возможности вертикального скроллинга.
    Для экранов больше 1280 никакого скроллинга (ни по вертикали ни по горизонтали) не будет, потому и не нужно уже ничего делать.

    Вот картинки, поясняющие, как эта адаптация работает:




    Последний раз редактировалось aveugle; 28.02.2015 в 00:44.
    • -1
  5. Дипломник Аватар для Ispanec
    • Регистрация: 27.04.2010
    • Сообщений: 142
    • Репутация: 33
    Цитата Сообщение от aveugle Посмотреть сообщение
    Для разрешения больше 1280 сайт уже не растягивается вширь.
    Иначе он будет выглядеть сплошной некрасивой горизонтальной полоской.
    Мы уберем пустое место справа, но сделаем много пустого места внизу.
    Это все можно обсуждать.
    А если у меня разрешение 1920x1080? И кстати про планшеты с разрешением 2048x1536. Ваш вариант выглядит не презентабельно в этом смысле. Могли бы хотя бы сделать по центру расположить сайт. А лучше использовать медиа-запросы, чтобы для все устройств было корректное отображение.

    Цитата Сообщение от aveugle Посмотреть сообщение
    (И вместо ссылок на статьи в википедии дали бы лучше ссылки на свои работы, было бы о чем говорить.)
    Ну мы в данной теме собрались не мои работы обсуждать. Я Вам лишь показал, что мне не понравилось.

    Решил заглянуть в сам html и css. Такой вопрос почему не любите ссылки?
    На весь шаблон всего одна ссылка (на почте), все остальное имитирует визуальный вид ссылки этим
    Код:
    cursor: pointer;
    Заказчик, думаю, был бы не доволен этим.

    Хотелось бы поинтересоваться насчет этого. Какую проблемы пытались решить этим?
    Код:
    div {	display:table;	}
    Последний раз редактировалось Ispanec; 28.02.2015 в 01:28.
    «Если кто не хочет трудиться, тот и не ешь!» © Послание апостола Павла к Фессалоникийцам, гл. 3, ст. 10
    • 0
  6. Новичок
    • Регистрация: 30.01.2015
    • Сообщений: 13
    • Репутация: 1
    Итак, вы даже такого не делали. Судя по ответу.

    Сайт, который выдает картинки разного разрешения в зависимости от размеров экрана клиента, конечно круче, чем то, что показал я. Но, мое решение тоже позволяет решить проблему обеспечения универсальности на каком-то уровне. Для сайта определенного бюджета это тоже будет неплохим решением IMHO. Особенно, если учесть, что даже ту адаптацию, которую показал, встретишь не часто.

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

    И еще, здесь я принципиально не использовал javaScript. Я поставил перед собой задачу попробовать решить проблему чистым html+CSS. Возможности обработки события типа onResize открывают огромный кладязь для адаптации. Возможно ( будет время), покажу и его. Были бы заказчики, готовые платить за подобный сервис...


    -------

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

    А еще, можно указать max-width. Такой контейнер легко будет становиться меньше, если его будет поджимать снаружи, но никогда не разрастется больше определенного размера, если только не столкнется с переполнением. Именно благодаря такому свойству (table-layout:layout) мы можем плавно менять размещение плавающих блоков. Когда страница позволяет, то он расширяется, а когда поджимает правый край окна просмотра, плавающие блоки содержимого такого контейнера перестраиваются в более узкую структуру.

    ------

    Что до ссылок. Ну понятно, что при верстке коммерческого шаблона, все ссылки будут ссылками. Просто какой смысл был сейчас засорять лишними тегами html, когда задача стояла показать адаптацию к разрешению. (Вы бы еще придрались, что я form не использовал вокруг input'ов.)

    ---------- Сообщение добавлено 01:38 ---------- Предыдущее 01:22 ----------

    Вдогонку, я рад, что у вас большой монитор!
    Киньте сюда скрин сайта, одной небольшой малобюджетной конторы, у которой нет денег на хорошую верстку.
    Вот этой: http://www.daimler.com/

    Что там с растягиванием на весь ваш FullHD монитор и центрированием?
    Последний раз редактировалось aveugle; 28.02.2015 в 02:33.
    • -1
  7. Дипломник Аватар для inetdomrabota
    • Регистрация: 26.01.2014
    • Сообщений: 215
    • Репутация: 63
    • Webmoney BL: ?
    aveugle, Ошибки валидности на готовом сайте в HTML и CSS устраняете?
    • 0
  8. Новичок
    • Регистрация: 30.01.2015
    • Сообщений: 13
    • Репутация: 1
    inetdomrabota,пишите на aveugle@mail.ru
    • 0
  9. Гуру Аватар для search
    • Регистрация: 02.09.2008
    • Сообщений: 594
    • Репутация: 74
    нужно, текущий макет сайта (вот сам шаблон _http://themeforest.net/item/olympia-premium-responsive-cscart-theme/6365195 ) сделать адаптивным под мобильные устройства, чтобы он проходил проверку у гугла.
    CMS - CS Cart
    Цена вопроса и сроки в ЛС, пожалуйста, если готовы взяться за работу.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Верстка из из PSD в HTML+CSS
Создание сайтов 12 15.08.2013 01:35
Верстка HTML+ CSS из PSD
Создание сайтов 0 04.08.2013 00:48
Верстка psd в html
Создание сайтов 0 14.05.2013 13:35
Верстка HTML+CSS
Создание сайтов 2 14.07.2011 18:06
HTML верстка сайтов. HTML/CSS верстка.
Реклама партнерских программ 2 26.07.2010 13:12

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры