Starting with the , you’ve probably heard about WYSIWYG (What You See Is What You Get) editors. So the temptation to create a website without any coding knowledge might seem appealing to you and has led you to look for a tutorial on the Internet.
And it can be intimidating when you first start Dreamweaver. But you have nothing to worry about, this article will cover everything you need to know about creating a website with Dreamweaver.
What is Adobe Dreamweaver CC?
Adobe Dreamweaver CC is a famous website builder and implementation tool and is considered to be a perfect mix between a WYSIWYG and more conventional ones. Macromedia was the first to develop Dreamweaver, which was later acquired by Adobe Inc., in 2005.
Dreamweaver initially implemented a perpetual license, a one-time payment for using the software, but later switched to a subscription-based model with the Adobe Creative Cloud framework.
Adobe Dreamweaver CC is an Integrated Development Environment (IDE) software, which means that it provides comprehensive tools and support for development purposes. With the Creative Cloud framework, you can choose to include other Adobe creative software to increase your productivity.
Dreamweaver allows you to create and design a website visually, using the drag and drop method that allows you to move elements on the designer board. You can also use it like any traditional code editor: code only with text and you can instantly upload the website to your server.
Plus, you’ll get tons of learning materials and resources, and a dedicated Adobe Community Forum to help answer any questions you have about the product. As if that were not enough, this program is available in 15 different languages. So if you’re looking for a Dreamweaver tutorial, you’ll find plenty of information.
All of these features position Dreamweaver as a hybrid of a pure code editor.
distinguishable characteristics
Being part of the Adobe creative ecosystem has already set Dreamweaver apart from other image-based code editors. Dreamweaver has access to features and benefits that only Adobe could offer. Even so, the two most dominant features of this software are:
Beginner friendly visual interface
Adobe Dreamweaver CC is easy to use, but at the same time difficult to master. Your site will become only as good as your skills. That is to say, although the software offers many web development functions, with basic or limited knowledge you cannot apply these functions to the fullest.
Despite this, beginners can start building a website thanks to this visual editor. There are drag and drop features to insert elements into your project, and you can instantly see any changes you make to the website. A simple Dreamweaver tutorial will help you get started.
It also helps you understand what part of the element you are currently working on. As you can see in the example image below, when you click on the title, it highlights the corresponding code in the editor.
Powerful built-in code editor
Another important aspect of Dreamweaver is the powerful built-in code editor. If professional developers want to code in a text editor, they can. Some of its key features include:
- Syntax highlighting. To help read the code easier, it will highlight different elements like variables, IDs, and others.
- Completion code. Increase your productivity with automatic code insertion. For example, if you simply write img and press the key tab from your keyboard you can insert
- CSS documentation. Whenever you need references for CSS properties, there is a Quick Docs feature that will appear right in the code editor with relevant information.
In addition to that, we can mention other important features:
- Built-in Bootstrap 4. The latest version of HTMLand to develop a responsive website.
- Git Compatibility. Perform all common operations gitincluding Push, Pull, commit Y fetchdirectly from the Dreamweaver control panel.
- Real-time browser preview. You can see in real time the changes in your website while you edit it.
- Creative Cloud Libraries. Access colors, graphics and other creative resources in the database.
- Built-in Chromium Embedded Framework (CEF). To help developers incorporate browsers that can be used in a third-party application.
Nothing is perfect
However, Adobe Dreamweaver CC also has its drawbacks. As we mentioned before, this software is only as good as your skills. So while the live interface helps beginners to create a website, it will probably be some time before you can create a really sophisticated one.
Despite all the information provided, Dreamweaver still has a steep learning curve. You will need to spend a considerable amount of time to fully understand all of its features. So if you’re hoping to read a Dreamweaver tutorial and become a pro, you might be disappointed.
In addition, it is a paid service that is not exactly cheap. So if you are a hobbyist developer, Dreamweaver is probably not the best tool to use.
PRO TIP: If you think Adobe Dreamweaver CC isn’t for you, you’re not alone. In fact, about 33% of websites on the Internet are built with WordPress, and so are you with ease. And if you are a customer this will be even easier, our 1-click install feature will do it for you.
Dreamweaver pricing overview
Being a subscription based software, Dreamweaver offers a variety of individual plans for its users. The prepaid plan to get just Dreamweaver plus 100GB cloud storage, Adobe Portfolio, Fonts Y Spark cost $239.88/year.
And the option to subscribe to all apps, which includes the full collection of more than 20 creative software, including Photoshop CC, Illustrator CC Y Adobe XD CChas a cost of $599.88/year.
Here’s a full view of the plans available to individuals:
You can also try Dreamweaver for seven days on a free trial. Simply download the program and sign in with your email account, or .
Now yes, let’s start with the basic tutorial of Dreamweaver and learn how to create a start page.
Dreamweaver tutorial: Create a website
1. Create a new site
In the Adobe Dreamweaver CC panel, go to Site -> New Site and a new window will appear.
The first step is to name your website and save it to a new folder. This helps organize your files and will make the upload process easier.
If you want to include images on your site, you can do so at Advanced Settings -> Local Info. The images folder should also be created inside your site folder.
click on Save when you finish.
2. Create the home page file
Having reached this point, you will get a blank workspace. But take a look at the top right panel, your site files should be there. Now, we will create the home page file from scratch.
click on File->New and choose New Document. Select HTML as the document type and click Create. Giving the document a title is optional.
You will be taken back to the workspace and you will have a blank page with several lines of HTML code. This is actually the live view of your website. Save that HTML file as index.html and place it in the site folder.
3. Create a header
Let’s create the header for the website. The and the name of your site usually go here.
Click on the white page or choose a specific place within the element in the editor. Go to the top right panel and click Insert. This will give you a list of common HTML elements that you can add to your page.
Find the item header.
Click or drag and drop it into your workspace, and it will be added to your website along with the code.
Next, we’ll turn this into a header with the tag …
. This is done for the purposes of and to let search engines know what your site is about. Mark the text in that section and go to the panel Insert. Find and click Heading: H1.
After this, change the text that appears to the title of your website. It has to be something descriptive and representative. For this example we use “Welcome to the Development Site”.
4. Add a navigation button
To add a navigation button, add a line after the header by pressing Enter. Now go to the panel Insert and look for the element of Navigation. Clicking on it will bring up a new window. Write Navigation in the ID section and click OK.
This will add a navigation element to the editor. Being in the content of the element, look for hyper link on the panel Insert. Click and fill in the details as follows:
Important: the link itself will correspond to the page you will navigate to on your website. In this case, we just use a hashtag to fill the gap.
When you’re done, click okay. Now you have a clickable start button and you have more lines of code added in the editor.
5. Add your website description
Now we will insert a secondary heading, a paragraph and some bullet points as a description.
Add a line after the navigation code and click Header: H2 Y paragraph on the panel Insert. This will add the tags
Y in the editor. Write the content you want to appear.
Now, to add bullets, add another line below the paragraph code. go to dashboard Insert and click on the UnorderedList. This should add the tag
- in the editor. In the meantime, click ListItem on the panel Insert and the tag will be added
inside tag
The thing about HTML lists is that you have to manually add the tags yourself according to the number of bullet points you want to include. In the case of our example it will look like this.
With this you have created the basic structure of the home page. You can also add more content, like forms, videos, images, etc., but that’s a good place to start.
While the page looks a bit plain up to this point, we’re going to add the style sheet to make it look a bit more attractive.
6. Create a CSS file
The is used to style elements in HTML and goes hand in hand with the development of a website. Think of HTML as the structure of the body, and CSS as the aesthetic part that makes the body visually appealing.
Now the first thing you need to do is give your header an ID. Go to the bottom right corner of the Dreamweaver panel and click the panel SUN. You will see a…
Facebook Comments
Disqus