Coding a Sales Page: Step-by-Step Guide & Transcript

[00:06] посмотрим на него, и прежде чем начнём кодировать. Поскольку мы всё ещё в Photoshop, нам нужно определить изображения, которые необходимо экспортировать. Очевидно, что эту текстуру фона нужно экспортировать, мы не можем воссоздать её в

[00:20] CSS. Затем эти стрелки и изображение заголовка нужно экспортировать. А эту кнопку, с другой стороны, мы можем воссоздать с помощью CSS, поэтому нам не нужно её экспортировать. А

[00:34] поэтому нам не нужно её экспортировать. А этот блок можно создать в CSS. этот блок можно создать в CSS. Так что у нас есть только это изображение и наш фон. Давайте начнём с фона. Сейчас я

[00:49] покажу вам, как я бы это сделал с большинством узоров. Этот узор немного проще, потому что на нём есть сетка. Для большинства узоров я бы Для большинства узоров я бы

[01:06] получилось так: я взял покажу вам, каким был этот узор, а затем

[01:19] я превратил его вот в это. Итак, теперь у него совершенно другой стиль, но узор всё тот ​​же, просто другой цвет и всё остальное. Что я сделаю? Зайду и посмотрю, какого

[01:34] Вы увидите, что он 200 на 20000 200 на 20000 пикселей. Затем я создам пикселей. Затем я создам новую версию, объединив все слои,

[01:46] состоит из двух слоев. Я продублирую его, затем нажму Command+E, чтобы продублирую его, затем нажму Command+E, чтобы переместить их и объединить. В этом случае я вижу, где он легко повторяется. Ой,

[02:04] пикселей, просто перетаскиваю его точно туда, куда нужно, затем немного корректирую, пока не получится идеально, копирую, нажимаю Command+N, чтобы создать

[02:19] копирую, нажимаю Command+N, чтобы создать новый, и сохраняю его в папке «Сохранить веб-страницы» новый, и сохраняю его в папке «Сохранить веб-страницы» установите JPEG с качеством, которое выглядит

[02:35] прилично. [Музыка] Теперь мне нужно вспомнить, куда я поместил этот дизайн приложения. этот дизайн приложения. Сайт мастер-классов и презентаций книг. Итак,

[02:50] давайте просто скажем, что представляет собой предыстория мастер-класса. jpeg, хорошо, это одно из наших изображений, следующее я сниму выделение и

[03:02] просто удалю этот слой, потому что он был временным для следующего изображения, вот здесь. Я мог бы использовать шрифт в

[03:14] здесь. Я мог бы использовать шрифт в CSS 3, чтобы включить эти фрагменты текста с рукописным шрифтом, но для такого небольшого количества текста я не думаю, что это стоит того, поэтому я

[03:27] просто включу все это в одно большое И я также выберу этот фон, так что я

[03:41] фон, так что я выберу несколько слоев. У меня есть вся затем несколько фоновых слоев. И я собираюсь использовать инструмент под названием DevRocket, который доступен за 10 долларов, просто погуглите его

[03:56] и нажмите UI Snips, это моя любимая функция, и он захватит слои и перенесет их в новый блок, новое диалоговое окно, извините, новый холст, а

[04:08] диалоговое окно, извините, новый холст, а затем я могу просто затем я могу просто обрезать его до нужного мне размера, что мне потому что я пытаюсь понять, где заканчиваются эти тени. Я мог бы

[04:24] ещё больше упростить себе задачу, просто взяв образец этого цвета, чтобы убедиться, что он у меня есть, а затем удалив эти два слоя и снова нажав UI Snips. Я мог бы просто сделать это в... ну, извините, мне не нужны эти

[04:40] фрагменты текста, потому что их очень легко воссоздать с помощью легко воссоздать с помощью CSS. Хорошо, теперь, если я нажму UI Snips, вы увидите, что он переносит его прямо к краю этой тени и определяет,

