Posts Tagged ‘Cascading Style Sheets’

Editing The Head Content Using Dreamweaver CS5’s Visual Tools

Thursday, September 15th, 2011

A web page consists of two main elements: the head and the body. The body element contains all of the content which will be displayed in the browser window and the majority of which will be visible to the user. The head element, by contrast, contains information about the web page itself; meta information as it is sometimes called. In this article, we will look at the different ways of modifying elements within the head of a web page in Dreamweaver CS4, beginning with the title.

The title element is designed to contain a broad description of the content of the page. It is very important that each page should have a title and that the title is pertinent to the web page that contains it. Dreamweaver always adds a title element to every new page containing the text “Untitled Document”. Perhaps the simplest way of modifying this default title is to enter a title in the Document Title box of the Document toolbar which is normally displayed at the top of the page. Another method is to choose Modify – Page Properties and then click on the Title/Encoding category on the left of the screen.

The title element is the only element which is required to be placed within the head element. In addition a number of optional meta elements may be placed in the head area to provide further information about the current page. One such meta element is generated automatically by Dreamweaver along with the title: the content-type. This declares the character encoding for the benefit of the browser and is particularly important if you have a site with an international audience. To specify the character encoding, choose Modify – Page Properties, click on the Title/Encoding category on the left of the screen and then choose an Encoding option from the drop-down menu.

The meta description element is one of the most important since, along with the page title, it is often displayed when your page shows up in the search engine results. The description should consist of a couple of sentences summarising the content of the page. To set the description in Dreamweaver, choose Insert – HTML – Head Tags – Description then enter your description in the dialogue box which appears.

Let’s end by mentioning one final meta element: keywords. The keywords meta element, often misused for spamming in the early days of the web, should contain a list of the important words and phrases to be found on the current page. Only text which actually appears on the page should be listed. To generate the meta keywords element in Dreamweaver, choose Insert – HTML – Head Tags – Keywords.

You can get up to date information on Dreamweaver training courses, visit Macresource Computer Training, an independent computer training company offering Dreamweaver Classes in London and throughout the UK.

Subscribe to My Newsletter
You will learn some of the things even the Gurus don't want you to know!
Name:
Email:
 
Powered by Optin Form Adder

Tags: , , , , , , , , ,
Posted in computers | No Comments »

Adobe Dreamweaver Makes Web Development Possible For Everyone

Wednesday, July 27th, 2011

I work for a company that runs Dreamweaver training courses and we find that there is no longer a typical user of this great web development program. Dreamweaver users now seem to come from all different types of company and from all walks of life: private individuals, financial people, marketing people, people in the health service, academicians It seems everyone needs to learn the basics of web development nowadays.

Of the people now wanting to learn Dreamweaver the vast majority attending our courses will not necessarily become specialists in web development. Rather they have a need to develop content for a web site or to build a web site for a particular purpose. They have looked into the choices of software available and come to the conclusion that Dreamweaver is the best package to use and now they need to learn how it works.

Dreamweaver has become the industry standard web development software, seeing off rivals like Microsoft FrontPage. And it deserves its position. It is a great software package with powerful features and an approachable interface which lets anybody who can use a computer embark on a basic software development project and, with a bit of patience and knowledge of a few fundamentals, bring it to a conclusion. Dreamweaver has attained this dominant position because its creators have always aimed to satisfy the needs of all the different types of users of their software.

Back in the nineties when web editors (such as PageMill, Hot Metal Pro, FrontPage and Dreamweaver) started to appear, they were greeted with some scepticism by serious web developers (coders) who felt that they produced sloppy code and were really only of interest to people who didn’t understand code and, basically didn’t know what they were doing. Even back then, Macromedia, who owned Dreamweaver, bundled HomeSite (a Windows HTML code editor) or BBEdit (with the Macintosh version) to keep serious web developers happy.

While other programs such as FrontPage were content to generate code which contained a vast array of confusing proprietary elements which were not essential to the page, Macromedia were adding features to Dreamweaver which demonstrated their commitment to making it a serious web development tool. With each release of the program, they made the coding environment more complete, adding features such as line numbers, code-hints and colour-coding. They also added powerful utilities for checking and cleaning up the code generated visually and in other environments such as Microsoft Word.

In June 2000, Macromedia added another string to their bow by releasing a special edition of Dreamweaver called Dreamweaver UltraDev. This version of Dreamweaver contained all the features of the basic programs but added special utilities for creating dynamic content. Users could create server-side content using ASP, ColdFusion or JavaServer pages. The program automatically generated code for connecting to a database, retrieving and displaying data and linking elements on a web page to a data source. Two years later, they dropped UltraDev and added all of its functionality into the standard version of Dreamweaver, further enhancing its appeal to serious web developers.

