WEBSITE USING DREAMWEAVER Lorenzo Andreani

Creating a Website Using Dreamweaver

What is Dreamweaver and What Can It Do?

On the surface, Dreamweaver is an IDE (integrated development environment). That means
it’s a piece of software that combines different tools to make web design and development
easier.

What makes it special is that it is somewhere between a CMS (where you control everything
about your website through a visual interface) and a pure code editor. Here’s how the
different parts work.

Create Websites through a Visual Design Interface

The visual design toolbox basically lets you build websites with your mouse. It allows you to
place website elements the way you create a layout in Word. Basically, you see your website
as you would see in a browser but also have the ability to manipulate it.

This is very useful because it allows you to build the skeleton of a website quickly and
without the need to write a single line of code. Instead, Dreamweaver will automatically
create the necessary code for you. That way, theoretically, you can put together an entire
website by hand and upload it to your server. On the other hand, if you are capable of
coding, Dreamweaver has all the necessary tools for that too.

Works as a Full-fledged Code Editor

The second part of Dreamweaver is a fully featured code editor. It comes equipped with all
the standard functions, including:

 Syntax highlighting — That means Dreamweaver highlights different elements

(such as operators, variables, etc.) in different colours in order to make the code
easier to read and correct.
 Code completion — Code completion works in a similar way as autocomplete on
your phone. Start typing and the editor will make suggestions for what you are trying
to write. That way, you don’t have to type everything out completely.
 Code collapsing — Code collapsing is another feature for making code easier to
read. It allows you to visually shrink parts of your code when you don’t need them.
That way, you don’t have to scroll through the entire file but can only deal with the
parts you need to work on.

Dreamweaver supports the most important languages for web design (HTML5,
CSS, JavaScript, PHP) and a lot more.

WAES – Westminster Adult Education Service 1

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

First Start-up

When you first start Dreamweaver, you will see this screen.

If you have never used the program before, choose No, I’m new. When you do,
Dreamweaver leads you through a setup wizard. The first step is to choose whether to use
the workspace for developers or a standard workspace.

Since this is a Dreamweaver beginner tutorial, choose the standard version. After that, you
can pick a colour theme for your workspace from four different options.

WAES – Westminster Adult Education Service 2

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

The final step is choosing whether to start with a sample file, new or existing project or watch
a tutorial.

Choose to start with a new or existing folder and you are done with the setup process.
Good job! Now let’s start a project and learn how to create a website with Dreamweaver.

WAES – Westminster Adult Education Service 3

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

How to Design a Website Using Dreamweaver

Now we are getting to the heart of this Dreamweaver tutorial.

1. Start a New Site

The first step is to create a new site. For that, go to Site > New Site. It will get you to this
screen:

The first step is to give your site a name. Then, you need to choose where to save it. This is
up to you, but it usually makes sense to keep all projects in one place for the simplicity.

You also have the possibility to associate your new project with a Git repository. This can be
a good idea since it gives you version control but you can skip it for now.

We will deal with everything under Servers on the left side later. Same with CSS
Preprocessors, which is only important when you use that kind of thing.

What is important to us is Local Info under Advanced Settings.

WAES – Westminster Adult Education Service 4

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

Be sure to click on the folder icon on the right where it says Default Images folder. Then, go
to your newly created site directory, open it, create a new folder called images and select
that as your default folder. That way, Dreamweaver will save images associated with your
site automatically there.

That’s it for now, click Save to go back to your workspace.

2. Create Your Homepage File

Now that you have created a project site, it’s time for the first file. We will start with the
homepage.

If Dreamweaver doesn’t offer you the option itself, go to File > New. You can either create a
completely new file or use an existing template. The program comes with a few of those
(see Starter Templates). Right now, we will create a new one instead.

WAES – Westminster Adult Education Service 5

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

HTML is set by default and you can leave that as is. For document title, input index.html and
choose Create. This will get you on the following screen.

This is what we mentioned in the beginning: a live view of what your site looks like (blank, at
the moment) and the code behind it. You will also notice that Dreamweaver has
automatically created some basic HTML mark-up that you can build on. Let’s do that now,
shall we?

