Create a site without HTML knowledge? Online editors to build websites are gaining ground, often because of the beautiful templates. If you prefer not to start from such a ready-made design, which often ends up in a paid option, then RocketCake is a desktop program with which you can build a beautiful site from nothing.
The English-language program contains only fifteen templates (templates) for inspiration. The idea is that with RocketCake you create your own site that you can easily update later. RocketCake is a so-called WYSIWYG editor. So you don't have to type any HTML codes. You put together your own site by placing elements on the work surface and then uploading the case. Elements include text boxes, buttons, images, menus, slideshows, movies, audio clips, and more. What makes RocketCake special is that it is an editor to build so-called responsive websites. Such a responsive website is mobile-friendly, because the layout adapts to the screen of the device with which someone visits the site.
A responsive web page will still look neat, whether you view it on a large monitor or a small smartphone screen. For this, the website will adjust a number of parts, such as the font size, the arrangement of certain elements and the way the menu is displayed on the screen.
Download RocketCake here. There is a version for Windows and one for macOS. In this workshop we use the free edition. This makes it easy to create a smoothly functioning responsive website. There is also a professional edition of RocketCake, which costs 39 euros. The professional version allows you to create an unlimited number of websites. There is also CSS support, with which you can quickly adjust layout styles across an entire site. Version 3.1 of RocketCake has been improved so that your website ranks better with Google and other search engines. Furthermore, the free version includes a few features that were previously only in the paid edition.
Work environment and display
At the top of the workspace is the bar with buttons to add a new page, to preview with Internet Explorer and to publish the website on the Internet. On the right you will find the toolset with all the elements you can place on a web page. At the top left you see the structure of all pages of your website.
Below are the Properties. Here you change the properties of each element you select. Suppose you want to add an image to a page, then select the image file in the Properties and indicate whether the image should have rounded or sharp corners and so on...
At the very bottom you determine the display width. By default, that's the desktop-display. Via the small drop-down menu at the bottom left you can also work in the display of a number of popular mobile devices, such as the iPhone, iPad, Samsung Galaxy, LG ... If you do not find the desired width in this menu, you can also select Custom and use a slider specify the width to appear on the screen. That width setting is important for determining the breakpoints, which we discuss later.
Colors and homepage
Let's start with the home page. In this example, we are creating the website of an ambitious rock band. Instead of starting with a template, choose Empty page. The Properties section will adapt to each element you select. For example, click on the background of the first page, then you can access BackgroundColor select a background color. By default there is 000000, the html code for white. By clicking on the box with the three dots you bring up the color picker. In the Properties you give this webpage a title. It will soon appear at the top of the browser window. Leave the name of the homepage at index.html. A browser always looks for the index page to display as the homepage.
Below it you determine the colors of the four types of hyperlinks. LinkColor determines the color of the links that have not yet been visited, LinkColorActive refers to links that someone is currently visiting, LinkColorHover is the color of a link that the mouse pointer is pointing at and LinkColorVisited refers to links that someone has already visited.
Navigation bar and intro image
To place a navigation bar, select the item in the Toolset Navigation Menu and then click on the workspace. In this navigation bar you type the menu items for which you want to create web pages. Keep the names of those items short. In our example these are The band, Who, Where, When, Why and Media. At the top are the buttons to format the text of those navigation items. If you click on the navigation bar itself, you can adjust the color and shape of the bar in the Properties. That's how you can BackGroundFashion choose for Color, Image, Gradient and Styled Button. In Gradient you determine the color tones of the transition and in Styled Button the menu bar gets a spherical appearance.
We also want to add a banner or intro image. For that you first place the item Container. In the Properties at ImageNameclick on the three dots to select the picture you prepared beforehand. If it's too big, RocketCake asks if it can resize the image. That's okay. The title 'Mad Dog' that you see on the banner at the top of this article, we have added to the image ourselves with another program. Basically you can also text with the item Floating Text place over an image. Unfortunately, this gives an unpredictable result on mobile devices.
When you are satisfied, save the working file somewhere on the hard disk as a .rcd file.
Columns
Below the banner you want to provide the home page with content in one, two or three columns. To do this, choose the item in Toolset Container with Columns. RocketCake asks how many columns you want. The application also wants to know what the minimum width of a column is. We choose two columns here and the default setting is 150. This means that the columns can be seen neatly next to each other on a wide screen. If a column on a small screen becomes smaller than 150 pixels, it will no longer appear next to, but below the previous column.
In this example we set the left column to MinWidth 500. 500 is the breakpoint for the left column. If the screen width becomes too small, the visitor will read the contents of the right column below the left column. In addition, we have set the banner to MaxWidth 1000.
To make the right column narrower than the left, first click on the left column. The size is there by default 50%, car. For example, change that to 70%, car. This causes the second column to temporarily float below the first. You can solve this when you click on the second column and at Size 30%, car fills in. This will give you a 70/30 ratio. Then you fill the columns with text, which you also design like with a word processor. In such a column you can also Headings (cups). Heading 1, 2, 3 keeps the cups looking good.
To add an image, place the cursor in the text and click in the Toolset on Image. Then navigate to the location where the image is waiting. Click the button every now and then preview to view your work in a browser.
If you click on such a text column, you will see in the Properties that the padding default is set to 10, 10, 10, 10. The Padding is the distance from the text to the column border. The first number stores at the top, the second at the bottom, the third at the right, and the fourth at the left. If you want some more padding on the right side in a text box, you should set the third value to 20, for example.
Padding is therefore the distance on the inside of a box, margin is the distance on the outside. If you want more space between the bottom of the photo and the top of the text below it, change the Margin from 0, 0, 0, 0 to, for example, 0.10, 0, 0.
Additional pages
Now that the homepage is ready, you will of course want to create more pages for your project. That goes with the button Add Page. The program asks whether you want to create a completely new page or a copy of an already existing web page. In this example we will use the style of our homepage: the black background, the font, the font size, the width of container… So we go for the second option. Then we remove the banner and change the contents of the text container.
If you want a footer at the bottom of every page, add a footer there too Container or Container with Columns and type, for example, the contact information or copyright information. Special characters such as the copyright symbol cannot be entered directly from the keyboard. In RocketCake you choose such special characters via the menu Insert, Insert Text Symbol.
Links
Of course you want the buttons in the navigation menu to point to the correct pages. To do this, first select the button in the navigation menu and then click on the button with the chain. Or you right-click and choose Insert hyperlink. This opens a selection box where you have to choose between linking to an external web page, an e-mail address, a page of this project or a specific file. Select the option Page in the project. You will then see a list of created web pages in which you select the correct one.
Bee Target choose to open the web page in a new browser window or in the open browser window. This last option is common. If you hold down the left mouse button while pointing at a button from the navigation menu, you add submenus that then refer to existing web pages in the same way.
master pages
RocketCake also works with so-called master pages. If you are creating a website with many pages, this technique will speed up formatting significantly. A master page is a formatted model that serves as a template for other pages. Such a master page is therefore not a regular web page. Here's how to create one: create a new web page, place the drop-down menu, make sure the menu works as it should, and format this page with no real text content. Then you add a . from the Toolset Content Placeholder up. Without this element, the master page will not work. Give this special page a meaningful name, for example masterpage.html. Then you create one or more web pages that you do not provide with a layout.
You type text, add an image if necessary and save this page. On these pages with content, look at the Properties in the field at the bottom Master Page. There you activate the option UseMasterPage. If you have checked the box, a new box will appear in which you select the name of the intended master page. You can use multiple master pages. At the moment you don't see anything yet, but if you click the button preview click, you will notice that the content of this page is neatly published in the Content Placeholder of the selected master page.
Insert media
With RocketCake you add YouTube videos by selecting the item in the Toolset YouTube video to select. Then enter the web address of the video in the Properties. Just as easy is adding a photo gallery. after you Image Gallery have chosen from the Toolset, select the different photos in the boxes ImageFile1, ImageFile2 and so forth. There are several ways to enlarge the photos in the gallery. You can, for example, open them in a new window, in a pop-up window, but we like it best as a large image on a separate layer.
To publish
You are done? Then you can publish the website on the internet or on a local disk. RocketCake is equipped with an ftp function to place everything neatly on the server in the folder that your provider makes available. Enter the ftp address, username and password. Use the option Save Password to save the password. When you publish the website to your hard drive, you can visit the homepage by opening the index.html file with your internet program.
