Компьютерный ликбез. Часть4
ВИДЫ СТРАНИЦ
Будем считать, что наша страница находится в рамках таблицы. Ну и что? Пока ничего. Задаём атрибуту Width тега table значение 100% и тогда как бы не изменялся размер окна монитора, какое бы не было разрешение, мы всегда будем видеть всё содержимое, находящееся в рамках таблицы. Но что будет с текстом, как поведёт он себя? Скажем с уменьшением разрешения текст не будет вмещаться в размеры таблицы и будет что? Правильно! Он будет перетекать вниз страницы. Да внешний вид текста изменится, но прочесть Вы его сможете! Такие страницы у WEB-дизайнеров называются «резиновой» ширины. Перетекание текста происходит не отдельными буквами, а целыми словами. И если Вы писали текст ориентируясь на окно Вашего монитора, то в других разрешениях конечные слова предложения могут оказаться как в начале следующего предложения, так и в середине. По этой причине, как правило в таких страницах не существуют знаки переноса. А ведь нередко авторы копируя текст скажем с Вордовского документа оставляют эти знаки переноса! Все новостные сайты и в том числе аналоги газет в своих текстах не имеют знаков переноса! И все Ваши красивые как бы тексты могут выглядеть не совсем хорошо. То, что на бумаге красиво и правильно, здесь может выглядеть не совсем так как Вы задумали! Но! Но есть для таких авторов выход! Если назначить атрибуту Width фиксированное значение, скажем 1100, то и ширина таблицы и соответственно страницы будет неизменной! Такие страницы называются фиксированной ширины! Хорошо это или плохо? И что будет, как будет выглядеть такая страница при разных разрешениях?
На рисунке вверху показаны два окна монитора и в каждом страница, текст которой находится в таблице. Над окнами — часть кода страницы, касающийся таблицы. Обратите внимание на значение атрибута Width. Слева, Рис1, это 100%, а справа, Рис2, — 870! И если слева видны и рамка таблицы и весь без искажений текст, то справа часть страницы отрезана! Но текст не переплывает и остаётся в первозданном виде! Но к сожалению внизу появилась прокрутка. Во-первых это значит, что окно монитора меньше чем ширина таблицы. Во-вторых читать текст Вы сможете лишь перемещением страницы с помощью движка прокрутки! Ну, очень удобно читать, очень, романы особенно!
На рисунке ниже моя ПРОЗА-ровская страница при двух разных разрешениях монитора: 1280 и 800. Имеется ввиду только ширина! Будем считать текст нормально отформатирован при разрешении 1280 точек. Обратите внимание на скажем первую строку текста. А теперь посмотрите как выглядит текст при разрешении 800 точек? При разрешении 800 точек уже часть предложения, «...как обычно в это время возвращался...» «переплыла» на вторую строку. Аналогично и с других строк происходит «переплытие»! О чём это говорит? О том, что ПРОЗА-ровская страница — «резиновой» ширины! Но это до определённого момента, а дальше всё! Она превратится в страницу с фиксированной шириной. А до какого момента? До того самого, который зависит от нас с вами! О чём пойдёт речь ниже.
Не сомневаюсь, что не все пользователи сети и в частности авторы ПРОЗЫ знают, что жизнь любой страницы начинается с опорной точки, находящейся в левом верхнем углу окна браузера! По этой причине наша таблица со всем содержимом прижмётся к левой и верхней стороне окна браузера. А дальше как повезёт? Возьмём к примеру страницу с таблицей фиксированной ширины в 1100 пиксел. При разрешении монитора 1280 справа от нашей таблицы останется полоса ничейной территории шириной в 180 пиксел... А что будет с таблицей, текстом если скажем разрешение как у меня 1024? Таблица со всем находящемся в ней текстом будет просто отрезана правой стороной окна браузера! А внизу появится полоса прокрутки. И двигая движок по горизонтали Вы сможете прочесть текст гоняя этот самый движок за каждой строкой! Удобно ли это? А то!? Ещё как удобно! Лично у меня не более как на десять строк хватает терпения, а дальше всё! Я уже не читаю... А представьте таким способом читать «Войну и Мир»! А? Вот поэтому страницы ПРОЗЫ имеют «резиновую» ширину! И всё бы хорошо, но! Но те кто разрабатывал разметку страниц туда же определил и размещение фотографий и рисунков, — изображений, короче. Ну и что? Ничего! Ничего, до тех пор пока авторы ПРОЗЫ соблюдают рекомендации сервера, по размещению изображений на страницах.
Вы можете и сами посмотреть эти рекомендации. Зайдите через свой кабинет на «Ваша страница» и откройте любое, своё произведение. Далее «Редактировать». Откроется окно редактора, внизу (про иллюстрации). Щёлкните по ссылке и увидите страницу «КАК СОЗДАТЬ ИЛЛЮСТРАЦИЮ». Для особо ленивых я скопировал «что надо»! Оно вот здесь, ниже.
Технология создания иллюстрации
Для создания иллюстрации вам понадобится специальная программа – графический редактор. Даже в случае размещения фотографий, просто скопировать их с фотоаппарата недостаточно. С помощью этой программы вам необходимо уменьшить их размер изображений и привести их в формат, пригодный для размещения в Интернете. В качестве программы – графического редактора мы можем порекомендовать, например, Adobe Photoshop, наиболее распространенный как среди профессионалов-дизайнеров, так и фотографов-любителей. Правда, это коммерческий продукт, и лицензия стоит определенных денег. Существуют также бесплатные программы, а самый примитивный графический редактор под именем Paint встроен в Windows (находится в папке «Стандартные программы»). Отредактированное изображение необходимо сохранить в одном из форматов: JPEG или GIF, соответственно с расширениями файлов .jpg или .gif. В чем разница между этими форматами? JPEG подходит для фотографий: он сохраняет большое количество цветов и полутона. GIF подходит для схем и карандашных рисунков: он позволяет сохранять только ограниченное количество цветов и не отображает полутона, но зато тонкие линии и мелкие значки в нем не выглядят размытыми. Поэтому если вы размещаете фотографию, вам необходимо выбрать формат JPEG; если рисунок или схему – то GIF.
После сохранения файла, обязательно проверьте его объем: желательно, чтобы он не превышал 100 килобайт. Почему это важно? Нам в общем-то все равно, какие файлы хранить на сервере, современные технологии жестких дисков позволяют держать очень большие массивы данных. А вот вашим читателям не все равно, сколько по времени будет загружаться изображение. Средняя скорость доступа по модему – 33 Кбит/c, это означает, что файл объемом 100 килобайт (это 800 тысяч бит) будет загружаться 800/33=24 секунды. Если картинка будет грузиться дольше, ваш читатель может разозлиться, закрыть окно браузера и больше к вам на страницу не заходить. И будет прав, поскольку размещение не оптимизированных изображений – это проявление неуважение к читателю. В подобном случае лучше вообще не размещать иллюстрацию и радовать читателя хорошим текстом, чем раздражать непрофессионально сделанной картинкой.
Как оптимизировать иллюстрацию?
При сохранении файла в формате JPEG, графический редактор обычно предоставляет вам возможность выбрать так называемую «степень сжатия» или «качество оптимизации». Изображению для Интернета достаточно качества порядка 50-60% (в единицах Photoshop), и уж ни в коем случае не следует устанавливать 100%, иначе объем файла с картинкой получится слишком большим. Также имеют значение размеры изображения: ширина и высота. Современные фотоаппараты позволяют делать снимки высотой и шириной в 2000-3000 тысячи точек (пикселей), и даже больше. Но такие огромные изображения, размещенные в качестве иллюстраций, очень неудобно смотреть, ведь ширина экрана большинства пользователей всего 800 точек. Поэтому при создании иллюстрации изображение нужно уменьшить. Желательно, чтобы оно в ширину не превышало 600 точек (чтобы уместилось на экран шириной 800 точек с учетом полей слева и справа), и также не более 400-600 точек в высоту. При уменьшении изображения уменьшится также и объем его файла, что позволит быстрее загружаться в браузер ваших читателей.
Конечно всё, что рекомендовано, всё правильно! Но жизнь не стоит на месте, вот уходят в прошлое тихоходные модемы... Всё меньше становится мониторов с разрешением 800 точек. Появились мониторы с большим разрешением... Но! Если же в современных мониторах есть возможность перехода на разрешение 800 точек, значит найдутся пользователи, использующие такую возможность! И стало быть рекомендации сервера хоть и старые, но не устаревшие! Соблюдайте их и Вам читатели только скажут: «Спасибо!»
Продолжение здесь:
Ликбез. Часть5. http://www.proza.ru/2017/11/26/799
Ликбез. Часть6. http://www.proza.ru/2017/11/27/388
Ликбез. Часть5. http://www.proza.ru/2017/11/27/554
Ликбез. Часть8. http://www.proza.ru/2017/11/27/585
Ликбез. Часть9. http://www.proza.ru/2017/11/27/1072
Ликбез. Часть10. http://www.proza.ru/2017/11/27/1525
Ликбез. Часть11. http://www.proza.ru/2017/11/27/1574
Свидетельство о публикации №217112500574