WAES – Westminster Adult Education Service 6

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

3. Create a Header

To insert an element into the page, you first need to choose its location. Either click on the
empty page (Dreamweaver will automatically choose the <body> element if you do) or place
the cursor in the same element in the code portion of the screen.

After that, you need to go to the Insert tab in the upper right corner. This gives you a list of
common HTML and site elements that you can add to your page. Scroll down until you can
see Header as an option.

A simple click inserts it into the page. You also see it appear inside the HTML document.

WAES – Westminster Adult Education Service 7

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

Now you will change the text inside the header and also turn it into a heading. For both – first
mark the text in the code editor at the bottom.

After that, go back to Insert, click on the arrow next to Heading and choose H1. This wraps
the page title into an H1 HTML tag.

After that, you can also type in a title for your page. In your real website, you would choose
something descriptive with keywords and not just Welcome to My Test Website as in the
example.

Alright, you have just created a page header! At the moment it still looks a little crude, so
let’s change that via CSS next.

WAES – Westminster Adult Education Service 8

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

4. Create a CSS File

In case you are not familiar with it, CSS is the part that provides all the styling on a web
page. It allows you to define colours, dimensions of elements, font types and sizes and a hell
lot more. We want to use the mark-up to spruce up our page title and also learn how to
change CSS in Dreamweaver.

Theoretically, you can add CSS right inside the HTML document. There is a lot less elegant
option that what we will do, which is creating a dedicated file for all the CSS styling of the
entire site.

The first step is to give your new header a CSS class or id. During that process,
Dreamweaver will also prompt you to create a style sheet file. Go to the DOM menu in the
lower right part of the screen that lists your entire site structure. Make sure your header is
selected.

In the live view, you will now see it marked in blue with a little label and a plus sign at the
bottom.

Click the plus sign and type in #header in the field that open. The hashtag means you are
assigning an id as opposed to a class. Press enter. In the opening menu, instead of Define
in page select Create new CSS file. In the popup, choose Browse and navigate to your site
folder. Then type style.css (which is the standard name for style sheets) into the File
name field and hit Save.

WAES – Westminster Adult Education Service 9

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

When you now select Ok, a new file will appear at the top of your live view. You can view and
edit it from there. It will also be linked to the <head> section of the HTML part of your page.

Now you are ready to change your page’s styling.

5. Create a CSS Selector for the Page Title

The first thing you want to do is to change the font of your heading and also centre it. For
that, you first need to create a new CSS selector. A selector is the name of an element on
our page that you can assign properties to, e.g colour, size, and more.

Mark your H1 heading in the DOM view on the lower right (like you did with the header
before). Then, above that, choose CSS Designer.

WAES – Westminster Adult Education Service 10

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

To create a CSS selector, click on the line where it says Selectors and then click on the plus
symbol. This should automatically propose a selector to you named #header h1.

Hit enter to create it. Done!

Quick note: for all those new to CSS, this selector means that you are targeting the element
named h1 inside the element called #header. That way, whatever you input as CSS is only
applied to the written text only and not the header element overall.

WAES – Westminster Adult Education Service 11

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

6. Change the Headline Font

Now that you have a selector, you can assign properties to it. If you know your way around
CSS, you can simply type mark-up into style.css and the program will automatically take
care of it.

For the less experienced users, Dreamweaver also makes it really easy. Stay in the CSS
Designer menu and uncheck the box where it says Show Set. When you do, it will unlock a
lot of additional options.

With the new buttons, you can choose many CSS properties from the areas of layout, text,
border and background. The More button gives you options to input your own rules.

To change the font type, click on the Text option at the top (alternatively, scroll down). In the
upcoming options, hover over font-family and click on default font.

WAES – Westminster Adult Education Service 12

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

This will give you a number of options for common fonts including their fall-backs (in case
the user browser is unable to show the primary font). You may want to click on Manage
Fonts at the bottom to get to this menu:

Here, you are able to choose free fonts from Adobe’s Edge Web Fonts service. Either
search for a font by name or use the many filter options on the left to narrow down your
choices until you find something.

A click on any of the typefaces marks it for inclusion in Dreamweaver. Once you have done
so, you can either use them directly or go to Custom Font Stacks to define your own fall-
back fonts.

