Dear all, welcome to this video dedicated to Adobe Dreamweaver 2021! In
just 12 minutes we will see everything you need to know to start using it
from a beginner level!
Dreamweaver is one of the most famous editors for web development since
1997 and is part of the Adobe Creative Cloud bundle under a subscription
plan. It is perfect for all users that work with web codes such as HTML,
PHP, XML and more, with the possibility to build your code quickly and
easily with a live preview of your results. In this video we will present
the main features of Dreamweaver, assuming a basic knowledge on
the HTML code.
When you open Dreamweaver you get several options to start coding. From
Quick Start you get several ready templates to use including Bootstrap,
HTML, CSS, Javascript (JS), PHP and XML but you may need to set your
website first with Site Setup.
Dreamweaver works with a local folder, used to store and work with your
files and a remote server that is used to store and show your website pages
online. Define a name for your website page, its local folder to use and
switch to Servers to connect with the remote server or FTP you use to host.
Specify server name, protocol type, FTP or IP server address and port
number. Then include your username and password to connect and apply
with Save.
At this point you can start coding. You can go to Starter Template to find
several ready documents you can start from such as multi-column documents,
simple grids, Bootstrap or email templates and also Responsive models that
adapt to smartphone and tablet screens. For example with Email - Basic you
get a ready HTML code and CSS file you can customize as you like, without
starting from zero. Whereas with Bootstrap - Product you get a ready
website page to present or sell any product with ready HTML document, CSS
file and Javascript all connected together. You can insert your own image
by specifying its complete path on the src attribute or start editing any
heading directly.
To see how to use Dreamweaver let's just start from a new HTML document.
This shows up under Split view, showing both a live graphic
representation on top and your HTML code at the bottom. You can also shift
to Code view to expand the code or to Live view to show just the
live preview.
Now let's see how to build your HTML code with Dreamweaver. You can code on
your own or use the Insert panel on the right to add several HTML tags with
ready format. For example you can insert any title with Heading, selecting
the correct format from the list. This tag will be placed exactly where your
cursor is placed on the code and appears in real time on the live preview.
You can also adjust the header distribution and properties by typing
directly with the options suggested by Dreamweaver, very useful to avoid
errors on punctuation or get immediately the attributes that can be applied
at the moment. Make sure to add indentation with the Tab key.
Add a Paragraph tag to add a text paragraph or the List tags to include an
ordered or unordered list, using List Item to add elements to it. You can
also copy and paste code lines with CTRL (or CMD) and C or V respectively.
You can also edit and manage these tags directly on the live preview,
selecting the tag and changing its general attributes, for example text
format, style or any link. These changes are also implemented in the code
and are always referred to the selected tag only. You can also adjust the
properties of groups of tags through the whole Body tag.
To add any picture you can use the Image tag and browse for the image. The
code will import the image through its local folder path with its original
width and height size. Whereas if you want to add an image that includes
captions you have to add a Figure tag. Inside Figure you import the picture
with the Image tag and on figcaption you include any description for it.
In addition you can add any table with the Table tag defining rows, total
width, border style and headers. The HTML code will be generated according
to these options, showing a tr tag for each table row and a td tag for each
table column, so each cell. By default each table cell includes ' ',
indicating a vacant hard space that you can remove to type in or insert any
other HTML tag. Within the scope attribute you type with the format of the
table header, in this case a simple central alignment.
To add any link click on Hyperlink and define the text and the link address
to use. This way you can import any link toward other HTML documents you
have, such as secondary web pages to browse.
To get a complete preview of your HTML document you can go to File, Real
Time Preview and select the browser you want to use including Firefox,
Chrome, Explor and Edge. This is very useful to check if your page and
your hyperlinks are working fine.
Under the Insert panel you also find the div tag, used to group multiple
HTML elements together. Just make sure to select all the interested
elements first.
Whenever you need any help or refresh you can right-click on any tag and go
to Quick Docs to get a simple and complete description about it and its
function.
To improve your code visibility you can compress or expand any tag content
with the arrows on the left side.
Dreamweaver also includes ready-made codes under the Snippets panel on the
right, including codes to add a simple navigation menu and more.
Now let's see how to create and manage the style of your web page with the
Cascading Style Sheets, or CSS.
When working with any HTML document select any element from the live
preview and click on its plus button. You can associate any CSS selector to
such element, either a Class or an ID preceded by an hashtag. Then go to
Create a new CSS file defining name and location within your local path.
This new CSS file will be included within the Head tag and listed under the
CSS Designer panel under Sources, complete with the full list of selectors
you have defined so far, in this case the ID just assigned to the div tag.
Under Properties you find all the options you can apply to the current CSS
selector. If this selector is applied to tags including textual content you
can search for the Text section to adjust text color, font family, style,
distribution and so on. This new style is indeed applied to all the tags
that are associated to the current #div1 selector, in this case the whole
div tag we have. You can find all these new properties applied directly on
the CSS file associated.
Remember to save your documents often, in order not to lose efforts.
On Dreamweaver you can also apply Class selectors in order to apply your
custom styles on multiple HTML tags. For example you can define a .left
Class selector directly on the CSS to align several tags to the left side
of the HTML page. You can apply this Class selector on tags directly on the
HTML code if you prefer coding.
Whereas if you want to include a CSS file on your own just place the cursor
within the Head tag, right-click and go to Attach Style Sheet. Make sure to
use the correct CSS selector names defined by this new CSS file.
You can go to File, Page Properties... to set several options for your
whole HTML page such as text font, text color and background color,
encoding type, HTML version and so on.
Once your documents and files are ready you can upload or update these on
your remote server online. On the Files panel you get your local folders
with all the single files and documents inside. You can use the first
button on top to establish connection with your remote server or FTP
address specified at the beginning of this video. Then use the upload or
the sync button to either upload and overwrite your documents online or
synchronize the local and remote server to get the latest versions of these
files. Always check if there is any error by looking at the second button
at the bottom.
Once these files are uploaded on your server these get ready online, as you
can check with any browser.
Thank you very much for watching this guide! Make sure to visit our YouTube
channel to get more quick and free guides and develop your new skills!