[04:53] где она заканчивается, и таким образом мне не нужно беспокоиться о случайном обрезании тени или чём-то подобном. Хорошо, теперь я могу сохранить это. Мы собираемся сделать JPEG, довольно большой, но вы увидите,

[05:08] JPEG, довольно большой, но вы увидите, что для получения этого текста мне нужно установить качество на средне- высокое. Это большое изображение, я просто буду высокое. Это большое изображение, я просто буду работать с ним в данном

[05:25] JPEG, и это, собственно, все наши экспортированные изображения, так что давайте закроем эти ненужные окна, а после этого останется только код. Я открою

[05:42] окно с кодом. Я использую программу Espresso для написания кода, но вы можете писать что угодно. Хорошо, у кода, но вы можете писать что угодно. Хорошо, у заголовок в формате HTML, а затем я ссылаюсь на эту таблицу

[05:58] стилей. Ладно, я отложу это в сторону и настрою так, чтобы было видно и то, и другое. И я начну я начну добавлять сюда код. Давайте сделаем div с

[06:12] идентификаторами страниц, закроем его. страниц, закроем его.

[06:27] заголовок внутри. Я сделаю H1, мы разместим основной

[06:49] Здесь я хочу, чтобы отображался текст, поэтому я сделаю H2 и сделаю H2 и напишу «Мастер-класс по разработке веб-приложений»,

[07:09] неупорядоченный список. Никто этого не увидит, потому что я скрою его и заменю изображением. Но нам все равно нужно, чтобы он был изображением. Но нам все равно нужно, чтобы он был там для тех, кто

[07:21] использует программы чтения с экрана или что-то еще, там, если по какой-либо причине изображение не

[07:41] U-

[08:15] затем мой div боковой панели, и это все для основных элементов. Я собираюсь скопировать и вставить весь этот огромный объем контента, а затем начать его форматировать. Допустим, это

[08:30] абзац, но я просто добавлю класс Lead, потому что у меня немного больший размер шрифта, это позволит мне его стилизовать.

[09:27] часть программирования, которую никто на самом деле не хочет делать, хорошо? Давайте посмотрим, этот неупорядоченный

[09:40] хорошо? Давайте посмотрим, этот неупорядоченный список. Давайте откроем и закроем элементы списка для каждого из них,

[10:01] список и сохраним. Давайте нажмем «Предварительный просмотр» и посмотрим, как это выглядит. потому что мы не добавили никакого CSS. Единственное, о чем стоит беспокоиться, это то, что вы видите все эти странные вещи здесь. Это потому, что я скопировал и вставил несколько

[10:14] потому, что я скопировал и вставил несколько символов форматированного текста, а HTML это не любит. Давайте найдем один из них, и я покажу вам, как это исправить. Итак, в нашем вводном абзаце, вот здесь, в нашем онлайн-тексте, это вот это.

[10:30] Итак, я собираюсь выполнить поиск и замену. Я найду все эти символы же, но этот символ немного изогнут, а этот прямой. Заменить все, сохранить.

[10:42] Теперь, когда мы вернемся, вы увидите, что больше нет этих странных этих странных символов, что нас есть вся эта боковая панель. Возьмите этот раздел,

[11:06] просто вставьте его. Хорошо, это был наш H2, на самом деле нет, это размер H3, потому что мне нужно было подобрать его так же, как в области контента. Это будут

[11:25] тоже специальный символ. Мне нужны три точки, это абзац, а это неупорядоченные

[11:39] списки. Я просто скопирую и вставлю это

[12:19] Давайте посмотрим. У меня есть еще несколько таких странных символов, которые нужно странных символов, которые нужно исправить. Где они? Вот один. исправить. Где они? Вот один. Я просто перепечатываю его, но

[12:33] я могу просто снова выполнить поиск, найти их все, сохранить и снова выполнить поиск, найти их все, сохранить и обновить. Так что эту точку, точку, точку

[12:45] обновить. Так что эту точку, точку, точку тоже нужно исправить. Хорошо, если мы найдем еще, мы исправим их по ходу работы. Итак, теперь это весь наш