WAES – Westminster Adult Education Service 13

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

For now, simply hit Done and then click on default fonts again.

If you click on your style.css file at the top, you will see that all mark-up has been added.

WAES – Westminster Adult Education Service 14

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

7. Centre the Headline and Change Its Size

The text could still look better. The next task is to centre it and increase the font size. For
that, you can also use another feature called Quick Edit.

To use it, go to the code view and right click the part you want to edit. In this case, it’s on
the <h1> bracket.

WAES – Westminster Adult Education Service 15

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

Here, choose Quick Edit at the top. This will open the CSS associated with this element
below it. Now you can input additional properties without having to search the entire style
sheet file (which can be very long). In order to centre the text and make it larger, add the
following code to it.

1. font-size: 42px;
2. text-align: center;
When typing, Dreamweaver will also make proposals for what you are trying to input, making
it even easier. That’s the code completion feature mentioned earlier.

When you are done, it will look like this:

Note that the text has already changed in the live view. Now, press Esc to leave quick edit
and head over to the style sheet. You will find that the new CSS has been added in the
appropriate place.

Pretty cool, right?

By the way, if you are ever unsure about what a CSS property means, simply right-click it
and choose Quick Docs (or press Ctrl+K). Dreamweaver will then give you an explanation.

WAES – Westminster Adult Education Service 16

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

8. Add more Content

With what you have learned so far, you can now build a rudimentary site. For the sake of this
Dreamweaver tutorial, I have done the following:

 Defined default fonts for headings and paragraphs

 Added a navigation bar and created a link to the homepage in it
 Added a div box for content with two more boxes inside
 Moved one of them left and one right with the float property
 Limited their width to percentages so they can align horizontally
 Added a sample heading and dummy text to the left including an unordered list
 Created a form (use the drop-down menu under Insert), two text fields and a submit
button
 Added spacing around the elements via CSS margins and padding
 Provided background colours and borders
 Created a footer and a copyright message

WAES – Westminster Adult Education Service 17

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

Here’s the result:

Code for the Example:

Since this is a bit advanced and not everybody will know how to do it, you can find the HTML
and CSS below so you can reconstruct it for yourself. First the HTML:

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>index.html</title>
6. <link href="style.css" rel="stylesheet" type="text/css">
7. <!--The following script tag downloads a font from the Adobe Edge Web Fonts server
for use within the web page. We recommend that you do not modify it.--><script>var
__adobewebfontsappname__="dreamweaver"</script><script
src="http://use.edgefonts.net/aguafina-
script:n4:default;muli:n3:default;karla:n4:default.js" type="text/javascript"></script>
8. </head>
9.
10. <body>
11. <header id="header">
12. <h1>Welcome to My Test Website</h1>
13. </header>

WAES – Westminster Adult Education Service 18

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

14. <nav id="navigation"><a href="index.html" title="Back to

homepage">Home</a></nav>
15. <main class="main">
16. <div id="main-left">
17. <h2>Sample Heading for Main Content</h2>
18. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque
id est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit.
</p>
19. <ul>
20. <li>Etiam tempus urna condimentum libero varius</li>
21. <li>Ut commodo risus finibus</li>
22. <li>Duis odio lacus, elementum eget sem finibus</li>
23. <li>Mollis dignissim enim.</li>
24. <li>Quisque molestie suscipit odio vel facilisis</li>
25. </ul>
26. <p>Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non
dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur
turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in,
facilisis nisl.</p>
27. </div>
28. <div id="main-right">
29. <div class="cta">
30. <h3>Sample Call to Action!</h3>
31. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque
id est sit amet ornare. Suspendisse eget elit mi.</p>
32. </div>
33. <form method="post" name="form1" class="form">
34. <div>
35. <label for="textfield2" class="label">Name:</label>
36. <input name="textfield" type="text" class="textfield">
37. </div>
38. <div>
39. <label for="textfield3" class="label">Email:</label>
40. <input name="textfield" type="text" class="textfield">
41. </div>
42. <input type="button" name="button" id="button" value="Subscribe now!">
43. </form>
44. </div>
45. </main>
46. <footer class="footer">
47. <p>Copyright © 2017 My Imaginary Website</p>
48. </footer>
49. </body>
50. </html>

