html - 自定义 HTML 高级格式 : Assistance

Question

在这种情况下，我想问几个关于我主页的高级 HTML 格式设置的问题。

我的问题的一些背景:

我正在使用名为“Joomla!”的内容管理系统。管理我的网站。

这是我正在 build 中的网站的链接... Smart-Drones .

在这一点上，我已经通过使用 paint.net 基本上“绘制”来准确设计我希望网站的外观。我将所有图形都放在不同的图层上，这样我就可以保存它们并将它们作为 PNG 插入到网页中。

基本上这就是我希望我的网站着陆页的样子:

(因为我可以发布带有“<10 声望”的图片，请引用此处:http://forum.joomla.org/viewtopic.php?f=706&t=858845)

Joomla 的方式!内容管理系统的工作原理是将网站拆分为位于特定位置的模块。

在每个“位置”内是一个可以使用 HTML 格式化的空间，我的主页是一个大的 HTML 模块，所以它基本上是一个沼泽标准 HTML 页面。

您可以从附加的图片中看出，着陆页需要一个大背景图片(为页面提供框架)。背景图像是 PNG 格式，具有斐波那契模式以及页面中央的大图片。

我想在该背景图像上叠加更多元素，例如图像、按钮和文本。我还希望能够精确定位 HTML 元素。

下图应该让我知道我需要如何定位元素:

我一直在尝试使用名为 JCE(Joomla 内容编辑器)的所见即所得编辑器来构建页面，但一直没有成功。它只是拒绝工作，而且工作起来非常善变!

我试图插入一个 div，然后添加背景图像，并使用“绝对定位”将元素定位在该图像上，但我设法得到的最远的是你在主页上看到的，一团糟:

所见即所得编辑器生成了这段代码:

<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>

不漂亮，所以我问社区...

...您通常如何处理这个过程？这应该是相当标准的程序，但我的搜索没有找到任何实用的建议。

我们将不胜感激任何可能有帮助的建议或教程链接。

最好的问候，

叶忒罗。

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

Answer 1

Emmanuel 基本上对 tinyMCE 的网站布局编辑能力是正确的。但是 Joomla 的 tinyMCE 集成了格式化按钮。这意味着您可以通过位于模板/css 文件夹中的名为“editor.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;
}