Hello people! Welcome to this video! I will explain you here how to use the new
Adobe Dreamweaver CC
If you are searching for something in detail, check the index in the video description.
What is
related, such as
other ways, for example
custom page, this program is the right solution. I will show it without going in
detail with the
represent the very basic structure of a website page.
Let's start creating a new website. We will see here just how to use the software
and the first steps to create a very easy page. We will take this page for example.
When you will be more practical, you will make a better page, indeed. This is just
to learn how to use this software. We will put a
website in short, and fix its name; a
a background that covers all, a text description on such background, and, at
the bottom, three columns representing descriptions of articles, that lead on
secondary pages.
First thing to keep in mind, is the difference between
All files and folders in your personal computer, are considered
servers
a
To create a new website page, click on
just this kind, since it is the more complete one than the other types of files.
If you want to start with
of file from
On the right, you can have a nice preview of what you are going to pick.
that the length is blocked, and it's represented through a
need to be adapted, and so with no sizes fixed, you need to go to
helps you creating websites adjusted according to which device is watching the page,
from mobile to Desktop view. Then go to
First of all, a page must have a
remote folders that will contain the files of your website. Go to
In
which is the main folder that will contain all the files of your website related.
You won't need to open this folder manually. Go to
if unchecked. Use this
This window lets you browse in both local and remote folders, through all the files
inside, and in your computer as well.
Go to
Let's describe the basic workspace. You have four buttons in the top left corner.
The
of codes. You will have just this section if your file is a code file. The
lets you work on the page directly without the code. This section can be used only
if the file is not a simple code, just like a website page. The
the code and the design at the same time.
how the website looks like. These sections suggest you how a website is composed.
A website is defined by an
graphic options and links as well.
in graphic visualization, through a browser.
Dreamweaver gives you the chance to organize the HTML code in
are parts of the code managed together. These are described by the
Style Sheets
of each
first.
This structure can be seen on the right. The
your website, such as the
preceeded by an #.
contained in the left Div Tag,
background.
Let's start saving our site. Go to
The file must be saved in your
will appear in the address of the website when browsed.
we can call it
Let's create the
codes are managed together. The
to the same object or file. Go to
Remember this panel, if you want to insert other things.
First of all,
that contains all the website in full,
will have its Div Tag, the text box its one, and so on. In the new window start
creating the
it
create the website without working directly on the code
through the software will be reported on the code. So
without knowing the code into deep
will need to refresh the rendered design, on the other side. Just
View
Then, create the other Div Tags, for each part of the website. Go to the code, and
press Enter
inside
recognise them in the future, give them a name through the
any blank space
Then you need to define the
a placement for each Div Tag. Go to
Create
As you can see
website in progress
go to the
on the plus you see. Go to
Browse...
Import and Link, just select
The CSS attached is shown above. The
website, but the graphic style is defined by the linked CSS file, next to the Source Code.
You can link more CSS files.
Let's now project the CSS file inside. Unfortunately making it needs a lot of
time and practice, since you need to know all the commands and how they work.
We will see just the main important commands, to start up with DWCC. First of
all, you can edit your CSS file in two ways: you can work directly on the code;
or you can use the
Select the CSS file in
You can add and delete each Selector through the
that
So just select a Div Tag, and start editing it through
it is too much small, simply click and drag its edges. The
all the attributes you can add to your Div Tag selected. They are divided in different
parts. You can scroll the full list below, or use the quick icons on top. To see better how
these properties work, let's edit a Div Tag inside the Container. Mind to have
enabled first.
Changing properties is very easy. You can drag on the numbers to change them, or
double-click to type them directly. Click on the measurement unit to change it.
When you need to change the colour, just click on the rectangle. The colour with
a dark diagonal means no colour, so invisible.
The
simply typing inside the box in
colour, font and kind of text or shadow.
The
Normally the box is invisible by default. So simply change the property
border-style
The
contains the Div Tag. This box locates the Div Tag and its content inside. The border
enabled lets you see it directly.
around your site. This is shown through the graphic example. The white area is the
content of the Div Dag. The darker grey one the property interested, in this case the
margin. Click on the centre to set the margin on each side separately.
Padding
container. So it moves its text content inside. Use
box and set its position according to the site's edges.
The
import images to use as backgrounds for Div Tags, but mind that
saved in your Local Root Folder first,
Remember that,
you have
The attributes added through
Once the CSS file is finished, your website will be complete on its design. Meanwhile,
use the
the latest mistaken action, or use
Last thing to see is how to put two boxes one beside another. We can simply use
the
concept of
sets a safe distance between the box and the text content. This means that, if you
add a longer text, you may need to edit your Padding values, refreshing with F5.
Watch out!
Well this is all! I hope this helped you! Check the next videos of this show to know
how to create a website with