How To Make Your First Website In 10 Easy Steps

There are many different techniques to making a website. You can choose different services like WordPress, Blogger, and Joomla. Or you can choose from different websites like Webs, Wix, and Weebly, that give you all the tools to make your own website using their website. Or you can choose to make your website by hand, the old fashioned way, and (in my opinion) the best way. Today we are going to be taking a look at making a simple website using Adobe Dreamweaver. Dreamweaver is a professional (and very expensive program) but you can always download the 30-day trial for free (visit adobe.com to download.) We will also be using Adobe Photoshop for some minor designing for the website. Photoshop is also a professional (and very expensive) program, but you can download the 30-day trial for free from adobe.com. Also, keep in mind this is a “beginners” tutorial, which is why I titled it “How To Make Your First Website Using Adobe Dreamweaver”, so I will be covering the basics, and nothing more. This tutorial will be teaching you how to make a static .html page for your website. The tutorial is going to be typed, but if you prefer a video version, just scroll down to the end of this post. And with all that being said, let’s get started!

Step 1:
Make a new folder for your website. Name it (your website).com. In the website folder, make an images folder (name it images), and put any images you want to use in your website in that images folder.

Step 2:
Open Adobe Dreamweaver. Click Site>New Site. And fill in all the info for your website. Keep all recommended options selected. And when it asks you where on your computer you want to store your files, make sure to select the folder you made in step one. Press done when you are done.

Step 3:
Click on File>New. Do not mess with any of the settings, and just press create.

Step 4:
Now for the fun part. Switch to design view if you are not there already. And we are going to mess with some of the minor settings first. The first thing I’m going to change is my website title. The title is at the top, and to change it just simply type something in. This shows when you open a new tab in a web browser.

Step 5:
Next, right click in the white area and click Page Properties. Th white area represents your website. When you are in design view, you can actually see what your website is going to look like before you save it. When the page properties panel opens, change the settings to your liking. The images below will show you the settings I chose. I also used Adobe Photoshop to make a simple blue gradient (#006a8e to #007da6) that I will be using for my background. This blue gradient is located in my images folder in my website folder. Make sure to keep all files associated with your website in your website folder.

Step 6:
Now that the settings are to your liking, let’s get started on adding the content. We are going to need to enter into layout mode to make things easier for us. So click on View>Table Mode>Layout Mode. Now that we are in layout mode, make sure you have the insert menu open. You can open it by clicking on “insert” at the top. Once that is open click on the layout tab.

Step 7:
In the layout tab, choose the draw layout table tool. With the draw layout table tool selected, draw a square in the big area under the toolbar. This big area represents your website. When you are in design view, you can actually see what your website is going to look like before you save it. The square does not need to be an appropriate size because you can just change the size to your liking. To change the size to your liking, make sure the properties tab is open. To open the properties tab, click on “properties” at the bottom of the program. Then change the width and the height to your liking.

Step 8:
Now we need to use another tool in the layout tab. Click on the draw layout cell button. Then, draw another box within the bigger box you made using the draw layout table tool. These smaller boxes will represent areas for content. You can adjust the width and height of the smaller boxes the same way you adjusted the width and height of the bigger box. You can also move the smaller boxes anywhere in the bigger box, just by clicking and dragging. I made one for a logo, a navigation bar, the main content, advertisements, and the copyright text.

Step 9:
These smaller boxes allow us to put in any content we want. We can click in these smaller boxes to type text, insert an image, insert a video, etc. So now we can just add all the content with ease. To type something, just click in the smaller box, and start typing. To add an image, click in the smaller box, then click on Insert>Image (make sure your image is in the images folder in your website folder). To add a video/audio, click in the smaller box, then click on the common tab, then click on the media button (next to images button), select plugin, then select the video/audio clip (make sure it is in your website folder.) To link something, highlight it, then head over to the properties tab, and type in a link for it.

Step 10:
Save your website. Click on File>Save As, then save it in your website folder. If it is the homepage, name it index. To view your website, go into your website folder and double click on the index file, and it will open in your preferred web browser. If you need to change something, just head back into Dreamweaver, make any changes you want, and save it to preview it again.

blog comments powered by Disqus