在没有 HTML 知识的情况下创建网站?建立网站的在线编辑器正在取得进展,这通常是因为漂亮的模板。如果您不想从这样一个现成的设计开始,而这通常以付费选项告终,那么 RocketCake 是一个桌面程序,您可以使用它从无到有构建一个漂亮的网站。
英语语言程序仅包含十五个模板(模板)以供灵感。我们的想法是,使用 RocketCake,您可以创建自己的网站,以后可以轻松更新。 RocketCake 是所谓的 WYSIWYG 编辑器。因此,您不必键入任何 HTML 代码。您可以通过在工作台上放置元素然后上传案例来构建自己的网站。元素包括文本框、按钮、图像、菜单、幻灯片、电影、音频剪辑等。 RocketCake 的特别之处在于它是一个构建所谓响应式网站的编辑器。这种响应式网站对移动设备友好,因为布局会适应访问该网站的设备的屏幕。
无论您是在大型显示器还是小型智能手机屏幕上查看,响应式网页仍然看起来很整洁。为此,网站将调整许多部分,例如字体大小、某些元素的排列以及菜单在屏幕上的显示方式。
在这里下载 RocketCake。有一个适用于 Windows 的版本和一个适用于 macOS 的版本。在本次研讨会中,我们使用免费版。这使得创建一个运行流畅的响应式网站变得容易。还有一个专业版的 RocketCake,售价 39 欧元。专业版允许您创建无限数量的网站。还有 CSS 支持,您可以通过它快速调整整个站点的布局样式。 RocketCake 3.1 版已得到改进,因此您的网站在 Google 和其他搜索引擎中的排名更高。此外,免费版还包含一些以前仅在付费版中才有的功能。
工作环境和展示
工作区顶部是带有按钮的栏,用于添加新页面、使用 Internet Explorer 进行预览以及在 Internet 上发布网站。在右边你会发现 工具集 包含您可以放置在网页上的所有元素。在左上角,您可以看到网站所有页面的结构。
以下是 特性。 您可以在此处更改您选择的每个元素的属性。假设您想将图像添加到页面,然后您在属性中选择图像文件并指示图像是否应具有圆角或尖角等等...
在最底部确定显示宽度。默认情况下,这是 桌面-展示。通过左下方的小下拉菜单,您还可以在许多流行的移动设备的显示屏上工作,例如 iPhone、iPad、三星 Galaxy、LG ... 如果您在此找不到所需的宽度菜单,您还可以选择自定义并使用滑块指定显示在屏幕上的宽度。该宽度设置对于确定断点很重要,我们将在后面讨论。
颜色和主页
让我们从主页开始。在这个例子中,我们正在创建一个雄心勃勃的摇滚乐队的网站。不要从模板开始,而是选择 空页.属性部分将适应您选择的每个元素。比如点击第一页的背景,然后就可以访问 背景颜色 选择一种背景颜色。默认有 000000,白色的 html 代码。通过单击带有三个点的框,您可以调出颜色选择器。在属性中,您为此网页指定一个标题。它很快就会出现在浏览器窗口的顶部。将主页的名称保留在 index.html。浏览器总是寻找索引页作为主页显示。
在它下面,您确定四种超链接的颜色。 链接颜色 确定尚未访问的链接的颜色, 链接颜色活动 指某人当前正在访问的链接, 链接颜色悬停 是鼠标指针指向的链接的颜色,并且 已访问链接颜色 指某人已经访问过的链接。
导航栏和介绍图片
要放置导航栏,请选择工具集中的项目 导航菜单 然后单击工作区。在此导航栏中,您可以键入要为其创建网页的菜单项。保持这些项目的名称简短。在我们的示例中,这些是乐队、谁、地点、时间、原因和媒体。顶部是用于设置这些导航项文本格式的按钮。如果单击导航栏本身,则可以在“属性”中调整导航栏的颜色和形状。这样你就可以 背景时尚 选择 颜色、图像、渐变 和 样式按钮.在 Gradient 中,您可以确定过渡的色调,而在 Styled Button 中,菜单栏呈现球形外观。
我们还想添加横幅或介绍图片。为此,您首先放置项目 容器.在属性中 图像名称单击三个点以选择您事先准备好的图片。如果它太大,RocketCake 会询问它是否可以调整图像大小。没关系。您在本文顶部的横幅上看到的标题“疯狗”,是我们自己用另一个程序添加到图像中的。基本上你也可以用该项目文本 浮动文本 放置在图像上。不幸的是,这在移动设备上产生了不可预测的结果。
满意后,将工作文件保存在硬盘上的某个位置为 .rcd 文件。
列
在横幅下方,您要为主页提供一列、两列或三列的内容。为此,请在工具集中选择项目 带列的容器. RocketCake 会询问您想要多少列。应用程序还想知道列的最小宽度。这里我们选择两列,默认设置为 150。这意味着可以在宽屏幕上整齐地看到列彼此相邻。如果小屏幕上的一列小于 150 像素,它将不再出现在前一列的旁边,而是出现在其下方。
在本例中,我们将左列设置为 最小宽度 500. 500 是左列的断点。如果屏幕宽度变得太小,访问者将阅读左栏下方右栏的内容。此外,我们已将横幅设置为 最大宽度 1000.
要使右列比左列窄,请先单击左列。这 尺寸 默认情况下有吗 50%,汽车.例如,将其更改为 70%,汽车.这会导致第二列暂时浮动在第一列之下。您可以在单击第二列和大小时解决此问题 30%,汽车 填写。这将为您提供 70/30 的比例。然后你用文本填充列,你也像用文字处理器一样设计。在这样的列中,您还可以 标题 (杯子)。标题 1、2、3 使杯子看起来不错。
要添加图像,请将光标放在文本中,然后单击工具集中的 图片.然后导航到图像等待的位置。不时点击按钮 预览 在浏览器中查看您的工作。
如果单击这样的文本列,您将在属性中看到 填充 默认设置为 10、10、10、10。Padding 是文本到列边框的距离。第一个数字存储在顶部,第二个在底部,第三个在右边,第四个在左边。例如,如果您希望在文本框中的右侧有更多填充,则应将第三个值设置为 20。
因此,填充是盒子内部的距离, 利润 是外面的距离。如果您希望在照片底部与其下方文本顶部之间留出更多空间,请将边距从 0, 0, 0, 0 更改为例如 0.10, 0, 0。
附加页面
现在主页已准备就绪,您当然希望为您的项目创建更多页面。这与按钮 添加页面.该程序会询问您是要创建一个全新的页面还是现有网页的副本。在这个例子中,我们将使用我们主页的样式:黑色背景、字体、字体大小、容器的宽度……所以我们选择第二个选项。然后我们移除横幅并更改文本容器的内容。
如果您想在每个页面的底部添加一个页脚,也可以在那里添加一个页脚 容器 或者 带列的容器 并键入例如联系信息或版权信息。无法直接从键盘输入版权符号等特殊字符。在 RocketCake 中,您可以通过菜单选择此类特殊字符 插入、插入文本符号.
链接
当然,您希望导航菜单中的按钮指向正确的页面。为此,首先选择导航菜单中的按钮,然后单击带有链的按钮。或者您右键单击并选择 插入超链接.这将打开一个选择框,您必须在其中选择链接到外部网页、电子邮件地址、该项目的页面或特定文件。选择选项 项目中的页面.然后,您将看到一个已创建网页的列表,您可以在其中选择正确的网页。
蜜蜂 目标 选择在新的浏览器窗口或打开的浏览器窗口中打开网页。最后一个选项很常见。如果您在指向导航菜单中的按钮时按住鼠标左键,则会添加子菜单,然后以相同的方式引用现有网页。
母版页
RocketCake 也适用于所谓的母版页。如果您正在创建一个包含许多页面的网站,此技术将显着加快格式化速度。母版页是用作其他页面模板的格式化模型。因此,这样的母版页不是常规网页。下面是创建一个的方法:创建一个新的网页,放置下拉菜单,确保菜单正常工作,并设置这个页面的格式,没有真正的文本内容。然后从工具集中添加一个 . 内容占位符 向上。没有这个元素,母版页将无法工作。为这个特殊页面指定一个有意义的名称,例如 masterpage.html。然后创建一个或多个不提供布局的网页。
您键入文本,必要时添加图像并保存此页面。在这些包含内容的页面上,查看底部字段中的属性 母版页.在那里你激活选项 使用母版页.如果您选中了该框,则会出现一个新框,您可以在其中选择所需母版页的名称。您可以使用多个母版页。目前你还没有看到任何东西,但是如果你点击按钮 预览 单击,您会注意到该页面的内容整齐地发布在所选母版页的内容占位符中。
插入媒体
使用 RocketCake,您可以通过选择工具集中的项目来添加 YouTube 视频 YouTube 视频 选择。然后在属性中输入视频的网址。添加照片库同样简单。您先请 图片库 从工具集中选择,在框中选择不同的照片 图像文件 1、图像文件 2 等等。有多种方法可以放大图库中的照片。例如,您可以在新窗口中打开它们,在弹出窗口中,但我们最喜欢单独图层上的大图像。
发布
你完成了吗?然后,您可以在 Internet 或本地磁盘上发布该网站。 RocketCake 配备了 ftp 功能,可以将服务器上的所有内容整齐地放置在您的提供商提供的文件夹中。输入ftp地址、用户名和密码。使用选项 保存密码 保存密码。当您将网站发布到您的硬盘时,您可以通过使用 Internet 程序打开 index.html 文件来访问主页。