Inserting video in Dreamweaver

advertisement
Inserting video in Dreamweaver
1. Insert tab
a. Div Tag
i. 1st dialog box
1. ID  Body
ii. Hit OK for all other boxes
2. Inside 1st div tag
a. Insert another div tag
i. 1st dialog box
1. ID  VideoWrapper (1 word)
ii. New CSS Rule
1. ID
2. OK
iii. CSS Definition box
1. Click BOX on the left
a. Width = 640
b. Height = auto
c. Uncheck Margins same for all
d. Set left & right to auto
2. Click OK OK
3. Highlight text inside the div tag
4. Click the code tab
5. Go to Intro to web design page
a. Open word document Black History Video
b. Copy the embedding code info
6. Back to Dreamweaver
a. Paste the code where the text is highlighted in the code tab
7. Click on the design tab
a. The video should show like mine
8. Can change size
a. Properties panel at bottom of screen
b. Width and height
c. OR can resize like a picture
9. Add a border to video
a. CSS Panel on the right
b. Double click on videowrapper
c.
d.
e.
f.
g.
h.
Click on border on the left
Make sure that the same for all box is checked
Choice solid
10 px
Choose Color of border
Hit OK
10. Click on the code tab
a. Go to the end of the div tab that we just created
b. Hit the enter button
c. Type in a <p> tag
11. Click the design tab  make sure the insertion point is under the video
12. Insert table
a. 1 Column & 1 row
b. Make the width match the width of your video (640 if you didn’t change it)
c. Down to properties panel and change alignment to center
d. Adjust size to match the border
13. Click inside of table
a. Insert tab
b. Change to Spry
i. Scroll down to Spry collapsible panel
ii. In properties panel  change both opens to closed
iii. Click on the eye on the right to show the panel
14. Go to the Black History Video Word document
a. Copy the Caption info
15. Back to Dreamweaver
a. Paste the info in the bottom box of the collapsible panel
b. In the top box change the word TAB to:
i. Click Here For Video & Copyright Inofrmation
Download