#1 27/02/2008 05:58

StrayXXX
Ньюб
Зарегистрирован: 26/02/2008
Сообщений: 7

Мануал как изменить дизайн сайта

Приветствую Вас.
Если не против, буду тут по шагам выкладывать то, как я меняю дизайн оформление структуру на свои
Итак начнем:
Любое создание сайта начинается с "головы" части.
Не будем изобретать колесо и начнем с нее же.
И так, что делаем после установки для изменения дизайна и где это искать.

G:\www_l\home\localhost\subdomain\test\htdocs\site\transformers\

Это папка которая нас интересует в первую очередь. Ее содержание

energine.xslt
        error_page.xslt
        include.xslt
        main.xslt

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

расположенной соответственно в

G:\www_l\home\localhost\subdomain\test\htdocs\stylesheets\

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

Если все же у Вас возникла необходимость добавить/подключить свою CSS таблицу, или любой другой элемент определение которого должно находиться в части нашего сайта, необходимо выполнить следующие действия:

cd G:\www_l\home\localhost\subdomain\test\htdocs\site\transformers\

файл main.xslt 
Ищем секцию
у меня она выглядит следующим образом:


       
   

Добавляем туда подключение еще одного css

Сохраняем, обновляем сайт. Видим:


   
    Демонстрационная версия CMS Energine
   
   
   
   

   
   
   
   
   
   
 

Собственная CSS подключена.

Следующий шаг - изучение структуры main.css

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

Первое что нам интересно:

html, body {
    margin: 0;
    padding: 0;
    background: #FFF url(../images/top-bg.png) repeat-x;
    _background-attachment: fixed;
    color: #000;
    font: small/21px "Lucida Sans Unicode", sans-serif;
}

Это описание стиля которое у меня в html шаблоне сайта выглядит вот так:

Изменим CSS так, чтобы эти две части соответствовали друг другу по функцианалу

bgcolor="#FFFFFF"  =  background: #FFF;

text="#000000"     =  color: #000;

leftmargin="0" topmargin="0"  =     margin:0 0; (обратите внимание на кол-во нулей справа)

В итоге получилось

html, body {
    margin: 0 0;
    padding: 0 0;
    background: #FFF;
    color: #000;
    font: small/21px "Lucida Sans Unicode", sans-serif;
}

а наш HTML шаблон теперь выглядит вот так

Следующий шаг изучим структуру документа

Файл G:\www_l\home\localhost\subdomain\test\htdocs\site\transformers\energine.xslt

Вот так он выглядит у меня после установки:


       


           
           
           

               


               
           

           
           
       

   

Для начала посмотрим как устроена левая сторона странички,
где расположены компоненты переключения языка сайта, логин - форма, меню.

Это несколько компонентов собранных в навигационную панель

Какие из них мне интересны ?

Переключение языка сайта (пока не буду использовать по этому отключаем)

форма доступа к админке (нужно вынести на отдельную страничку, тут не используем)

В итоге пока получим

Теперь посмотрим как он трансформируется в html код привиду только часть кода который интересен для анализа:

 

   


.........

XML - код


               


               
           

HTML - код


Демонстрационная версия CMS Energine

- обратите внимание это  результат работы $DOC_PROPS[@name='title']


  Здравствуйте, вы находитесь на
  сайте, демонстрирующем некоторые
  возможности CMS Energine......  Как тут появился этот текст к этому мы еще вернемся...

XML - код

HTML - код

XML - код

HTML - код


   

 

В итоге, чтобы получить структуру такую как нам нужна нам нужно внедрять html КОД в этот файл.
Теперь поговорим не много о специфики вставки html КОДА в данный файл.
Если вы смотрели ИСхОДНЫЙ код пытаясь понять как собрана та или иная страница вы болжны были сталкиваться
с записями тегов вида
ИЛИ   ОТЛичными от общепринятых

Все дело в том, что по правилам XSLT ПЕРобразования все тэги должны быть закрыты
Так как у некоторых тегов таких например как
нет закрывающих частей, то закрытие происходит непосредственно в этом теге.
В итоге, прообразовав все необходимые нам данные в css, вставив шаблон в файл определив места вывода контента меню и подписи.
Мы получим тот же сайт, но в новой оболочке
http://www.tokflagman.ru/images/1232121.jpg

Отредактированно StrayXXX (27/02/2008 11:01)

Неактивен

 

#2 27/02/2008 14:06

Pavka
Administrator
Откуда: Киев
Зарегистрирован: 10/12/2007
Сообщений: 7
Вебсайт

Re: Мануал как изменить дизайн сайта

Ну все в целом верно

но только не стоит акцентировать столько внимания на CSS
в отличии от всяких РНР нюков
у нас дизайн не определяется CSSом
main.css - просто минимальный набор правил для стандратного дизайна...

Неактивен

 

#3 28/02/2008 05:28

StrayXXX
Ньюб
Зарегистрирован: 26/02/2008
Сообщений: 7

Re: Мануал как изменить дизайн сайта

Pavka написал:

Ну все в целом верно

но только не стоит акцентировать столько внимания на CSS
в отличии от всяких РНР нюков
у нас дизайн не определяется CSSом
main.css - просто минимальный набор правил для стандратного дизайна...

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

Неактивен

 

#4 17/03/2008 17:54

Lupa
Ньюб
Откуда: Россия^Москва
Зарегистрирован: 21/02/2008
Сообщений: 8
Вебсайт

Re: Мануал как изменить дизайн сайта

Когда продолжение?


...Lupa!

Неактивен

 

Board footer

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson