khamdamov.com http://khamdamov.com Веб Дизайн, Уроки AVE CMS, Уроки HTML, Уроки CSS, Уроки Jquery Thu, 04 Aug 2011 13:09:45 +0000 en hourly 1 http://wordpress.org/?v=3.2-beta1-17916 HTML 3, TD свойство ячейки http://khamdamov.com/2011/08/04/html-3-td/ http://khamdamov.com/2011/08/04/html-3-td/#comments Thu, 04 Aug 2011 13:09:45 +0000 admin http://khamdamov.com/?p=334 В этом уроке разберем свойство ячейки “TD“.

В ячейке мы можем как от центровать содержимое, либо расположить относительно какой либо стороны. Для этого у нас есть два свойства “align” (выравнивает по горизонтали) и “valign” (выравнивает по вертикали)

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

<table width="100%" cellpadding="0" cellspacing="0" border="1">
	<tr>
		<td align="center" valign="middle" width="200" height="200">Содержимое ячейки</td>
	</tr>
</table>

что у нас получилось

выровняли по центру

Содержимое по центру

Давайте разберем по подробнее свойства ячейки:

Align выравнивание по горизонтали

  • left – выравнивание по левому краю
  • right – выравнивание по правому краю
  • center – выравнивание по центру

Valign выравнивание по вертикали

  • top – выравнивание по верхнему краю
  • middle – выравнивание по центру
  • bottom – выравнивание по нижнему краю

Советую по экспериментировать и потом приступить к следующему уроку )

]]> http://khamdamov.com/2011/08/04/html-3-td/feed/ 0 HTML 3, Таблицы http://khamdamov.com/2011/07/26/html-3/ http://khamdamov.com/2011/07/26/html-3/#comments Tue, 26 Jul 2011 13:40:18 +0000 admin http://khamdamov.com/?p=327 В этом уроке рассмотрим таблицы в HTML, таблицей можно представить как табличную информацию, либо сверстать весь сайт.

Давайте рассмотрим нашу любимую Таблицу на примере:


<table width="200" cellpadding="0" cellspacing="0" border="1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

Вставляем в блокнот, сохраняем страницу с расширением “.html“ (кто не помнит, смотрим сюда), далее открываем в браузере наш файл и смотрим что у нас получилось )

Таблица

Таблица с 4 ячейками

Вот наша первая таблица. Теперь ее рассмотрим по подробнее.

Сама таблица открывается тегом “<table>” и закрывается “</table>“, внутри нее находятся теги ячейки “<td>“, эти ячейки располагаются в тегах образующие строки “<tr>“.

То есть, все ячейки находящийся в теге “<tr>” образуют одну горизонтальную строчку


<tr>
   <td>1</td>
   <td>2</td>
</tr>

далее идет еще тег “<tr>” образующий вторую строку:


<tr>
   <td>3</td>
   <td>4</td>
</tr>

Думаю с этим понятно, осталось рассмотреть свойства таблицы:

  • width=”200″ – ширина таблицы, задается в пикселях или процентах, в данный момент в пикселях
  • cellpadding=”0″ – отступ внутри ячейки (задается в пикселях)
  • cellspacing=”0″ – отступ между ячейками (задается в пикселях)
  • border=”1″ – размер визуальной границы между ячейками (задается в пикселях)

Пока на этом закончим, в следующем уроке рассмотрим свойства тега “<td>”, пока советую по экспериментировать с размерами и отступами в свойствах таблицы.

]]> http://khamdamov.com/2011/07/26/html-3/feed/ 0 HTML 2, Структура и текстовые теги http://khamdamov.com/2011/07/25/html-2/ http://khamdamov.com/2011/07/25/html-2/#comments Mon, 25 Jul 2011 06:56:44 +0000 admin http://khamdamov.com/?p=320 А теперь поговорим о структуре HTML )

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

Давайте рассмотрим их в примере.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Название страницы, отображается в верхней части страницы</title>
</head>

<body>
Видимая часть
</body>
</html>

Вставляем в блокнот, сохраняем с расширением “.html” (кто не помнит, то прочитайте урок 1) и открываем нашим любым браузером, и смотрим, что у нас получилось )

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

В данном примере внутри тега HEAD, находятся еще два тега, META и TITLE. В META мы задали кодировку UTF 8, а в TITLE название страницы.

Далее идет тег BODY, вот в нем все содержимое нашей страницы будет, все что внутри этого тега, это видимая часть.

