12 Now you should have 3 tabs open that all look the same and even the title

12 now you should have 3 tabs open that all look the

This preview shows page 17 - 22 out of 31 pages.

12. Now you should have 3 tabs open that all look the same and even the title text shown on the tab is the same because we duplicated the original file twice to make these other files. Look at the very top of the BlueGriffon window to see
Image of page 17

Subscribe to view the full document.

18 which file you are currently looking at. 13. Click into the tab for contact.html (as shown at the top). 14. In the top toolbar, click Format > Page Properties. 15. In the Page Properties pop-up window, you will see the current Title says "Bob's Bakery - Home". Change the ending to Contact instead of Home. 16. Push File > Save. 17. Now click the tab for the products.html page. Follow these steps to change the page title to "Bob's Bakery - Products". 18. Push File > Save. 19. The tabs should now be different from one another and the page name at the end of each title property should match the filename shown in the top of the window.
Image of page 18
19 20. Go into the Contact page tab. Click just above the slogan "Providing…" and hit Enter twice. Between the banner image and that slogan, type the word "Contact". Highlight this word now and change the formatting to Heading 1. 21. Repeat this step in the Products page but type "Products" as the header. 22. Repeat this step in the Home page but type "Welcome!" as the header. 23. Save all 3 files again. Internal links Now we are going to make the pages have a menu bar with working links so that we can navigate between the 3 pages. 24. Go to the Home page (index.html) in BlueGriffon. 25. Click on the right of the banner and hit Enter. 26. On this new line, type the text: "Home | Products | Contact" (note: the | symbol is on the keyboard near the Enter button and you have to hold Shift to get the vertical line rather than the slash) 27. Highlight the word "Home".
Image of page 19

Subscribe to view the full document.

20 28. At the top, click Insert > Link. 29. In the Links pop-up window, the Target textbox is where you will set the path of the link. Click the little folder icon beside this textbox. 30. Make sure this browse window is pointing to lab04/act3 . Click on index.html and push Open to set this file as the link Target. 31. Just like you saw when inserting images, the Target path is long and will only work if we are on this particular machine (it would not work if we uploaded this
Image of page 20
21 webpage). Check the "relative URL" checkbox to make this path relative. 32. Push OK. 33. Highlight the word Products. Click Insert > Link and set the Target path to products.html as a relative path. 34. Highlight the word Contact. Insert a link and set the Target path to contact.html as a relative path. 35. Click File > Save. 36. Highlight this entire row that includes all 3 links. Hit Ctrl+C to copy (NOT cut) it. 37. Go into the Products page tab. Click on the right of the banner and hit Enter to make sure you get to a blank line after the banner. 38. Hit Ctrl+V to paste the row of links into this page in the same spot. 39. Click File > Save. 40. Repeat the same steps in the Contact page so that all 3 pages have the same row of links in the same exact spot as one another.
Image of page 21

Subscribe to view the full document.

Image of page 22
  • Fall '13
  • Computer file, File manager, BlueGriffon

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Ask Expert Tutors You can ask 0 bonus questions You can ask 0 questions (0 expire soon) You can ask 0 questions (will expire )
Answers in as fast as 15 minutes