You can design, code, and manage websites with Dreamweaver. Software that allows you to write code as well as create a website using a visual interface is interesting. You will learn how to create any website using Dreamweaver in this tutorial. Adobe Dreamweaver is mostly built like a battleship, and it has the best combination of flexibility, power, and ease of any tool ever designed for building websites. There is no real competition for Dreamweaver, and it should be used by all serious web designers.
Adobe Dreamweaver is it er free? Adobe Dreamweaver is available for free for seven days. You can try it for free to see what all the premium features and functions are like, which is perfect if you want to quickly design or code a website. Opening Hours : Mon - Fri: 8am - 5pm. If you are sharing your computer with others, and don't want Dreamweaver to save your password, click the box containing the tick to uncheck it.
Note that I will assume that you have left the box checked in this tutorial, since that is what the majority of thesitewizard. To make sure that you've entered your username, password and FTP address correctly, click the "Test" button under the password field.
If you are successful, you will get a message saying "Dreamweaver connected to your Web server successfully". Click the "OK" button to dismiss it. Note: If you use Windows Vista, the Windows firewall may issue a message asking you whether to block or unblock the connection.
By default, FTP connections are two-way, requiring the server to which you're connecting to make a connection back to you, hence the warning by the firewall. This is normal, so don't panic when you get that message from Vista.
The interference by the firewall may also cause your first test in Dreamweaver to fail, leading Dreamweaver to issue a dialog box telling you to use Passive connections. Just click OK to that message, and click the "Test" button again. To do this, click the triangle beside "More Options". You can find the words "More Options" just above the "Help", "Save" and "Cancel" buttons near the bottom of the dialog box.
The More Options section will be expanded, revealing a section where you can further configure your FTP settings. In most cases, setting the "Passive FTP" mode is enough to make the test succeed. If the test continues to fail even after you've checked the "Use Passive FTP" box, it's possible that you've entered your FTP address, username or password wrongly. To make sure that those are typed in correctly, do not manually type them, but copy and paste them from the information supplied by your web host.
If, having done that, you still find that you cannot connect, look at your FTP address field. Does it contain your domain name or some modification of your domain like " ftp. If so, and you've only just bought your domain name within the last 2 days, it's possible that your domain name has not yet propagated throughout the Internet.
What this means is that when a new domain name is bought, it takes a while usually about 2 days before it is recognised throughout the world. In such a case, your only recourse is to wait a day or so before testing again. There's nothing anyone can do to make it happen faster. You can also ask your web host for help in checking your settings in case you actually got your FTP address, username or password wrong.
But remember that if the problem lies with a new domain name that has not propagated, you just have to be patient and wait. There's nothing your web host can do to help you in such a case. The next field that you have to complete is the "Root Directory" field. This is needed because you can't simply publish your web page to any folder you want on the web server , and expect it to appear on the Internet.
Web hosts usually configure their computers so that only files placed in specific folders are considered as part of your website. This is needed, otherwise anyone on the Internet can read your private files, like your email, etc. Go back to the information provided by your web host again, and look to see if they mention the name of a folder or "directory" or "subdirectory" where you need to place your files into.
Some hosts tell you to place your website files in a directory called "www". Still others tell you to place your files in a folder named after your domain name.
And there are also hosts that say that you can simply upload or publish your files into the default directory you see when you connect by FTP. Like your "FTP address", this is not something you can randomly guess. If you don't already have the information, find out by asking your web host.
Once you have the information, enter the folder name into the "Root Directory" field. For example, if your web host tells you to publish your files to a "www" directory, enter "www" into the field. If they tell you to just use the default directory when you connect, leave this field blank. One last thing: note that where most web hosts are concerned "www" and "WWW" are two different words.
Hint: for those who can't detect the difference between them, look at the capitalisation of the word. In other words, if they say, use "www" to store your website files, make sure you put "www" and not "WWW" in the "Root Directory" field.
You'll be returned to the "Site Setup" dialog box. Notice that your entry is now listed in the list box on that page.
Should you ever need to make changes to your settings, click the pencil icon at the bottom of the list box. For now, click the "Save" button on this window. Dreamweaver may issue a dialog box with the message "The cache will now be recreated because the name, root folder, HTTP address, or cloaking settings of the site have been changed. You'll be returned to the "Manage Sites" dialog box.
Click the "Done" button. Once that you've finished configuring Dreamweaver for your site, it's time to publish your home page. To do this, click "Site Put". When a dialog box with the title "Put dependent files" appears, click the "Yes" button.
Dependent files are the additional files that your web page needs so that it is displayed correctly in a web browser.
Don't take too long to click "Yes" or Dreamweaver will automatically select "No" for you, which is not what you want. You must click the "Yes" button or your web page will not look the same in your web browser. If you've waited too long, and have found that Dreamweaver has automatically dismissed the dialog box for you, click "Site Put" all over again.
This time, be sure to click the "Yes" button when the dialog box appears. Dreamweaver will then issue a dialog box informing you of its progress. The dialog box will automatically disappear when it has completed the uploading of your web page. Now that you've published your web page, you will need to check it using a web browser.
Although Dreamweaver does a good job of showing you what your web page will look like, it is not really a web browser but a web editor.
As such, there are some things you can't effectively test in Dreamweaver itself. To test your home page, type your website's address "URL" into your browser. Notice that I did not ask you to type the "index. If you've set things up correctly, even though you didn't type the "index. If you get a " File Not Found " error instead of the web page you designed, or you get your web host's preinstalled default page , you may have entered the wrong folder name into the "Root Directory" field I mentioned earlier.
Go back and fix the error. That is, click the "Site Manage Sites You can then change your Root Directory to the correct location. When you've finished, be sure the click the "Save" button in both that dialog box as well as the "Site Setp" dialog box, and finally click the "Done" button in the "Manage Sites" window.
If you get a "No DNS for www. Another possibility is that you're using a web host that has not set up the "www" subdomain for you, and you typed in "www. Not all web hosts do this automatically for you. If you get no errors at all, but see the page that you designed earlier, congratulations!
You have created and published your first web page using Dreamweaver CS5. It may be a raw and unfinished page for now , but you have successfully walked through all the essential steps of designing and uploading a web page. In the next chapter of the Dreamweaver CS5 Tutorial, you will learn how to add pictures and a logo to your website.
All rights reserved. Top » Getting Started with Your Website ». Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form. To link to this page from your website, simply cut and paste the following code to your web page. In other words, you will need to get an account at a web host. There are many web hosts around. If you don't already have one, you can find a list of them at thefreecountry. In such a case, you do not have to get a web hosting account. Find out from your lecturer or teacher.
Like I said, the above two are the minimum requirements. You should ideally get a domain name too, otherwise you will run into the problems I mentioned in some of my other articles, such as Is it Possible to Create a Website Without Buying a Domain Name? The High Price of "Free". Before you design your web page, you need to provide Dreamweaver with some basic information about your site. When Dreamweaver starts up, it will probably look something like what you see in the picture below.
It will not look exactly alike, since your computer monitor may be bigger than mine, and there may be minor differences depending on whether you're running Windows 7, Vista, XP or Mac OS X. And the word "thesitewizard. If your monitor is big enough, this should be at the very top of the Dreamweaver window.
This is the menu bar. If you were to move your mouse over each of these words on that bar, Dreamweaver will highlight the word your mouse is hovering over, indicating that the word is a clickable item.
For example, in the picture above, I moved my mouse over the "Modify" menu, and Dreamweaver put a rectangular outline around that word. Clicking any word on this menu bar will cause a drop down menu to appear. Note: if you have clicked one of the words on the menu bar to experiment, and caused the drop down menu to appear, and now want to get rid of it, just click the same word you clicked earlier, and the menu will disappear. We will be using this menu bar extensively in the course of this tutorial.
The menu bar allows you to access many of Dreamweaver's features. Click the word "Site" on the menu bar. A drop down menu will appear. Click the line "New Site Important: from this point onwards, in the interest of brevity, I shall refer to such a sequence of clicking items in the menu bar and in the drop down menus that appear as "Site New Site For example, if I ask you to click "File New Please don't actually click "File New It's just an example.
A dialog box will appear. The dialog box will probably have a title like "Site Setup for Unnamed Site 2". Don't worry if it doesn't actually say "Unnamed Site 2". If you have experimented with Dreamweaver before reading this tutorial, it may say "Unnamed Site 3" or some other bigger number, depending on the number of times you've actually invoked the site manager.
Ignore the number; it's irrelevant. We'll be changing the entire text "Unnamed Site 2" or whatever it says on your screen to the name of your website. Replace the default name given in the "Site name" field with the name of your website. Your site name can be any name that you want to give the site. If you're stuck, just put your domain name into that field.
For example, if your domain name is "example. The "Site name" field is not displayed on your website in any way. It's just an internal name used by Dreamweaver, mainly to make it easy for you to distinguish between the different websites that you create. As such, you don't really have to worry too much about what you put here. Having said that, it's best to put something sensible here instead of leaving the default name there, otherwise, if you eventually end up creating, say, websites, you'll have a headache trying to figure which one of "Unnamed Site 2" to "Unnamed Site " is the one you want to update.
The "Local Site Folder" field refers to the location on your computer where Dreamweaver is to store your website files. By default, Dreamweaver suggests a folder in your Documents folder at least on Windows; I'm not sure about Macs. Your default folder name will probably also include some dummy name like "Unnamed Site 2" or some other number. You can click the folder icon next to this field and select a different location if you wish. I recommend that you at least change the default folder name from "Unnamed Site 2" to the same name you put in the "Site name" so that it's easier for you in the future to recognise which folder belongs to which site.
If you find the instructions given in the above 2 paragraphs too complicated or stress-inducing because you're not sure how to carry it out, just skip it. While it's helpful to change the folder name to your site's name for your future ease of finding it, the benefit gained is very small, and not worth getting stuck over.
When you're done changing the two fields above, click the "Save" button found near the bottom of the "Site Setup" dialog box. The dialog box will disappear, and you'll be returned to the main Dreamweaver window. You're now ready to create your first web page. If you were to carefully observe the websites that you visit, you will notice that some websites have all their content laid out in a single column.
For example, you'll find such a layout on the Feedback Form Demo Site a site you will probably visit again in chapter 8 of this tutorial. A large number of sites, however, present their content in 2 columns. You need look no further than this very page you're reading: the left column holds things like thesitewizard. The right column holds the text of this article, that is, the main content of the page. Web pages can also have more than 2 columns; for example, my Site Map uses a 3 column layout.
Note: if you're reading this chapter from a modern smartphone, you may not be able to see two columns on this page. I've moved the left column to the bottom for devices with very small screens to give more space to the main article, and hopefully make it more pleasant to read.
In this tutorial, you will be creating a two-column website. This is a popular layout because it is both space-efficient and familiar to Internet users. When your visitors are familiar with a layout, they will find it easy to use, since they will know where to find things on your web page and know how to navigate your site.
Creating a user-friendly website is very important, since it allows your visitors to achieve their goals on your site. Click "File New If you will recall from what I said earlier, this means to click "File" on the menu bar, followed by "New Make sure that "Blank Page" is selected in the leftmost column.
If not, click it once to select it. If you're not sure whether it's selected or not, just click it anyway. It is probably already selected by default, but it will do no harm to click it if you're not sure. In the "Layout" column the 3rd column from the left , click the line that says "2 column liquid, left sidebar, header and footer" once to select it see the picture above.
This action selects a two column layout for your website. Look for the field "Layout CSS" in the rightmost column. It's near the bottom of the dialog box see the picture above.
Click the drop down box for that field, and select "Create New File". This action causes Dreamweaver to save all information governing the appearance of your website called "CSS" in a separate file. Since the pages on your site share a common layout, locating the CSS in a single file avoids duplication of information and reduces the amount of disk space your site needs.
It also speeds up the loading of your pages and reduces the bandwidth used should your users visit multiple pages of your website. Click the "Save" button on the dialog box.
Dreamweaver should now display a web page containing some placeholder content for your modification. Since you'll be working on your home page in this chapter, it's important to know what you're actually trying to achieve here.
The first page that you'll be designing is your website's "home page". The home page is basically just another name for the main page, the page your visitors arrive at if they simply type the domain name of your site.
For example, if you type "thesitewizard. Functionally, a site's home page is similar to the combination of a magazine's front cover and its contents page. Like the front cover, your home page should give your visitors an idea of the sort of things that can be found on your website. And like the "Contents" page, it should provide links to important pages or sections on your website so that your visitors can get to wherever they need to go on your site.
In practical terms, this means that if you sell products and services on your site, your home page should probably mention your most important products and services. Yet, that is a much less elegant option than what we will do, which is creating a dedicated file for all the CSS styling of the entire site.
Leave the rest as is. When you now select OK , a new file will appear at the top of your live view. You can view and edit it from there. The first thing you want to do is to change the font of your heading and also center it.
For that, you first need to create a new CSS selector. A selector is the name of an element on your page that you can assign properties to, e. Mark your H1 heading in the DOM view on the lower right. Then, above that, choose CSS Designer.
To create a CSS selector, click on the line where it says S electors and then click on the plus symbol. This should automatically propose a selector named. Hit enter to create it. Quick note: For all those new to CSS, this selector means that you are targeting the element named h1 inside the element called.
That way, whatever you input as CSS applies to the written text only and not the header element overall. Now that you have a selector, you can assign properties to it. If you know your way around CSS, you can simply type markup into style. For the less experienced users, Dreamweaver helps you along the way. When you do, it will unlock a lot of additional options.
With the new buttons, you can choose many CSS properties from the areas of layout, text, border, and background. The More button gives you options to input your own rules. To change the font type, click on the Text option at the top alternatively, scroll down. In the upcoming options, hover over font-family and click on default font. This will give you a number of options for common fonts including their fallbacks in case the user browser is unable to show the primary font.
You may want to click on Manage Fonts at the bottom to get to this menu:. Here, you are able to choose free fonts from Adobe Fonts. Either search for them by name or use the many filter options on the left to narrow down your choices until you find something. A click on any of the typefaces marks it for inclusion in Dreamweaver. Once you have done so, you can either use them directly or go to Custom Font Stacks to define your own fallback fonts.
For now, simply hit Done and then click on default fonts again. If you click on your style. The text could still look better. The next task in our tutorial is to have Dreamweaver center it and make it all uppercase.
For that, the program also offers another feature called Quick Edit. To use it, go to the code view and right-click the part you want to edit. Here, choose Quick Edit at the top. This will open the CSS associated with this element below it. If there is nothing yet, you will find a New Rule button to create some. Either way, you can input additional properties here without having to search the entire style sheet file which can be very long. In order to center the text and make it all caps, add the following code to it:.
When typing, Dreamweaver will also make proposals for what you are trying to input, making it even easier. Note that the text has already changed in the live view. Now, press Esc to leave quick edit and head over to the style sheet. You will find that the new CSS has been added in the appropriate place. Dreamweaver will then give you an explanation. With what you have learned so far, you can now build a rudimentary site.
0コメント