Вот теперь перейдем к изучению наших первых тегов:

  • h1, h2, h3, h4, h5, h6 -теги заголовков, например h1 – это самый большой заголовок, а h6 – самый мелкий )
  • p – тег обозначающий абзац.
  • strong – делает шрифт жирным
  • em – курсивный текст
  • br – переход на новую строчку, вот он является исключением, не имеет закрывающий тег.

А теперь давайте рассмотрим их на примере:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Название страницы, отображаеться в верхней части страницы</title>
</head>

<body>
<h1>Заголовок</h1>
<p>
  Какое либо текстовое содержание страницы.<br>
  Перешли на новую строчку.
</p>
<p>
  <strong>Второй абзац</strong> - <em>какое либо описание, либо текст</em>
</p>
</body>
</html>

Вставляем в блокнот данный код, сохраняем с расширением “.html” (кто не помнит, то прочитайте урок 1), и смотрим что у нас получилось )

Ну на этом урок заканчиваем, в следующем уроке, начнем разбирать блочные теги.

]]> http://khamdamov.com/2011/07/25/html-2/feed/ 0 HTML 1, Начало http://khamdamov.com/2011/07/21/html-1/ http://khamdamov.com/2011/07/21/html-1/#comments Thu, 21 Jul 2011 14:50:25 +0000 admin http://khamdamov.com/?p=315 HTML началоВсем привет! А теперь начнем о HTML, начнем с базовых тегов, лишнее не дам, так что записывайте и запоминайте )

Что такое HTML, ммм… долго объяснять )) можно прочитать в инете, в вкратце это язык который понимает интернет браузер, вот сейчас мы создадим первую HTML страницу и просмотрим ее в нашем браузере.

Открываем для начала текстовый редактор, подойдет и “Блокнот”, пишем туда “Привет дядька (или тетка)”, и сохраняем, только при сохранение даем вот такое название “index.html“, вот мы и создали первую HTML страницу ), кликнете по этому файлу и его автоматом откроет ваш браузер.

Почему назвали так, потому что “index” – название страницы может быть любое, но  залив ее на сервер, сервер ее откроет самой первой. А далее “.html” мы дали расширение, дав понять что это HTML страница.

Теперь о тегах, практически все теги, обрамляются вот такими скобками “<  >” так браузер понимает, что это тег, вот пример :


<strong>

“strong” – это название тега. Еще что должны запомнить, любой тег, должен иметь закрывающий тег, есть исключение, но об этом потом.

Так, как же он закрывается?, да точно также как и открывается, только перед название ставим “/“, вот пример:


<strong></strong>

Теперь посмотрим на нашей странице, работу тегов. Открываем блокнотом наш файл “index.html” и делаем вот так:

<strong>Привет дядька (или тетка)</strong>

Сохраняем и обновляем в браузере страничку.

Что мы видим?, текст стал жирным ), ну на сегодня хватит, в следующем уроке разберем структуру HTML страницу и запомним наши первые теги.

]]> http://khamdamov.com/2011/07/21/html-1/feed/ 2 HTML, Вступление http://khamdamov.com/2011/07/19/html-0/ http://khamdamov.com/2011/07/19/html-0/#comments Tue, 19 Jul 2011 14:10:58 +0000 admin http://khamdamov.com/?p=309 htmlНаконец, по просьбам читателей )) начну писать уроки по HTML верстке.

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

Каких либо знаний по HTML не понадобиться, но думаю не помешают по любому )

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

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

Так, что заходите, читайте, и если во что не вникли спрашивайте!

]]> http://khamdamov.com/2011/07/19/html-0/feed/ 0 Урок 10, Заливаем на хостинг http://khamdamov.com/2011/07/19/lesson-10/ http://khamdamov.com/2011/07/19/lesson-10/#comments Tue, 19 Jul 2011 12:23:31 +0000 admin http://khamdamov.com/?p=305 Всем привет, некоторое время не заходил на сайт, за это время его взломали )))

Заливаем на хостинг AVE CMSТеперь к безопасности буду подходить серьезнее.

Ну вот, купили мы хостинг, через FTP клиент заливаем все содержимое из папки “C:\WebServers\home\ave.cms\www\” в папку “Public_html” на вашем хостинге.

Установите FTP клиентом обязательные права на запись (CMOD 777) для папок:

templates

templates_c

uploads

attachments

modules/gallery/uploads

modules/banner/banner

На хостинге создайте базу данных MySql и пользователя к ней.

В файле “inc/db.config.php” пропишите только что созданное название базы данных и пользователя.