[12:58] контент. О, это почти весь наш контент, мы приближаемся к цели. О, это почти весь наш контент, мы приближаемся к цели.

[13:13] линию, это будет наша разделительная линия. Затем я могу взять весь Затем я могу взять весь этот раздел. Вставьте это,

[13:55] которая будет просто ссылкой на Gumroad,

[14:18] для CSS, так что давайте начнем. Во-первых, я использую шрифт из Google Web Fonts под названием Open Sands. Он мне

[14:31] Fonts под названием Open Sands. Он мне Хорошо, далее в теле я хочу задать отступы в ноль пикселей и отступы в ноль пикселей. Это просто хорошие параметры по умолчанию. Размер шрифта по умолчанию

[14:46] будет 14 пикселей. Затем в качестве семейства шрифтов я семейства шрифтов я выберу Open Sands, которое я только что указал выше, выберу Open Sands, которое я только что указал выше, затем перейдем к Helvetica,

[15:00] затем Ariel, а затем Sandsif. Хорошо, теперь фон. На случай, если изображение не загрузится или до того, как оно загрузится, я хочу использовать похожий цвет, поэтому я просто предварительно

[15:16] заполню эти поля. И это фон Workshop Das. JPEG, и я хочу, чтобы он повторялся, и мне, в общем-то, всё равно, где он

[15:30] начинается. Хорошо, давайте посмотрим. Вы видите, что шрифт установлен, и у нас есть замечательное повторяющееся фоновое изображение. Итак, теперь давайте начнём стилизовать эту страницу. Давайте зададим ей ширину 1000

[15:51] пикселей, белый цвет фона, а затем отступ 100 пикселей затем отступ 100 пикселей сверху. Я подкорректирую это позже. И вот, сверху. Я подкорректирую это позже. И вот,

[16:06] страница, и давайте добавим к

[16:18] оси X, ещё 0 пикселей — для смещения по оси Y, а затем 10 пикселей для размытия. Затем мы добавим цвет RGBA 0,5.

[16:30] Я могу вернуться и посмотреть стиль слоя в Photoshop и увидеть, стиль слоя в Photoshop и увидеть, что я фактически установил смещение по оси что я фактически установил смещение по оси Y равным единице, чтобы эти значения

[16:43] точно соответствовали тому, что у меня было в Photoshop: размер 10, а затем размер 10, а затем 19. Мы просто изменим это на 20 или 19. Мы просто изменим это на 20 или 2. — это прозрачность,

[16:59] а затем я могу просто продублировать это и установить один параметр для Firefox, а затем общую тень. Давайте посмотрим предварительный просмотр, и вы видите, что там есть небольшая тень. Я бы, возможно, сделал её немного

[17:12] сильнее, скажем, до 40. К сожалению, мне нужно изменить её в трёх местах. Именно там вы бы хотели использовать SAS или LessU для автоматизации некоторых из этих процессов, но мне это пока не нужно.

[17:31] Далее, радиус границы 5 пикселей, а затем я собираюсь пикселей, а затем я собираюсь вставить всё это вниз и добавить красивые закругленные углы. Хорошо, теперь давайте напишем код для заголовка.

[17:46] Мы можем посмотреть, у нас была идея для

[18:01] фон. Это вот этот цвет, F1, Хорошо, и давайте скажем, что текстовая строка центрирована, потому что оба заголовка

[18:17] центрированы. Затем большая часть работы будет происходить с этим происходить с этим

[18:29] просто предположу 500 пикселей, пикселей, отступ текста. Давайте посмотрим. Я мог бы сделать отступ текста, я покажу вам два способа, которые сместят весь

[18:43] способа, которые сместят весь текст далеко за левую сторону, но ходят слухи, что это приводит к увеличению времени загрузки страницы времени загрузки страницы и дополнительной работе браузера по рендерингу.

