Jump to content
Форум - Замок
Sign in to follow this  
valoo

Дизайн сайта

Recommended Posts

И можно ли поменять цвет? Шаблон мне нравится, но цвет мрачный. А неяркий жёлтенький был бы в самый раз.

Это самый "больной" вопрос, над которым я все время думаю...

Если дать пользователю возможность легко и просто управлять шаблоном сайта - его нужно вгонять в базы данных, откуда он медленно грузится и тормозит работу сайта (((((((((((((

Но можно и по- другому )))))))))))

Только что менять, и как?

 

Чуть-чуть желтенького, чуть подсинить и добавить теней ... )))))))))))))

Если хотите - я в этой теме постараюсь по возможности просто и доступно рассказать о Каскадных Таблицах Стилей (CSS), чтобы вы смогли сами редактировать свой шаблон.

Естественно, что понадобится и Фотошоп, чтобы самим создать картинку верхнего лого и выбрать нужный цвет для различных частей шаблона, а потом там же в Фотошопе получить 16-тиричный код цвета, который вставляется в CSS.

Не пугайтесь, это очень просто. Например, черный цвет имеет код #000000, а белый - #FFFFFFF.

В Фотошопе код любого цвета высвечивается в таблице цветов, оттуда его просто копируем в файл стилей CSS.

Share this post


Link to post
Share on other sites

Славик!!! Я и так в тебя вся влюблённая, а если ты ещё и про эти вещи расскажешь так, чтобы я поняла -- я на тебя вообще молиться начну!!!! :231::231::231::36_1_1:

Share this post


Link to post
Share on other sites

С Фотошопом работать умею, про цвета тоже знаю. Куда вставлять код? :)

Share this post


Link to post
Share on other sites

С Фотошопом работать умею, про цвета тоже знаю. Куда вставлять код? :)

Поработай пока с тем, что есть, а я постараюсь подготовить опцию для загрузки шаблонов в ближайшее время.

Share this post


Link to post
Share on other sites

Итак, приступаем к дизайну ...

1. Скачайте и распакуйте в отдельную папку файл http://www.100litsa.org/template.rar.

2. Запустите из этой папки у себя на компе файл index.html

3. На экране вы увидите знакомый шаблон №1, внутри которого находится схема самой таблицы шаблона.

Она очень проста:

- верхний рисунок-лого - header

- под ним узкая полоска - sub_header

- левая панель - left_panel, в которой находится

- левое меню - left_menu

- основная часть таблицы - main

- между левой панелью и основной частью есть полоска-разделитель - sub

- по обеим сторонам таблицы две полоски для создания эффекта тени, левая - side_L и правая side_R

- под всем этим 2 полоски - up_footer и

- footer, где высвечивается копирайт вашего сайта

- кнопки для перелистывания страниц - gal

- общий фон страницы сайта - body

 

4. Чтобы поменять дизайн этих элементов, откройте в текстовом редакторе (но не в Ворде!) файл template_css.css, который находится в распакованной папке.

5. В нем вы увидите код CSS для каждого из перечисленных элементов, например, код для левой панели имеет вид:

 

.left_panel{

padding-left:10px;

padding-top:10px;

background-color: #e2e5d3;

}

 

5. Обратите внимание, что перед именем элемента стоит точка. Стирать ее не нужно ))))))))))

6. Все строки, определяющие дизайн выбранного элемента, находятся внутри фигурных скобок { }.

6. Если вы случайно сотрете скобку, то на работе сайта это не отразится, но дизайн элемента не сработает.

7. Воздержитесь на первое время от редактирования строк, не связанных с цветом.

8. Чтобы изменить цвет, откройте Фотошоп и в окошке цветов подберите нужный цвет, а затем скопируйте его в строку вместо того, который установлен в файле. Например, цвет светло-болотный левой панели закодирован числом background-color: #e2e5d3; Поменяйте его на выбранный и не забудьте вначале кода поставить решетку # (в Фотошопе код высвечивается без нее).

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

 

Чтобы увидеть результат, после каждого изменения сохраняйте файл template_css.css и делайте Refresh окну броузера с файлом index.html.

 

10. В папке images находятся файлы картинок для лого, боковых полосок и левого меню.

11. Файл menu.jpg - это полоска меню, которую вы видите на сайте, а hover.jpg появляется вместо нее, когда вы подводите мышку к меню.

12. Все эти картинки можно менять в редактировать в Фотошопе, но есть два условия:

- нельзя изменять размер картинки, иначе дизайн сайта "разойдется по швам" и

- нельзя менять имя файла картинки, иначе сайт ее не узнает и не покажет.

 

Вот, пожалуй, и все ...

Когда будет готово - заархивируйте папку в zip или rar, закачайте ее к себе на сайт в папку "Файлы для скачивания" и дайте мне знать.

Я установлю новые шаблоны на ваших сайтах ))))))))))))

Share this post


Link to post
Share on other sites

