Перейти к публикации
Форум - Замок

Дизайн сайта


Рекомендованные сообщения

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

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

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

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

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

 

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

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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, закачайте ее к себе на сайт в папку "Файлы для скачивания" и дайте мне знать.

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

Ссылка на комментарий
Поделиться на других сайтах

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

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

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

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

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

Какой выход?

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

Успеха!

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

Оля, обрати внимание, что в 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;

Ссылка на комментарий
Поделиться на других сайтах

Оля, обрати внимание, что в 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;

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

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

.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;

}

Ссылка на комментарий
Поделиться на других сайтах

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

.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;

}

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

.main a

{

color: #......;

}

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

Ссылка на комментарий
Поделиться на других сайтах

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

.main a

{

color: #......;

}

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

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

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

.main a

{

color: #edaa5b;

}

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

 

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

Загрузка...
×
×
  • Создать...