We could use the Image element for this, but because we want add some text on top of the image later, we use a Container instead and simply use its background-image property. Great! Next, we want an image directly below the menu. While the menu is selected, in the property window on the left, search for "MaxWidth" entry, and change it "800", so it won't get wider than 800 pixels:Īlso, we want the menu to be centered in the container, so click on the "Center Text" button while the menu is still selected: That way, the website will look nicer on huge resolutions. Put the slider back to the right, and we adjust the layout of the menu a bit: First, we set the menu to have a maximum width of 800. Try it out: See the horizontal slider on the bottom of the page? Move it to the left and back again: With it, you can preview how the page will look like on devices with different screen widths. This is quite useful, because it will then adjust automatically to different screen sizes. By default, the menu will have a width of 100%, spanning the full width of the page. Also, you can change the background color, to make your website look fancier, if you like. Do this, and create the menu items named for example "Company" and "About". You can click it and directly type text into it in order to create some menu items. Select the Navigation Menu element in the toolset on the right, and click into the page. To start, add a Navigation Menu to the page. Also, you can set a background color, gradient, or image if you like. You can enter a Title for your page here (this is the text which usually appears for example in google if it displays your page as a search result) or the default colors for your links. Here, you can quickly change the appearance of the page (or whatever element currently is selected). Take a look at the 'Properties' window on the left. Choose the first entry 'Empty page' to start with a new, empty website. All this is easily doable using RocketCake.Īfter you started the RocketCake program, it will ask you to create a new website from a template. This is done for example by adjusting font sizes, rearranging and hiding elements, and making it easily scrollable on mobiles. Since people are viewing websites with different devices - mobiles, tablets, PCs, notebooks - it has become very important for a website to be easily readable on all the different screen sizes: A responsive website works automatically nicely on the tiny 320圆00 screen of a small smartphone, but also on a full screen 2048x1024 browser of a desktop PC. "Responsive" is just a fancy word for "adjusting to the screen size". If you haven't done this yet, you need to download and install RocketCake. The following page will show you step by step how to create a simple website using RocketCake. Creating a responsive website Creating a responsive website
0 Comments
Leave a Reply. |