Dreamweaver CC has a dramatic change of the interface versus CS6. In addition to showing you how to use DW, including setting up test servers and file uploads, it provides a decent primer on HTML and CSS. Classroom in a book is fewer pages than its chief competitor The Missing Manual Series. Browse the latest Adobe Dreamweaver tutorials, video tutorials, hands-on projects, and more. Ranging from beginner to advanced, these tutorials provide basics, new features, plus tips and techniques.

Check out the video below, courtesy of Adobe, to take a look at some of the impressive web development tools available in Dreamweaver CC.

What is Dreamweaver CC?

Dreamweaver CC is to design, code, and publish websites and web applications that look amazing on any screen size.

What's it for?

Dreamweaver CC is a web development software that allows you to create and manage dynamic websites easily with adaptive user-friendly coding engine.

Who is it for?

Dreamweaver CC is for anyone who wants to learn to develop websites and web applications. There are hints and visual aids as you work to quickly learn HTML, CSS, and more all while helping you find errors to speed up development.

Adobe's Tutorial Series on Dreamweaver CC:

Adobe has developed a great Dreamweaver for New Users series to help you learn the basics and get introduced to key concepts in web design and development. This series will give you the insight on how to start developing for the web.

Dreamweaver Keyboard Shortcuts:

Dreamweaver CC has an extensive listing of keyboard shortcuts that will help you move faster and complete tasks. Check out these keyboard shortcut cheat sheets for Windows and MacOS.

We are constantly adding to this list with new content to help you get more out of Dreamweaver CC. Check back soon for more updates!

Dreamweaver Cc Session 3 Fill In The Blanks

Video content is an essential part of web page design today. Many people prefer to watch a short video rather than read content, such as learning how to refinish a table. With the evolution of HTML5 video tags, it is much easier to insert video on a page than it was previously. One large advantage of the HTML5 format is that it does not require a plug-in to run a video. Other advantages include compatibility with most browsers and the ability to use a keyboard to control the playback. To insert a video in Dreamweaver, select HTML5 Video on the Insert panel or select HTML, HTML5Video on the Insert menu.

What do I need?

Download: travel_blog.zip

Step 1 of 6

Define a site and open the home page

Download the travel_blog folder, then extract the files.

Create a new website in Dreamweaver called Add Video Tutorial with your new travel_blog folder set as the local site folder.

Open the file index.html from your travel_blog folder. This page was created using the Dreamweaver starter template “Blog post”.

Step 2 of 6

Add a div to serve as a video container

The easiest way to insert and position a video on a page is to place it in a div tag. The div tag can then be assigned a class or ID that can then be used to style and place the video content on the page. The video we are going to add to the index page is a video of playful elephants in an elephant rescue center in Botswana.

Open the index page, then select the last paragraph of text.

Select Insert on the Menu bar, select Div, then select After in the Wrap Tag options.

Or open the DOM panel, select the Click to Add an Element icon next to the selected

element, select Insert After, then press [Enter] (Win) or [Return] (Mac).

The new div tag appears on the page with placeholder content.

Step 3 of 6

Insert a Video

Now that you have the div in place, you can insert the video content inside it.

Select the placeholdercontent in the new div, select the Insert panel to expand or float it, then select HTML5 Video.

Choose Nest from the Wrap Tag options.

A video tag is inserted inside the originally selected div, with the placeholder content for the div to the side of the video placeholder. A controller appears at the bottom of the video placeholder for video playback. You can use the play button to play the video, drag the playhead to advance the video, pause the video, and use the speaker to control the sound volume. There is also a full screen button to enlarge the video to full screen.

With the Video Placeholder selected, select the Browse for File button next to the Source text box in the Property inspector, then browse to find the file elephants.mp4 located in the website assets folder. (If you don’t see the Property inspector, select Window on the Menu bar, then select Properties.)

Step 4 of 6

Edit the Video Height and Width Properties

The video appears in the div now, but is much too large for the page. You can change the Width and Height properties in the Property inspector. The standard aspect ratios for videos are Widescreen(16:9) and Standard(4:3). Setting the width and height of the video will allow you to control the size on the page. Since we are going to use the Widescreen format, we need to enter pixel measurements with a 16:9 relationship. The width must be divisible by 16 and the height must be divisible by 9, with both operations resulting with the same number. A width of 320 is evenly divided by 16 with a result of 20 (320/16 = 20). To find the height, multiply 20 by 9 to arrive at a height of 180. (180/9 = 20) keeps the aspect ratio correct.

Place the insertion point in the W (width) text box on the Property inspector, then enter 320.

Place the insertion point in the H (height) text box on the Property inspector, then enter 180.

The video is now resized to fit on the page. Save your work.

Step 5 of 6

Add Alternate Sources for a Video

To insure that a video will work across all browsers, it is a good idea to add alternate video formats as alternatives for browsers who may not be able to play the original source file format. The three video formats supported by the HTML5

When you supply more than one video file within the

Tip: A quick way to convert a video file format is a free service provided by video.online-convert.com.

With the video placeholder selected, select the Browse for file button next to the Alt Source 1 text box to locate and select the elephants video with the webm file extension.

Add the elephants video with the ogg file extension in the Alt Source 2 text box.

Save your work.

Step 6 of 6

Position the video on the page

Now it’s time to improve the appearance of the video on the page. We’ll start by placing our own text in the div to describe the video.

Dreamweaver Cc Free Download

Double click the placeholder text to enter edit mode, then replace the placeholder text with One of the highlights of the trip! Jabu, Thiembe, and Marula!

Next, we’ll assign a class to the div to add formatting.

Select the Add Class/ID button in the Element Display, type videoDiv for the Class name, press [Enter] (Win) or [return] (Mac), then select blogPostStyle.css for the source.

Dreamweaver Cc 2019

Open the CSS Libraries panel, select blogPostStyle.css in the Sources pane, then select .videoDiv in the Selectors pane.

Uncheck the Show Set checkbox in the Properties pane if necessary, then select the Text button in the Properties pane.

Select a font-family of your choice. I selected the Gotham font-family.

Set the text-align property to center, then select the Layout button in the Properties pane.

Set the layout width to 96%, select the Show Set checkbox to show only the videoDiv set properties, then save your work.

Your page should now look similar to this:

Select the video image, select the Add Class/ID button in the Element Display, type featureVideo for the Class name, press [Enter] (Win) or [return] (Mac), then select blogPostStyle.css for the source.

Select blogPostStyle.css in the CSS Designer Sources pane, then select .featureVideo in the Selectors pane.

Uncheck the Show Set checkbox in the Properties pane if necessary, then select the Layout button in the Properties pane.

Select the block display, then set the right and left margins to auto.

Double-click the sentence under the video to enter Edit Mode, add a line break before the first word and after the first sentence, then save your work.

Your video should look similar to this:

Dreamweaver Cc2017

Here is the finished page:

Summary

This tutorial led you through the steps to insert a video on a web page using the HTML5

Dreamweaver Cc Session 1 Pre-assessment

After you inserted the video, you added code to size the video using the 16:9 aspect ratio. Next, you added two alternate versions of the same video with two different formats. This is advisable in order to provide a file that can be recognized by the most common browsers used today.

Dreamweaver Cc Full Download

Last, you added some formatting to position the video on the page by defining two CSS classes and setting properties for each one.

As you work, it is important to view the work in progress using tools as the Scrubber, the Window size menu, the Visual Media Queries bar, and Device Preview.