Dear all, welcome to this tutorial on Adobe Dreamweaver, a text editor for
web development since 1997. This is included in the Creative Cloud
subscription and is a great tool for those who work with programming
languages for websites, such as HTML, PHP, XML, and more. Dreamweaver
allows you to edit code quickly, check the result with a live preview and
design and publish your website.
In just 12 minutes we will go over its main features but you may need
to have some basic HTML and CSS knowledge to follow this tutorial.
The first time you open Dreamweaver a dialog box will ask if you are a
beginner or an expert to suggest the best options for you. For example
select the Standard Workspace and set the interface color. You can then
choose how you want to start: you can create a new or pick an existing site
folder, watch any tutorial, or start with a sample file.
The sample file opens on the main interface, showing a live preview on the
top and its code at the bottom. You can edit any part such as any text
heading or the complete path of any image to add it.
When creating your website it is important to set it up correctly. Go to
Site, New Site to select the local folder to store and save your website
files and also define a Site Name to use.
To publish your website pages and files you may upload the local folder
online to a remote server. Go to Servers on the left and click on the plus
button to provide the server name, protocol type, FTP or IP address,
username and password, then click on Save.
With your website set up, it's time to start coding!
To start with a new blank document go to File, New... and select the
language between HTML, CSS, JS, XML, or pick a ready-made template from
Starter Templates.
Select Basic Layout for static HTML pages or Bootstrap if you need a
dynamic CSS file attached, for example Email templates or Responsive
Starters to auto-adapt the page to smartphones and tablets.
To see how to use Dreamweaver, let's start with a new HTML document. Set
the title and version, then go to Create. This starts completely blank with
only its main HTML tags. Make sure to save it with File, Save As... and
name it home.html for your website's homepage.
If you're new to coding you can use ChatGPT to get started. For example you
can ask for a simple contact form in HTML code and then go to Copy code in
the top right corner to copy and paste it into Dreamweaver with CTRL (or
CMD) and V.
Check the result on the live preview on top. If this is not good you can
ask for more corrections. Just make sure to make precise requests to get
exactly what you need. If you start as a beginner you can also ask to
include comments in the code so that you can learn more about how it works.
You can also paste any HTML code into ChatGPT to get a complete description
and explanation on it!
The main interface of Dreamweaver is very user-friendly. The Split view
shows a live visual preview on top and the corresponding HTML code at the
bottom.
Switch to Code view to see only code or to Live view to see only the
preview.
To build your code you can type directly on the live preview, on the code
or also use the Insert panel on the right to add ready-to-use HTML tags,
forms, queries and more.
For example inside the Body tag you can add a heading title by going to
Heading. Select the correct format from the list and the heading tag is
automatically added where the cursor is placed on the code. You can see the
result on the live preview on top. To change its content, just type in.
You can also go to Paragraph to add a text paragraph p tag. Each paragraph
tag starts from a new line, making it easier to read and edit.
To adjust the tag properties you can define attributes by following the
suggestions from Dreamweaver. This helps you avoid punctuation errors and
mistakes without manual checks. For instance, you can change the font color
for any heading tag by using the Color Picker or pasting any hexadecimal
code that you can find on dedicated sites online.
To add any picture go to Image and browse for it. The src attribute defines
where it is located, starting from the local folder path of your website.
You can also adjust the image width and height or its alternative text.
To create a table, click on Table and define the number of rows, its width,
border style, and the header position. From these properties the HTML code
is generated.
Each row is defined with a tr tag, while the header columns with th tags
and each column with td tags. These tags together define each cell in the
table, with used to add an empty space inside. You can type content
within any cell or add other tags, such as heading tags, as needed.
You can also define unordered or ordered lists, that add ul and ol tags
respectively, with single elements within the li tags. Make sure to keep a
correct indentation to better manage your list.
Click on Hyperlink to add links. Just type in the text and add the link
address towards any internet page or any local file, such as another page
of your site.
To add video content, click on HTML5 Video. This automatically adds a
controls attribute to include a video player. You can adjust the video size
width and height attributes and add the source src attribute to browse
for the local video file to playback. Make sure to include a type attribute
to set the video format, in this case .mp4.
You can also edit the code from the live preview on top. Click on any tag
to select it and change its format, hyperlink, or its style. These
modifications are reflected in the code below. You can also edit multiple
tags at once if you select and edit the Body tag.
Make sure to test your code and links in your browser by going to File,
Real Time Preview!
To get help and hints you can right-click on any tag and go to Quick Docs.
This gives you all of the information you need to know about the tag and
how to use it.
To manage your code effectively, you can close or expand any tag content
with the arrows on the left side. You can also right-click on the code and
go to Replace to search and replace words quickly.
To manage your site style you may need to create and attach a CSS file (or
Cascading Style Sheet). For example you can define a Div tag and manage its
style by associating a CSS selector to it, with either a Class or an ID
with a hashtag.
On the live preview select the tag and go to Create a new CSS file on the
right to make a new CSS file with proper name and local path. This will be
automatically attached to your HTML document within the head tag and listed
under the CSS Designer panel on the right, under Sources. This also lists
all the CSS selectors just defined.
Under Properties, you get all the options related to the current CSS
selector, including layout, placement, text properties like color, format,
and style which are applied to all the tags with the current CSS selector.
The CSS file gets updated respectively.
You can also add Class selectors to apply custom styles to selected tags.
For example, you can define a .right class to align text on the right and
apply it on a paragraph tag.
With Dreamweaver you can also attach external CSS files to your document.
Simply place your cursor within the head tag, right-click, and go to Attach
Style Sheet. Browse for the CSS file and use its selectors to apply its
styles where needed.
You can also adjust the Dreamweaver interface by going to File, Page
Properties, changing the font style, color, background color, and more.
When your site files are ready, you can upload them online!
In the Files panel you get your local folder and files and connect to the
remote server or FTP defined on Dreamweaver. At first this server has no
files so simply select your local files and click on Upload to publish
them. Once done, these files are online on any browser.
Thank you very much for watching this video! Make sure to visit our YouTube
channel and our website to learn more about how to make outstanding
websites completely for free!