Все понятно, всё сделала. Вопрос остался по полоскам side_L и side_R. У меня не получается сохранить те размеры, что есть сейчас. Потому что полоски фигурные и их длина значительно больше. Можно с этим что-то сделать?

Share this post


Link to post
Share on other sites

Все понятно, всё сделала. Вопрос остался по полоскам side_L и side_R. У меня не получается сохранить те размеры, что есть сейчас. Потому что полоски фигурные и их длина значительно больше. Можно с этим что-то сделать?

Насчет "фигурных" полосок...

Принцип установки фоновых рисунков (а полоски side_L и side_R - это именно фоновый рисунок) таков. Ты вставляешь линк на этот рисунок в файл слилей и обрати внимание на то, что после линка стоит команда repeat-y.

Это означает, что короткий рисунок (его высота может колебаться от 1 до нескольких десятков пикселей) будет размножаться по всей высоте экрана.

Какая может быть высота? Да, любая! В зависимости от содержимого страницы сайта.

И по всей высоте эта полоска выглядит одинаково.

Если ты создаешь фоновый рисунок с заранее заданной высотой, а экран растянется больше, чем твоя полоска, что будет?

Поэтому высоту ты никогда не сможешь задать заранее, только размножать этот фрагмент, что и делается автоматически.

Какой выход?

Ты создаешь фрагмент полоски для размножения так, чтобы верхний и нижний ее края состыковывались в единый рисунок, иначе на странице будут видны границы каждого фрагмента, и это портит дизайн.

Успеха!

Share this post


Link to post
Share on other sites

Появились ещё вопросы. Как поменять цвет надписей на кнопках в левом меню? Всё перепробовала. Ничего не меняется :(. И ещё мне надо эти надписи выровнять по центру кнопки

Картинку с основной части таблицы тоже надо убрать, удалила её из папки, появилось окошко с крестиком. Ещё мне нужно удалить надпись "МОЙ ДЕМОСАЙТ" Она мне не нужна, так как все надписи у меня уже есть в шапке.

Дальше не понятно в коде про гостевую книгу и галерею. Оно нигде не высвечивается.

Share this post


Link to post
Share on other sites

И ещё мне надо эти надписи выровнять по центру кнопки

Вот здесь я категорически против. Который год с Алесем "воюю", чтобы на портале "Друзья" это поменять ((((((

Оль, это ни в какие рамки дизайна не вписывается ... если левое меню, тогда - или по левому краю, или по правому ("флажки"), но только не по центру!!!!!!!!!

Обо все остальном - завтра ))))))

Share this post


Link to post
Share on other sites

Вот здесь я категорически против. Который год с Алесем "воюю", чтобы на портале "Друзья" это поменять ((((((

Оль, это ни в какие рамки дизайна не вписывается ... если левое меню, тогда - или по левому краю, или по правому ("флажки"), но только не по центру!!!!!!!!!

Обо все остальном - завтра ))))))

У меня дизайн кнопок таков, Опубликованное фоточто надписи, выровненные по любому краю вылезают за кнопку. Некрасиво, да и нечитабельно.

Share this post


Link to post
Share on other sites

У меня дизайн кнопок таков, Опубликованное фоточто надписи, выровненные по любому краю вылезают за кнопку. Некрасиво, да и нечитабельно.

Оля, ты уже вышла за рамки простого "сайтостроительства" и копаешь вглубь CSS. Имеет смысл почитать об этом на очень хорошем сайте http://stepbystep.htmlbook.ru/ и еще здесь http://ru.html.net/tutorials/css/introduction.asp.

Тебе нужны селекторы CSS, управляющие выводом меню и линков. Кстати, для страницы линков тебе это тоже пригодится, чтобы они высвечивались не стандартным синим цветом с подчеркиванием, а как-то покрасивше.

Посмотри по этим адресам, если что непонятно - пиши, я помогу разобраться.

Share this post


Link to post
Share on other sites

Оля, ты уже вышла за рамки простого "сайтостроительства" и копаешь вглубь CSS. Имеет смысл почитать об этом на очень хорошем сайте http://stepbystep.htmlbook.ru/ и еще здесь http://ru.html.net/tutorials/css/introduction.asp.

Тебе нужны селекторы CSS, управляющие выводом меню и линков. Кстати, для страницы линков тебе это тоже пригодится, чтобы они высвечивались не стандартным синим цветом с подчеркиванием, а как-то покрасивше.

Посмотри по этим адресам, если что непонятно - пиши, я помогу разобраться.

Спасибо. Начала чиатать, очень увлекательно. Но я уже решила полностью переделать дизайн и сделать кнопки попроще. А вот поменять цвет надписей всё ещё актуально. И вот какие удивительные вещи происходят. Для кнопки hover я нашла, как поменять цвет, т.к. была строчка color: white. Я её поменяла на blue. Стало то, что нужно! :)

