Dreamweaver Tutorial

Simple Dreamweaver Tutorial: How to Create a Website (step-by-step) about:reader?url=https://websitesetup.
org/dreamweaver-tutorial/
websitesetup.org
Simple Dreamweaver Tutorial: How to

Create a Website (step-by-step)
Nick Schäferhoff
23-30 minutes
As you know, this site is all about how to make a website. You can
learn different ways using either WordPress, Joomla or Drupal. We
even have a guide on using pure HTML like in the old days
(obviously with HTML5, the latest version). In this Dreamweaver
tutorial for beginners, you will learn another one.
For those who don’t know, Dreamweaver is an application that lets

you design, code and manage websites. What is interesting about
Dreamweaver is that it offers both the possibility to write code as
well as make a website using a visual interface.
In this Dreamweaver tutorial, you will learn everything you need to

know to start creating websites with Dreamweaver. You will get to
know the program and what it can do, feature highlights and how to
set it up. After that, you will find a step-by-step guide on how to
create a simple website with Dreamweaver, make it mobile friendly
and then upload it to your server.
This will be a long ride. However, you will be amazed at how quickly
you will get into this very intuitive program.
What is Dreamweaver and What Can It Do?
1 of 36 15-11-2018, 10:53
Simple Dreamweaver Tutorial: How to Create a Website (step-by-step) about:reader?url=https://websitesetup.org/dreamweaver-tutorial/
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
colors in order to make the code easier to read and correct.
2 of 36 15-11-2018, 10:53
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.
The best part: if you change anything in your code, Dreamweaver

will automatically display it on the visual side as well. That way, you
can see it without having to upload your files to a server or fire up
the browser.
There are a lot more features and you will see many of them in
action in the upcoming Dreamweaver tutorial for beginners.
Dreamweaver Setup and Overview
As a first step, you need to acquire Dreamweaver from the official

Adobe website. As part of Creative Cloud, it costs $19,99/month on
a yearly plan or $29,99/month with a monthly subscription.
Dreamweaver is also part of their All Apps plan that costs $49,99
per month.
dreamweaver tutorial for beginners pricing
Other plans for businesses, teams, students, teachers and schools

exist. You can get a free trial here or from your Creative Cloud
3 of 36 15-11-2018, 10:53
client.
Download and Install
When you get the program from the official website, just download
the installation file, execute it and follow the instructions.
If you are already using Creative Cloud (as I am), you can simply
click Try inside the client. Then, when the program is done
installing, click Start Trial.
First Startup
When you first start Dreamweaver, you will see this screen.
dreamweaver first startup
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.
4 of 36 15-11-2018, 10:53
Since this is a Dreamweaver beginner tutorial, choose the standard

