Специальное HTML-форматирование: Помощь

Question

В этом случае я хочу задать несколько вопросов относительно предварительного форматирования HTML на моей домашней странице.

Некоторые фоне моей проблемы: «Joomla»

Я использую систему управления контентом под названием для управления моим сайтом.

Вот ссылка на мой сайт под строительство ... Smart-Drones.

На данный момент я разработал именно то, как я хочу, чтобы веб-сайт выглядел в основном «рисуя его» с помощью paint.net. У меня есть все графики на разных слоях, поэтому я могу их сохранить и вставить в веб-страницу в виде PNG.

В основном это, как я хочу, чтобы моя целевая страница сайта смотреть:

(так как я могу размещать фотографии с моей «репутации < 10», пожалуйста, refere здесь: http://forum.joomla.org/viewtopic.php?f=706&t=858845)

То, как Joomla! Система управления контентом работает, разбивая веб-сайт на модули, которые находятся в определенных положениях.

Внутри каждой «позиции» есть пространство, которое можно форматировать с помощью HTML, а моя домашняя страница - это один большой HTML-модуль, поэтому в основном это стандартная HTML-страница болота.

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

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

Изображение ниже должна дать представление о том, как мне нужно расположить элементы:

Я пытался сформулировать страницу с помощью редактора WYSIWYG называется JCE (Joomla Content Editor), но не был с не повезло. Он просто отказывается работать и настолько непостоянен для работы!

Я попытался вставить div, а затем добавить фоновое изображение и позиционировать элементы над этим изображением, используя «абсолютное позиционирование», но самое дальнее, что мне удалось получить, - это то, что вы можете видеть на домашней странице, беспорядок :

WYSIWYG редактор сгенерировал этот код:

<div style="background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); background-repeat: no-repeat; background-position: center center; width: 799px; height: 906px; position: relative;"> <img style="position: absolute;" src="images/logo/Smart-Drone-4-logo.png" alt="Smart-Drone-4-logo" /><span class="h3" style="position: absolute;"><span class="h4" style="color: #ffffff; position: absolute;">INTRODUCING THE ALL <span style="color: #ffcc00;">NEW</span></span><span style="color: #ffab00;"><span class="h4"></span> </span> </span> 
</div> 

не очень, поэтому я прошу сообщества ...

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

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

С уважением,

Jethro.

http://forum.joomla.org/viewtopic.php?f=706&t=858845

Answer 1

Эммануэль в основном правы насчет сайта макет редактирования способностей TinyMCE. Но minyMCE от Joomla объединяет кнопки для форматирования. Это означает, что вы можете добавлять свои собственные форматы через файл под названием «editor.css», который помещается в вашу папку template/css. Все определенные классы в нем интегрированы в tinyMCE. Поэтому, если вы хотите установить фоновое изображение через tinyMCE, лучше всего создать или отредактировать editor.css и добавить что-то вроде следующего.

пример editor.css:

.my-background { 
    background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    width: 799px; 
    height: 906px; 
    position: relative; 
}