Webmaster Webdesigner + + Builder проектов

Вот метод программирования я использую, чтобы организовать мои CSS во внешнем файле. Этот метод позволит вам быстро найти, и вы сэкономите время.

Я думаю, XHTML файл был создан и файл CSS и что он содержится в импорте @ или ссылку. Давайте начнем с "телом" страницы XHTML: Во-первых, кодировать просто и ясно. Используйте DIV структуры. Вот слева от Вас, типичные обзор сайта очень проста: Все будет в деле обычно называется "контейнер" и вы заметите, что я не буду использовать заглавные буквы в имени моего теги. С точки зрения капитала были использованы только для лучшей видимости.

Хорошо, теперь вот код XHTML этой маленькой дизайн:

 <div id="myContainer">
 <div id="header"> </ P>
 <div id="middle">
 <div id="left"> </ P>
 <div id="content"> </ P>
 </ P>
 <div id="footer"> </ P>
 </ P>

Конечно, этот код можно найти в BODY тег. Тогда начните трюк я использую, чтобы улучшить вашу работу. Скопируйте код внутри вашего тела, теги и вставьте его в свой файл CSS. Вот что происходит:

 <div id= "myContainer">
 <div id= "header"> </ P>
 <div id= "middle">
 <div id= "left"> </ P>
 <div id= "content"> </ P>
 </ P>
 <div id= "footer"> </ P>
 </ P>

Теперь (с помощью Dreamweaver) использовать функцию поиска (или Ctrl-F). Поиск следующие коды

 <Div ID = "
 </ PRE>
 <p> заменить их символами <strong> # </ STRONG>.  Тогда ищите следующие коды: </ P>
 <pre lang=">
 /> </ P>

И заменить их на открытые и закрытые скобки {}. Для всех остальных вы можете искать для закрытия дел теги и заменить их ни с чем. Это даст вам следующее:

  MyContainer # {}
    # Header {}
    # Ближнем {}
       # Левая {}
       # Содержимое {}
   # {} Footer 

Наконец, вы просто должны поставить на ширине и высоте и другие свойства DIV тэги. Лично я добавить комментарий строку перед каждой строкой на моей секции (заголовок, средний, нижний колонтитул). Вот код, Вы получаете:

  # {MyContainer
 Ширина: 760px;
 Высота: авто;
 }

 / * Заголовок * /
    # Header {
    Ширина: 760px;
    высота: 250px;
    ; фонового цвета: # 666;
    }

 / * СРЕДНИЙ * /
    # {Ближнем
    Ширина: 760px;
    высота: 500px;
    }
       # {Левый
	   Ширина: 160px;
	   высота: 500px;
	   ; фонового цвета: # CCC;
	   плавать: слева;
	   }
       # {Содержимое
	   Ширина: 600px;
	   высота: 500px;
	   ; фонового цвета: # FFF;
	   плавать: слева;
	   }

 / * FOOTER * /
    # {Footer
    Ширина: 760px;
    высота: 70px;
    ; фонового цвета: # 000;
    } 

Для остальной части кода, вы вставляете его в теги и отступов кода, как это в вашей XHTML, вы увидите, эта штука ускорит вашу скорость.

Теги: кодекс , CSS , интеграция , программирование , веб

Эта статья была опубликована пятница, 8 февраля 2008 в 8:00 и находится в рубриках учебники . Вы можете следить за комментариями через RSS 2,0 корм . Вы можете оставить комментарий , или трекбек со своего сайта.