iwebkit5 In this tutorial we wi! be picking up where we le# off in Part 1.

Size: px

Start display at page:

Download "iwebkit5 In this tutorial we wi! be picking up where we le# off in Part 1."

Lucas Blair
5 years ago
Views:

Step 2 - The Content Ok we are going to start putting the meat and potatoes into our site. That means Titles, text, text boxes, and navigation menus.

Here is what the content div looks like: The beginning of your content div and the end. Now go to the end of line 21 and hit enter. We are going to add a title and text to our page.

1 iwebkit5 In this tutorial we wi! be picking up where we le# off in Part 1. Tools for Mobile Apps Step 1 So far we have made a top bar, added a title to the top bar, a navigation button, and added a picture to our page. Now let s add some text to the body of the page. Step 2 - The Content Ok we are going to start putting the meat and potatoes into our site. That means Titles, text, text boxes, and navigation menus. To do so we will be working inside the content div. Remember you used the content div to add your picture. The content refers to the content of the page you are creating. Here is what the content div looks like: The beginning of your content div and the end. Now go to the end of line 21 and hit enter. We are going to add a title and text to our page. I will outline two different ways to do this. You can choose the one you like or mix and match the styles throughout your site Here we go! Step 3A - The Gray Title with Text Box Most sites will have a title at the top of a block of text. For instance in the news industry its called a headline. The first we can create is a grey title. Here is the code to add a grey title: my Title This is what it will look like. If you want to center the text just add the paragraph code around the code for the title including the code, class= center This is what it would look like: my Title Look it s centered!! 1

Step 3A - The Gray Title with Text Box - Continued Now add your text box by using the following code: <ul class="pageitem"><li class="textbox">text</li></ul> This is the beginning code for a page

Here is what mine looks like with text added. Step 3B - The Blue Title with Text Now I told you there would be two different ways to make our body text.

2 Step 3A - The Gray Title with Text Box - Continued Now add your text box by using the following code: <ul class="pageitem"><li class="textbox">text</li></ul> This is the beginning code for a page item This is code for the text box. This is the text you will add to your page. This is the closing code for the text box. This is the closing code for the page item. Here is what mine looks like with text added. Step 3B - The Blue Title with Text Now I told you there would be two different ways to make our body text. You could make your titles and text look like Step 3A or you can make your text like 3B. Here we go with our second way to make text. You can make a blue title by adding this code to line 22: my Blue Title Here is what mine looks like with blue text added. Once again if you want it centered all you have to do is add around the title code. my Blue Title! 2

work of saving your pictures as thumbnails pays off.

3 Step 3B - The Blue Title with Text - Continued Go to the end of line 22 and hit enter. Now add your text by using the following code to line 23: my text And once again if you want the text centered: My text Step 4 - Make A Navigation Menu This is where the work of saving your pictures as thumbnails pays off. If you haven t placed your pictures in the Framework=>images folder yet place the big pictures there and the thumbnail images in the Framework=>thumbs folder. Next lets add the code to create our navigation buttons starting on line 24 :! <li class="menu">! <a href="page.html"><img alt="description" src="thumbs/image.png" />!! text!! ! </a> </li> Menu start line 24 Link to page and thumbnail image Line 25 Button Text Line 26 Arrow Line 27 Close of the tag Lines 28 & 29 Here is what mine looks like with with the thumbnail and the link to the Album page. Go ahead and change the code to say album.html instead of page.html. Then change your thumbnail link to one of your thumbnails in your thumbs folder. Next change the name of the button from Text to Albums. The really beautiful part is, to add more links to pages, just repeat this bundle of code over and over for each link you need to create. Since this is a 5 page site you will need to make four total links.! 3

Here is what my links look like. Step 5 - Making our new pages. We have completed our first page.

Since we have already done all that work with the first page lets make a copy of it.

Choose Edit and Duplicate or simply chose the file and press Command - D.

html by right clicking on the file and choosing Edit then Rename. Double click on tour.

Lets do something about that. I want you to highlight EVERYTHING from line 21 to line 47. Hit delete.

Then go to line 17 and change Your Artist s Name to Tour Dates. Save. Step 7 - Repeating Pattern.

4 Here is what my links look like. Step 5 - Making our new pages. We have completed our first page. Wow that was easy! Well guess what it is even easier to make our next page. Since we have already done all that work with the first page lets make a copy of it. Go to the Files Tab in the lower right corner of Dreamweaver. Find the index.html file. Right click on it. Choose Edit and Duplicate or simply chose the file and press Command - D. Dreamweaver makes a copy called index - Copy.html. Rename this file tour.html by right clicking on the file and choosing Edit then Rename. Double click on tour.html Step 6 - New from Old. Well look at that it looks just like our last page. Lets do something about that. I want you to highlight EVERYTHING from line 21 to line 47. Hit delete. Save this new page. Lets change the title of the page. Go to line 10 and change the title to Tour Dates. Then go to line 17 and change Your Artist s Name to Tour Dates. Save. Step 7 - Repeating Pattern. Now I want you to repeat the process of duplicating html pages 3 more times. Go to tour.html in the Files tab located in the lower right corner of Dreamweaver. Duplicate tour.html 3 more times just like you did in Step 5. Rename the files you create: merchandise.html albums.html songs.html! 4

5 Step 8 - Modify the pages you just made. Just like in Step 6, I want you double click on each page and change the title of the page. Go to line 10 and change the title to the correct name for that page. Then go to line 17 and make the change there. Save each time you make a change! Step 9 - Linking them up. You probably didn t notice but you have all of your pages open in tabs along the top of Dreamweaver. Click on the index.html tab. Lets go ahead and make the links for all the pages. Do you remember makeing the navigation buttons with thumbnails in Step 4? Well we need to go to each one of these buttons and change the code so our link points to the right page. Don t worry its really easy. All we have to do is change one word per link. Some of you may have done this in Step 4 but if you didn t I ll walk you through it. Go to line 25. Go ahead and change the code to say album.html instead of page.html. Then change your thumbnail link to one of your thumbnails in your thumbs folder. Go to line 26. Change the name of the button from Text to Albums. For each button make the above changes for each of your html pages, merchandise, tour, and songs. Next tutorial wi! show you how to create the content for our different pages.! 5

iwebkit5 Tools for Mobile Apps

In this tutorial we wi! be picking up where we le# off in Part 2. iwebkit5 Tools for Mobile Apps Step 1 Now that we a have our pages created, we need to add content to all of them. In our first tutorial