[18:55] и дополнительной работе браузера по рендерингу. Поэтому вместо этого я Поэтому вместо этого я установлю верхний отступ в 500 это сделать навскидку, поэтому я просто воспользуюсь текстовым отступом.

[19:12] Возможно, я вернусь к этому позже, но этот способ работает отлично, все но этот способ работает отлично, все используют его уже много лет. Да,

[19:26] наше изображение называется «Заголовок мастерской» (Workshop head header) с заголовком H.

[19:38] повторов, и наша ширина будет установлена автоматически на большую, но давайте сделаем автоматически на большую, но давайте сделаем центрирование сверху. Центр будет соответствовать вертикальному выравниванию. Теперь это начинает выглядеть

[19:54] примерно так, как наш дизайн, видите, всё хорошо расположено. Нам нужно кое-что подправить, но мы приближаемся к цели. Давайте стилизуем наш заголовок

[20:15] H1. Толщина шрифта — обычная. Размер — 30 пунктов. Я сделаю 30 затем я просто добавлю

[20:30] 20 пикселей и 0 пикселей. Получается 20 пикселей сверху и снизу, 0 пикселей слева и справа. И продублируем это для H2. справа. И продублируем это для H2. Просто проверим, это

[20:52] немного места, всё ещё выглядит странно. В этом случае, поскольку он находится странно. В этом случае, поскольку он находится сверху, я сделаю ноль пикселей

[21:07] снизу и укорочу его до

[21:21] увеличим нижний край до 40 пикселей, теперь выглядит хорошо. Верхнему краю нужно больше места, поэтому я подниму верхний край до 40

[21:38] Может быть, нам нужно немного места снизу, скажем, 10 пикселей? Так будет лучше. Хорошо. Теперь я хочу, чтобы

[21:55] тень текста была по оси X, Z, Y = 1, размытие = 0. мне не нужно использовать все эти странные мне не нужно использовать все эти странные

[22:07] тень текста, которую трудно заметить, но тонкая тень – это но тонкая тень – это хорошо. Хорошо, заголовок готов. Теперь хорошо. Хорошо, заголовок готов. Теперь нам нужно создать плавающий макет

[22:20] нам нужно создать плавающий макет для нашего заголовок еще не готов. Мы потеряли закругленные углы, когда это делали. Поэтому я overflow hidden, и это должно вернуть нам

[22:36] закругленные углы. Это также добавило некоторую странность, и вероятно, это верхний отступ. Да, у H1 есть У всех заголовков

[22:50] по умолчанию есть верхний отступ, и он фактически выступает за пределы родительского элемента, что довольно странно, но такое случается. случается. Поэтому, если я просто напишу «

[23:07] отступ сверху 0 пикселей», вы увидите, что он отступ, и вы видите, что он делает его немного более

[23:27] Итак, в заголовке это простой нижний отступ в один пиксель. Отлично,

[23:41] теперь пора перейти к какой-то отступ. Давайте посмотрим, какая у нас здесь общая ширина. Давайте посмотрим, какая у нас здесь общая ширина.

[23:55] О, я верну инструмент «Выделение прямоугольной области» в обычный режим. Давайте просто получим представление. Я не буду что-то вроде 580. Это звучит примерно

[24:10] правильно для нашей общей ширины, а отступы по бокам, скажем, 50. Это значит, что мне нужна ширина

[24:29] 40 сверху и снизу. 50 слева и справа, и поэтому 50 слева плюс 480 плюс 50 справа дадут

[24:48] боковую панель. Я выровняю боковую панель по правому краю. Объясню почему чуть позже. А теперь давайте посмотрим, какого она цвета.

[25:12] Хорошо, давайте зададим базовую ширину

[25:27] И я хочу такой же отступ в 50 пикселей. Ой, я открываю другие программы. Итак, 390. Я хочу, чтобы боковая панель была шириной 290 с отступом в 50 пикселей с каждой стороны. Смотрите, мы

[25:43] уже получаем то, что хотим. Причина, по которой я выровнял её по правому краю, а не по левому, заключается в том, что если бы я выровнял её по левому краю, эффект был бы тот же. Мне просто нужно было бы убедиться, что мои числа идеально суммируются,

