И теперь осталось только доделать в нем некоторые мелочи, чтобы можно было его размещать в Интернете. Например, если Вы откроете в браузере, то увидите, что в закладке окна отображается название Без названия 1 . Давайте напишем что-то более осмысленное.
Запустите SharePoint Designer , затем откройте в нем файл index.html своего . Нажмите в селекторе тэгов на элемент правой клавишей мыши, и выберите Свойства тэга . Во вкладке Общие в поле Название Вы и увидите эту надпись Без названия 1 . Измените название на свое, по теме Вашего одностраничного сайта и сохраните изменения. Обновите одностраничный сайт в браузере, и Вы увидите, что это название отобразится в закладке браузера.
Там же, где Вы изменяли название, Вы можете добавить описание и ключевые слова. Описание будет видно, если Ваш одностраничный сайт отобразится в выдаче поисковика по каким-то ключевым фразам, а если Вы пропишете ключевые слова, то Ваш сайт будет лучше по ним продвигаться. Ключевые фразы прописывайте через запятую, не больше трех, с релевантностью около 100 показов в месяц. Подобрать ключевые фразы Вы можете на сервисе wordstat.yandex.ru Нужно также сделать так, чтобы самая главная ключевая фраза, та, которая в списке идет первая, встречалась несколько раз в тексте и заголовках Вашего одностраничного сайта.
Во вкладке Форматирование Вы можете изменить цвет фона и текста по умолчанию, поставить картинку фона.
Также Вы можете настроить цвет ссылок: например. сделать так, чтобы цвет ссылки изменялся при наведении на нее мышкой. Для этого в поле Ссылка под указателем мышки измените цвет, только берите цвет, отличный от цвета Авто , иначе ничего не изменится. Чтобы проверить изменения, обновите Ваш одностраничный сайт в браузере, и наведите мышкой на ссылку.
В SharePoint Designer можно изменять отображение Вашей страницы. Всего есть три варианта отображения: Конструктор, С разделением и Код . Эти варианты Вы можете выбрать в пункте меню Вид — Страница . Также эти варианты видны внизу, под рабочей областью программы SharePoint Designer.
По умолчанию стоит вид Конструктор , и Вы видите свой одностраничный сайт примерно так, как он отображается в браузере.
Если Вы выберете С разделением , то увидите и код. и его отображение в браузере одновременно.
Если Вы выберете Код , то увидите html-код Вашего сайта, и сможете его редактировать напрямую.
При установке неподвижной картинки фона под таблицу, в которой у нас будет располагаться текст и прочая полезная информация, создаётся следующий эффект: при прокрутке таблицы с текстом фон под ней остаётся неподвижным, а не сдвигается вместе с таблицей. Как здесь:
Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах.
Обычно эффекта неподвижной картинки фона добиваются с помощью
постановки в таблицу стилей CSS следующих атрибутов: background-attachment: fixed; Речь идёт о таблице стилей CSS, которая у вас находится в отдельном документе с расширением.css
Есть несколько способов установить то, что нам нужно.
1-й способ.
Выбираем картинку, которая будет у нас фоном. В данном случае я беру вот такую картинку (кликните по миниатюре, чтобы увидеть полный размер):
В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:
BODY{background-image: url(адрес картинки фона); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}
В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).
Примечание: Если у вас нет документа стилей css, то вам необходимо создать его, как указано в - и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.
Итак, вот какие параметры мы задаём при помощи стилей:
Background-image: url(адрес картинки фона); - прописываем адрес нашей фоновой картинки 1280 на 1024 px.
Background-attachment: fixed; - задаём фону указание оставаться фиксированным, то есть, неподвижным.
Background-repeat: no-repeat; - задаём фону указание не размножаться.
Background-position: top; - задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.
Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:
BODY{background-image: url(адрес картинки фона); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}
Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).
2-й способ.
Попробуем поставить маленькую картинку, которая будет автоматически повторяться и заполнять всё пространство страницы, образовывая узор фона. Вот эта картинка:
При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:
BODY {background-image: url(адрес картинки фона); background-attachment: fixed; }
Здесь мы задали только параметр: background-attachment: fixed; - то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке "не размножаться" - она должна у нас размножиться на весь экран.
3-й способ.
Попробуем установить фоновую картинку с одной стороны, а таблицу с текстом и картинками на странице расположить с противоположной стороны, чтобы она не загораживала собой фоновую картинку. Для этого пропишем в документе css следующее:
BODY { background:#e0ddd8 url(адрес картинки фона) no-repeat fixed left top }
Background:#e0ddd8 url(адрес фоновой картинки) - цвет под фоновой картинкой - бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).
No-repeat - картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров - Робертом Дювалем).
Fixed - фон зафиксирован, то есть неподвижный.
Left top - выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта - слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете: