Как создать сайт с нуля

"Рассмотрим детали создания сайта" - 11 ступень

Уважаемые посетители!

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

1. Чтобы изменить на любой странице сайта о цветах текст на Ваш собственный, откройте пункт Менеджер материалов в пункте меню Материалы в административной части. Кликните по текстовой ссылке Главная. Откроется страница добавления материалов для Главной страницы. Нажмите вкладку HTML в редакторе добавления статей, откроется вкладка с текстом и тегами - командами для браузеров. Вверху Вы видите следующую строку с командами для изображения заголовка и цвета:

<h3><span style="color: #CC0000;">Глав ная</span></h3>

Попробуйте слово Главная стереть, а вместо него напишите, например, слово Бильярд и нажмите Обновить внизу окна. В окне для текста Вы увидите вверху заголовок Бильярд вместо слова Главная. Если сохранить страницу вверху и открыть адрес локального сайта http://variant/, то на открывшейся Главной странице Вы увидите также заголовок Бильярд. Так можно заменить заголовок. Верните слово Главная на свое место таким же способом.

2. Как вставить свой текст?

Нажмите вкладку HTML в панели инструментов и на чистом пространстве ниже на 5 или 7 строк вставьте код, который идет ниже верхнего кода для заголовка, но до русского текста. То есть скопируйте следующий код:

<p style="text-align: justify; line-height: 150%;"><span style="color: #000000; font-family: Verdana; font-size: 16px;">

Вставьте его ниже на 5 или 7 строк от всего текста с кодом для страницы Главная. Ниже этого вставленного кода вставьте любой текст, скопируйте в любом месте и вставьте хоть одно предложение. За этим "нормальным", русским текстом вставьте вот такой "кусочек" кода:

</span></p>

И снова нажмите Обновить внизу окна. В окне для текста Вы увидите вверху текст для главной страницы по цветам, а ниже - тот текст, который Вы сами внесли. Если сохранить страницу вверху и открыть адрес локального сайта http://variant/, то на открывшейся Главной странице Вы увидите также Заголовок и текст страницы Главная о цветах, а ниже - текст, который Вы только что внесли. Так можно заменить текст или внести дополнительный, размещая его между кодом, расположенном ниже:

<p style="text-align: justify; line-height: 150%;"><span style="color: #000000; font-family: Verdana; font-size: 16px;">

Ваш текст

</span></p> pan>

Только добавляйте или вставляйте заголовки и текст вместе с кодом, обязательно открыв окно, кликнув по надписи HTML в панели инструментов редактора текстов. Удалите дополнительный вставленный материал вместе с кодом - это всего лишь проба.

3. Как изменить изображение?

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

Чтобы изменить изображение я воспользовался программой Photoshop (или "Фотошоп", говоря на русском языке). Чтобы научиться владеть программой Photoshop, могу посоветовать приобрести платный курс на диске, которым воспользовался сам. Реквизиты данного курса Вы сможете увидеть на странице "Курсы для Вас". Скачать бесплатно программу Photoshop с русским интерфейсом можно также по ссылке на странице "Курсы для Вас". Данный курс рекомендую приобрести, можно научиться с "нуля".

Предположим, что Вы научились или уже умеете создавать изображения определенных размеров в программе Photoshop или другом графическом редакторе. Откройте меню "Пуск" → "Мой компьютер" → Локальный диск Z → Папку home → Папку variant → Папку www. Все шаблоны хранятся в папке templates → откройте эту папку.

Нас интересует шаблон под названием joom23, поэтому откройте папку joom23 - в ней находятся все данные нашего шаблона. Изображения находятся в папке images → откройте ее. Верхнее изображение находится в файле Header.ipg, нижнее - в файле Footer.png. Откройте их, чтобы убедиться. Чтобы заменить верхнее и нижнее изображения на свои, нужно создать свои изображения с именами Header.ipg и Footer.png и заменить их в папке templates для шаблона joom23.