[25:58] а я этого делать не хочу. Здесь у меня добавлено несколько лишних пикселей, и это позволит избежать переноса текста на следующую строку, если у кого-то немного сбито масштабирование. Есть небольшой запас кого-то немного сбито масштабирование. Есть небольшой запас

[26:14] на случай ошибки, что мне нравится. Давайте посмотрим, вот ещё один посмотрим, вот ещё один символ форматированного текста, который проскользнул мимо. Где он

[26:37] его как обычный текст, так гораздо лучше. Хорошо, теперь я хочу немного отформатировать контент. Итак,

[26:52] абзац... ну, сначала я вернусь к основному содержимому и увеличу к основному содержимому и увеличу высоту строки до 1,5 мм.

[27:15] выше. Теперь давайте оформим заголовки. Я

[27:29] не хочу повторять « Тень» текста, потому что все заголовки могут иметь эту « Тень». Тень». Меня это устраивает.

[27:48] полей, потому что отступы иногда работают

[28:01] это на самом деле слишком много, давайте возьмем 20 и Хорошо, вот некоторые базовые параметры, а затем я перейду к стилизации

[28:17] H3. Давайте посмотрим, вот то, что я называл H3, и это 24 пикселя, а это H4, а это 18.

[28:37] наш дизайн начинает выглядеть так, как мы хотим. Хорошо. Далее вот этот HR. Вы видите, что в нашем дизайне он растягивается до самого края, а здесь —

[28:53] давайте стилизуем нашу боковую панель HR. сейчас ширина моей боковой панели всего 290. Я просто задам значение

[29:18] сейчас она выглядит с отступом, а это не то, что мне нужно. Я укажу «верхняя граница», а для нижней границы задам что-то другое.

[29:32] помогло бы. Хорошо, давайте разберемся с этими параметрами. На это сделать. Я могу просто выбрать этот цвет, он будет для верхней

[29:46] для верхней границы, а белый — это ffff, хорошо? Затем я установлю левый отступ в

[30:00] -50 пикселей, и это сдвинет его к пикселей, и это сдвинет его к краю. Видите, теперь он выравнивается, как и ожидалось. Затем я собираюсь установить все

[30:23] часовой стрелке, начиная сверху: верхний правый, нижний левый. Здесь

[30:41] изменю это на... и это только на странице. И я и это только на странице. И я уменьшу это до

[31:06] О, я знаю, в чем дело. Когда я отключил все отступы для H1, по все отступы для H1, по умолчанию, это все

[31:35] Хорошо, все хорошо. Мне нравится, как это отформатировано. О, я хочу... Чтобы все мои заголовки были чёрными, точнее, не совсем чёрными, а чёрными, точнее, не совсем чёрными, а текст по умолчанию стал

[31:49] немного светлее, просто потому что мне нравится, как это выглядит. Это мой дизайн, поэтому я могу делать то, что хочу. Нет, на самом деле хорошая практика — не использовать чисто чёрный цвет на чисто

[32:03] белом фоне. Хорошо, теперь перейдём к чему-то интересному. Сначала эта кнопка, затем этот блок, а потом кнопка. Давайте посмотрим, как мы назвали этот

[32:15] Давайте посмотрим, как мы назвали этот блок? Назовём его « Контейнер покупок». Допустим, у него класс «Боковая панель», «Контейнер покупок». И

[32:28] потому что он будет заполнять всю ширину. Допустим, отступ 40 пикселей, белый фон. О, нам нужна тень. Я скопирую и вставлю её оттуда.

[32:47] выглядит. В принципе, всё готово. Мы приближаемся к

[33:20] 10% — это нормально. Хорошо, теперь у меня есть отступ нормально. Хорошо, теперь у меня есть отступ сверху заголовка, который конфликтует с слишком высоким. Поэтому я просто уменьшу отступ контейнера до 10

