HTML5 APP Development
Lesson 5 - More Navigation
Outcomes:
-
You will create back buttons,
-
Create quick buttons on each page
Task 1 - Creating you Back Buttons
-
Please watch the first video.
<a href="#" data-rel="back" data-icon="arrow-l" data-iconpos="notext"></a>
This code will add a small round Home icon button in the left hand side of the section you enter it.
If you add it within the Header section before the <h1> tag it will appear in the top left hand corner.
-
Once you have done one, copy and paste on the other pages, execpt Contact Us.
Task 2 - Adding grouped Buttons?
-
Go to this link and research how to create a group of three buttons on Services page - (dont worry about linking them yet).
Videos
Task 3 - Populating the different services information
-
Create a folder in your project folder called "Services".
-
Click Here and download the three services files and save them to your project folder.
-
Now update the <a href> links to these files.
Why are you doing this?
-
As we have been making this mobile site, we have been using anchor points to other sections of the HTML5 code.
-
This methods allows to load live content within the index page from other HTML files. Thus making it more mangeable the more information you put in the site.
Deadlines
Next Lesson:
-
Client Questions
-
Client Interviewed/questionnaire
-
Client Specification
Task 4 - Playing with Buttons & Stuff!
-
Go to this link and THIS ONE research what else you can do to the buttons or what other sort of buttons you canuse and different tranisitions on the links.