Новая версия сайта
 
Seozar
Новая версия сайта
 
 
 
 
 
 

Фон

Как сделать фон для сайта? Фон, штука такая, вроде и писать не о чем, а углубишься в эту тему, дак и самоучитель по фотошопу написать можно :) Если хотите что то простенькое, одноцветный фон например. Зелёный, синий, красный, или серобуромалиновый в крапинку :) Заходите в Свойства страницы(это внизу) в программе Adobe Dreamweaver CS3. Вкладка Внешний вид, далее окошко Цвет фона. Выбираете любой цвет и всё, дело сделано. Но если у вас есть желание поковыряться и сделать, что нибудь такое-эдакое. Есть два пути:

Первый путь - создать фон полностью в программе Adobe Photoshop CS3.

Второй путь - использовать в качестве исходного материала фотографии, при помощи той же программы и программы FastStone Image Viewer. Тут дело вкуса, я опишу оба способа, а выбирать вам :)


Первый путь. Открываем Adobe Photoshop CS3. В меню (оно сверху) нажимаем Файл, затем в выпадающем меню Новый. В открывшемся окошке ставим размер, например высота 200, ширина 200 пикселей. Нажимаем Да, у вас должен появиться белый квадратик. Размер этого квадрата, можно регулировать. Для этого, справа находится Навигатор и ползунок под ним для изменения размера, точнее масштаба.

Теперь нужно его покрасить. Для этого посмотрите налево. Нет, нет, это не экскурсия :) Там вы увидите панель инструментов. Нам нужен инструмент Заливка. Его там не видно? Отсчитываем двенадцатый инструмент сверху. Наводим на него курсор и нажимаем правую кнопку мыши. Выбираем инструмент Заливка. Объясняю так подробно, так как мне не видно экрана вашего монитора и я не знаю, что у вас там творится :) Затем подбираем цвет, это внизу панели инструментов. Красим, старайтесь цвет делать не очень ярким. Во время просмотра сайта у посетителей будут уставать глаза. Сейчас сайтов много, самой разной тематики. Народ перейдёт на другой и всё, лишились посетителей.

Теперь нужно сделать какой-нибудь рисунок, красивее будет. В меню нажимаем Фильтр, после этого в выпадающем меню Текстура. Всё, пошёл эксперимент, кому как нравится. Можно выбрать Мозаичные фрагменты, сохранить. И сверху наложить Зерно. Тут у кого какая фантазия. Только не переборщите, а то глаза потом в пучок соберутся :) Там всё регулируется, резкость, насыщенность, размер, яркость. Регулировка появляется справа, во время создания рисунка.

Можете пользоваться не только текструризатором. Там же вы увидите - имитация, стилизация, штрихи и т.д. Текстура - не единственный способ. На нём я показал как можно сделать, а вот как нужно, решать вам :)


Второй путь. Тут уже чистый полёт фантазии. Можно взять всю фотографию целиком, можно вырезать маленький кусочек. Постарайтесь что бы фотография была более менее монотонная. Иначе будет трудно читать текст на вашем сайте. Подгоняем размер, 2000 на 2000 пикселей вполне должно хватить. В среднем разрешение у мониторов выставляют 1024 на 768 пикселей. Тут надо учитывать, сколько информации будет на вашей страничке. Если очень много, то размер фотографии желательно сделать больше. В противном случае её просто не хватит на длину странички и изображение начнёт повторяться. Согласитесь, не очень красиво, когда такое происходит.

Не хотите делать большую фотографию? Она много весит и сайт долго загружается? Выход простой - сделать фон неподвижным. Вставляете в таблицу CSS код - background-attachment: fixed; Последний знак препинания(точка с запятой) тоже копируете - это часть кода. И всё - фон замер на месте.

Размер, цвет, насыщенность я подгоняю в программе FastStone Image Viewer. Можно и в Adobe Photoshop CS3, но в первой всё происходит более наглядно. Открываем фотографию в программе FastStone Image Viewer. Подводим курсор к левой стороне экрана. Появляется меню. Выбираем Изменить размер, всплывает окошко. Выставляем необходимый размер. Всё, второй путь подошёл к завершению :)


Полученное изображение, или фотографию нужно максимально уменьшить в размере. Я имею в виду вес в килобайтах. Иначе сайт будет долго открываться. Не у всех скорость интернета гиг в секунду, некоторые платят за трафик. Посетитель придёт, подождёт секунд пять, десять, не открылся сайт. Скажет - ну и бог с тобой, уйдёт на другой. Этого допускать нельзя. Для этого открываем изображение в программе Adobe Photoshop CS3. Затем в меню нажимаем Файл, дальше Сохранить как. После этого в всплывающем окошке, указываем путь к вашей папке для изображений images. Пишем в окошке Имя файла название вашего изображения например fon. Не забывайте, можно писать только строчными буквами. Нажимаем Сохранить, появляется окошко Параметры JPEG. В этом окошке вы можете уменьшить вес своего файла. Чем меньше килобайт будет весить, тем лучше. Быстрее будет открываться сайт, хотя качество изображения пострадает.


Как его можно подправить? В смысле, качество изображения. Качество ни как, а вот что бы смотрелось получше сделать можно. Открываем изображение в программе FastStone Image Viewer. Курсор в левую сторону, откроется меню, выбираем Резкость/Размытие. Внизу появится ползунок. С его помощью вы сможете сделать изображение более плавным, размытым. И клеточки пропадут, если появились и глаза напрягаться не будут от резких контуров. Я например в качестве фона использую фотографию неба. Захотелось чего то такого, чего не у кого нету. Пошёл на улицу, воткнул свой взор в небо. Сфотографировал и фон готов. Облака, белогривые лошадки :)


Завершающая фаза - устанавливаем фон на уже ранее созданную страничку index. Открываем страничку в программе Adobe Dreamweaver CS3. Смотрим вниз, там вы увидите кнопочку Свойства страницы. Нажимаете, всплывает окошко. На вкладке Внешний вид находим надпись Фоновое изображение. Указываем путь к ранее сохранённому изображению в папке images. Чуть ниже надпись Повторить выбираем по осям X и Y. Не забудьте сохранить. Понравилось? Если не очень, можно и переделать. Теперь вы знаете как :)


Главная Создание сайта, хостинг Тема, контент Программы Начало Структура Фон Первая страничка Таблица CSS Завершение Простое меню Выпадающее меню Движок для сайта Карта сайта - Sitemap