Creating Home Page of Tourist Spot Website in Zurb Foundation
In the end of this tutorial, your Home page will look like,
Step 1.1: Creating Layout
In every web page design, the start point is creating the layout. We have already learned it in the CSS Advanced Section. For this section, we will be using the templates provided Here
For the home page I have decided to use "Orbit Home".
After completing the steps of creating layout the website will look like this:
Step 1.1.1: Open the downloaded index.html file in your favorite HTML editor.
Step 1.1.2: Delete Everything between <body></body> tags except codes inside <script> tags, they are required to use foundation framework. Now the <body> element will look like this,
Step 1.1.3: Go to this link: Foundation Templates. And then click Foundation 4 Templates.
The zurb foundation creates 13 pre-defined templates. It creates templates(layouts) using grid without single code of CSS. Each template have two link such as More info and HTML.
Step 1.1.4: In the templates page, click the HTML link of the orbit home template as shown below. If you click HTML link, the HTML code will open in a window.
Step 1.1.5: Copy the code and paste it inside the <body> tags in the HTML editor.
Step 1.1.6: Save the file and open it in your preferred browser, now the layout creation is complete.
Step 1.2: Adding Design Elements
For the home page, we are using element "orbit". It is easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.
The structure of orbit element is,
Step 1.2.1: In the HTML editor, find the below code. This is where we are going to add the orbit element.
<!-- First Band (Slider) -->
<div class="row">
<div class="large-12 columns">
<div id="slider">
<img src="http://placehold.it/1000x400&text=[ img 1 ]" />
</div>
<hr />
</div>
</div>
Step 1.2.2: Delete this line of code from the layout and paste the orbit element code shown in the Step 2.
<div id="slider">
<img src="http://placehold.it/1000x400&text=[ img 1 ]" />
</div>
Type the below code in the place you deleted the above code.
<!-- First Band (Slider) --> <div class="row"> <div class="large-12 columns"> <ul data-orbit> <li><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></li> <li><img src="http://placehold.it/1000x400&text=[ img 2 ]" /></li> <li><img src="http://placehold.it/1000x400&text=[ img 3 ]" /></li> <li><img src="http://placehold.it/1000x400&text=[ img 4 ]" /></li> </ul> <hr /> </div> </div>
Step 1.2.3: Save the file and open it in your favorite browser, the web page now has a working orbit element.
Step 1.3: Editing Design Elements.
The web page now has a working orbit element. But the problem is it stops on mouse hover and is slow in speed. You can change it adding the below property inside <ul data-orbit>
data-options="pause_on_hover:false; timer_speed:2500"
Now the new code is,<!-- First Band (Slider) --> <div class="row"> <div class="large-12 columns"> <ul data-orbit data-options="pause_on_hover:false; timer_speed:2500"> <li><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></li> <li><img src="http://placehold.it/1000x400&text=[ img 2 ]" /></li> <li><img src="http://placehold.it/1000x400&text=[ img 3 ]" /></li> <li><img src="http://placehold.it/1000x400&text=[ img 4 ]" /></li> </ul> <hr /> </div> </div>
In the same way you can edit the properties of the design elements as required. Almost all the time, editing pause_on_hover and timer_speed alone is enough, editing other properties of the orbit element is very rare.
Refer this Link to learn the different kinds of properties which you can edit in the orbit element.
Step 1.4: Adding Content
Creating Home page of the tourist spots website is almost over, adding content is the only thing left.
Step 1.4.1: Change the src attributes of the img tag to point the images you downloaded.
Step 1.4.2: Change the name of the links to Home, Services, About Us, FAQ and Contact Us.
Step 1.4.3: Edit all the default contents like copyright, description, etc., provided in the template.
Step 1.4.4: Save the file and open it in your favorite browser, the home page will now look like,
Creating Home Page by Foundation Framework 5.1
In this section, we say only changes in the above steps.
Instead of Zurb foundation 4 templates, We use zurb foundation 5 templates(step 1.1.3).