WAES – Westminster Adult Education Service 19

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

And then the CSS:

1. @charset "utf-8";
2.
3. body {
4. background-color: #F5F5F5;
5. margin-top: 0px;
6. margin-right: 0px;
7. margin-bottom: 0px;
8. margin-left: 0px;
9. }
10.
11. p,
12. a,
13. ul,
14. ol,
15. li,
16. label,
17. input{
18. font-family: muli, sans-serif;
19. font-style: normal;
20. font-weight: 300;
21. font-size: 17px;
22. }
23.
24. h1, h2, h3, h4, h5 {
25. font-family: karla, sans-serif;
26. font-style: normal;
27. font-weight: 400;
28. text-transform: uppercase;
29. }
30.
31. #header {
32. padding-top: 25px;
33. padding-bottom: 25px;
34. background-color: #FFFFFF;
35. border-bottom: 4px solid #EB232F;
36. }
37.
38. #header h1 {
39. font-family: aguafina-script;
40. font-style: normal;
41. font-weight: 400;
42. font-size: 42px;

WAES – Westminster Adult Education Service 20

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

43. text-align: center;

44. margin-top: 0px;
45. margin-bottom: 0px;
46. text-transform: none;
47. }
48.
49. #navigation {
50. margin-right: auto;
51. margin-left: auto;
52. max-width: 1140px;
53. margin-top: 10px;
54. margin-bottom: 10px;
55. }
56.
57. #navigation a {
58. color: #EB232F;
59. }
60.
61. .main {
62. display: block;
63. margin-top: 15px;
64. margin-right: auto;
65. margin-left: auto;
66. margin-bottom: 15px;
67. clear: both;
68. overflow: auto;
69. max-width: 1140px;
70. }
71.
72. .main #main-right {
73. float: right;
74. width: 37.5%;
75. display: block;
76. }
77.
78. .main #main-left {
79. float: left;
80. width: 57%;
81. display: block;
82. padding-right: 20px;
83. }
84.
85. .main #main-right .cta {
86. text-align: center;
87. }
88.
89. .main #main-right .form {
90. width: 92%;
WAES – Westminster Adult Education Service 21
 WEBSITE USING DREAMWEAVER Lorenzo Andreani

91. margin-right: auto;

92. margin-left: auto;
93. }
94.
95. #main-right .form div {
96. margin-bottom: 10px;
97. }
98.
99. #main-right .form .label {
100.
101. }
102.
103. #main-right .form .textfield {
104. width: 100%;
105.
106. }
107.
108. .main #main-right #button {
109. text-align: center;
110. padding-top: 7px;
111. padding-bottom: 7px;
112. margin-left: auto;
113. margin-right: auto;
114. position: relative;
115. display: block;
116. padding-right: 36px;
117. padding-left: 36px;
118. border: none;
119. background-color: #EB232F;
120. color: #FFFFFF;
121. cursor: pointer;
122. }
123.
124. .footer {
125. display: block;
126. padding-top: 25px;
127. padding-bottom: 25px;
128. text-align: center;
129. }

I want to use this as an example to show you the next steps. Even if it seems complicated, I
put this together the same way I showed you before.

WAES – Westminster Adult Education Service 22

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

9. Preview in Browser and on Mobile Device

How did I do all of this? Well, first of all, I am a bit more experience at building websites than
you probably are. Therefore, I already have the steps in my mind on how to create a proper
web page.

Secondly, I am using a very useful feature that helps me speed up the process: Browser
preview. Dreamweaver allows you to view your web pages in real time in a browser and
even on mobile devices.

To get started, click the real-time preview button in the lower right corner.

This will open the preview options.

A click on one of the browser names will open your website project in it.

WAES – Westminster Adult Education Service 23

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

You can also scan the QR code with your phone or tablet (for example with Firefox
Quantum) or type the displayed address into your browser to start the live preview on your
device. The best part: Any changes you make in Dreamweaver will automatically show up in
the browser at the same time you make them.

