Делаем подписную страницу в SharePoint Designer

Теперь, когда Вы знаете, каким должен быть одностраничный сайт, начинаем его делать с помощью программы SharePoint Designer. Если Вы посмотрите любой одностраничный сайт, в том числе и мою подписную страницу http://oskype.pro444.ru, то увидите, что границы сайтов четко обозначены. Текст и картинки не расползаются на всю ширину экрана, все находится на своих местах при любой ширине окна браузера. Достигается это с помощью размещения текста и картинок в таблицу. Таблица может иметь видимые и невидимые границы, но в любом случае она выполняет свою функцию: удерживает текст, картинки и другие элементы одностраничного сайта в пределах своих ячеек.

Итак, будем делать подписную страницу. Берите пока за образец подписную страницу http://oskype.pro444.ru, когда научитесь, сможете делать любые одностраничные сайты сами, без всяких образцов. Запустите программу SharePoint Designer, найдите свой файл index.html, который Вы уже создали,  и откройте его. Найдите вверху пункт меню Таблица и выберите Вставить таблицу. Выберите количество строк 4 (для заголовка, текста с картинкой и формы подписки, маркированного текста, контактных данных). Количество столбцов выберите цифру 1.

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

Напишите или вставьте в верхнюю ячейку текст Вашего заголовка. Отформатируйте его: выделите основной текст заголовка, и вверху в окошечке, там, где написано Абзац, выберите в раскрывающемся списке Заголовок1. Подзаголовкам можно присвоить другие форматы: Заголовок2, Заголовок3, или оставить Абзац. Выровняйте текст по центру, раскрасьте его так, как посчитаете нужным, выберите шрифт и размер.

Вторую ячейку таблицы разбейте на три: в левой ячейке будет текст, в средней — картинка, а в правой — форма подписки на рассылку. Чтобы разбить ячейку, ставите в нее курсор, и выбираете Таблица — Изменить — Разбить ячейки. Выбираете Разбить на столбцы, число столбцов 3, и нажимаете ОК.

В первую ячейку ставите текст. Как его форматировать, Вы уже знаете. Во вторую ячейку ставите картинку. Картинку заранее подготовьте в программе Photoshop. Если Вы хотите поставить визуальное изображение Вашего продукта в виде книги или коробочки, воспользуйтесь программой eCover Creator. Когда подготовите картинку, разместите ее в папке Вашего одностраничного сайта (где лежит файл index.html). Вы можете все картинки для Вашей подписной страницы положить прямо в этой папке, а можете создать в папке еще одну папку специально для картинок, и назвать ее, например, images. Особой разницы между этими двумя вариантами нет. Название картинки должно состоять из латинских букв и цифр. Если это не так, переименуйте картинку.

После размещения картинок в папке Вы выбираете либо Вставка — Рисунок — Из файла, либо соответствующую иконку на панели инструментов. Выбираете нужный рисунок, и нажимаете на кнопку Вставить. Замещающий текст (который будет виден посетителю, если картинка в браузере не загружается) не нужен, длинное описание тоже. Нажимаете ОК, и картинка появляется.

Теперь добавляете текст и картинки в другие ячейки таблицы. Текст в третьей строке таблицы делаете маркированным, или впереди каждой строки текста ставите маленькую картинку — галочку, как в образце, или что-то еще. Картинки находите в Интернете. Если хотите поставить картинки, например, справа от маркированного текста, ставите курсор в соответствующие места, вставляете картинки. Затем нажимаете на картинку правой клавишей мыши, выбираете Свойства рисунка, нажимаете на вкладку Вид, и делаете выравнивание справа.

В последнюю строку таблицы ставите контактные данные, слева — свою фотографию, а справа — еще какую-нибудь картинку. При этом применяете выравнивание картинок соответственно слева и справа.

Если нужно какой-то текст сделать ссылкой, выбираете Вставить — Гиперссылку, или выбираете соответствующую иконку на панели инструментов. Затем в окошке Адрес ставите адрес сайта, на которую ссылка будет вести.

Подписная страница наполовину готова. Конечно. это еще не все, и есть продолжение, но основа одностраничного сайта уже Вами сделана.

Видео о том, как сделать одностраничный сайт в программе SharePoint Designer

Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером