{"id":4582,"date":"2022-05-11T21:14:06","date_gmt":"2022-05-11T21:14:06","guid":{"rendered":"https:\/\/computerscienced.co.uk\/site\/?page_id=4582"},"modified":"2022-05-11T21:28:57","modified_gmt":"2022-05-11T21:28:57","slug":"rocketcake-basics-tutorial","status":"publish","type":"page","link":"https:\/\/computerscienced.co.uk\/site\/rocketcake-basics-tutorial\/","title":{"rendered":"RocketCake basics tutorial"},"content":{"rendered":"\n
\"\"<\/figure>
\n

RocketCake is an excellent, free to download and use WYSIWYG HTML webpage builder. <\/p>\n\n\n\n

It can be downloaded from https:\/\/www.ambiera.com\/rocketcake\/<\/strong><\/a><\/p>\n\n\n\n

In this tutorial we guide you through the basics of how to use RocketCake to create a simple webpage. <\/p>\n<\/div><\/div>\n\n\n\n

\n\n\n\n

Let’s Start!<\/h2>\n\n\n\n
\"\"<\/figure>
\n

When you start RocketCake you are given access to a number of templates to help you start. We will be creating one from scratch so click on the ‘Empty Page’ option on the far left. <\/p>\n<\/div><\/div>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The main interface for RoacketCake is straight forward. On the right we have a menu bar that contains objects that we can drag and drop into our webpage, and on the left, we have a list of the webpages that we have and the properties of our page.<\/p>\n\n\n\n

\n\n\n\n

Adding a Title<\/h2>\n\n\n\n

All website’s have a title or name, so let’s insert a title. My website is going to be called ‘The Alan Turing Fan Page’. From the the right hand menu I’m going to drag the ‘Heading 1’ option into the big white empty webpage.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Select the default text and write your websites header there instead. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

We can adjust the size, colour and alignment of our text using the buttons above the title. I’m going to align my title in the centre of the page and make the title red. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\n\n\n\n

Adding a picture<\/h2>\n\n\n\n

Let’s add a picture of our hero Alan Turing to the webpage. I’ve already downloaded an image of Alan Turing onto my computer from the internet and just want to insert it into the website. <\/p>\n\n\n\n

From the menu on the right, drag the Image option onto the page. A box will pop up asking you to select the image you want to insert. Simply select the image you want and click on the ‘Open’ button. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Ooopppsss! Our image of Alan is a little too large – but it doesn’t matter. Simply click on the image and you will be able to resize it to the size you want. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

That’s much better!<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\n\n\n\n

Adding normal text<\/h2>\n\n\n\n

To type some standard everyday text into our website all we need to do is click on the page and start writing. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

In this example the text has gone to the side of the picture but we can just press return before the text to get the text to go below the picture. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\n\n\n\n

Organising content on the page<\/h2>\n\n\n\n

Our page looks ok, but what I really wanted was for the welcoming text to be to the right hand side of the picture, not below it. How can we do this? We can use containers with columns to store our picture and our text next to each other.<\/p>\n\n\n\n

From the right hand menu, drag the ‘Container with Columns’ option into the webpage. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

You will then get a pop up box asking you how many columns you want. Input 2 into this box and leave the other box as it is. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

You will now see a transparent box below the text that contains 2 columns. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Simply drag the picture of Alan into the left hand box, resize the picture as necessary then select the text, cut it and insert into the right hand box. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\n\n\n\n

Preview our webpage<\/h2>\n\n\n\n

We’ve worked hard to create a webpage – let’s take a look at it in our web browser. <\/p>\n\n\n\n

Simply click on the ‘Preview’ button on the top bar and your website should load in your browser. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Have a go at adding more things into your website or looking at our advanced RocketCake tutorial for some more advanced features of RocketCake. <\/p>\n","protected":false},"excerpt":{"rendered":"

RocketCake is an excellent, free to download and use WYSIWYG HTML webpage builder. It can be downloaded from https:\/\/www.ambiera.com\/rocketcake\/ In…<\/p>\n","protected":false},"author":1,"featured_media":4580,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"disable_featured_image":true,"footnotes":""},"class_list":["post-4582","page","type-page","status-publish","has-post-thumbnail","hentry"],"blog_post_layout_featured_media_urls":{"thumbnail":["https:\/\/computerscienced.co.uk\/site\/wp-content\/uploads\/2022\/05\/undraw_building_websites_i78t-1.svg",150,113,true],"full":["https:\/\/computerscienced.co.uk\/site\/wp-content\/uploads\/2022\/05\/undraw_building_websites_i78t-1.svg",876,661,false]},"categories_names":null,"comments_number":"0","_links":{"self":[{"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages\/4582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/comments?post=4582"}],"version-history":[{"count":4,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages\/4582\/revisions"}],"predecessor-version":[{"id":4605,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages\/4582\/revisions\/4605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/media\/4580"}],"wp:attachment":[{"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/media?parent=4582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}