Updating a website using dreamweaver

You probably ask your neighbors, but you might just fire up your favorite search engine and find one. Or you can't remember who directed one of your favorite movies. Or you want the up to the minute weather forecast. Or you want to find a childhood friend. Or you want a book or clothing item not easily available in stores near you. This all means that if you have a business, you need to have an online presence so that new and old customers can find you easily. So you have someone, perhaps even me , create a website for you or at least a page on a directory of similar endeavors.

But now you want to be able to make simple updates yourself; for example, add a phone number or email address. This manual is written for you. In a Content Management System CMS , the text and images for each page known as the "content" are easily updated by using a web-based word-processor-style interface. So the site editors so not need to know HTML to make changes.

They can update the site from anywhere with an internet connection as long as they have a username and password. This content is kept in a database. So each "page" is a set of information from the database which is displayed within the defined look of the site known as the template. It allows for anywhere from one to hundreds of pages. More than one person can be allowed to edit these pages. There are a number of third party add-ons as well. WordPress : This is my preferred CMS to use for a blogging site and for site that invites comments from visitors.

It has hundreds of add-ons including ones for Ecommerce. It can also be used for a single author non-blog site as well. WordPress is now powering Membership communities are best done by using the Community Builder add-on. Joomla also has the most 3rd party add-ons of these three, for example a great B2B directory, a forum, photo albums, a store, and most anything else you can think of. You need to own the domain name.

A domain registrar like godaddy. I recommend you that you buy your domain name separately from your hosting. That way if you become very unhappy with your web site host you can move quickly to a new one by changing the name servers at your registrar to your new host.

You need to purchase hosting. Usually yearly. I have several web hosts I recommend and use myself note I get an affiliate fee. Things to consider are how much disk space and bandwidth you need, also uptime and customer service.

These days most offer unlimited disk space and bandwidth, but read the fine print. If you use excessive amounts, you will hear from them. Most small websites do not have to worry about this issue. What if you have been asked to update an existing website? If you have the username and password try using the FTP instructions in this manual. Once in the control panel, you can usually make an FTP account. If none of these work then contact the hosting company.

If you do not know who hosts the site, read the next paragraph. What if you have been asked to update a website and you do not have the username and password? Now, unless the information is private, you will see the various contacts on the account and something called name servers. Sometimes one of the contacts will be at the hosting company. Typically the hosting company can only send the password to one of those contacts so if none of them are current you will have to prove that this is your site.

Also the name servers will usually tell you who the hosting company is. For example, if you look up openskywebdesign. We are not going to worry about those in this document. Notice that there are numerous examples of HTML commands prior to the text, but fewer commands within the text itself.

Most HTML commands come in pairs. The purpose of HTML commands is to describe the desired layout and presentation of the document. These commands are then interpreted and the result displayed to the user by a web browser, such as Internet Explorer, Chrome my preference or Firefox - software which is easy to come by on any machine.

One of the most exciting features of HTML is the ability to link a document to other documents, not just on your web site but on any computer in the World Wide Web. Also many links are indicated with buttons or menus or even dynamic menus. The style for links in this document is to have the underline appear only when your mouse cursor is on a link you have not yet visited.

Another important feature of HTML is the ability to easily include pictures and other graphic images within the text of the document. Mixing pictures and words is a very powerful way to get your message across. The image files can also be files anywhere on the web or local site.

The standard type for an image is a. Presenting documents for viewing on a computer screen is different from an on paper or book presentation. No longer do we need an index - we can ask our browser to search for any character string we want. Page numbers no longer have any relevance either. Sections need to be short enough to be read in a screen or two. You also have the possibility to associate your new project with a Git repository. This can be a good idea since it gives you version control but you can skip it for now.

We will deal with everything under Servers on the left side later. Same with CSS Preprocessors , which is only important when you use that kind of thing. What is important to us is Local Info under Advanced Settings. Be sure to click on the folder icon on the right where it says Default Images folder. Then, go to your newly created site folder, open it, create a new folder called images and select that as your default folder.

That way, Dreamweaver will save images associated with your site automatically in this place. We will start with the homepage. You can either create a completely new file or use an existing template. The program comes with a few of those see Starter Templates. Right now, however, we want to create a new and blank HTML document.

HTML is set by default and you can leave that as is. Pick index. This will get you to the following screen. This is what we mentioned in the beginning: a live view of what your site looks like blank, at the moment and the code behind it.

You will also notice that Dreamweaver has automatically created some basic HTML markup that you can build on. To insert an element into the page, you first need to choose its location. After that, you need to go to the Insert tab in the upper right corner.

This gives you a list of common HTML and site elements that you can add to your page. Scroll down until you can see Header as an option. You will soon understand what this means. In this case, we will use class named site-header. After you type it into the field, click on OK inserts the header into the page.

You will also see it appear inside the HTML document. As the next step in this Dreamweaver tutorial, you will change the text inside the header and also turn it into a heading. For both — first mark the text in the code editor at the bottom. After that, go back to Insert , click on the arrow next to Heading, and choose H1. For more information on heading tags, read this article. After that, you can also type in a title for your page. In your real website, you would choose something descriptive with keywords and not just Dreamweaver Test Site as in the example.

Alright, you have just created a page header! In case you are not familiar with it, CSS is the part that provides all the styling on a web page. It allows you to define colors, the dimensions of elements, font types and sizes, and a whole lot more. We want to use the markup to spruce up our page title and also learn how to change CSS in Dreamweaver. 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. To edit a template for a Contribute site, you must use Dreamweaver; you cannot edit templates in Contribute. Use the Templates category of the Assets panel to manage existing templates, including renaming template files and deleting template files.

You can open a template file directly for editing, or you can open a template-based document, then open the attached template for editing. When you make a change to a template, Dreamweaver prompts you to update the documents based on the template. The Assets panel lists all of the available templates for your site and displays a preview of the selected template. This method of renaming works in the same way as renaming a file in Windows Explorer Windows or the Finder Macintosh.

As with Windows Explorer and the Finder, be sure to pause briefly between clicks. Do not double-click the name, because that opens the template for editing. When you make a change to a template, Dreamweaver prompts you to update the documents based on the template, but you can manually update the current document or the entire site if necessary.

Manually updating template-based documents is the same as reapplying the template. You can, however, use Dreamweaver to change a template for a Contribute site. Contribute retrieves new and changed templates from the site only when Contribute starts up and when a Contribute user changes their connection information. If you remove an editable region from a template, a Contribute user editing a page based on that template might be confused about what to do with the content that was in that editable region.

The template file is deleted from your site. Documents that are based on a deleted template are not detached from the template; they retain the structure and editable regions that the template file had before it was deleted. You can convert such a document into an HTML file without editable or locked regions.

Legal Notices Online Privacy Policy. User Guide Cancel. You can perform the following template management tasks using the Assets panel:. Create a template Edit and update templates Apply or remove a template from an existing document.

Open a template for editing. You can also manually update the documents for template changes if necessary.