Responsive Overview. Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit. Dreamweaver Tutorial: How to Design a Website with Dreamweaver CS6 by Christopher Heng, thesitewizard.com Dreamweaver is a well-known web editor (a type of computer program) used by both experienced and novice webmasters to design websites.
Chapter 1: How to Create a 2 Column Web Page with Dreamweaver
Dreamweaver is a well-known web editor (a type of computer program) used by both experienced and novice webmasters todesign websites. It uses what is known as a 'WYSIWYG' interface (where 'WYSIWYG' stands for 'What You See Is What You Get'),meaning that you can create your website visually and see the results on your computer monitor as you work.
Overall Goals of This Tutorial Series
By the end of this tutorial series, you will have designed and published a fully-functional multi-page website,complete with a home page, a site map, a feedback form, and any other web pages that you choose to create.
Goal of This Chapter
In this chapter, you will design the main page (or home page) of your website and place it onto the Internet.In the process, you will learn how to use Dreamweaver to create a two-column web page, add contentto that page, and transfer it to your website.
Things You Need
How to Set Up Your Site in Dreamweaver's Site Manager
Before you begin designing your web page, you will need to provide Dreamweaver some information about your website.This is done through its Site Manager.
How to Create a Two Column Web Page with Dreamweaver CS6
Websites can be laid out in a variety of ways. For instance, some websites, like theFeedback Form Demo Site (a site you will visit againin chapter 8), put all their content in a single column. Others, like thesitewizard.com's article pages,use 2 columns. If you're not sure what I'm talking about, just look at the layout of the page that you'rereading. The leftmost column has a logo at the top of the page, followed by a search field and some links(masquerading as buttons) pointing to the main sections of the site. The right column contains the articleproper. It's also possible for a website to have 3 columns. For example, at the time this chapter waswritten, thesitewizard.com's home page andsite map both use a 3-column layout.
Note: if you're reading this chapter using a modern smartphone, you will probably only see 1 column, evenif you rotate the smartphone. To see the effect I'm describing, you will need to use a device with a muchwider screen, such as those found on a desktop or laptop computer. I moved the left column to the bottomof the page on modern small devices, so that you can read the main article more comfortably.
You will be creating a two column web page for the purpose of this tutorial. Many webmasters like thislayout because it is space-efficient, simultaneously yielding high functionality and user-friendliness.Both your content and navigation aids (the links/buttons to the other pages on your site) are immediatelyobvious to your visitors, making it easy for them to read your content as well as access the other pageson your site.
You will now see a 2-column web page containing some placeholder text (with a heading of 'Instructions')in the main Dreamweaver window.
What to Put on Your Home Page
The first page that you'll be creating for your website is the home page.
In webmaster lingo, the 'home page' is just the main page of your site. It is the page your visitors encounterwhen they simply type the domainname of your website. For example, if you were to type 'thesitewizard.com' into your web browser now, you willend up at my home page.
In terms of function, the home page of a website is analogous to both the cover of a magazine and its 'Contents' page.Like the cover, it should give your visitors an idea of what your website is all about. And like the 'Contents' page,it should provide links to the important pages or sections of your site. It is the means by which you help yourusers get to the parts of your website where they want to go.
What this means in practice is that if you are running an online shop (ie, you're selling goods and serviceson your site), you should probably mention your most important products (or even all your products if youonly sell a few things) on that page. You should also link to the other pages on your website where your visitors canfind out more about those products and place an order.
The same principle also applies if you're creating some other sort of website, such as a personal site ora hobby site. While you may not have products to sell in such a case, you should nonetheless give your usersan idea of what they can find or do on your site, and link to the interior pages where they can do what youwant them to do. Otherwise visitors reaching your main page will be at a loss as to how to proceed from there.
How to Design Your Home Page in Dreamweaver CS6
How to Publish (ie, Upload) Your Web Page with Dreamweaver CS6
You will now transfer your web page to your web host's computer (ie, web server) so that it can be viewed onthe Internet. This process of transferring your page from your computer to a web server is known intechnical parlance as 'uploading'. It is also referred to as 'publishing' in layman's language.
Yes, I know your page is not finished yet. But you needn't worry. Since your site is new, and you have notadvertised its address to anyone, no one will know it exists, let alone visit it. Not even the search engines.In fact, as you will discover, it's not that easy to get visitors.
We're publishing it at this stage for a couple of important reasons. Firstly, it allows you to become familiarwith one of the major steps of web development: getting your file from your computer to your web host's computer.Creating a website involvesmore than just designing its appearance. It also includes putting it on the Internet. Once you getthis hurdle out of the way, you will have mastered what is one of the largest technical challenge a newcomer is likelyto face. But don't let this scare you; it's actually quite easy.
Secondly, not everything about a website can be properly tested on your own computer. Sure, you can look to makesure everything looks good in Dreamweaver. And you can even fire up a web browser and look at the saved file onyour hard disk directly. However, some problems will never show up when your site is checked this way, and willonly become apparent when you test it on the Internet. And there are other aspects of your website that you can'tcheck without a 'live' site. This generally doesn't pose a problem for the seasoned webmaster since they knowwhere the issues lie, and how to fix it. But for the newcomer, if you test only when your entire website is complete,and you find an error, you won't know at which stage you made the mistake. Then what are you going to do? Redo everythingfrom start?
Please do not skip this section if you are following this tutorial series. I will assume that you have doneit in all the later chapters, and you may find things difficult to follow if you skip it.
Testing Your Web Page
To check your page on the Internet, type your domain name into your browser's address bar (also called location bar).Do not go to Google or Bing or whatever search engine you normally use. Just type it directly into your browser. Ifyour domain is called 'example.com', type '
http://www.example.com ' into the empty field at the top of your browser,and hit the ENTER (or RETURN) key.
The web page which you designed earlier should appear in your browser. As I mentioned earlier, even though youdidn't type '
http://www.example.com/index.html ', your web server should automatically deliver to youthe contents of your index.html file, since the latter is a special filename set aside by the web serversoftware for this purpose.
If you do not see your web page, but instead see either the default placeholder page providedby your web host, or a '404 File Not Found'error page, it's possible that you got the Root Directory wrong. You may have uploaded your page to some directoryon your account that is not meant for public access. To rule out other possibilities, specifically type'
http://www.example.com/index.html ' into your browser (yes, this time adding the 'index.html 'filename). If the same error occurs, your Root Directory is wrong. To solve this, first find out what the actual directoryshould be. Then go back to the 'Site Setup' dialog box following the procedure you used earlier and click the FTP server(in the list box) that you created before, to select it. Now click the pencil icon (with the tooltip 'Edit existing Server') instead ofthe '+' icon that you used previously. This will take you back to the dialog box where you can change the Root Directory.Remember to save your changes when you're done, republish your web page, and try your site's address in yourbrowser again.
If you only get the error when you type 'http://www.example.com' but see the web page you designedwhen you type 'http://www.example.com/index.html', it means that your web host did not configure their web serverto use '
index.html ' as the default file. If so, you will have to find out from your web host whatfilename to use for your home page. This situation is very rare nowadays, since most web hosts configure theirweb servers to follow the conventions the majority of webmasters are familiar with (if only to reduce the amount oftechnical support they have to give).
If you get an error message saying 'Domain not found', 'No DNS for www.example.com' or words to that effect, it couldbe one of 3 reasons. Firstly, you could be experiencing the domain propagation issue I mentioned earlier, where yourdomain is so new that your internet provider still doesn't know it exists. In such a case, all you need to do is towait until the next day and test it again. Secondly, it's possible that your web host did not create a 'www' versionof your domain name (ie, 'www.example.com') to map transparently over your 'example.com' domain. Not all web hostsautomatically do this for you, and you may need to ask them how you can get this done. If this is the case,you can still test your site by typing '
http://example.com ' into your browser's address bar instead.Thirdly, it's possible that in your excitement to test your site, you actually made a mistake when you typed your web addressand either missed out a letter or added one, causing you to reach someone else's domain that has no matching website.
On the other hand, if all goes well, and you see your website in your browser, congratulations! You have actuallypublished your first web page. Sure, it's not complete, and there are many things you still want to do to polish it,but don't belittle your achievement here. You have created your first web page, drafted the content, and uploadedit onto a computer on the Internet. In fact, as of this moment, you are a webmaster.
Next Chapter: How to Add Your Website Logo and Other Pictures to Your Website
In the next chapter, you willadd a site logoto your web page. If you plan to put any other pictures (eg, pictures of the products you're selling or photos ofyourself or whatever), you will also be able to insert them.
Copyright © 2013-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top »Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide »List of All Dreamweaver Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
Copyright © 2013-2019 Christopher Heng. All rights reserved. thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng. This page was last updated on 22 October 2019. Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2022
Categories |