How did this help me put together site faster? First of all, depending on the size of your
screen, the display in the browser might be closer to the original than what you see in
Dreamweaver. Secondly, checking the site in the browser allows me to use the developer
tools to test changes.

A look at the phone version shows that there is still a lot of work to do.

WAES – Westminster Adult Education Service 24

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

10. Add Media Queries

In order to make your website work on all devices, you need to add a so-called media query.
These are conditional CSS statements that tell browsers to apply styling only above or below
certain screens sizes or on particular devices. That way, you can change the layout on
smaller screens.

So far, you have only defined global styles. That means the styles that are applied to the
entire site. Now you will learn how to add conditional styles for smaller screens.

First, go to CSS Designer. Make sure that the file you want to add code to is selected
under Sources. Hit the plus sign under @media.

It gives you this options panel:

You can define conditions for media queries e.g the devices they apply to, orientation,
resolution and much more. You can also add multiple conditions with the plus sign.

What’s more important for our example is the max-width setting. With that, you are able to
define custom CSS that will only apply to a certain max screen size.

Let’s say you want to fix things on the phone first, so you type in a max-width of 375 pixels.
When you do, you can see the CSS code at the bottom.

WAES – Westminster Adult Education Service 25

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

What’s also going to happen when you click Ok is that a green line appears at the top of the
screen. This visually represents the media query. Click it and the screen automatically jumps
to that size.

11. Add Conditional CSS

To correct the design for mobile, the first thing we need to do is eliminating the code that
makes the two elements on the site arrange themselves next to one another. There clearly
isn’t enough space for that.

You can do this the same way you manipulated CSS before, only this time you have a media
query activated while you do so.

First of all – navigate to the element in your DOM view. From there create a new CSS
selector for it. Then, set its width to auto, float to none (to stop it from going left) and add
some padding to the sides so that the content doesn’t border on the edge of the screen.

WAES – Westminster Adult Education Service 26

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

Looks much better, doesn’t it? In the same way, you can change the CSS of all other
elements on the page to make them all look right.

That’s basically it for media queries. You can use the same method to adjust the layout to
tablets and other sizes.

Pro tip: Don’t optimize for certain devices and their sizes, instead create media queries
depending on the layout. That means playing with the screen size and adding queries at
those points when the layout doesn’t look good anymore.

One more thing: You can also create media queries a little more easily by using the pre-set
device sizes in the bottom corner and clicking on the plus symbol on top when you have
found a point where you want to add one.

WAES – Westminster Adult Education Service 27

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

12. Upload your site to the server

Once you are done with the design part, you are pretty much ready to upload the site to your
server. As mentioned at the very beginning, Dreamweaver also makes this very easy.

First, go to Site > Manage Sites. Select your current website from the menu and
choose Edit at the bottom left. In the following window, click on Servers.

Input all important data to connect to your FTP server. The name is up to you, the rest (FTP
address, username, password) comes from your hosting provider. Don’t forget to specify
which directory to place the files in and the web address of your live site! The last part is
important so that Dreamweaver can create site-relative internal links.

Under Advanced you have some more options (whether to upload files automatically upon
save). You can usually keep things as they are. Hit Save twice and you are done.

WAES – Westminster Adult Education Service 28

 WEBSITE USING DREAMWEAVER Lorenzo Andreani

Now go to the Files panel (either on the upper right side or via Window > Files) and click on
the furthest left symbol to connect to your server:

Once the connection is established, select the files you want to upload and click the upward-
pointing arrow to do so. Once its done, your site should be available from your web address.

Well done! You just built and uploaded a simple site with Dreamweaver!

Dreamweaver Tutorial – Final Words

Dreamweaver is a fantastic program to build websites. It combines an intuitive user interface

with a full-fledged code editor. Through this mix, it makes it easy for beginners,
intermediates and advanced users alike to build high-quality websites.

In this Dreamweaver tutorial for beginners, we have introduced you to Dreamweaver and its
capabilities. We have shown you how to set up the program and get started with your first
site. You have learned how to create a basic HTML structure and style it with CSS. We also
went over how to make a website mobile responsive and upload it onto your server.

WAES – Westminster Adult Education Service 29