[33:39] пикселей. Хорошо, может быть, до 15. Ладно,

[33:56] сравним. Мне кажется, этот блок меньше, чем в моем дизайне. дизайне — 240, а здесь я вижу

[34:10] 240, а здесь я вижу 290. О, значит, это точно так же. Интересно, потому что отступ с каждой стороны — 58. В общем, вы поняли идею.

[34:25] и начну ее стилизовать. точка, контейнер,

[34:45] Теги по умолчанию не блочные. 30 сверху — нет. Давайте посмотрим, это слишком много. 15 сверху — ничего справа и слева, потому что мы просто выровняем текст по центру, и тогда нам не придется... Беспокоюсь о

[34:59] цвете, я хочу белый. У что это за рамка, просто возьмем образец чуть более темного

[35:23] скажу « нижняя рамка» и сделаю тот же цвет. Я просто подниму его до четырех пикселей. Давайте посмотрим, забыл сделать? Хорошо, мы на самом деле приближаемся к цели.

[35:39] сделать? Хорошо, мы на самом деле приближаемся к цели. Этот текст неправильного Этот текст неправильного размера. Видите, я думаю, я сделал 18 пикселей, нет, я размера. Видите, я думаю, я сделал 18 пикселей, нет, я сделал

[35:59] чтобы избавиться от подчеркивания. О, тогда давайте сделаем отрицательную тень текста. Это минус один пиксель, потому что я хочу подняться на один пиксель потому что я хочу подняться на один пиксель

[36:17] потом, я думаю, это было что-то вроде трех. Посмотрим, как это выглядит. Неплохо. У меня был радиус? Похоже, нет.

[36:36] Хорошо. Давайте сделаем 0,5, потому что я этого не вижу. О, вот оно. Интересно, не окажется ли эта кнопка затерянной в углу? Нам придется провести A/B-тест или что-то подобное позже. Может быть, попробовать. Другое

[36:51] расположение, но пока сойдет. Это пространство здесь очень Это пространство здесь очень тесное, поэтому я тесное, поэтому я это исправлю, просто добавив верхний отступ.

[37:14] выглядит хорошо. Теперь нам нужно завершить оформление этой завершить оформление этой кнопки градиентом. Давайте сделаем это. Давайте откроем Chrome

[37:27] и перейдем к без особой причины. Затем я возьму два

[37:47] мне нужно два. Я вставлю этот в начало

[38:03] другой — в конец. должен быть очень легкий градиент. Затем я могу скопировать этот

[38:31] довольно неплохо. Теперь мне нужны тени. Я тени. Я сделаю тень в виде прямоугольника с отступом в

[38:55] Окей, на самом деле я хочу, чтобы это было белым, и это 255, Я собираюсь сделать, например, 6, а затем увеличить интенсивность до

[39:12] 6, а затем увеличить интенсивность до 5. Это слишком сильно. Хорошо, сделаем 0,4. Итак, это едва заметно Поэтому я добавлю запятую, а также вставку. И, э-э,

[39:46] RGBA. Так что сверху акцент немного сильнее, чем по вниз, чтобы вы могли добавить несколько теней, которые в данном случае я использую

[40:00] как блики, э-э, используя запятую, а затем ключевое слово «вставка» тоже очень крутое. Хорошо, так что

[40:15] Теперь мы позаботимся об этом. О, мы также изменим размер этого вводного абзаца. этого вводного абзаца. Давайте поднимемся сюда и сделаем его

[40:37] больше. Посмотрите, если я что-нибудь еще изменю, это было 18 или просто 16? Было 18. Я увеличу высоту строки, потому что это не очень

[41:04] 0,8 — всё ещё слишком много, посмотрим. Там наверху 1,5 часа ночи, так что, может быть, посмотрим. Там наверху 1,5 часа ночи, так что, может быть, 1,7

[41:17] выглядит неплохо. Так что, спасибо за просмотр видео и, э-э, подумайте о том, чтобы watching the screencast and uh consider checking out the workshop