Все, работа по установке на хостинге закончилась ), будут вопросы, задавайте.

]]> http://khamdamov.com/2011/07/19/lesson-10/feed/ 1 Отдых в горах http://khamdamov.com/2011/07/19/relax/ http://khamdamov.com/2011/07/19/relax/#comments Tue, 19 Jul 2011 10:30:25 +0000 admin http://khamdamov.com/?p=291 Вот и прошли выходные, возвращение в будни )

ну эти выходные прошли не даром ), узнал что один мой друг “Супермен”

Супермена второй “Брюс ли” )))

Брюс лину, а сам весь отдых я пробыл “Овощем”

Khamdamovбыла еще балерина ))) но увы фоток не сохранилось ))

]]> http://khamdamov.com/2011/07/19/relax/feed/ 0 Урок 9, Фото галереям http://khamdamov.com/2011/07/04/lesson-9/ http://khamdamov.com/2011/07/04/lesson-9/#comments Mon, 04 Jul 2011 14:28:25 +0000 admin http://khamdamov.com/?p=275 Приступаем к созданию галереи.

Для этого нам нужно войти в раздел “Модули” и напротив модуля “Галерея” кликнуть по ссылке “Параметры“.Модуль ГалереяДалее нам нужно добавить свою галерею, в нижней части страницы, есть вот этот блок добавления галереи.

Рассмотрим данный блок:

  • Название галереи -называйте как угодно вам;
  • Описание галереи – в принципе не обязательно, оставляем пустым;
  • Имя папки – обязательно латиницей.

после нажимаем на кнопку “Добавить“.

Вот и появилась наша галерея в списке существующих галерей. Обратите внимание на блок “Действия“, иконка Плюс – означает добавить фотографии в галерею, иконка Карандаш – означает редактирование галереи, иконка Икс – удалить галерею.

список галереи

Для начала, нам нужно добавить фотографии, кликаем по иконке Плюс.

Далее все понятно, закачиваете фотографии и сохраняете, после чего возвращаетесь к списку галерей.

Копируете системный тег галереи, в данный момент у меня он такой [cp_gallery:2], проходите в раздел “Документы“, выберете страницу “Фото галерея” и в поле “Содержание” вставьте системный тег.

вставляем тег

Сохраняем изменения и смотрим страницу на сайте “Фото галерею“.

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

Давайте откроем style.css, он находиться у вас на компьютере “C:\WebServers\home\ave.cms\www\templates\ave\css”, открываем его в любом вашем любимом редакторе или же блокнотом и в самый конец ставим вот этот код:

.galimages_border
{
float:left;
}

Теперь можете еще раз взглянуть на страницу галерея на своем сайте, уже картинки идут одна за другой по горизонтали.

Продолжаем, возвращаемся в раздел “Модули“, выберем модуль “Галерея“,  и в ячейке действий, кликнем по иконке Карандаш.
список галереиОткрылось окно редактирования самой галереи.

Редактируем галерею

Интересные для нас поля:

  • Размер миниатюр (в пикселях) – ну тут все понятно, задаем размер в пикселях для миниатюр на странице “Галерея”
  • Количество миниатюр в строке – контролируете количество картинок в одной строке
  • Количество миниатюр на странице – если картинок больше, то просто появится пейджинг
  • Тип вывода изображений – здесь можете по экспериментировать, изменяется эффект открытия картинки при клике на ее миниатюре.

Кликаем сохранить, и смотрим результат своих действий на странице “Фото галерея” на сайте.

Снова возвращаемся к списку галерей. Кликаем по названию нашей галереи.

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

Ну вот мы закончили знакомство с этой “CMS”.

В следующем уроке уроке опишу как настроить наш локальный сайт на хостинге )

]]> http://khamdamov.com/2011/07/04/lesson-9/feed/ 1 Пополнение в строю, немного про собак http://khamdamov.com/2011/07/04/dog/ http://khamdamov.com/2011/07/04/dog/#comments Mon, 04 Jul 2011 11:21:36 +0000 admin http://khamdamov.com/?p=258 Хотелось написать про свою собаку, ну пока собирался, мне подарили еще одну ))

Как все начиналось, лет 12 назад, купили мы щенка немецкой овчарки, сучка по кличке “Сильва“, служила она хорошо, даже гавкала иногда, ну добрейшей души была ))) ни на кого не бросалась, не кусала и тп, что радовало до определенного момента.

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

Зашел во двор и стал копаться и искать где, что плохо лежит. Женщины заметив это стали кричать и ругаться, на что отморозок даже не обратил внимания, и занимался своим делом )))

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

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

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

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