При чем сделать их нужно таких же размеров. Для этого я вынес изображения Header.ipg и Footer.png скачанного в Интернете шаблона на рабочий стол, открыл их в программе Photoshop и узнал, что Header.ipg имеет размер 888х250 пикселов, а Footer.png - размер 888х150 пикселов. 1 пиксел равен 0,3 миллиметра.

То есть, я изготовил в программе Photoshop свои изображения с такими же размерами, сохранил их с такими же названиями и расширениями файлов, загрузил их в папку joom23, предварительно удалив файлы с таким же названием. Можно всем поступить также, но нужно помнить, что во всех шаблонах разные высота и ширина изображений, то есть, предварительно после загрузки шаблона на сайт, нужно узнать высоту и ширину изображений. По поводу изменения изображений "Шапки" и нижней части, которую называют Footer, все рассказал.

4. Как изменить цвет фона сайта?

Осталось научиться изменять цвет фона сайта. В шаблоне может быть несколько изображений для фона, мы рассмотрим замену на одноцветный фон. Откройте также меню "Пуск" → "Мой компьютер" → Локальный диск Z → Папку home → Папку variant → Папку www.

Все шаблоны хранятся в папке templates → откройте эту папку.

Нас интересует шаблон под названием joom23, поэтому откройте папку joom23 - в ней находятся все данные нашего шаблона. Изображения для фона частично находятся в папке images → откройте ее. Здесь нам нужны два файла: Page-BgGradient.jpg и Page-BgTexture.jpg. Замените их на Page-BgGradient1.jpg и Page-BgTexture1.jpg, то есть в названии добавьте единицу в окончании текста.

Теперь можете запустить Ваш локальный сервер, открыть страницу http://vriant/ и Вы увидите, что фон стал бледно коричневым. Теперь скачайте таблицу цветов по следующей ›ссылке. Цвета в HTML языке, при помощи которого могут создаваться сайты, можно отобразить шестизначным числом или цифрами и числами, а в браузере код станет цветом. Повторим процедуру.

Откройте также меню "Пуск" → "Мой компьютер" → Локальный диск Z → Папку home → Папку variant → Папку www. Все шаблоны хранятся в папке templates → откройте эту папку. Нас интересует шаблон под названием joom23, поэтому откройте папку joom23 - в ней находятся все данные нашего шаблона. Откройте папку CSS. В ней хранятся файлы со стилями отображения внешнего вида нашего сайта. Откройте папку template.css при помощи программы Блокнот. В самом начале Вы увидите вот такой код:

body

{

margin: 0 auto; padding: 0; background-color: #FFCC66;

background-image: url('/../images/Page-BgTexture.jpg');

background-repeat: repeat-x; background-attachment: fixed;

background-position: top left; }

Только в строке background-color: #FFCC66; у Вас вместо значения цвета должен быть другой код.

Это значение Вы скопируйте в любой текстовый файл, чтобы потом все вернуть на свои места. Теперь в скачанной таблице скопируйте любое значение цвета, в строке background-color: #FFCC66; вместо Вашего кода вставьте, например этот #DAA520.

Вверху блокнота откройте пункт "Файл", в выпавшем меню нажмите "Сохранить". Выполните перезагрузку сайта http://variant/ - Вы увидите, что фон сайта стал золотистого цвета. Можете попробовать заменить в коде цвет на параметры других цветов.

Чтобы все вернуть к исходному виду, нужно заменить в строке background-color: выбранное Вами значение цвета на изначальное, а файлы Page-BgGradient1.jpg и Page-BgTexture1.jpg в папке images заменить на Page-BgGradient.jpg и Page-BgTexture.jpg. Такими действиями можно изменить фон сайта в шаблоне Joomla!.

5. Как создать заголовок страницы?

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

На открывшейся странице у нас все пункты меню. Кликнем по текстовой ссылке "Главная". Теперь на странице "Пункт меню" справа откройте вкладку "Параметры-Система". В строке "Заголовок страницы" впишите название, которое Вы хотите определить для этой страницы, например, "Наши товары", но, естественно, соответствующее теме данной страницы. Сохраните данную страницу.

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

На этой странице Как создать сайт с нуля мы рассмотрели с Вами детали создания сайта.