Preparing a Web Site in Adobe Dreamweaver
Welcome to my blog, please feel free to subscribe to my RSS feed or leave a comment.
Let’s take a look at how to create a web site properly using Adobe Dreamweaver, this tutorial will go over the straight from the start of the process to uploading your web site to a web server on an Internet Service Provider. I’ve purposely tried to keep this tutorial fairly basic as it’s designed to a new web designer and can be considered fairly basic but at the same time, I wanted to introduce some of the more complex concepts we find in Dreamweaver and on the web in general.
Preparing a web site in Adobe Dreamweaver
As we prepare to create a web site in Adobe Dreamweaver, we first have to understand what a web site is and how we can make the most of it. Frankly, anybody can create a web site and there are a million tutorials out there which will teach you how to do it but if I’m going to take the time to write about it, I’d like to help you learn to do it the right way.
What is a web site?
A web site is a collection of documents, images, text, media and links associated in a common place. Most likely it’s hosted on the Internet but it doesn’t have to be, most importantly it’s a collection of web pages.
What is a web page?
A web page is a document written in the Hyper Text Markup Language and is designed to be read by web browser software. A web page may contain text, graphics, images, rich media and links. Why am I taking the time to explain it to you at this basic a level? Ironically in my career I’ve found a lot of web professionals who don’t really understand the basic concepts so if you’re new to this, it’s worth a review.
Now, a web page may seem like a simple thing but before we go and start creating a million fancy pages we want to create the web site container in Dreamweaver so that all of our pages are properly associated and we can take advantage of Dreamweaver’s site management functions. If you don’t already have a copy of Dreamweaver, you can download a trial version at www.adobe.com
Creating your first site in Dreamweaver
Adding a site in Adobe Dreamweaver is fairly simple, along the top menu you can create a New Site … under the Site menu item. Once created a dialog box will appear. The are two modes to add a web site to Dreamweaver, Basic and Advanced. Let’s make sure you have Basic selected and take a look at the options provided.
First, you’ll need to create a name for your web site. You can call it what ever you like, this title is for you and you alone. I’m going to call mine Unnamed Site 2 because I’m original and like the sound of it.
The HTTP address is the web site address of your site. If you don’t already have a domain name, don’t worry about it. Otherwise, fill in the URL of your web site here. For example, my web site address is http://www.thisismyurl.com.
Clicking on the Next button will bring us to a screen asking about Server Technology. For now, let’s say that we do not want to use a server technology. Using this option later will let us use a scripting language such as PHP but we’ll get to that later.
We click the Next button again and Dreamweaver wants to know where we’d like to edit our site. We can choose to edit on our local computer, in which case we’ll need to add a local folder to our hard drive or we can edit remotely on an FTP server. So let’s add a local folder and link it in the dialog box provided.
When we click the Next button again you’ll find yourself on a screen asking about remote access. This is for people who want to FTP or upload their web sites to a remote web hosting company. By default Local/Network is selected but I want you to change it to None and press Next. We’re going to cover how to FTP our site and things later on, so let’s not get too bogged down in technical talk at this point.
If you’ve done everything correctly you’ll now see a Done button and you’re ready to get started with your web site. At this point, you’re going to notice that it’s not very exciting. In fact, it’s empty but that’s OK because that is exactly how we want to start a web site.
Adding files to your web site
If the purpose of a web site is to hold web pages, we now need to add a web page. To create a new web page in Dreamweaver we have a few choices:
- You can create a new page using the short cut key Control-N (Apple-N on a Macintosh)
- You can create a new page using the menu option File > New …
- You can right click (ctrl-click on a Macintosh) the Site name in your Files panel to the right. If you don’t have a Files panel, hit F8 or go to your Windows > Files menu item.
Now, if you took the first two options you’ll see a big and scary dialog box (the third option skipped this step) asking you what type of page you want to create. Let’s keep the ball rolling on the simple tutorial and select Blank Page : HTML : <none> from the menu. Don’t worry about the rest of the items, just click Create to continue. This will create a new file but it’s not added to our site yet.
To add the site to your web site you need to File > Save (Control-S / Apple-S) your document. For the sake of compatibility down the road, I’d like you to name this file index.html and save it. Now, on in your Files tab you should see your Site as well as a single file named index.html. Congratulations, you’ve created your first (single page) web site.
You can repeat the steps outlined above to add three more pages to your web site, in the end you should have:
- index.html
- about.html
- contact.html
- services.html
In our next lesson we’ll learn how to create a web site Template file which is used to control the structure of your web site. Before then, why don’t you take the time to add a couple paragraphs of text to each of the pages? Remember to make sure you’re in Design view by going to your View > Design option (if there’s a check mark on it you’re OK). Having a hard time thinking about what to say? No problem, at this point in the process why not just copy some Lorem Ipsum into each page?
This tutorial will be broken down into the following chapters, each published individually over the coming weeks.
- Preparing a web site in Adobe Dreamweaver
- Building your first Dreamweaver Template file
- Structuring your web site with Adobe Dreamweaver
- Improving the common elements in Dreamweaver
- Placing page content in Adobe Dreamweaver
- Hyper linking and image management in Dreamweaver
- Optimizing web sites in Adobe Dreamweaver
- Adding Cascading Style Sheets with Dreamweaver
- Putting your web site on a remote web server with Adobe Dreamweaver
- Adding Google Analytics and other neat tricks to your Dreamweaver Template
Was this tutorial easy enough to follow? Let me know through your comments below.
Other Posts of Interest
Posted on: Monday, October 20th, 2008Tags: adobe, cs3, dreamweaver, tutorial
Posted in Learning | | Read more
Did you find this article useful? You're welcome to post a link to this website along with the title but please don't copy the whole article. You can also link back using the following code:
<a http://www.thisismyurl.com/tutorials/preparing-a-web-site-in-adobe-dreamweaver/" rel="bookmark" title="Preparing a Web Site in Adobe Dreamweaver">Preparing a Web Site in Adobe Dreamweaver</a>
About the author.
6 Comments
| comments rss [?] | trackback uri [?]