Когда привезли домой, моя немка ее признала с ходу, можно сказать воспитала как своего щенка. Кличку дали ей “Рада“. А через год “Сильвы” не стало ((.

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

Ну два дня назад, раздался звонок на телефон, от знакомого, который просил, чтобы я забрал у него щенка Туркменской  овчарки по кличке “Умка“, 6 месяцев ей. Я предложил кому нибудь продать, на что он отказался, ссылаясь, что у меня он сможет ее иногда навещать и типа у меня добрые руки, а ему в квартире ее держать уже стало не возможно )))

Ну что пришлось взять )), очень боялся что моя ее загрызет, ну за вечер они подружились, конечно не без ревности со стороны “Рады“, заметив как “Умка” носит мячик к хозяину, “Рада” схватила мячик и стала носить мне, при каждом броске у нее было радости больше чем у щенка )))).

Ну вот на фото, эти две собаки стали не неразлучными )))

]]> http://khamdamov.com/2011/07/04/dog/feed/ 3 Урок 8, Контактная форма http://khamdamov.com/2011/07/04/lesson-8/ http://khamdamov.com/2011/07/04/lesson-8/#comments Mon, 04 Jul 2011 08:07:53 +0000 admin http://khamdamov.com/?p=246 В данном уроке разберем контактную форму или форму обратной связи, для чего она нужна? Для того чтобы ваши посетители прямо с вашего сайта смогли вам отправлять сообщения! Удобно, не правда ли?

У нас уже есть страница “Контакты” в нее мы и вставим саму “Контактную форму“, но для этого ее нужно создать и настроить.

Заходим в раздел “Модули“. Напротив модуля “Контакты“, кликаем по ссылке “Параметры“.

МодулиДалее откроется список имеющихся уже форм, в данный момент у нас она одна пока.

Мы можем создать новую или отредактировать уже которая есть, давайте ее и отредактируем.  Кликаем по иконке Карандаша (Редактировать форму).

После чего у нас откроется страница редактирование формы.

Окно редактирования обратной связи

Давайте разберем каждое поле:

  • Название формы, думаю и так понятно, не трогаем.
  • Максимум символов в поле – количество символов допустимое в поле ввода сообщения
  • E-mail получателя – тут вводим свой Email адрес, куда будем получать сообщения с сайта.
  • Список нескольких получателей – сюда вводим список Email адресов других получателей если такие имеются
  • Использовать защитный код? – ставим на “Да”, иначе вас за спамят ))
  • Максимальный размер файла (Кб) – это для файлов, вложенных в сообщений
  • Показывать поле “Тема сообщения”? – оставляем как есть
  • Использовать отправку копии? – если вы хотите чтобы отправителю отправлялась копия его сообщения на почту
  • Тема по умолчанию – например удобно, когда у вас несколько сайтов, и там прописать название сайта, чтобы знать с какого сайта пришло сообщение.
  • Группы пользователей, которым разрешено использовать данную форм – оставляем как есть.
  • Текст сообщения, если пользователь не имеет прав для отправки сообщения через данную форму – оставляем как есть )

Далее смотрим ниже.

поля сообщенияВидим поля формы и типы полей.

  • Сообщение – это поле для сообщения, тип у него “Многострочное поле”, это поле обязательное, иначе куда будет вводиться текст сообщения ), а также активное.
  • Как Вы оцените наш сайт? – обратите внимание, тип поля выпадающий список, пункты списка вводиться в поле “Значения по умолчание”, перечисляем через запятую.
  • Прикрепить файл – это поле для вложеных документов в письме, в примере у нас их два, можно будет вам слать картинки и какие либо текстовые файлы, все эти поля не обязательные.

Также мы можем создать дополнительные поля, ну в данный момент нам это не нужно.

Кликаем по кнопке “Сохранить изменения” и закрываем окно “Редактирование контактной формы“.

Копируем системный тег Обратной связи.

Системный тег обратной связи

И переходим в раздел “Документы“. Открываем страницу “Контакты” и в поле “Содержание” вставляем тег [cp_contact:1].

вставляем системный тег в поле Содержание страницы

Далее кликаем по кнопке “Сохранить изменения“. Все можете на своем сайте открыть страницу “Контакты” и вы увидите, что у вас теперь есть на сайте Форма обратной связи.

В следующем уроке, разберем модуль “Галерея“.

]]> http://khamdamov.com/2011/07/04/lesson-8/feed/ 5