А вот для кнопки menu такой строчки нет. Цвет нигде не указан, и бордовый на темно-сером мне совсем не подходит. Когда я вставлю строчку о цвете, то цвет не меняется, а надписи централизуются посередине кнопки. То, что мне было нужно раньше и то, что сейчас мне уже не нужно:). Но вопрос остаетсяоткрытым. Как же мне поменять этот бордовый цвет на... вот глянуть надо, какой лучше будет смотреться - оранжевый или белый.

Share this post


Link to post
Share on other sites

Оля, обрати внимание, что в left_menu цвет действительно не указан. Вместо него вставляется картинка (выделенная красным строка)

 

.left_menu

{

display : block;

font-size: 100%;

text-align : left;

line-height : 21px;

height: 21px;

text-indent : 8px;

background-image: url(images/menu.jpg);

background-position: right;

}

 

Ты убираешь эту строку, а вместо нее вписываешь селектор цвета, например,

background-color:#FF0000;

Share this post


Link to post
Share on other sites

Оля, обрати внимание, что в left_menu цвет действительно не указан. Вместо него вставляется картинка (выделенная красным строка)

 

.left_menu

{

display : block;

font-size: 100%;

text-align : left;

line-height : 21px;

height: 21px;

text-indent : 8px;

background-image: url(images/menu.jpg);

background-position: right;

}

 

Ты убираешь эту строку, а вместо нее вписываешь селектор цвета, например,

background-color:#FF0000;

Но ведь это картинка кнопки! Если я её уберу, не будет кнопки. Мне же только поменять цвет шрифта надо :)

Share this post


Link to post
Share on other sites

У тебя есть такой селектор:

.gal a, .left_menu a

{color:#663333;

text-decoration:none;

}

Строчка .left_menu с добавкой a означает, что он относится к линкам левого меню. И одновременно к линкам кнопок пролистывания страниц gal.

Строка color:#663333; и есть цвет надписей на кнопках.

Если ты поменяешь ее - изменится цвет и в меню, и в кнопках пролистывания.

 

Можно разделить этот селектор на две части:

1)

.gal a - только для кнопок пролистывания

{color:#663333;

text-decoration:none;

}

2)

.left_menu a - только для линков левого меню

{color:white;

text-decoration:none;

}

Share this post


Link to post
Share on other sites

У тебя есть такой селектор:

.gal a, .left_menu a

{color:#663333;

text-decoration:none;

}

Строчка .left_menu с добавкой a означает, что он относится к линкам левого меню. И одновременно к линкам кнопок пролистывания страниц gal.

Строка color:#663333; и есть цвет надписей на кнопках.

Если ты поменяешь ее - изменится цвет и в меню, и в кнопках пролистывания.

 

Можно разделить этот селектор на две части:

1)

.gal a - только для кнопок пролистывания

{color:#663333;

text-decoration:none;

}

2)

.left_menu a - только для линков левого меню

{color:white;

text-decoration:none;

}

Ура! Получилось! Спасибо :) Это, оказывается, было в самом низу, после надписи "гостевая книга", куда я вообще не заглядывала.

Ну, тогда у меня дизайн полностью готов. Куда высылать?

Share this post


Link to post
Share on other sites

Ура! Получилось! Спасибо :) Это, оказывается, было в самом низу, после надписи "гостевая книга", куда я вообще не заглядывала.

Ну, тогда у меня дизайн полностью готов. Куда высылать?

Заархивируй всю папку и загрузи ее в "Файлы для скачивания".

Share this post


Link to post
Share on other sites

Заархивируй всю папку и загрузи ее в "Файлы для скачивания".

Готово. Загружено.

Share this post


Link to post
Share on other sites

Готово. Загружено.

Переставь на шаблон tmpl_1 - там твой дизайн.

Share this post


Link to post
Share on other sites

Поставила. Всё здорово, но теперь у меня возник ещё вопрос. Страницы у меня синего цвета. А вот ссылки со страниц тоже пишутся синим. При построении общего дизайна это не было видно. Шрифт видно, но... как бы поменять их на мой оранжевый?

Share this post


Link to post
Share on other sites

Поставила. Всё здорово, но теперь у меня возник ещё вопрос. Страницы у меня синего цвета. А вот ссылки со страниц тоже пишутся синим. При построении общего дизайна это не было видно. Шрифт видно, но... как бы поменять их на мой оранжевый?

Создай селектор

.main a

{

color: #......;

}

и впиши туда нужный цвет.

Share this post


Link to post
Share on other sites

Создай селектор

.main a

{

color: #......;

}

и впиши туда нужный цвет.

Подожди. Но это я могу поменять у себя на компе. Потом опять заново новый архив закачивать и ты переустановишь?

Share this post


Link to post
Share on other sites

А вот так не пойдёт?

.main a

{

color: #edaa5b;

}

Я поставил в твой шаблон.

 

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

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

А для картинок (лого, кнопки) - тут кто во что горазд - тоже будет опция закачивать и устанавливать.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...