Настройка ширины страницы
Некоторые шаблоны содержат возможность выбрать тип ширина страницы, через его параметров. В случае, если это не соответствует требованиям, Template Manager позволяет также модификации каскадные таблицы стилей. Именно в эти файлы, как правило, с расширением. CSS, что большинство, если не все, стиль (графический) атрибуты определены.
Что такое CSS?
CSS расшифровывается как Cascading Style Sheet. HTML-теги указать графический поток элементов, будь то текст, изображение или флэш-анимацию, на веб-странице. CSS позволяет определить появления этих тегов HTML с их содержанием, где-то, так что другие страницы, если хотите быть, может присоединиться к. Это влечет за собой последовательности во всех веб-сайте. Каскадный эффект гласит, что стиль тега (родитель) могут быть унаследованы от других метки (детей) в нем.
CSS заявлениями
Определение HTML теги выглядит следующим образом:
тэг {атрибут: значение; атрибут: значение;}
{ attribute: value; attribute: value; }
Тэгов может быть любой HTML-теги, а ради создания страницы ширину, что представляет интерес для нас является HTML тегов, что дает структуру веб-страницы. Некоторые веб-страницы строятся из DIV теги то время как другие строятся на таблице тегов. Как правило, тег имеет атрибут "ширины". Вы настраиваете ширину страницы, изменяя значение атрибута 'Ширина'.
Иногда, HTML теги не определены непосредственно. Они даются ID или имя класса CSS и относится к тем конкретным теги их идентификаторы или их имена классов.
Определение ID в CSS выглядит следующим образом:
# {Idname атрибут: значение; атрибут: значение;}
#idname { attribute: value; attribute: value; }
в то время как определение класса в CSS выглядит следующим образом:
. {Имя класса атрибута: значение; атрибут: значение;}
.classname { attribute: value; attribute: value; }
Снова настройки ширины страницы означает изменение значения атрибута 'Ширина' любого из этих определений.
Значение атрибута 'Ширина'
Значение атрибута 'Ширина' может быть в пикселах или процентах. Пиксели фиксированных значений, поэтому в этом случае, ширина которых не меняются в зависимости от размеров окна или изменение разрешения экрана. Процент обычно означает, что ширина доля ширину своего контейнера. Так что если у нас есть разрешение экрана 1024 пикселей на 768 пикселей и нашей странице ширина установлена в 80% контейнеров окне браузера, на странице будет приблизительно 820 пикселей (80% от 1024) при условии, что окно браузера открыто на ее полной мере.
О CSS макетов страниц
Профессиональные сайты отдельных стилей от содержания. Есть много причин для этого, наиболее очевидным (для разработчиков) является способность контролировать появление многих страниц путем изменения одного файла. Стилизация информация включает в себя: шрифты, фоны, изображения (которые повторяются на каждой странице); положение и размеры элементов на странице. Ваш HTML-файл будет теперь осталось: заголовок; ряд элементов; текст вашего сайта. Потому что вы создаете Joomla! шаблон, вы на самом деле есть: некоторые заголовки; PHP код запроса остальной информации заголовка; ряд элементов; PHP код просить каждого модуля положение; PHP код запроса основное содержание.
Стиль информация кодируется в CSS, каскадные таблицы стилей, и обычно хранится в файлах с расширением. CSS. Веб-страница содержит ссылки на связанные. CSS файл так браузер может найти соответствующую информацию стиль для применения к странице. CSS также могут быть размещены внутри HTML файла между <style type="text/css"> </ STYLE> теги.
Все CSS код применяется к элементу HTML / XML страницы. Если вы хотите стиль, чтобы охватить всю страницу, вы, вероятно, применить его к <body> элемента. Вы можете применять стили к любой HTML элемент, такой как <p>, <table> или <div> элементов. Для стиля конкретного элемента она должна иметь идентификатор. Например, чтобы применить стили к <div> содержащие названия, вы должны сначала включить ID в HTML - <div ID="title">.
Горизонтальная центровка
Горизонтальная центровка достигается с CSS в одном из двух способов, в зависимости от того, что вы центрирования.
Для первого примера, скажем, у вас есть горизонтальное меню в верхней части страницы, что вы хотите с центром в макете. Вы бы это сделать с блок кода в связанном CSS файл, например так:
#horz_menu {margin: auto; width: 800px; height: 25px; }
"Auto" значение "маржа" атрибут центров пункта, так что это создаст меню область, которая находится в 800 пикселей в ширину
и 25 пикселей в высоту и будет центром в любом пространстве он находится дюйма
Если вам нужно добавить некоторый запас пространства над и под меню и по-прежнему держать его центре вы бы настроить такой код:
#horz_menu { margin: 20px auto 20px auto; width: 800px; height: 25px; }
Это добавило бы 20 pixles место на верхней и нижней части меню, держа левой и правой границы в центре режиме.
Второй пример, когда вы просто хотите, чтобы текст в центре, и в этом случае вы просто добавить "выравнивания текста" кода.
#horz_menu a { padding: .75em 0 .52em 0; font-size: 0.8em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }
Это вызвало бы все ссылки в теге DIV horz_menu из HTML кода, который будет сосредоточена в горизонтальном меню.
Они также имеют 0,75 ЭМ обивка выше и 0,52 ЭМ обивка под ними. Эти же методы работы на общую верстку страницы, а также.
Допустим, вы хотите области оболочки содержание вашей страницы, чтобы быть 900 пикселей в ширину и располагаться по центру
страницы и что вы хотите, чтобы заголовок по центру в нем. Ваш CSS код будет выглядеть примерно так:
#page_container {margin: auto; width: 900px; background-color: #FFFFFF; border: 1pt solid #660000; }
#page_container h1 {margin: 50px 0 20px 0 ; font-size: 1.25em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }
Это позволит создать страницу, которая имеет основное окно содержания центру в окне браузера с белым фоном и коричневый границы.
Любой текст внутри тега H1, который находится внутри тега page_container DIV в HTML код страницы будет также центром внутри,
что основное окно содержания.
Конечно, приведенный выше пример является упрощенный пример для демонстрации, и вы бы больше структуры
участвуют (левая колонка, правая колонка, и т.д.).
Так как вы можете видеть, горизонтальные центровки для структурных элементов достигается с "запасом" атрибут в то время
как горизонтальное центрирование для текстовых элементов достигается при использовании "выравнивания текста" атрибут.
PHP Essentials
Многие веб-дизайнеры и случайные владельцы сайта не знакомы с языком PHP, в котором Joomla! написано и с Joomla! шаблоны
обычно содержат PHP заявления необходимо понять, по крайней мере немного язык, чтобы быть в состоянии создавать или настраивать
шаблоны. Этот кусок будет описывать, в простых терминах, как использовать каждый аспект PHP в контексте Joomla! шаблон.
Например, простое объяснение, если PHP-то-иначе синтаксис использования экстрактов из шаблона для иллюстрации.
Лучший ресурс, чтобы узнать PHP, вероятно, практический опыт и Joomla может предусмотреть, что к вам благодаря его родной код PHP.
Это может быть подавляющим для людей, которые не программировали. Хотя Joomla достаточно легко установить с помощью сообщества
и немного вашего времени вы будете иметь люди просят вас сделать свои веб-сайты.
PHP Введение
PHP это скриптовый язык, предназначенный в основном для производства динамических веб-страниц.
Они встроены в страницы HTML с тегами, как <? PHP ...?>. Когда страница отправляется на двигатель PHP, PHP теги переведена на HTML,
который затем может быть оказана с помощью браузера. Базы данных необходимо при переводе с сценарий, возможно, потребуется для
извлечения данных из базы данных. Таким образом, чтобы создать PHP страницы, мы требуем, двигатель PHP, базы данных (обычно MySQL)
и веб-сервер, который будет координировать эти действия и направить окончательный HTML в браузере. Эти три компонента могут быть
установлены отдельно, однако, у нас есть пакеты как WAMP (для Windows), MAMP (для Mac) и лампа (для Linux), для вашего удобства.
Установка PHP
Пакеты могут быть загружены с WAMP. WAMP стенды для Windows Apache MySQL PHP. Инструкции можно проследить, как в данном сайте и
довольно проста. Установка может быть сделано, то любой каталог (например D: / WAMP).
После установки, она может быть запущена из программы-> Пуск-> WampServer. Это должно дать маленькую иконку в системный трей с
помощью которых сервер может быть запущен / остановить / перезапустить. Это также дает ссылки на все важные файлы, такие как php.ini
и другие конфигурационные файлы. Для пользователей Mac MAMP можно найти здесь.
Для целей этого урока XAMPP также может быть использован.
PHP в оба конца
Наша главная цель здесь заключается в написании небольшой страницы PHP и обработка от веб-сервера Apache. WAMP оказывает страницы,
глядя в WWW папку WAMP Установить каталог, именуемый далее WAMP_HOME. Запустите ваш основной текстовый редактор, создайте
страницу и назовите его, скажем, first.php, и сохранить его на WAMP_HOME / WWW / X / Y папку (х и у папки, созданные для организации
скриптов) и написать следующее скрипт:
<html>
<head>
<title>Basic PHP Page</title>
</head>
<body>
<?php
echo ("My first php snippet");
?>
</body>
</html>
Сохраните этот файл, в браузере http://localhost/x/y/first.php, и вы должны быть в состоянии видеть сообщение эхо.
Первичного вещей, чтобы отметить здесь:
1.Настоятельно рекомендуется, чтобы все PHP коды начинаются с: "<?php" and end with a "?>" tag.
2. Чтобы иметь точку с запятой [;] после каждого выступления PHP
3. Каталог, в котором находится этот скрипт необходимо уделять в URL.
Это завершает наш тур-поездки. Теперь, для обучения, можно оставить в том числе новых элементов в этом файле или вы можете создать
отдельные сценарии и загружать их в браузере.
PHP объявление переменных и типы данных
Нам необходимо для хранения данных для программирования. Ниже приведены способы определения переменных в PHP:
1. $ Имя_переменной = 0;
$variable_name = 0;
Обратите внимание: здесь мы не определим тип переменных, будь то число или строку, что переменная должна провести.
Это называется динамическим обзорного.
2. Имена переменных должны начинаться с алфавита и может содержать буквы и цифры и "_"
3. Определение констант -
define ("NAME_OF_THE_CONSTANT" , $value);
Основные операторы
Общие операторы описаны ниже:
a. + e.g. 6 + 3, addition operator, answer is 9
b. – e.g. 6 - 3, subtraction operator, answer is 3
c. / e.g. 6 / 3, division operator, answer is 2
d. * e.g. 6 * 3, multiplication operator, answer is 18
e. % e.g. 6 % 3, modulus operator, answer is 0
f. . e.g. '6'.'3', concatenation operator, gives string '63'
g. += e.g. $x += 6, adds 6
h. -= e.g. $x -= 6, subtracts 6
i. /= e.g. $x /= 6, divides by 6
j. %= e.g. $x %= 6, modulus by 6
k. .= e.g. $x .= '6', concats 6 to x
l. < e.g. $x < $y, evaluates to true if $x is < $y
m. > e.g. $x > $y, evaluates to true if $x is > $y
n. == e.g. $x == $y, evaluates to true if $x is equal by value to $y
o. != e.g. $x != $y, evaluates to true if $x is not equal to $y
p. === e.g. $x === $y, evaluates to true if $x is and $y is identical i.e both of same type both value and reference
q. >= e.g. $x >= $y, evaluates to true if $x is >= $y
r. <= e.g. $x <= $y, evaluates to true if $x is <= $y
s. && e.g. ($x == 2 && $y == 3) , evaluates to true if $x equals 2 and $y equals 3
t. || e.g. ($x == 2 || $y == 3) , evaluates to true if either $x equals 2 or $y equals 3
u. xor e.g. ($x == 2 xor $y == 3) , evaluates to true if either $x equals 2 or $y equals 3 but not both
v. ++ e.g. $x++, increments $x
w. –- e.g. $x--, decrements $x
Определение массива структур
Пути объявлении массивов
Допустим, мы хотим многих переменных. Мы могли бы объявили переменные, как показано выше, однако, это не элегантно.
Предположим, вы хотите 100 переменных; объявлении массивов прийти на помощь.
Отметим, что индекс в PHP начинается с 0.
$my_guitar_heroes = array ("Hendrix", "Shankar", "Gilmour", "to_name_a_few!");
Или
$my_guitar_heroes [] = "Hendrix";
$my_guitar_heroes [] = "Shankar";
$my_guitar_heroes [] = "Gilmour";
$my_guitar_heroes [] = "to_name_a_few!";
Здесь PHP автоматически присваивает индекс.
Или
$my_guitar_heroes [0] = "Hendrix";
$my_guitar_heroes [10000] = "Mainak";
Здесь, я знал, первый и 10001-й элемент, но это я!
Или сочетание указанных выше средств
Или
// Set the elements at positions 1 through 9999 to the value, "to be decided".
$my_guitar_heroes = array_fill( 1, 9999, "to be decided" );
Доступ Массивы
print $my_guitar_heroes[2]; //Access the 2nd element
Или
// Access the last element (Note that the element positions are numbered zero to
// [number of elements] minus one.)
$my_guitar_heroes[count($my_guitar_heroes)-1];
Или
// Access the last element using a function call.
end($my_guitar_heroes);
Итерация по элемент массива
foreach ( $my_guitar_heroes as $temp) {
print "$temp<br />";
}
Управление выражений
Для выполнения инструкции из набора заявлений снова и снова, мы используем управления выражений. Синтаксис этой структуры управления являются:
если заявления
if( $x > 0) {
print("$x is positive");
} else if( $x < 0 ) {
print("$x is negative");
} else {
print("$x is 0");
}
для петли
for ( $x=1; $x<= 10; $x++ ) {
print "$x<BR/>";
}
петля
$x = 1
while ( $x <= 10 ) {
print "$x<BR/>";
}
делать, пока петля
$x = 1;
do {
print "$x<BR/>";
$x++;
}while($x <= 10);
Определение функций
Кодекса, который дублируется во многих местах лучше помещен в функцию. Ниже приведены способы описания функции:
function name_of_the_function( $arguments, $size='default_values_if_any' ) {
print "here goes in the code";
return "this value is returned, return statement is optional";
}
Аргументы передаются по значению. Если они должны быть переданы по ссылке, то аргумент префикс "&", как показано ниже:
function name_of_the_function( &$arguments, $size='default_values_if_any' ) {
print "here goes in the code";
return "this value is returned, return statement is optional";
}
Объем Переменная, определенная в функции действуют только в пределах этой функции.
Вызов функции
$x = add(5, 3);
Отладки
Основные опции печати
Основной способ для отладки, которая выведет значение переменной. Следующие основные положения достичь этого:
* Эхо ", если двойные кавычки используются затем доллар переменных будут решены";
* Эхо ', если одной цитаты используются, то доллар переменные не решена;
* Печать "другой способ печати";
* Nl2br ("любые символы новой строки, как \ п получить автоматически решены на перерывы HTML линии");
Наряду с этим, лог-файлы очень полезны и могут быть найдены в WAMP_HOME / каталог журналов.
Обработка форм
PHP не меняет структуру HTML, таким образом, любой синтаксиса HTML остается тем же. Та часть, которая играет PHP делает любой
части динамической для например, атрибут действия формы могут быть закодированы как действие = <PHP my_own_action ();?>
Так, чтобы она динамически. Части, где PHP ногами в это после отправки формы, например для получения
значений полей формы, набор печенья и т. д. Для этого, супер глобальные переменные используются, которые всегда доступны для
кода PHP. Некоторые из них являются:
1. $ _GET - Получить данные из запроса GET
2. $ _POST - Получить данные из запроса POST
3. $ _REQUEST - Получите запрос
4. $ _COOKIE - Получить печенье из браузера
5. $ _SESSION - Получить сессии
Все эти массивы, и вести себя соответственно.
Добавление изображения
* Загружать с помощью Media Manager
Самый простой способ добавить изображений, чтобы загрузить их с компьютера с помощью Media Manager. Во-первых, конечно,
Вам необходимо загрузить изображения на компьютер и быть в состоянии найти его. Тогда из Панели управления
(фоновых административного интерфейса) перейти на сайт -> Media Manager.
Слева находится дерево каталогов, с корневой каталог "Медиа". Это соответствует по умолчанию "изображения"
каталог, yoursite / Joomla / изображений. Выберите подкаталог, в котором вы хотите изображение, расположенное, либо ничего
не делать, чтобы загрузить изображение в каталог по умолчанию изображения.
В нижней части страницы типичный окно загрузки. Нажмите кнопку "Обзор", чтобы найти изображения на компьютере, затем "Upload", чтобы загрузить файл на сервер.
* FTP
Конечно, вы можете загрузить изображения на сервер с помощью любого стандартного клиента FTP. Вы
можете найти это удобнее для добавления изображения в шаблон каталоги,
однако, если у вас есть FTP создана, вы, вероятно, не нужно объяснение
того, как добавить изображения. Кроме того, многие администрирования сервера, такие как панели Cpanel и Plesk есть способность к загрузке.
* Расширения
Есть несколько расширений, доступны в разделе Joomla расширений, которые обрабатывают загрузку изображений.
Объявление модуля позиции
Для того, чтобы модуль должностей, которые будут доступны для выбора в Менеджер модулей они должны быть объявлены
в templateDetails.xml файл шаблона. <positions> Элемент в этом файле, содержит вложенные элементы для каждой позиции модуль,
который поддерживается шаблона.
Например, вот типичный элемент <positions> в templateDetails.xml файл для типичных шаблонов.
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
</positions>
Вы можете добавить и определить новые позиции модуля и дать им любое имя, но это рекомендуется поддерживать по крайней мере тех,
показано на примере выше. Это связано с тем, что определенный уровень
согласованности сохраняется при переключении шаблонов или с использованием нескольких шаблонов на одном сайте.
Дополнительная информация по размещению позиции модуля в шаблоне файл может быть найден в использовании и реализации.
Поиск модуля позиции на любой странице
Чтобы получить визуальную информацию о всех позиций модулей, используемых на странице Вы можете следить за этой процедуры: -
* Перейдите на страницу в веб-браузере.
* Нажмите в поле URL в браузере.
* Искать какие-либо "параметры" в конце URL-адреса. Они отделены от основной части URL со знаком вопроса. Например, в URL http://mydomain.com/index.php?id=17, "ID = 17" является параметром.
* Если Есть никаких параметров, добавление "? TP = 1" в URL и нажмите RETURN. Например, http://mydomain.com/index.php?tp=1.
* Если Есть уже параметров в URL, добавьте "& TP = 1" в URL и нажмите RETURN. Например, http://mydomain.com/index.php?id=17&tp=1.
* Модуль позиции будут изложены в красный цвет.
Отметим, что в некоторых обстоятельствах может быть модуль вакансий, которые не изложены в красный цвет.
Это может произойти, если шаблон определяет те позиции модуля в качестве условной от наличия модулей включена в эту позицию.
Если Есть нет модулей включена в этой позиции, то шаблон может адаптироваться и позиция не будет видно.
Изменение значка сайта
висит значку сайта
1. Создать 16x16 пикселя изображения. Вы
можете использовать графические программы, такие как Photoshop, Gimp
или Windows Paint или онлайн-инструмент, таких как
http://antifavicon.com/
2. Преобразовать в ICO формате, используя бесплатные онлайн сайты, такие как:
* Http://converticon.com/
* Http://www.favicongenerator.com/
* Http://www.htmlkit.com/services/favicon/
* Http://tools.dynamicdrive.com/favicon/
* Http://www.favicon.cc/
3. Файл, созданный таким образом, будет иметь продолжение. ICO. Скопируйте файл / Joomla / шаблоны / <ваш template>
каталог и переименовать в favicon.ico.
4. Откройте в браузере. Вы увидите новую иконку? Если это так, поздравления. Если нет, то это не обязательно означает,
что вы не сделал ничего плохого. Браузеры предназначены для минимизации трафика, поэтому они не обновляются Favicon каждый раз,
когда они показывают странице. Даже обновите страницу (F5) помощь привычки.
Так что вам нужно, чтобы обновить более подробно:
*
Mozilla / Firefox / Safari: удерживайте нажатой клавишу Shift при
нажатии Обновить, или нажмите Ctrl-Shift-R (Cmd-Shift-R на Apple Mac);
* IE: удерживайте Ctrl при нажатии Обновить или нажмите Ctrl-F5;
* Konqueror: просто нажмите на кнопку Обновить, или нажмите клавишу F5;
* Опера пользователи, возможно, потребуется, чтобы полностью очистить их кэша Инструменты Настройки →.
* Chrome: Shift-F5
Если это не помогает вам необходимо удалить временные файлы Интернета и истории, а затем открыть страницу еще раз.
Некоторые шаблоны содержат код, который перенаправляет браузер в другой каталог или другой значок файла. Чтобы
определить, где ваш новый значок должен быть, изучить
http://yoursite.com/templates/your_template/index.php и искать код,
который содержит текст ссылки <REL = "ярлык". Там вы найдете каталог и имя файла значка. Скопируйте значок, чтобы это место и
дать ему имя, которое указывает ссылка (вы можете сделать резервную копию старого файла). Убедитесь, что вы установили безопасности
правильно, так, что веб-сервер имеет доступ к этому файлу. Посмотрите на пример ниже.
<link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/favicon.ico" />
Если вы не хотите просто изменить favicon.ico файл в соответствующем
каталоге шаблонов вы можете найти ссылку на файл favicon.ico в html.php
документа. Путь "........\libraries\joomla\document\html\html.php".
Это должно предотвратить значок переключения, если вы используете
<link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/youricon.ico" />
в шаблон HTML и вы не удалите файл favicon.ico. (Зачем называть значок дважды?)
Из html.php
// Try to find a favicon by checking the template and root folder
$path = $directory . DS;
$dirs = array( $path, JPATH_BASE . DS );
foreach ($dirs as $dir )
{
$icon = $dir . 'favicon.ico';
if (file_exists( $icon ))
{
$path = str_replace( JPATH_BASE . DS, '', $dir );
$path = str_replace( '\\', '/', $path );
$this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' );
break;''
