Как красиво верстать в гуглдоках: резюме, лендинги, письма и прочее
В гуглдоках можно красиво заверстать резюме, анкету или инструкцию. Либо сделать пример верстки лендинга/письма, чтобы верстальщику или дизайнеру потом было проще разобраться и отрисовать все красиво. Помогут нам с этим обычные таблицы.
В чем прикол: верстаем в гуглдоке как в древнем вебе
Когда-то давно стандарта CSS еще не было, а верстать красивые сайты было надо. Люди придумали «костыль» — брали обычные HTML-таблицы и с их помощью раскидывали контент по странице. Ячейкам можно было делать невидимые границы, заливку, разную ширину — в итоге получалось, что текст и картинки лежат как будто не в таблицах, а сами по себе.
Сейчас так уже не верстают — на смену табличной пришла блочная верстка. Там есть всякие отступы, заливки и прочие фишки CSS (я в этом не шарю) — все это гораздо удобнее, красивее и гибче. Но если вы копирайтер, автор или редактор, опыт древнего веба можно использовать с пользой для себя.
Люди нашей специальности работают с текстом в гуглдоках. Но часто нужно написать не обычную статью, а текст для лендинга, резюме или материал на сайт со сложной версткой.
Можно сделать это «обычно» — просто написать текст и расставить комментарии, как все должно выглядеть. Либо обсудить на созвоне. Либо отдать все на откуп дизайнера/верстальщика, пусть придумывает сам. Но я считаю, что расположение элементов на странице и красивая презентация материала — зона ответственности автора. И таблицы помогут нам вступить в эту зону ответственности.
Основные фишки для табличной верстки
Сами таблицы
Если вдруг не умеете их создавать. Открываем гуглдок, идем по пути «Вставка → Таблица», в окошечке мышкой указываем размеры. По идее на них пофигу — потом колонки и строки можно добавлять и убавлять. Для этого щелкаем правой кнопкой по ячейке и выбираем, что хотим добавить: строку или столбец, слева или справа. И также с удалением.
С таблицами можно творить всякие непотребства: объединять ячейки, сжимать и разжимать колонки и столбцы, растягивать таблицу до границ страницы:
Единственный нюанс — у ячеек есть минимальная высота и ширина, с ней ничего не поделать. Но обычно и не надо.
Удаление границ
Главная фишка, превращает унылую таблицу в магию. Для этого щелкаем по таблице правой кнопкой, выбираем «Свойства таблицы» и делаем границу шириной «0 пт».
Таким образом лист гуглдока оказывается поделен на части. И мы можем заполнять любую часть независимо от других, то есть поместить текст или картинку в совершенно любое место страницы. В боевом документе это может выглядеть так:
Иногда удалять границы не нужно. Например, если контента много, дизайнер может что-то перепутать и слепить информацию вместе. В такой ситуации таблицу можно использовать просто для структурирования информации, а не для красоты, а границы лучше оставить. Смотрите сами.
Цвет ячейки
У ячеек таблицы можно менять фон. Вот как это делается:
Пользуйтесь с умом =)
Таблица в таблице
Каждая ячейка таблицы у нас превращается в отдельную сущность, как бы мини-документ. И внутри можно разместить еще одну самостоятельную таблицу. Для этого просто ставим курсор в ячейку, и жмем «Вставка → Таблица»:
Мне это нужно не очень часто, но иногда помогает в верстке лендингов со сложной структурой.
Форматирование текста в ячейках
С текстом внутри ячеек можно делать все то же, что с обычным. Выделять заголовки, запихивать в маркированные списки, менять цвет. Развлекайтесь как хотите.
Есть особенность — внутри ячейки текст можно выравнивать не только по горизонтали, но и по вертикали, то есть относительно верхней и нижней границы ячейки. Вот как это делать и что получится:
Расположение таблицы
Тут все просто. По умолчанию таблица располагается по центру и занимает ту же ширину, что текст. Но ее можно:
Растянуть за бока. Чтобы она доходила до границ листа. Если убрать границы и залить фон, получится такая широкая плашечка:
Выровнять по центру, правому или левому краю. Если сужать границы таблицы, она может съехать из центра. Либо ее может понадобиться сдвинуть в другое место. Тут есть такая опция:
Одна ячейка
Гуглдок позволяет сделать таблицу из одной ячейки. Это удобно, если нужно поставить какой-то текст в прямоугольник: лучше сделать таблицу, чем то-то рисовать. Вот как это выглядит, если сделать одну ячейку, уменьшить ее вручную, убрать границы, залить фон и поставить выравнивание по центру:
Прочие непотребства
У таблиц можно поменять стили и толщину границ, менять стиль только одной ячейки или одной стенки ячейки, задавать цвет границы. Вот как это делается:
Мне это все ни разу не пригодилось, но вы не я.
Пример того, как все может быть красиво
Сейчас покажу выдуманную статью со всевозможными элементами, которая заверстана с помощью таблицы.
Почти как сайт) Удобно презентовать, отдавать в задание дизайнеру или верстальщику, да и самому смотреть приятно.