Macromedia further enhanced Dreamweaver’s reputation as a tool for serious web developers by added collaborative functionality to the program; features which acknowledged the fact that a lot of web developers are part of a team. Dreamweaver’s two main collaboration features are “File check in Check out” and “Design Notes”. The former allows developer A to open a file and check it out; so that developer B knows that the file is being worked on by A and doesn’t start making conflicting changes to the file. The design notes feature allows developer A to attach a note to a particular file which can then be picked up by developer B.

Recognising that the web is not a static environment but is still constantly evolving, Macromedia (and now Adobe) have kept an eye on emerging web technologies and incorporated content relating to those technologies. Dreamweaver behaviors can be used to create useful JavaScript functions for such things as form validation. XML code can be edited and validated. Another illustration of the way in which Dreamweaver embraces emerging standards can be seen in the way in which Dreamweaver CS3 now encourages developers to use CSS to layout their pages rather than using tables, making their pages compliant with current standards.

The newest release of Dreamweaver, CS3, also includes support for Ajax an exciting new way of creating interactive Web applications using XHTML, CSS and JavaScript. Dreamweaver’s implementation of Ajax is via Adobe’s Spry Framework for Ajax. Using the easy to use Spry interface, developers can create sophisticated Ajax interface elements, special effects and display data-driven content on their pages.

Each new release of Dreamweaver brings exciting as well as practical new features which always seem to slot nicely into the familiar easy-to-use interface. This coupled with the fact that Dreamweaver always allows experienced professionals full access and control over every aspect of the web pages and web applications they are developing should ensure that the program continues to be the automatic choice for any individual or organisation needing a decent software tool for web development of any kind.

If you would like to learn more about Dreamweaver training courses, visit Macresource Computer Training, an independent computer training company offering Dreamweaver Classes at their central London training centre.

Tags: , , , , , , , ,
Posted in computers | 61 Comments »

Dreamweaver CS4 Guides Newbies Through The Intracies Of HTML And CSS

Monday, September 28th, 2009
by Michael Rose

It is now wonder that Adobe Dreamweaver is so popular and so widely used. It offers the general user a way into the world of web development without first having to learn too much about the technologies which are used in building modern websites. Among the powerful features which Dreamweaver makes available to inexperienced users are preset CSS layouts, accessibility guidance, HTML guidance, CSS guidance and standards compliance. Let’s look at how these features are implemented and how Dreamweaver can make you look good as a web developer before you know enough to look good on your own.

When you create a new web page in Dreamweaver (File – New), you are given the option of basing the new page on one of the preset CSS layouts built into the program. Using CSS for page layout requires a fair amount of experience of the quirks of CSS and is no job for a beginner. Simply by choosing the layout which is closest to their requirements, users can go ahead and create CSS web pages which will work and which can be customized to suit their requirements.

Dreamweaver’s accessibility preferences by default cause the program to display useful alerts to remind the user to incorporate accessibility features into the elements being placed on the page. Thus, for example, each time an image is added to the page, a dialogue box will appear which contains a box for the user to enter the alternate text. Similarly when adding a form element, the form accessibility dialog prompts you to enter both and ID and the label text.

Most new users of Dreamweaver will also be fairly new to web development and may still be a little shaky on HTML and will typically build web pages visually using Dreamweaver’s Design mode. Whenever I run a Dreamweaver training course, I always make new users aware of Dreamweaver’s tag selector feature. This consists of a hierarchical display of the element which is currently selected on the page, the element which contains that element? and so on, all the way up to the BODY element which of course contains all elements on the page. Clicking on one of the tags displayed on the tag selector cleanly selects the corresponding element. Also, right-clicking displays a useful set of options such as “Remove Tag” and “Set Class”.

Dreamweaver’s context-sensitive Properties panel is another rock on which new users can always count. Unlike previous versions of Dreamweaver, version CS4 makes a clear distinction between structural attributes (which are displayed in the HTML tab of the Properties panel) and CSS attributes (which are displayed in the CSS tab). For example, if you select an element which is already controlled by a CSS rule, the Properties panel will allow you to edit the rule. If there is no rule, it will prompt you to create one.

About the Author:
The author is a training consultant with Macresource Computer Training, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.

Tags: , , , , , , , ,
Posted in computers | No Comments »