{"id":15722,"date":"2019-03-04T14:39:44","date_gmt":"2019-03-04T14:39:44","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=15722"},"modified":"2026-10-21T17:39:14","modified_gmt":"2026-10-21T17:39:14","slug":"dreamweaver-tutorial","status":"publish","type":"post","link":"\/tutorials\/dreamweaver-tutorial\/","title":{"rendered":"Dreamweaver tutorial: How to build a website step by step"},"content":{"rendered":"

Adobe Dreamweaver is a website development tool that combines a visual editor with HTML, CSS, and JavaScript code editing. It lets you create and customize web pages, manage website files, and publish your site to a web hosting server.<\/p>

To build a website using Dreamweaver, start by setting up a local site and creating an HTML page. You can then add content, customize its appearance with CSS, or use a ready-made template to speed up development. Once your website is ready, preview it across different screen sizes and upload the files to your hosting server.<\/p>

Dreamweaver is useful for users who want control over their website’s code while benefiting from visual editing tools. However, it requires a paid subscription and some knowledge of web development to make full use of its features.<\/p>

\n\n\n\n\n\n\n<\/p>

How to build a website with Dreamweaver<\/h2>

To build a website from scratch with Dreamweaver, start by setting up a local site and creating your homepage using HTML. Then, add content, customize the layout and styling with CSS, and preview your changes before publishing. This approach gives you full control over your website’s structure and design without relying on a prebuilt template.<\/p>

1. Create a new site<\/h3>

In your Adobe Dreamweaver CC dashboard, go to Site -> New Site<\/strong> and a window will pop up.<\/p>

\n
\"Create<\/figure>\n<\/div>

The first step is to name your website and save it in a single folder. This helps to organize the files and will make the uploading process easier.<\/p>

If you want to include images in your site, you can do so by navigating to Advanced Settings -> Local Info<\/strong>. The images folder should also be created within your site’s folder.<\/p>

\n
\"Creating<\/figure>\n<\/div>

Click Save<\/strong> when you finish.<\/p>

Before adding content to your website, consider its overall structure and layout. Following a clear website design process<\/a> helps you organize pages, plan navigation, and maintain a consistent visual style.<\/p>

2. Create the homepage file<\/h3>

You’ll get a blank workspace to start with. But, take a look at the top-right panel, your site’s files should be there. Now, we will create the homepage file.<\/p>

Go to File -> New<\/strong> and choose New Document<\/strong>. Select HTML as the document type and click Create<\/strong>. Giving a title to the document is optional at this stage.<\/p>

\n
\"Create<\/figure>\n<\/div>

You’ll be directed back to the workspace and will see a white page with several lines of HTML code. Save that HTML file as index.html<\/strong>, and place it within the site’s folder.<\/p>

\n
\"Save<\/figure>\n<\/div>

3. Create a header<\/h3>

We’re going to create the header for the website. This usually consists of the logo and the name of your site.<\/p>

Click on the white page or choose a specific place within the <body><\/strong> element on the editor. Go to the top-right panel and click Insert<\/strong>. This will give you a list of common HTML elements that you can add to your page.<\/p>

Search for the Header<\/strong> element.<\/p>

Click or drag-and-drop it to your workspace, and it will add to your website along with its code.<\/p>

\n
\"Adding<\/figure>\n<\/div>

Next, we’ll turn the header into a heading with <H1>…<\/H1><\/strong> tag. Proper tags are important for SEO<\/a> purposes and to inform the search engine what is your site about. Mark the text in that section and go to the Insert<\/strong> panel. Search and click the Heading: H1<\/strong>.<\/p>

After that, change the text to your website’s title. It has to be something descriptive and representative. Here, we’ll use “Welcome to The Development Site.”<\/p>

\n
\"Adding<\/figure>\n<\/div>

4. Add home navigation<\/h3>

To add a navigation button, add a line after the header by pressing return or enter. Now go to the Insert<\/strong> panel and search for the Navigation<\/strong> element. When you click it, a window will pop up. Write navigation<\/strong> as the ID and click OK<\/strong>.<\/p>

\n
\"Insert<\/figure>\n<\/div>

This will add a navigation element to the editor. While you’re in the element content, look for Hyperlink<\/strong> in the Insert<\/strong> panel. Click it and fill in the details as follow:<\/p>

\n
\"Inserting<\/figure>\n<\/div>

\n\n

\n \n \n \n <\/svg>\n Important\n <\/span>\n

\n Important!<\/strong> The link will correspond with the page you’ll navigate to on your website. Currently, we’re using a hashtag as a placeholder.\n <\/p><\/div>\n\n\n\n<\/p>

When you finish, click OK<\/strong>. Now it is a clickable home link.<\/p>

\n
\"Adding<\/figure>\n<\/div>

5. Add a website description<\/h3>

We’ll insert a secondary header, paragraph, and several bullet points as the description.<\/p>

Add a line after the navigation code and click Header: H2<\/strong> and Paragraph<\/strong> in the Insert<\/strong> panel. It will add the <h2><\/strong> and <p><\/strong> tag on the editor. Put your content in.<\/p>

\n
\"Adding<\/figure>\n<\/div>

To add bullet points, add another line below the paragraph code. Go to the Insert<\/strong> panel and click the Unordered List<\/strong>. It should add the <ul><\/strong> tag on the editor. While you’re at it, click List Item<\/strong> in the<\/strong> Insert panel and it’ll add the <li><\/strong> tag inside the <ul><\/strong> tag.<\/p>

For HTML lists, you have to manually add several tags yourself consistent with the number of your points. Ours will look like this.<\/p>

\n
\"Adding<\/figure>\n<\/div>

You’ve essentially created the basic homepage structure. You can also add more content such as forms, videos, and images, but this is okay for a starter.<\/p>

While it looks dull at the moment, we’re going to add the style sheet to make it more appealing.<\/p>

6. Create a CSS file<\/h3>

The Cascading Style Sheets (CSS)<\/a> language is used to stylize elements in HTML. Think about HTML as the structure of the page, and CSS as the aesthetic part that makes the page content visually appealing.<\/p>

Now, the first thing to do is to give your Header an ID. Go to the bottom-right of the Dreamweaver panel and choose DOM<\/strong> panel. You’ll see an overview of your website’s structure there.<\/p>

Click Header<\/strong>, and you’ll notice it will mark your header in blue, along with the label and the plus sign.<\/p>

\n
\"Marking<\/figure>\n<\/div>

Click the plus sign and type #header<\/strong>. The hashtag means we’re assigning an ID to that element. Press return or enter. In the upcoming menu, select a source: Create a New CSS file<\/strong>.<\/p>

A new window will pop up. Choose Browse<\/strong> and locate your site’s folder. Type style.css<\/strong> and click save<\/strong>. Then, click OK<\/strong>.<\/p>

\n
\"New<\/figure>\n<\/div>

You’ll notice a new style.css<\/strong> appear at the top of the live view and new link element on the code editor.<\/p>

Do the same for all elements that need stylization. This time, instead of creating a new CSS file, save it in the same style.css<\/strong> file that you’ve created earlier.<\/p>

Now, you’re ready to style it using CSS selector.<\/p>

7. Create a CSS selector for the website title<\/h3>

We will change the font and align our website title to center.<\/p>

Mark the H1<\/strong> under your header from the DOM panel. Then, choose CSS Designer<\/strong> from the panel above.<\/p>

\n
\"Marking<\/figure>\n<\/div>

Click the plus sign<\/strong> right behind the Selectors<\/strong>. It will automatically propose a name like #header h1<\/strong>. Hit return.<\/p>

\n\n\n

\n \n \n \n <\/svg>\n Important\n <\/span>\n

\n Important!<\/strong> This means that you’re only targeting the element named h1<\/strong> inside the #header<\/strong> element. This way, the style will only apply to the written text (your website title) and not the header element itself.\n <\/p><\/div>\n\n\n\n<\/p>

8. Change the title font<\/h3>

Make sure the selectors point at #header h1<\/strong>.<\/p>

Click Properties<\/strong> and uncheck the Show Set<\/strong> to unlock the Layout<\/strong>, Text,<\/strong> Border<\/strong>, Background,<\/strong> and More<\/strong> options.<\/p>

\n
\"Unchecking<\/figure>\n<\/div>

Click the Text<\/strong> option and hover over font-family<\/strong> and click on default font<\/strong>. It will give you plenty of options to choose from.<\/p>

\n
\"Several<\/figure>\n<\/div>

Additionally, the Manage Fonts<\/strong> menu will give you another range of options from the Adobe Fonts database.<\/p>

Choose your preferred font by clicking it. Here, we’re using one called Karla<\/strong>. When you finish, it will change your website’s title font and add the necessary code to the Source Code<\/strong> and style.css<\/strong>.<\/p>

\n
\"Applying<\/figure>\n<\/div>

9. Align the title to center<\/h3>

In the Text<\/strong> option, hover over text-align<\/strong> and click center<\/strong>. You’ll notice the change happen and additional code added to the style.css<\/strong>.<\/p>

\n
\"Aligning<\/figure>\n<\/div>

Make all the necessary changes to your website’s content. For this tutorial, we’ve also added more content and styled our site. Here is the final look:<\/p>

\n
\"Our<\/figure>\n<\/div>

How to build a website using a Dreamweaver template<\/h2>

You can also create a website with a premade template in Dreamweaver. With a template, you’ll be one step ahead and get the advantage to see how the final site will look like along with the code that followed.<\/p>

Let’s go through another Dreamweaver tutorial and learn how to use a template:<\/p>

1. Choose the template<\/h3>

To do that, go to File -> New<\/strong>. Choose Starter Templates -> Basic Layouts<\/strong>. We’ll use the single page for this tutorial. Click Create<\/strong>.<\/p>

\n
\"One<\/figure>\n<\/div>

Dreamweaver gives you all the necessary structure and style for your website. All that’s left is to add your content and tweak the style to your needs.<\/p>

\n
\"One<\/figure>\n<\/div>

In this tutorial, we will only do basic changes like editing the website’s title and description, and also change the website’s background color.<\/p>

2. Change the logo and header text<\/h3>

To change the text logo, click the h4 .logo<\/strong> in the DOM<\/strong> panel. It will highlight the code line on the editor, change it to whatever name you want.<\/p>

Alternatively, you can also double click the logo box in the live view and change the text from there. Do the same for website header and tagline. Ours changed to something like this.<\/p>

\n
\"Change<\/figure>\n<\/div>

3. Change the header background color<\/h3>

To change the color of the background, go to the .css<\/strong> file and look for the header element. In this case, it is .hero<\/strong>. Look for the background-color line, and you’ll notice a certain cryptic number.<\/p>

That number is actually the HTML color code<\/a>. Every color has its own number representation that you can check on the official website.<\/p>

The cool thing about Dreamweaver, you don’t have to go somewhere else to figure out the color code. Simply block that number, double-click it, and choose Quick Edit<\/strong>. It will pop up a color picker window, and you can adjust it from there.<\/p>

\n
\"Dreamweaver<\/figure>\n<\/div>

We can change ours to be something like this.<\/p>

\n
\"Change<\/figure>\n<\/div>

Of course, you still have some work to do. There’s content you need to add and styles to adjust. These are just basic changes that you can make to the template.<\/p>

When you finish working on the website, you can then upload it to your server.<\/p>

How to preview your Dreamweaver website on mobile<\/h2>

In the mobile era, having a responsive website is a must. Otherwise, many of your visitors will abandon the website. And one of the cool features in Dreamweaver is that you can preview how your site looks on mobile devices. Here’s how to do so:<\/p>

Go to Real-time Preview<\/strong> at the bottom-right of your workspace. Open a browser on your phone and scan that barcode, or type the URL manually.<\/p>

\n
\"View<\/figure>\n<\/div>

\n\n

\n \n \n \n <\/svg>\n Important\n <\/span>\n

\n Important!<\/strong> To do this, you have to use the same Adobe ID on your Dreamweaver and mobile device. Also using the same WiFi network, and have Javascript and cookies enabled.\n <\/p><\/div>\n\n\n\n<\/p>

Alternatively, you can use the built-in mobile view feature in Dreamweaver. Head over to the Windows Size<\/strong> menu and choose your device option.<\/p>

\n
\"Alternative<\/figure>\n<\/div>

You should be aware that the templates are predominantly made to be mobile-friendly. But, this is not the case if you build your website from scratch.<\/p>

To do that, you have to add media queries in your CSS code and adjust the pixel size and screen percentage accordingly. <\/p>

How to publish a Dreamweaver website<\/h2>

When you finish building a website, you can publish it online from within Dreamweaver. To do so, all you need to is an active web hosting plan<\/a> with an FTP account<\/a> set up.<\/p>

To establish an FTP<\/strong> connection with Dreamweaver, go to Site -> Manage Sites<\/strong>. In the following window, choose the website that you’ve developed, and click the pencil icon at the bottom. A new window will pop up. Go to Servers<\/strong>.<\/p>

1. Create a new FTP connection<\/h3>
\n
\"Manage<\/figure>\n<\/div>

Click the plus<\/strong> icon on the Servers<\/strong> window, and it will display the FTP connection form. You need to fill that out.<\/p>

If you’re on Hostinger, you can find the FTP details on your Hostinger dashboard. Go to your Hosting Account<\/strong> dashboard -> FTP Accounts<\/strong>. If you forgot the password, feel free to change it.<\/p>

\"Hostinger<\/a><\/figure>

2. Fill out the connection details<\/h3>
\n
\"A<\/figure>\n<\/div>

Fill out the form using the FTP Address, Username, and Password you’ve located before. Then click Test<\/strong>. Dreamweaver will tell you if the connection is successful. Don’t forget to click Save<\/strong>.<\/p>

From your Files<\/strong> panel you can now initiate a connection to the server, along with options such as Get<\/strong> and Put<\/strong> and Synchronize<\/strong>.<\/p>

\n
\"The<\/figure>\n<\/div>

What are Dreamweaver’s features and limitations?<\/h2>

Adobe Dreamweaver combines visual website editing with code development tools, making it useful for designing web pages and working directly with HTML, CSS, and JavaScript. Its features help streamline website creation, but the software also has limitations, particularly when it comes to pricing, ease of use, and website maintenance.<\/p>

Key features of Adobe Dreamweaver<\/h3>

Dreamweaver provides several tools for creating, customizing, and managing websites:<\/p>