version. After that, you can pick a color theme for your workspace
from four different options.
The final step is choosing whether to start with a sample file, new or
existing project or watch a tutorial.
5 of 36 15-11-2018, 10:53
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.
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:
6 of 36 15-11-2018, 10:53
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.
Be sure to click on the folder icon on the right where it says Default
7 of 36 15-11-2018, 10:53
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.
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.
8 of 36 15-11-2018, 10:53
fresh project in dreamweaver
This is hat 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 markup that you can build on. Let’s do that now, shall
we?
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
9 of 36 15-11-2018, 10:53
the HTML document.
Simple, right?
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. For
more information on heading tags, read this article.
After that, you can also type in a title for your page. In your real
website, you would choose something descriptive with keywords
10 of 36 15-11-2018, 10:53
and not just Welcome to My Test Website as in the example.
changed header in dreamweaver
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.
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 markup 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.
add css file in dreamweaver
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
11 of 36 15-11-2018, 10:53
style sheets) into the File name field and hit Save.
create style sheet in dreamweaver
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.
style sheet added to website
Awesome possum! 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.
12 of 36 15-11-2018, 10:53
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.
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 markup into
style.css and the program will automatically take care of it.
For the less experienced users, Dreamweaver also makes it really
13 of 36 15-11-2018, 10:53
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.
change font family in dreamweaver
This will give you a number of options for common fonts including
their fallbacks (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:
14 of 36 15-11-2018, 10:53
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 fallback
fonts.
15 of 36 15-11-2018, 10:53
For now, simply hit Done and then click on default fonts again. This
time pick your chosen custom font and voilá – the change is done
including all the necessary coding.
16 of 36 15-11-2018, 10:53
If you click on your style.css file at the top, you will see that all
markup has been added as well.
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.
17 of 36 15-11-2018, 10:53
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:
change css via quick edit in dreamweaver
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.
18 of 36 15-11-2018, 10:53
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
19 of 36 15-11-2018, 10:53
Provided background colors and borders
Created a footer and a copyright message
Here’s the result:
website with advanced design
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. <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">
20 of 36 15-11-2018, 10:53
12. <h1>Welcome to My Test Website</h1>
13. </header>
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">
21 of 36 15-11-2018, 10:53
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>
22 of 36 15-11-2018, 10:53
49. </body>
50. </html>
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;
23 of 36 15-11-2018, 10:53
21. font-size: 17px;
22. }
23.
24. h1, h2, h3, h4, h5 {
25. font-family: karla, sans-serif;
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;
42. font-size: 42px;
24 of 36 15-11-2018, 10:53
44. margin-top: 0px;
46. text-transform: none;
47. }
48.
49. #navigation {
50. margin-right: auto;
51. margin-left: auto;
52. max-width: 1140px;
55. }
56.
57. #navigation a {
58. color: #EB232F;
59. }
60.
61. .main {
62. display: block;
25 of 36 15-11-2018, 10:53
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 {
87. }
88.
89. .main #main-right .form {
26 of 36 15-11-2018, 10:53
90. width: 92%;
93. }
94.
95. #main-right .form div {
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 {
27 of 36 15-11-2018, 10:53
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;
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.
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
28 of 36 15-11-2018, 10:53
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.
29 of 36 15-11-2018, 10:53
A click on one of the browser names will open your website project
in it. 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.
Just be aware, that you need to input your Adobe ID and password
for that. You should have that from signing up for Dreamweaver.
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.
developer tools in browser
They are very similar to what you see in Dreamweaver. They are
more familiar to me so I can work faster with them and just copy
and paste the code into my style sheet.
A look at the phone version shows that there is still a lot of work to
do.
mobile real time preview in dreamweaver
This brings us right to our next point.
10. Add Media Queries
In order to make your website work on all devices, you need to add
a so-called media queries. These are conditional CSS statements
30 of 36 15-11-2018, 10:53
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
31 of 36 15-11-2018, 10:53
code at the bottom.
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.
create media queries in dreamweaver
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.
32 of 36 15-11-2018, 10:53
33 of 36 15-11-2018, 10:53
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.
create media queries via shortcuts in dreamweaver
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.
If you don’t have a server/web host yet, consider choosing the best
web hosting.
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.
remote server configuration in dreamweaver
34 of 36 15-11-2018, 10:53
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.
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!
35 of 36 15-11-2018, 10:53
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.
By now you have a solid understanding of how Dreamweaver

works and how you can use it to make a website. Now it’s up to you
to dive deeper and figure out the next steps.
Don’t forget: Dreamweaver is just one way to make a website.

There are many more and you can find a lot of information on that
right here. Good luck!
Have you used Dreamweaver before? What is your opinion?

Anything to add to the above? Let us know in the comments section
below!
36 of 36 15-11-2018, 10:53

Dreamweaver Tutorial

Uploaded by

Dreamweaver Tutorial

Uploaded by

Simple Dreamweaver Tutorial: How to Create a Website (step-by-step) about:reader?url=https://websitesetup.

Simple Dreamweaver Tutorial: How to

For those who don’t know, Dreamweaver is an application that lets

In this Dreamweaver tutorial, you will learn everything you need to

What is Dreamweaver and What Can It Do?

On the surface, Dreamweaver is an IDE (integrated development

What makes it special is that it is somewhere between a CMS

Create Websites through a Visual Design Interface

This is very useful because it allows you to build the skeleton of a

On the other hand, if you are capable of coding, Dreamweaver has

Works as a Full-fledged Code Editor

The second part of Dreamweaver is a fully featured code editor. It

Syntax highlighting — That means Dreamweaver highlights

Code completion — Code completion works in a similar way as

Code collapsing — Code collapsing is another feature for making

Dreamweaver supports the most important languages for web

The best part: if you change anything in your code, Dreamweaver

Dreamweaver Setup and Overview

As a first step, you need to acquire Dreamweaver from the official

dreamweaver tutorial for beginners pricing

Other plans for businesses, teams, students, teachers and schools

Download and Install

dreamweaver first startup

Since this is a Dreamweaver beginner tutorial, choose the standard

How to Design a Website Using Dreamweaver

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

1. Start a New Site

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

Images folder. Then, go to your newly created site directory, open

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

2. Create Your Homepage File

fresh project in dreamweaver

This is hat we mentioned in the beginning: a live view of what your

the HTML document.

and not just Welcome to My Test Website as in the example.

changed header in dreamweaver

4. Create a CSS File

add css file in dreamweaver

create style sheet in dreamweaver

style sheet added to website

Awesome possum! Now you are ready to change your page’s

5. Create a CSS Selector for the Page Title

To create a CSS selector, click on the line where it says Selectors

Hit enter to create it. Done!

6. Change the Headline Font

For the less experienced users, Dreamweaver also makes it really

change font family in dreamweaver

A click on any of the typefaces marks it for inclusion in

7. Centre the Headline and Change Its Size

When you are done, it will look like this:

change css via quick edit in dreamweaver

Pretty cool, right?

8. Add more Content

Defined default fonts for headings and paragraphs

Added a navigation bar and created a link to the homepage in it

Limited their width to percentages so they can align horizontally

Added a sample heading and dummy text to the left including an

Provided background colors and borders

Created a footer and a copyright message

Here’s the result:

website with advanced design

Code for the Example:

6. <link href="style.css" rel="stylesheet" type="text/css">

11. <header id="header">

12. <h1>Welcome to My Test Website</h1>

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

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.

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>

26. <p>Curabitur vestibulum, lorem a tincidunt dapibus, erat sem