Creating a Media Page
-
Video - m09-01
-
Open the media.html page
-
In Code view, remove the placeholder content 'mainContent'
-
Press 'Enter/Return' several times to add some space to the page.
-
Open the snippet window (shift+F9)
-
Find out code snippet, 'Starting_Code' and press the 'insert' button at the bottom of the snippet panel.
-
Close the snippet panel.
-
Change the h2 text from "Gallery" to "Media"
-
Save All
-
Switch to Live view
-
Use the Live View Scrubber to move to the "medium" or "md" view, 992px to 1199px
-
With the h2 selected, from Insert / Boostrap Components / Grid Row with column (2), with placement 'after'
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, ''#allMedia'
-
Save All
-
In the Property inspector, assign the new div.row to the Div ID 'allMedia'
-
Video - m09-02
-
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
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, ''#videoPlayer'
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, ''#audioPlayer'
-
Using the Property inspector, set the left column to Div ID = 'videoPlayer'
-
Using the Property inspector, set the right column to Div ID = 'audioPlayer'
-
Select the #videoPlay div, add a h2, from Insert / Heading / h2, with a placement of nested
-
Select the #audioPlay div, add a h2, from Insert / Heading / h2, with a placement of nested
-
Switch to Design view, and change the first h2 to 'Video' and the second h2 to 'Audio'
-
Save All
-
Put the cursor after the text 'Audio' and hit 'Enter/Return' to add a new line
-
Save All
-
Type: 'Top Five Songs About Pencils', or something similar
-
Video - m09-03
-
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
-
Paste the list of songs one-by-one
-
With your cursor at the end of the last line of text from the top menu Insert select HTML / Horizontal Rule
-
Highlight the list, then select either the 'ordered list' or 'unordered list' icon from the Property inspector.
-
On the next line d type 'Do you remember the sound of a pencil sharpener?'
-
Add a HTML5 audio player, from top menu Insert / HTML / HTML5 Audio
-
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.
-
Add a 'audio' folder to the root directory of your website. You audio should be in this folder.
-
In the Property inspector, click the 'Source' folder, and navigate to the folder with your audio.
-
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.
-
Lets make some changes to the style of the content:.
-
Save All
-
Video - m09-04
-
Switch to Live view
-
Select the h2 in the div #videoPlayer and add a tab panel: from Insert / Bootstrap Components / Tab for placement use 'after'
-
Switch to Design view, and change the label 'Tab 1' to 'YouTube' and change 'Tab 2' to 'HTML5'
-
Switch to Code view
-
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
-
Delete the div with Div ID = 'tabDropDownOne1''
-
Delete the div with Div ID = 'tabDropDownTwo1''
-
In the Div ID = 'home1', remove the place holder content: '<p>Content in <b>Tab Panel 1</b></p>'
-
In place of the deleted content, add a responsive video element, from Insert / Bootstrap Components / Responsive Video Embed
-
Save All
-
Preview your web page in a browser
-
Video - m09-05
-
Replace the first video (YouTube) with a video of your choice from YouTube
-
In this example, I am using the I, Pencil video on YouTube
-
On the YouTube page, scroll down to find the 'Share' button
-
Select the middle option 'Embed'
-
Click the 'Show More' button, and uncheck "Show suggested videos when the video finishes"
-
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>'
-
In Dreamweaver, in code view, replace the existing <iframe> code with the code copied from YouTube
-
In the Div ID = 'paneTwo1', remove the place holder content: '<p>Content 2</p>'
-
In place of the deleted content, add a responsive video element, from Insert / Bootstrap Components / Responsive Video Embed
-
Delete the second place holder video from the second tab: <iframe class="embed-responsive-item" src="http://tv.adobe.com/embed/1221/24197/"></iframe>
-
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>
-
In the Property inspector, click the 'Source' folder, and navigate to find your video.
-
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.
-
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.
-
Save All
-
Optional: Adding Song Links
-
Video - m09-06
-
Switch to Live view
-
Open text_files.txt, and locate the YouTube Links section of text.
-
Copy the YouTube code for the first song
-
On the media page, highlight the text for the first song
-
Paste the link code in the link attribute
-
Set the target equal to "blank"
-
Set the title to YouTube - 'Name of First Song'
-
Repeat steps 72 - 76 for the rest of the five song.
-
-
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.
-
In CSS Designer, set the following GLOBAL properties for #audioPlayer: padding-top:10px; paddng-bottom:20px,
-
Save All
-
Press F12 to save changes preview in browser
-
If you ware having problems with uploading media files (audio or video) watch this YouTube video.
-
Video - m09-07
-
Switch to Code view
-
Find the code: <h2>Video</h2>
-
Add in the font-awesome film icon, <h2><i class="fa fa-film"></i> Video</h2>
-
Find the code: <h2>Audio</h2>
-
Add in the font-awesome volume up icon, <h2><i class="fa fa-volume-up"></i> Audio</h2>
-
Since the font-awesome is inside the <h2> tag, it gets all the properties of the h2 tag, including the size and color.
-
To add some space, use the selector #allMedia i and choose padding left.
-
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