Create a site without html knowledge? Online editors to build websites are gaining ground, often because of the beautiful templates, among other things. If you prefer not to start from such a ready-made design, which often ends in a paid option, then you have a desktop program with RocketCake that you can build a beautiful site from nothing.
The English-language program contains only fifteen templates (templates) for inspiration. The idea is that you create your own site with RocketCake that you can easily update later. RocketCake is a so-called WYSIWYG editor. So you don’t have to type 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 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. It also includes CSS support, which allows you to quickly adjust layout styles on an entire site. Version 3.1 of RocketCake has been improved so that your website scores better with Google and other search engines. Furthermore, the free version includes a few features that used to be only in the paid edition.
Working environment and display
At the top of the working environment 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 that 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. The default is the Desktop-display. Via the small drop-down menu at the bottom left you can also work in the display of some 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 via a slider specify the width to be displayed on the screen. This width setting is important for determining the breakpoints, which we discuss later.
Colors and homepage
Let’s start with the homepage. In this example, we are creating the website of an ambitious rock band. Instead of starting with a template, you choose Empty page. The Properties section will adapt to any element you select. For example, click on the background of the first page to 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 can bring up the color picker. In the Properties you give this web page a title. This will soon appear at the top of the browser window. Leave the name of the homepage at index.html. A browser always searches for the index page to display as the homepage.
Below 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 the mouse pointer points to 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 change the color and shape of the bar in the Properties. So you can BackGroundMode 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 rounded 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 image you have prepared in advance. If it is too large, RocketCake will ask if it can adjust the image size. That is allowed. We have added the title “Mad Dog” on the banner at the top of this article to the image with another program. Basically you can also text with the item Floating Text over an image. Unfortunately, this gives an unpredictable result on mobile devices.
If you are satisfied, save the work file somewhere on the hard disk as a .rcd file.
Columns
Under 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 under the previous column.
In this example, we set the left column via Properties 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 under 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 pop under the first. You can solve this when you click on the second column and at Size 30%, car fill in. This gives you a 70/30 ratio. Then you fill the columns with text, which you also design as with a word processor. You can also access the Toolset in such a column Headings add (cups). Thanks to Heading 1, 2, 3, the cups keep looking good.
To add an image, place the cursor in the text and click in the Toolset Image. Then navigate to the location where the image is waiting. Click on the button 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 the default is set to 10, 10, 10, 10. The Padding is the distance from the text to the column border. The first number refers to the top, the second to the bottom, the third to the right and the fourth to the left. If you want a little more padding on the right in a text box, you need to set the third value to, say, 20.
So padding is the distance on the inside of a box, Margin is the distance on the outside. If you want a little 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.
Extra pages
Now that the homepage is ready, you naturally want to create more pages for your project. That goes with the button Add Page. The program asks if you want to create a completely new page or a copy of an already existing web page. In this example we 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 content of the text container.
If you want a footer at the bottom of every page, add one 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 using the keyboard. In RocketCake you choose such special characters from 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 the button with the chain. Or you press the right mouse button and choose Insert hyperlink. This opens a selection window where you have to choose between linking to an external web page, an email address, a page of this project or a specific file. Select the option Page in the project. Then you will see a list of created web pages in which you select the right one.
Bee Target you choose to open the web page in a new browser window or in the opened browser window. The latter option is common. If you hold down the left mouse button while pointing to a button on the navigation menu, you add submenus that then refer to existing web pages in the same way.
Masterpages
RocketCake also works with so-called master pages. If you create a website with many pages, this technique will speed up the layout considerably. A master page is a formatted model that serves as a template for other pages. So such a master page is not a regular web page. Here’s how to create one: create a new web page, place the dropdown menu, make the menu work as it should, and format this page with no real text content. Then add one from the Toolset Content Placeholder to. The master page will not work without this element. Give this special page a clear name, for example masterpage.html. Then you create one or a few web pages that do not provide you with a layout.
You type text, add an image and save this page. At these pages with content you look at the bottom of the Properties in the field 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 do not see anything yet, but when you press the button Preview 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 can add YouTube videos by selecting the item in the Toolset YouTube video select. Then enter the web address of the video in the Properties. Just as easy is adding a photo gallery. After you Image Gallery selected from the Toolset, select the different photos in the boxes ImageFile1, ImageFile2 and so on. There are several ways to enlarge the photos in the gallery. For example, you can open them in a new window, in a pop-up window, but we like the 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 neatly place everything on the server in the folder that your provider makes available for this. Please enter the ftp address, username and password. Use the option if necessary 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.
.