top of page
This site was designed with the
.com
website builder. Create your website today.Start Now

Lesson 2 - Creating a basic Theme

Outcomes:

  • You will create your own basic theme

  • You will then link your theme to your app

Starter - Opening your site in DW

 

  • Open your mobile website and re-establish or site.

  • Click on "SITE", then "Create new site".

  • Give the same the name as last lesson and find the folder created last lesson.

  • YOU ARE NOT RECREATING, DREAMWEAVER HAS FORGOTTEN WHAT YOU WERE DOING LAST LESSON, SO YOU AARE JUST TELLING IT WERE YOUR PROJECT IS.

  • Finally, create a new folder within the main website folder you created last lesson and call it "includes".

 

Task 1- Applying default Themes

You are going to start playing with the default theme that JQuery have given you in the CSS file. The following steps will show to apply them.

 

  1. Open the INDEX webpage from last lesson.

  2. Next to id="foo" type data-theme="a", then open FireFox to see what your app looks like.

  3. Now change the data-theme to "b".

 

Notice this changes the colour and theme of the app. JQuery mobile has given 5 different default theme a to e. you can also apply these to different sections too.

 

  1. Add data-theme="c" to the header section next to its id.

 

Now refresh the webpage, and see how it has effected your app. For more information on the default themes, click here.

 

Files

Task 3 - Creating your own themes

 

  • Click Here to open up Jquery's Theme Roller.

  • There is a inspection tab at the top.

    • On - this means you can edit it object i.e. colour etc

    • Off - this means you can interat with the object to see how it looks and works.

  • Now create your own theme, choosing a colour theme for you app.

 

Homework

 

  • You need to:

    • Decide on a team/or if your are going it alone,

    • Find a REAL client (can NOT be a friend)

    • Decide WHO is the group leader.

 

bottom of page