Сайт на локальном сервере (продолжение)

Сайт на локальном сервере (продолжение)

Каждому хочется сделать, что-то своё уникальное, оригинальное, не похожее. И даже очень симпатичный шаблон, рано или поздно захочется изменить, сделать что-то по-своему.

Запустив на Денвере, CMS Сmsimple, как было мною описано, вы увидите серый, не приметный дизайн. Можно оставить и так, если сайт ни кому не показывать. Но я предполагаю, что вы всё-таки намерены поселить его в сети. Значит, переделка или адаптация шаблона обязательна.

Любая CMS использует шаблоны разметки. По-разному использует, есть в одном файле, есть, разбиты на несколько. В данном случае, это один файл, [cmsimple/templates/default/template. htm], в котором и находится наш шаблон. Откройте его блокнотом винды, или каким либо редактором, или в самой CMS [Login, Настройки, Редактировать шаблон] . Например, в тринадцатой строке мы видим: php echo head(), в опусе «Структура HTML или начало начал!» я рассказывал, о том, что такое head, и что между headерами стоит. Автор Сmsimple строкой php echo head() выводит всё необходимое, как он считает. И если вы уже хоть чуть-чуть постигли способы и методы разметки, вы найдёте в файле много подобных PHP вставок. Эти PHP вставки и выводят на нашу страничку всё необходимое, то что мы с такими муками придумывали.

Список тегов разметки, которые необходимо принять за данность в CMS Сmsimple: php echo head() - вставляет meta-тэги страницы php echo onload() - размещается внутри тега. Вставляет параметры страницы.

Php echo toc() - выводит главное меню.

Php echo editmenu() - в режиме администратора, выводит админскую панель

В этой CMS их не много, для полноценного сайта хватит. Посмотрите внимательно, где стоят эти теги в нашем шаблоне, и, я уверен, вы поймёте что и где можно поменять, чтобы ваш сайт стал привлекательным. А если встретится непонятная строка, например: php echo $pth['folder']['templateimages'], которая выводит картинку, расстраивается и паниковать не стоит. Принимаем это за данность.

Табличная вёрстка заключает в себе правильное расположение и придание свойств тегам table, tr, td. Броузер принимая и расшифровуя, то, что мы на ваяли, вырисовывает фоны, чёрточки, буковки и располагает в определённых местах картинки. Так мы и получаем результат.

Обратите внимание на шестнадцатою строку: table align="center" width="750" border="0" cellpadding="0" cellspacing="0". Особенно на: align="center" width="750". align="center" - это значит, что эта таблица стоит по центру, а width="750" - это значит, что ширина этой таблицы 750 пикселей. Так как, в этой таблице располагается всё содержимое нашей странички, то и вся страничка торчит по центру с шириной 750 пикселей. Попробуем увеличить число до 850. Если в панели CMS, то просто сохраните изменения, а если в блокноте или редакторе, то после сохранения обновите броузер. И наша страничка стала ширее, или ширше, как вам больше нравится. А вот, ежели, в четырнадцатой строке, число 808080 поменять на 000000 или на ffffff, если цвет фона менялся, то это правильный путь. Таким образом, можно изменять и не только ширину, цвет, размер шрифта, и всё остальное так же. На высоту полёта, или на цвет светофора, это не повлияет, но внешний вид своего сайта изменит до неузнаваемости можно.

Но есть ещё и свойства. Свойства прописаны в [cmsimple/templates/default/stylesheet. css], В отдельном файле с расширением. css. Который не загружается броузером, а только определяет, как броузер будет отображать тот или иной тег, то есть определяет его свойства.

Например, в файле [template. htm] есть строка body bgcolor="#808080 ?php echo onload();?, а ежели открыть файл [stylesheet. css] блокнотом или редактором, и найти строку BODY, TD {color: black; font: 9pt Verdana, Geneva, Arial, Helvetica;}, то увидим, что есть схожести. Обе строки что-то рассказывают броузеру про тег body. Например, font: 9pt Verdana, Geneva, Arial, Helvetica, рассказывает о размере шрифта, и какой будет применён шрифт. А если поставить 11pt, вместо 9pt, и в некоторых местах увеличится размер букв. В некоторых, потому, что стиль шрифта задан отдельно, там, где он не увеличился, прописаны свои свойства, свой размерчик шрифта.

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

Приверженцев Macromedia Dreamwaver, FrontPage, E-Gloryon, Site Generator, SiteEdit или подобного, прошу не читать. А если прочитали и ваше мнение не изменилось, извините, зря. Быстрый результат, как правило, несёт в себе массу ошибок, недоработок, лишнего и необдуманного. Используя конструкторы можно добится тог, что сайт может и выглядеть хорошо, ну если вспомнить «китайскую» продукцию, которая тоже выглядит хорошо, и делается быстро, то можно провести апологию. Это конечно вам решать, или шлёпнуть быстро «китайский» сайт, или научится чему то стоящему. Научится, дольше и труднее, но результативнее. Я так думаю.

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


Карта сайта


Информационный сайт Webavtocat.ru