- Getting Started with Dreamweaver CS5
- Part 1: Defining a Site
- Part 2: Creating an HTML Page
- Part 3: Adding and Formatting Text
- Part 4: Creating a Text Link
- Part 5: Previewing a Webpage in a Browser
- Part 6: Inserting an Image
Before we end this tutorial series on Dreamweaver CS5, let's take another look at the first file that we created. In the Files panel, make sure that your Learning Dreamweaver site is selected, and then double-click on the index.html file to open it.
Once it's open, click on the Split button in the Document window to switch to the Split view. This view shows us both the Code view and the Design view at the same time.
On the right side we have the Design view, which shows the elements of the webpage as you would normally see them in a browser (although it's still best to preview your document in a browser as some things will appear differently in the Design view).
On the left side we have the Code view, which also shows us the elements of our web page, but shows it to us in the form of HTML code. HTML code is made up of the instructions that tell the browser how to display the contents of a web page. It uses what you call HTML tags to classify elements so that the browser knows how to display them. These tags are always there, even if we're not aware of it. While we create things in the Design view, Dreamweaver is quietly adding them for us.
Without going into too much detail, here are some of the most commonly used HTML tags. Try to see if you can spot them in the HTML documents that we've created thus far.
Some commonly used HTML tags:
- h1 - used to define a first heading
- p - used to define a paragraph
- a - used to define a link
- img - used to define an image
But even though Dreamweaver lets you create web pages without having to type in the HTML code yourself, it's still important that you learn the basics of HTML, because HTML is the foundation of every web page. No matter what tool you use to create a website, there is always the HTML that marks up your elements. With Dreamweaver, what you have are tools and features that let you create the HTML code without having to manually type them in. But it's still important that you understand what's going on behind the scenes; otherwise you're just blindly clicking on buttons and windows in the Dreamweaver interface. In many cases, you'll probably need to switch between the Design and Code view in order to create your webpages and fix problems that may arise. But for those of you who up until this point have been creating websites only with basic text editors, then you can probably appreciate how Dreamweaver can make things a lot easier. It has a great set of tools and features that make the process of creating websites much more efficient, and what you've seen in this introductory tutorial series is just a small fraction of Dreamweaver's capabilities.
Thank you for reading this tutorial series. I sincerely hope that you learned a few things. If you know others who might benefit from reading this series, please feel free to share it with them.
For those of you who want to start learning HTML, I recommend the HTML tutorials by w3schools as a good place to start.
And that concludes this Getting Started with Dreamweaver CS5 tutorial series.