Building a responsive website is a dream of many. However, website development is a complicated process that requires the sound knowledge of coding. Adobe Dreamweaver CC is a platform that allows users to create responsive website from scratch with a simplified coding engine. In this article, we will cover every detail about how to create a website using Dreamweaver.
What is Adobe Dreamweaver CC?
Dreamweaver is a powerful tool that allows users to build a website visually by using drag and drop formula. With the drag and drop method you can move elements into the designer dashboard. Also, users can utilize this tool as any traditional code editor with coding via text that allows instant uploading of the website to your server.
How do you build a website using Dreamweaver?
Follow these easy steps to create a website using Adobe Dreamweaver seamlessly:
Step 1: Build a new site:
Go to your Adobe Dreamweaver CC dashboard, go to “Site” then choose the option “New Site.” A new window will pop up on your screen. Now, you need to select a name for your website and save it in a separate folder. If you wish to add images to your website, go to “Advanced Settings” then select “Local Info”. The image folder will also be created within the site folder. Choose the “Save” option below.
Step 2: Create a Homepage File.
At the top right corner of your blank workspace, you will find your site’s files. Now to create the homepage, go to “File”, choose “New” and then “New Document”. Here goes the series:
File> New> New Document.
Choose HTML as the document type and after that select “Create”. You can assign a title for your document.
Now you will be directed to the workspace where you will find some HTML code written on a white page, displaying the live view of your site. Save the HTML file using “index.html”. Keep it inside the site’s folder.
Step 3: Create a Header.
The Header of the website is basically the logo and the name of your website. Click anywhere on the white page or select a specific place inside the “body” of the editor. Now, navigate to the top right panel and select Insert. Here, you will find the list of common HTML elements for you to add to the page. Look for the “Header” element and drag and drop it to the workspace. The Header will be added to your site with its code.
Turn the Header to a heading using <H1>…</H1>. Mark the text and navigate to the Insert panel. Select the Heading: H1. Now, modify the text to the website’s title into something relevant and descriptive.
Step 4: Add a Home Navigation.
If you want to include a navigation button add a line just after the Header either by clicking return or enter. Go to Insert and select Navigation element. Now a window will appear where you need to type navigation and press OK. A navigation element will be added to the editor.
Step 5: Add the Website Description.
To add a website description, you need to insert a second header, Paragraph, and some bullet points. Add a line right after the navigation code and, select Header: H2and select Paragraph in the Insert panel. Now, the <h2>and <p> tags will be added to the editor. Add your content inside it.
Add another line after the Paragraph to add bullet points. Navigate to the Insert panel and select the option “Unordered List”. The <ul> tag will be added to the editor. Now, if you select List Item in the Insert panel, the <li> tag will be added within the <ul>tag.
Step 6: Create a CSS File.
Cascading Style Sheet or CSS is used to give the website an aesthetic look. You need to give an ID to your Header. Navigate to the bottom-right of the Dreamweaver panel and select DOM. You will find an overview of the structure of your website. Select Header, and your Header will be marked blue with the label and plus sign. Click on the plus sign and write #header. Select return or press enter. On the next menu, click the source: Create a New CSS file.
Now a new window will appear. Select Browse and find your site’s folder. Type this: style.css select Save and then OK.
Now you can see that a new style.css has appeared at the live view along with a new link element added on the code editor. You can repeat the same process for the elements for stylization, saving it the style.css file.
Step 7: Create a CSS Selector for the Title of the Website.
One needs to change the font and align the website title to the center. Mark the H1 from the DOM panel. Select CSS Designer from the above panel. Select the plus sign from behind the Selectors, and as it shows a name like #header h1, select return.
Step 8: Change The Title Font.
First, ensure that the selector point at #header h1. Select Properties and uncheck Show Set, which will unlock these options: Layout, Text, Border, Background, and More.
From this list, select the Text option, go to the font family, and select default font. You will find a lot of options to choose from. Choose the font of your choice by clicking on it. Now, your website’s title font will be changed. Add the code to the Source Code and style.css as well.
Step 9: Align the Title to the Center.
From the Text option, you will find text-align, hover over that option and select center to align the title to the center. As the system makes the necessary changes you will find that the additional code is added to the style.css.