Получить новую статью

Вставьте здесь свой адрес:

Delivered by FeedBurner

Подписаться на статьи рубрики
Подписаться на статьи рубрики
Подписаться на статьи рубрики
БЫТОВАЯ ТЕХНИКА
новинки, содержание, ремонт
Подписаться на статьи рубрики
СЕРВИСЫ ОНЛАЙН
описание, рекомендации
Подписаться на статьи рубрики
ДИЗАЙН ВЕБ САЙТОВ
советы, показ, нюансы

users online

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

Подобную тему в интернете не нашёл, поэтому и опишу решение проблемы самым простым способом.

C адаптивностью дизайна, актуальность отношения к статической картинке дизайна, с расширением psd и элементов контента сильно изменилась...

Однако, нас интересует быстро посмотреть именно весь дизайн с текстом в картинке psd в браузере. Как будут видеть дизайн люди на мониторах настольных ПК.

Обычным способом можно открыть картинку в браузере и понять всё расположение элементов. А если высота картинки дизайна выше монитора, картинка сжимается по высоте и просмотр не возможен в реальном масштабе.

Дизайнеру новичку важно понять сочетание шрифта и меж строчного расстояния, компоновки блоков и надписей, заголовков и текста, как заполнен дизайн. Мне могут возразить – мол, в ФШ и так видно при 100% увеличении.

Да, но браузеры не ФШ и отражают все несколько по-иному. Отражение на мобильных устройствах это уже производная от главного дизайна.

Для начинающего дизайнера это особенно важно. Для верстальщиков дальше читать не актуально, а дизайнеру полезно знать. Воспользуемся такой фишкой:

1.Создаём на рабочем столе папку под любым названием, например «00»
2.В неё вкладываем ещё одну папку под названием images.
3.Загружаем в папку images свою картинку дизайн с расширением jpeg, png. Назовём её как угодно, например 01. С расширением png.

4.Далее копируем короткий код файла index с этой страницы в блокнот Not Pad ++ ( д. б. выставлен синтаксис – H), кодировка UTF-8.

<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html><head>
<title>Мой сайт</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
DIV /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:960px; height:12900px;">
<img src="images/01.png"  width="960" height="12900" border="0"></div>
</body>
</html>
5.И, в значениях width:960px – ширина дизайна, оставляем как есть, ведь у вас тоже ширина дизайна 960px. А если нет, вставьте свою ширину дизайна в px. Это же, и в размерах картинки проставить. (Внимание! Ширина дизайна, это не ширина файла, на котором лежит дизайн. Дизайн, это ширина модульной сетки – картинки дизайна.)
А в значении height:, вставьте свою высоту дизайна. Я вставил 12900рх.

6.Вместо картинки /01.png, вставьте название своей картинки, лежащей в папке images.
7.Сохраняем этот индексный файл под названием index и заносим общую папку «00».

Как быстро посмотреть картинку дизайна Лендинга в браузере полно размерно

Всё, работа сделана и можете посмотреть картинку дизайна Лендинга в браузере реальном отражении и в любом браузере, открыв в нём свой индексный файл.

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

Но, за то, можете создать дизайн уже заточенный под смартфоны и тоже увидеть его на своём смартфоне и ни к кому обращаться с просьбами о помощи не нужно.

Пример такого лендинга заточенного под телефоны – смартфоны можете посмотреть на своём смартфоне здесь: http://infookno.ru/dveri-vek-v-podezdy/    -ширина дизайна 960 рх.

Если возникли вопросы пишите.

Да, к стати, полученную папку «00» я загрузил на свой хостинг, и вы видите её содержимое по выше указанному адресу. Это же можете сделать и вы.

4 комментария: Как посмотреть картинку дизайна Лендинга в браузере полно размерно

  • Татьяна говорит:

    Хоть я в этом деле ничего не смыслю, а почитать все равно интересно. Спасибо.

  • Андрей, а способ с нажатием клавиши Ctrl и прокруткой колёсика мыши не подходит? Изменяя таким образом масштаб отображения можно увидеть всю страницу без указанных манипуляций... Или это не то?

  • Андрей говорит:

    Так и знал, что вы предложите простейший вариант. Так то оно итак, но только трошечки не совсем. Например, создал я дизайн лендинга высотой 12900рх и как Вы предлагаете, открываю его в браузере и скролю через Ctrl. В адресной строке браузера пишется масштаб увеличения от исходного, а мне нужен реальный масштаб отображения самого браузера, да ещё и разных, минимум трёх браузерах. Как будет видеть его посетитель, важно для автора дизайна.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Используем интернет для заработка: Электронная книга

Не крутой, но пожизненный доход при наличии Internet и мобильный телефон.