Web Development Course – Part 1

Website development has not only emerged as one of the finest fields of career, it has also paved way for entrepreneurs who are interested in taking quick leaps with the effective promotion of their business products and services. Thanks to the easy availability of web authoring tool-sets like Dreamweaver CC, it has become to build contemporary websites which can easily adapt to fit every screen size. Plus, you can fetch images from the brand new Adobe Stock for rendering a beautiful look to your website. In today’s post, I’ll be looking into the simple steps which need to be followed for creating a unique website using Dreamweaver CC. So, let’s get straight to these steps.

What’s new in Dreamweaver CC?

Before proceeding ahead with the process of creating a website using Dreamweaver CC, let’s get to know about some exciting features available with this tool set. Well, there is an impressive Adobe Stock marketplace where you can find brilliant photos/illustrations and go ahead with downloading them to your project from Creative Cloud. Then, there is also an option to test and inspect websites on multiple devices. For this, all you need to do is simply type a short website URL into a mobile device’s browser and you’ll be able to preview your site instantly. Next, you can find built-in Bootstrap integration which will help you in building websites that dynamically adapt to fit multiple screen sizes. So, you can get on with using different templates and incorporating hand-picked Bootstrap components into your websites. Not to forget, Dreamweaver CC also allows you to set media queries visually with a lot of other interesting stuff beneficial for your website.

Now, let’s come to the steps involved with website creation using Dreamweaver CC:

Step 1– Download and install Dreamweaver CC onto your system. After the software has been installed, you’ll be able to view a window that looks similar to the one shown below:

dream waver css





Please note – that the above screen would appear differently when viewed using a different system, for example Mac OS X etc.


Step 2– Now, click on “Site” option available within the menu bar and further click on “New Site” option available within the drop down menu as shown in the below screen-shot:dream waver 2

A dialog box similar to the one shown below will appear on your monitor

dream waver 3Step 3- As is visible in the above screens-shot, the name of the window is “Site Setup for Unnamed Site 2”. Here, you can find two folders viz: Site Name and Local Site Folder. Site Name refers to the name that you want to provide to your Dreamweaver site. Now, simply replace the value displayed as “Unnamed Site 2” with a site name of your choice. If you don’t have a website name saved on your computer, it is recommended to create a new folder on your desktop and name it similar to your website name. For instance, you can choose to name the new website as CustomWebsite.

Step 4– Next, you can find a field called “Local Site Folder” which will be auto-populated with text like C:\Users\jennifer\Documents\Unnamed Site2\”. This is basically the location of the folder which contains all the website files, as stored on your working system. Here, make sure not to delete the preceding text from the file folder like: C:\Users\jennifer\Documents\. Also, make a note about keeping the backslashes(“\”) as it is. Do remember that deleting any of these vital assets wouldn’t save your folder within the Documents folder’s sub-folder. Instead, it may get saved on a hard disk location that you not be familiar with.

Step 5- After you’re confident about the changes that you have made to both the fields viz: Site Name and Local Site Folder, just get on and hit the “Save” button. Clicking on the “Save” button would save all your changes successfully and you’ll be redirected to the main Dreamweaver CC window.

With everything in place now, you can get on with creating the very first web page for your new website.

Wrapping it all up

As one of the most commendable web design tools used by beginners as well as professional web designers, Adobe Dreamweaver CC renders you an ultimate flexibility of viewing the results for your project in real-time as you continue using the software. Loaded with innovative upgrades and eye-catchy improvements, Dreamweaver CC can turn as your right choice when it comes to developing stunning websites.

this article was writtine by Samuel Dawson an effective strategist in Designs2HTML Ltd – a nice PSD to HTML Company.