Главная » Бизнес в Интернете

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

14 комментариев »

  • Василий пишет:

    SharePoint Designer — отличная программа. Страница подписки получилась, что надо. Спасибо за информацию. Я привык пользоваться adobe dreamweaver.

  • Наталия пишет:

    Александр, здравствуйте! Программа замечательная бесспорно. У меня не раз получалась следующее: при просмотре страницы в Google в момент когда идет перевод страницы в тексте образуется пробел. Нажимаю «Вернуться к оригиналу» все встает на свои места. Можно переделать страничку — тогда все уходит. Но хотелось бы докопаться в чем причина. Можете что подсказать?

  • Александр Ризун (автор) пишет:

    Наталия, здравствуйте! Скорее всего, это происходит потому, что русский текст меньше по размеру английского оригинала.

  • Наталия пишет:

    Александр, может подскажите как встроить счетчик обратного отсчета типа timegenerator.ru. Простая установка кода не проходит. Спасибо

  • Александр Ризун (автор) пишет:

    Наталия, напишу наверное статью на эту тему.

  • Наталия пишет:

    Отлично, Александр. Будет весьма полезная статья.

  • Марина Гай пишет:

    Александр, как всегда вовремя! Давно хотела найти альтернативу Дримвиверу и различным конструкторам мини-сайтов. Обязательно попробую! Благодарю

  • Александр Ризун (автор) пишет:

    Марина, попробуй обязательно! У этой программы хорошие возможности.

  • Анастасия пишет:

    Александр! Огромное Вам человеческое СПАСИБО! Вы, Ваш полезный блог и серия статей про работу с SharePoint Designer — это просто нечто восхитительное! Очень понятно. Очень просто. Очень подробно! Я в восхищении! И, как я поняла, Ваш сайт — это единственное место, где можно освоить создание одностраничника в этой программе!

    Моей благодарности нет предела!

    Если можно, я выложу ссылки на то, что у меня получилось благодаря Вашим урокам. (Если нельзя — удалите их, хорошо?) Просто я подумала, что учителю будет приятно, когда его ученики делают некоторые успехи.

    Вот ссылки на мои одностраничники:

    mylivingfood.ru/1/ (это первый)

    mylivingfood.ru/store_dehydrators/(а здесь уже побольше опыта :)

    Но у меня к Вам пара вопросов.

    1. Как сделать так, чтобы адреса страниц не имели .html в конце (то есть, файлы index.html и так без окончания, а вот другие страницы открываются уже некрасиво — это как раз по второй моей ссылке пример)

    2. Я увидела, что Ваши одностранички (то есть, таблицы) с очень симпатичными закругленными краями и тенью. Расскажете как такое провернуть?

    Буду счастлива получить от Вас ответ. И еще раз от души благодарю за помощь в развитии и продвижении блога!

  • Александр Ризун (автор) пишет:

    Анастасия, благодарю за отзыв о моих статьях, приятно его получить. У Вас красивые странички получились! :) По поводу вопросов — html можно убрать, делая в папке поддомена еще одну папку, и там уже размещая index.html, а закругленные края и тень — это картинки, которые находятся в ячейках таблицы. Если посмотрите код страницы в том же SharePoint Designer, то Вы это увидите. Желаю Успеха в дальнейшей работе!

  • Анастасия пишет:

    Большое спасибо за ответ, Александр! Про закругленные края — все понятно. А вот про html — не совсем... Можно уточнить?

    Например, у меня есть папка dom, которая содержит файлы index.html, da.html, net.html + все картинки. Я размещаю эту папку в корневой директории и страничка index.html становится доступна по адресу http: //домен/dom, но если я перехожу с этой страницы к файлам da или net, то адрес отображается уже с html: http: //домен/dom/da.html

    И я из Вашего ответа не поняла как сделать так, чтобы в адресной строке файлов da и net не было html... В public.html создать папку dom и уже в нее поместить папку dom с файлами?...

    Помогите, пожалуйста, разобраться.

  • Александр Ризун (автор) пишет:

    Нет, не так. Создаете папку da в папке dom. Затем в папку da помещаете файл da.html, только переименовываете его в index.html. И тогда он будет отображаться по адресу домен/dom/da

  • Анастасия пишет:

    Большущее спасибо за ответ, Александр! Пойду, попробую применить на практике...

  • Александр Ризун (автор) пишет:

    Желаю Успеха!

Оставьте свой комментарий и ответный визит Вам обеспечен