Web Making Tutorial with Dreamweaver

Creating a website is something that can be confusing, especially for beginners. Well, that’s why, we want to provide a web tutorial for those of you who are interested in creating your own website.

This time we will try to learn to make web design using the Adobe Dreamweaver program. This tutorial is primarily intended for beginners. So if you are learning about web tutorials, then this article should be perfect for you.

Maybe you wonder, why should you use Adobe Dreamweaver? Why not any other programs?

Well, this is because there are many advantages to using Adobe Dreamweaver. Adobe Dreamweaver is a software that is used to create web pages easily and can speed up the creation of web views.

Beside that, with Dreamweaver, we can see the web results in this software directly (realtime) without having to open the browser first. This software also supports various programming languages such as PHP, ASP, Visual Basic, Coldfusion and many more.

You can also create websites with premade templates from Dreamweaver. With this premade template, you will go one step further and having the benefit from seeing how the final appearance of the site.

Now, let’s learn about this Dreamweaver web tutorial and learn how to use those templates:

1. Select Template

First step is to select template

• Open “File”, and then select “New”.
• ”Select Starter Template” then “Basic Layouts”.
• Click “Create” to get started.

Dreamweaver has provided various structures and styles needed for your website. So, all you have to do is adjust the content and style according to the website you want. It’s super easy, right?

2. Change the Logo and Title Text

The next step is you have to do is to change the logo and title text. The easiest way to do it is to double click on the logo box in live view and change the text from there. You can do the same for website headers and taglines.

3. Change the Header Background Color

For the next step, you must change the header background color.

Now, to change the background color of the header, you have to:

• Open the .css file and look for the header element. In this case, the element is .hero.
• Look for a line of background color codes, and you will see a certain cryptic number.

That number is actually an HTML color code. Each color has its own number representation.

The thing that makes using Dreamweaver easy is that you don’t need to go anywhere else to find out the color code. All you can do is simply block the number, then double-click it.

After that, select “Quick Edit”.

This step will deinitey bring up a window to choose a color, and you can adjust it from this window.

4. Preview Your Site Through Your Cellular Devices

You might be wondering what’s so important of having a responsive website, right? Well, it’s because, non-responsive website won’t make your visitor visit your website anymore. You don’t want that to happened, right?

One interesting feature for creating a site with Dreamweaver is that you can see a preview on how it will appear on a mobile device instantly. Here’s how to do it:

•  Open “Real Time Preview” at the bottom right of your worksheet.
•  Open the browser on your cellphone and type the URL manually.

Well, I hope this web tutorial tips will help. One thing to remember is, don’t give up easily when learning about web tutorials. Although at first it might be a little confusing, but if you often practice, you will definitely master this web tutorial.