Creating a Media Page

  1. Video - m09-01
  2. Open the media.html page
  3. In Code view, remove the placeholder content 'mainContent'
  4. Press 'Enter/Return' several times to add some space to the page.
  5. Open the snippet window (shift+F9)
  6. Find out code snippet, 'Starting_Code' and press the 'insert' button at the bottom of the snippet panel.
  7. Close the snippet panel.
  8. Change the h2 text from "Gallery"  to "Media"
  9. Save All
  10. Switch to Live view
  11. Use the Live View Scrubber to move to the "medium" or "md" view, 992px to 1199px
  12. With the h2 selected, from Insert / Boostrap Components / Grid Row with column (2), with placement 'after'
  13. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, ''#allMedia'
  14. Save All
  15. In the Property inspector, assign the new div.row to the Div ID 'allMedia'
  16. Video - m09-02
  17. Use the sizing handles to set the width of the left column to 8, and the right column to 4. The left div should have a class of .col-md-8 and right column a class of .col-md-4
  18. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, ''#videoPlayer'
  19. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, ''#audioPlayer'
  20. Using the Property inspector, set the left column to Div ID = 'videoPlayer'
  21. Using the Property inspector, set the right column to Div ID = 'audioPlayer'
  22. Select the #videoPlay div, add a h2, from Insert / Heading / h2, with a placement of nested
  23. Select the #audioPlay div, add a h2, from Insert / Heading / h2, with a placement of nested
  24. Switch to Design view, and change the first h2 to 'Video' and the second h2 to 'Audio'
  25. Save All
  26. Put the cursor after the text 'Audio' and hit 'Enter/Return' to add a new line
  27. Save All
  28. Type: 'Top Five Songs About Pencils', or something similar
  29. Video - m09-03
  30. Open the text_files.txt file from the 'examples' folder, and copy the list of the top five songs if you do not have your own content
  31. Paste the list of songs one-by-one
  32. With your cursor at the end of the last line of text from the top menu Insert select HTML / Horizontal Rule
  33. Highlight the list, then select either the 'ordered list'  or 'unordered list' icon from the Property inspector.
  34. On the next line d type 'Do you remember the sound of a pencil sharpener?'
  35. Add a HTML5 audio player, from top menu Insert / HTML / HTML5 Audio
  36. You will need a mp3 file for the audio player! If you do not have a mp3 file, you can convert the audio from a YouTube video into a mp3 file at the YouTube to mp3 website.
  37. Add a 'audio' folder to the root directory of your website. You audio should be in this folder.
  38. In the Property inspector, click the 'Source' folder, and navigate to the folder with your audio.
  39. Click on the audio tag in the Status bar, and in the Property inspector, type "Your browser does not support HTML5 audio' in the 'Fallback Text' field.
  40. Lets make some changes to the style of the content:.
  41. Save All
  42. Video - m09-04
  43. Switch to Live view
  44. Select the h2 in the div #videoPlayer and add a tab panel: from Insert / Bootstrap Components / Tab for placement use 'after'
  45. Switch to Design view, and change the label 'Tab 1' to 'YouTube' and change 'Tab 2' to 'HTML5'
  46. Switch to Code view
  47. Select the list item, <li> with a class of 'dropdown' and delete this li <li> and all the code inside the <li>, approximately line 78 to 83
  48. Delete the div with Div ID = 'tabDropDownOne1''
  49. Delete the div with Div ID = 'tabDropDownTwo1''
  50. In the Div ID = 'home1', remove the place holder content: '<p>Content in <b>Tab Panel 1</b></p>'
  51. In place of the deleted content, add a responsive video element, from Insert / Bootstrap Components / Responsive Video Embed
  52. Save All
  53. Preview your web page in a browser
  54. Video - m09-05
  55. Replace the first video (YouTube) with a video of your choice from YouTube
  56. In this example, I am using the I, Pencil video on YouTube
  57. On the YouTube page, scroll down to find the 'Share' button
  58. Select the middle option 'Embed'
  59. Click the 'Show More' button, and uncheck "Show suggested videos when the video finishes"
  60. Copy the iframe code, in this case '<iframe width="560" height="315" src="https://www.youtube.com/embed/IYO3tOqDISE?rel=0" frameborder="0" allowfullscreen></iframe>'
  61. In Dreamweaver, in code view, replace the existing <iframe> code with the code copied from YouTube
  62. In the Div ID = 'paneTwo1', remove the place holder content: '<p>Content 2</p>'
  63. In place of the deleted content, add a responsive video element, from Insert / Bootstrap Components / Responsive Video Embed
  64. Delete the second place holder video from the second tab: <iframe class="embed-responsive-item" src="http://tv.adobe.com/embed/1221/24197/"></iframe>
  65. From the top menu Insert / HTML / HTML5 video, or keyboard short cut Ctrl+Alt+Shift+V. This will place this code on the page: <video controls></video>
  66. In the Property inspector, click the 'Source' folder, and navigate to find your video.
  67. If you are prompted to save the video in the root directory of your website, be certain to save the video in the root directory. Create a new folder, 'video' to save your video file. Remove any spaces in the name and replace with '_' underscore, and use all lower case letters.
  68. Click on the video tag in the Status bar, and in the Property inspector, type "Your browser does not support HTML5 video' in the 'Fallback Text' field.
  69. Save All

  70. Optional: Adding Song Links

    1. Video - m09-06
    2. Switch to Live view
    3. Open text_files.txt, and locate the YouTube Links section of text.
    4. Copy the YouTube code for the first song
    5. On the media page, highlight the text for the first song
    6. Paste the link code in the link attribute
    7. Set the target equal to "blank"
    8. Set the title to YouTube - 'Name of First Song'
    9. Repeat steps 72 - 76 for the rest of the five song.
    10.  
  71. In CSS Designer, set the following GLOBAL properties for #videoPlayer: padding-top:10px; paddng-bottom:20px, background-color: (something dark), set the text color to an appropriate color. In the example, text color is white.
  72. In CSS Designer, set the following GLOBAL properties for #audioPlayer: padding-top:10px; paddng-bottom:20px,
  73. Save All
  74. Press F12 to save changes preview in browser
  75. If you ware having problems with uploading media files (audio or video) watch this YouTube video.
  76. Video - m09-07
  77. Switch to Code view
  78. Find the code: <h2>Video</h2>
  79. Add in the font-awesome film icon, <h2><i class="fa fa-film"></i> Video</h2>
  80. Find the code: <h2>Audio</h2>
  81. Add in the font-awesome volume up icon, <h2><i class="fa fa-volume-up"></i> Audio</h2>
  82. Since the font-awesome is inside the <h2> tag, it gets all the properties of the h2 tag, including the size and color.
  83. To add some space, use the selector #allMedia i and choose padding left.
  84. You can find more icons to use on the font awesome icon page. Look at the examples and explore some creative ways to use font-awesome on your website.

Wayne Joness
West Los Angeles College, cs952
Fall