|
|
Archive for the ‘HTML’ Category
Thursday, April 15th, 2010
Although Adobe Dreamweaver is a visual editor it is not a word processor; and, therefore, the text it allows you to create is HTML text and HTML handles text in a different way to print-oriented environments such as word processors and DTP packages. Although adding text to your web pages feels kind of similar to working in any text editor, you will sometimes find a few quirks in the way that Dreamweaver handles text.
Text in HTML is all about structure. Browsers assign a structural importance to text based on the HTML element which contains them. Text inside a heading element, such as h1 or h2, is given more prominence than text contained within a paragraph element. Dreamweaver uses the paragraph element as the default container for text; so, if you create a blank page in Dreamweaver and type some text, as soon as you press Return, your text will be placed inside a paragraph element.
The same result is achieved whenever you paste text from another environment. Dreamweaver will recognise returns and use them to split the text into paragraphs. It will also attempt to translate any formatting to its nearest HTML equivalent. Thus, if you copy some data from an Excel spreadsheet and paste it into an HTML page in Dreamweaver, you will end up with a table containing the Excel data. Similarly, if text from Word which has been formatted using Word styles such as “Heading 1″, “Heading 2″ and “Normal”, Word will place all “Heading 1″ text inside h1 elements, “Heading 2″ text inside h2 and “Normal” text inside paragraph elements.
Most of the time, users edit text using Dreamweaver’s Design view and those who are unfamiliar with HTML may be occasionally be confused by the fact that Dreamweaver treats text as a separate entity to the element that contains it. Thus for example, in design view, if you triple-click on a heading to select it, what Dreamweaver actually selects is the text inside the heading. The heading element itself is not selected. Once users are familiar with HTML, this behaviour becomes less confusion.
Dreamweaver offers a neat way of keeping an eye on HTML elements while working in Design view: the tag selector. This is the area on the left of the status bar at the bottom of the document window. It displays the tags representing the element which contains the currently highlighted item. These tags can also be used to select an element and its contents. Thus, to select a heading, ignore the text and just click on the tag representing the element which encloses it.
Another piece of advice I often give to newbie Dreamweaver users is to stay away from split screen view. This is where code and design views are each allocated half of the screen. Unless you creating something fairly intricate, like a complex form, split view is a bit wasteful. Just looking at the tag selector is usually enough to let you know what HTML elements you are working with.
You can get up to date information on Dreamweaver training courses, visit Macresource Computer Training, an independent computer training company offering Dreamweaver training courses at their central London training centre.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, dreamweaver training, HTML, web design, web development Posted in HTML | No Comments »
Friday, April 9th, 2010
Dreamweaver’s Assets panel offers a convenient way of using and reusing web page elements such as images, colours and Flash movies. It also contains two types of assets which are unique to the Dreamweaver environment: library items and templates. Templates act as master pages which control the layout of all the pages in a site or in a certain section of a site. Library items contain web fragments which you may insert anywhere you like, on any page you like. The power of library items stems from the fact that if you update the library item, you can simultaneously update all the pages into which you have inserted that item.
It’s worth pointing out that library items are a Dreamweaver feature and are not part of the Worldwide Web Consortium’s specifications. This may make them unattractive to some developers, especially bearing in mind that the functionality they provide can also be obtained through the use of server-side includes and that server-side includes is a standard feature offered by most web servers. If you decide to stop editing your pages in Dreamweaver, library items will simply cease to be recognised.
In my opinion, library items are nothing but good news. They offer a great way of adding such items as navigation panels, headers and footers to a page and being able to update the item right across the site simply by updating the original library item.
There are two ways of creating library items. The first and most common method is to highlight some content which already exists on the page and convert into a library by opening the Assets panel, clicking on the library icon then choosing New Library Item from the Assets panel menu. The second method is to simply create a blank library item and then add content to it. To do this, simply choose New Library Item from the Assets panel menu while no content is highlighted on the current page. In fact, you don’t even need to have a page open.
Library items can be edited at any time by simply double-clicking the name of the item in the Library section of the Assets panel. The library item opens in a window similar to an HTML document window. However, since you will often be editing elements out of context, you will often not be able to see the item as it will appear when inserted into a page.
Whenever you save the changes you have made to a library item, Dreamweaver will offer you a chance to update all instances of the item on all pages into which it has been inserted.
If you would like to learn more about Dreamweaver training courses, visit Macresource Computer Training, a UK IT training company offering Dreamweaver training courses at their central London training centre.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, dreamweaver training, HTML, web design, web development Posted in HTML | No Comments »
Friday, April 9th, 2010
It’s not surprising 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.
Whenever you create a new web page in Dreamweaver, 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.
Many users who are still new to 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.
If you would like to learn more about Dreamweaver training courses, visit Macresource Computer Training, a UK IT training company offering Dreamweaver Classes at their central London training centre.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, dreamweaver training, HTML, web design, web development Posted in HTML | No Comments »
Tuesday, March 30th, 2010
The Internet today has become so large and complex that the need for Web development training courses has risen. The successful web site demands for a well-rounded developer and the outside competition is high. The best way to ensure you have all the skills you need is to enroll yourself in a class.
Fortunately for you, these marvelous new age classes offer the means to get the hands on experience you need for maximum effective teaching. The latest page design programs are also introduced for your use as well as a deep study of all the other applications you can add to spice up your site.
One major upside about being trained is that you learn all the sides to developing. It requires not only the creation of the code, but all of the planning and managing as well. When properly maintaining a site, it involves all components to come together and to work as a team.
A fully functional web site demands a knowledgeable designer. No matter what your future goals may be, the bottom line is that you need to be good at what you do. Taking a class will surely promise you all the knowledge you are seeking to acquire.
With the many other great things you will learn, you will also learn how to create any type of site you wish to. The extra spices such as sound and video are some of the key applications that are taught so that you can get all the aspects of the web you can get.
For the serious developers out there, you too are in need for web development training courses. Don’t you want to be sure you received all the proper training you need?
You can find out more about Web Development training courses, visit On Site Training Courses . Com, a UK IT training web site offering Web Development Classes all over the UK.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, HTML, web design, web development Posted in HTML | No Comments »
Thursday, March 25th, 2010
Templates are a key feature of Adobe Dreamweaver, enabling you to control and update the appearance of an entire site. They are one of the features covered in detail on our Dreamweaver training courses. This article looks at how to set up, apply and modify templates. Templates facilitate site management by allowing you to modify and update several pages at once. A template is a web document (HTML, ASP, ASP.NET, etc. ) which contains a combination of locked elements and editable regions. When creating a new document, if you opt to base it on a template, the page will inherit all of the elements which the template contains. You individualise the page by modifying the content of the editable areas. If you later modify the template, all of the pages which are based on it can be automatically updated.
You can create templates from scratch or you can take an existing document and convert it into a template. To create a template from scratch
1. Choose New from the File menu. This displays the New Document window.
2. In the first column of the New Document window, choose the New Template option.
3. In the second column, specify the Template Type ((HTML, ASP, ASP.NET, etc. ).
4. In the third column, optionally choose one of Dreamweaver’s preset CSS layouts or click None to start with a blank page.
5. Should you decide to use one of the CSS layout, in the forth column, you will need to specify whether the necessary code is placed in the head of the document, in a new CSS file or an existing one.
6. Click the Create button to generate your new template.
When you create your first template in any site, Dreamweaver creates a special Templates folder which it stores in the root folder of the site. All templates are automatically stored in this folder. You can also take a regular HTML document and convert it into a template.
1. Open the document which you wish to convert into a template.
2. Choose Save As Template from the File menu.
3. Enter a name for the new template and click Save.
By default, all of the elements that you place on a template will be locked. They will appear on each page based on the template but will not be editable. To create the locked regions of a template
1. In the templates folder, double-click the name of the template you wish to edit.
2. Create the elements which you wish to appear on every page.
3. All of these elements will remain locked and unchangeable on all pages based on the template.
4. Should you save the changes you have made to the template, Dreamweaver will remind you that you have not yet created any editable regions. Click OK.
You can find out more about Web development training courses, visit Training Company . Com, an independent computer training website offering Dreamweaver training courses at their central London training centre.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, dreamweaver training, HTML, web design, web development Posted in HTML | No Comments »
Thursday, March 25th, 2010
Adobe Dreamweaver contains a large array of floating palettes called panels. Some of these contain options that are duplicated both in the main and context menus or which can be accessed with keyboard shortcuts. You will therefore find that you do not need to keep all of Dreamweaver’s panels open.
As a new Dreamweaver user, the first document view keyboard shortcut you should learn is F4. This is the shortcut for Window - Hide/Show Panels (or View - Hide/Show Panels). This very useful toggle causes all of Dreamweaver’s panels to disappear or reappear at their original positions.
The commands for revealing and hiding Dreamweaver’s various panels are to be found in the Window menu. However, in addition to the panels, Dreamweaver has two other tools palettes which are referred to as toolbars. One of these, the Document toolbar, is normally displayed at the document window. To make this toolbar visible, choose View-Toolbars-Document.
The three buttons on the left of the Document toolbar are perhaps the most frequently used: Code, Split and Design views. The document title box is used to set the title which will appear in the title bar of the user’s browser (as opposed to the document’s file name). The file management pop-up menu contains options for uploading and downloading the document as well as commands to be used when working in collaboration. (These options are also available in the Site menu.) The browser preview pop-up menu allows you to preview your page in any of the browsers you specify using the Edit Browser List command.
Dreamweaver’s document toolbar is only visible if you are working in document view. To be working in document view simply means to be editing an HTML, or other, document. If you are not in document view then you are normally working in the Files panel. There are three ways of entering document view from Files view.
Firstly, you can simply open an HTML document by double-clicking its name or by choosing File - Open.
2. You can also create a new blank file by choosing File - New.
Thirdly, you can activate a document which is already open by clicking its button in the Windows Taskbar or by choosing its name from the bottom of the Window menu.
You can get up to date information on Web development training courses, visit Training Company . Com, a Computer training website offering Dreamweaver training courses at their central London training centre.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, dreamweaver training, HTML, web design, web development Posted in HTML | No Comments »
Tuesday, March 23rd, 2010
A web page is pure text and is therefore incapable of embedding images in the way that word processing documents can. Instead the page contains a reference to the image which enables the browser to locate and display the image when necessary. Images must be therefore be uploaded to the server along with the HTML pages. This can only take place properly if the images are located in Dreamweaver’s local root folder. Whenever you insert a graphic which is not located in the root folder of the active site, Dreamweaver displays a dialogue offering you the opportunity of saving this image in the current root folder. When this message appears, you should click the Yes button and save the image somewhere in the current root folder.
Another way of inserting images is to use the Assets panel (Window - Assets). Basically, the Assets panel displays elements which have already been used within your Dreamweaver site(s). Assets are arranged according to category: to change the category, simply click on one of the icons on the left of the panel. Images can be found in the first category. All existing image assets are available for use within your documents by simply dragging them onto a page.
Should you wish to swap an existing image for an alternative, simply double-click the existing image. A dialogue labelled Select Image Source appears. This is the same dialogue which appears when the Insert Image command is used. Locate and double-click the replacement image.
As a general rule, images should be saved at the size at which they need to appear on the web page. However, where the same image appears on different pages at different sizes, it is useful to import the same image each time and resize it as necessary. This works best if the image is saved at the largest size required and reduced in size on those pages where it needs to smaller. To resize an image:
1. Highlight the image.
2. With the Shift key held down, drag the bottom right corner handle towards or away from the centre of the image. (Holding down the Shift key retains the aspect ratio of the image.)
A rollover image is one which changes appearance when the mouse passes over it. This effect is created with JavaScript. However, Dreamweaver uses visual tools to generate the necessary code.
1. Position the cursor where you want the image to go, then choose Insert - Interactive Images - Rollover Image.
2. Type in a name for the image.
3. Click on the Browse button next to Original Image, then locate and double-click the appropriate image.
4. Repeat step 3 to locate the Rollover Image.
5. Finally, click on the Browse button next to When Clicked Go To URL then locate and double-click the linked file.
You can get up to date information on Dreamweaver training courses, visit Macresource Computer Training, an independent computer training company offering Dreamweaver Classes at their central London training centre.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, dreamweaver training, HTML, web design, web development Posted in HTML | No Comments »
Monday, March 22nd, 2010
When working in Dreamweaver, you alternate between two main views of your web pages: files and document. The Files panel gives you an overview of the entire site and work with the entire site structure. It shows listings of the files in your local root folder and on your server. When you open any document, by contrast, you work on one HTML page at a time, adding and modifying content as necessary.
Once you have finished defining your site, Dreamweaver will open the Files panel automatically and the site you have just created will be the active site. You can also enter site Files view at any time by choosing Window - Files. You can activate a particular site by choosing its name from the site pop-up menu. You can also choose Site - Manage Site and then select the desired site name and click Done.
The Files panel normally consists of two listings: on your right, the files in your local root folder are displayed; on your left are shown the files on your server. The toolbar above the file listing contains tools for uploading and downloading files to and from your server. Moving your mouse over an icon displays a tooltip explaining its function. The Connect button is used to establish a connection to the remote server. The Put button uploads the selected file(s) to the server. The Get button downloads files from the server.
Before putting any content into your web pages, the firs step is usually to create all of the HTML files your site will need together with any necessary subdirectories. To create a new file or folder in a particular folder, right click the name of the folder (or of one of the documents inside it) and choose New File or New Folder from the context menu. You can also highlight the relevant folder (or a document inside it) then choose New File or New Folder from the File menu. When creating documents, be sure to enter the necessary file extension: you may type either “.html” or “.htm”. Naturally, folder names do not need an extension.
One of the chief advantages of creating all the files needed for a web site in Files panel view before beginning to edit any documents is that links between pages can then be created by browsing for the linked page which otherwise would not yet exist. Dreamweaver also has a useful Point to File facility whereby a link can be created by dragging from the link object to the linked file.
A plus sign (+) is shown next to each folder which contain items. To display the contents of a folder, simply click once on the plus sign. When the contents of a folder are displayed, the plus sign changes to a minus. To hide the contents of a folder, click the minus sign.
Using Dreamweaver’s Files panel view is very similar to working in Windows Explorer or the Macintosh Finder. To delete a file or folder, click once on the item to highlight it then press Delete or Backspace. You can also right-click on the file or folder and choose Edit-Delete from the context menu. It is also important to remember that the site listing is a live indication of a section of your hard disk. When you delete a file or folder, you are deleting an item from your hard disk in real time.
To select a non-contiguous range of files and/or folders, click on the first item then, with the Control (Command) key held down, click on each of the items you wish to add to the selection. The items being selected can be in separate folders and you may collapse and expand folders during the operation without destroying the selection.
To change the name of a file or folder in Files panel view, click on it with the right mouse then choose Edit - Rename from the context menu. You can also click twice on the current name of the item, taking care that the two clicks are on slightly different parts of the name. The name will then be highlighted, ready to be edited.
You can find out more about Web development training courses, visit ASP dot NET AJAX . Net, a Computer training website offering ASP.NET Classes at their central London training centre.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, dreamweaver training, HTML, web design, web development Posted in HTML | No Comments »
Sunday, March 21st, 2010
Although we talk about web sites as if they are single cohesive applications, in reality, a website is a collection of individual files using several different file extensions. These files can be divided into two broad groups: client-side and server-side. In the client-server model, the server manages and supplies the files that constitute a web site and sends information to the clients, the visitors to the website. Client-side files are those which the client’s browser can open and display, such as HTML pages.
The term static is often used to describe client-side pages. They are basically documents sitting on a server, just like Word or Excel documents sitting on someone’s PC. When the client requests a document of this type, the server sends the file to the client and there the matter ends. It is up to the client to digest the contents of the document and display the content in the browser window.
Files referred to as server-side contain code which needs to be executed on the server in order to determine generate the content which will be sent to the client. This code can be written in any one of several different languages, of which ASP.NET and PHP as the two most popular.
To begin ASP.NET development, you do not need any programming experience, but you do need to know the basics of web development. You need to have a good grasp of how HTML and CSS work to create web pages. There is no point in attending an ASP.NET training course if you are still shaky about the elements which make up a basic web page.
The Microsoft .NET framework, together with ASP.NET, provide an environment which allows you to enhance your web pages by adding sophisticated interactivity such as the ability to search a database server for elements matching a given set of criteria. And the great new is that you do not have to become an expert programmer overnight in order to start creating ASP.NET applications. Microsoft have developed a couple of software tools which enable you to add quite complex and sophisticated functionality to your website using simple visual techniques and a minimum of coding.
Another bonus is that one of these software tools, Visual Web Developer Express Edition, is absolutely free of charge. So, if you have mastered the basics of web development and are looking to get into server-side development, booking a place on an ASP.NET training class may be just the ticket.
If you want more information ASP.NET training courses, visit Macresource Computer Training, a UK IT training company offering ASP.NET Classes in London and throughout the UK.
Tags: asp.net, computer software, computers and the internet, HTML, microsoft, web design, web development Posted in HTML | No Comments »
Sunday, March 21st, 2010
The Remote Info section of the Dreamweaver site management dialog allows you to supply details of the remote web server. This will be used by Dreamweaver to connect to the server hosting the site so that information can be uploaded and downloaded. For internet sites, Dreamweaver uses file transfer protocol (FTP) to connect to the server, as shown in the QuickTime example. For intranets and sites being developed on a local server, the Local/Network option is used.
For FTP host, you can enter either the host name or IP address of the FTP connection to your web server. The name usually takes the form ftp.yoursite.com or www.yoursite.com. If in doubt, consult your internet service provider (ISP).
The Host Directory is the folder on the web server in which internet files need to be uploaded if they are to be visible on the web. Check with you ISP to see whether files should be uploaded to the root directory or into a sub-directory. If files are to be uploaded to the root, just leave this box blank.
In the next section, you need to specify the login and password which have been allocated to allow you FTP access to the server hosting your site. Note that Dreamweaver activates the save password option. If you think this is a security risk then click the checkbox to deactivate this option. Again, this information will be available from your ISP.
Firewalls are widely used by companies to block access to their intranets and to control how their own workers access the Internet. If your company uses a firewall then you must enter the relevant information in Preferences. Once you have done so, the Use Firewall option will be automatically selected. If your company uses a firewall, check with your network administrator to see whether it uses passive FTP, a system whereby the FTP connection is initiated by the client rather than the server.
The Check-in/Out facility within Dreamweaver can be used when several team members are working in collaboration on the same site. When a team member is working on a particular file, Dreamweaver will place a check mark next to the file in the remote listing in site files view as well as the name and email of the person editing the file, so other users can email him or her. If you activate this option, you must enter your name and email in the appropriate boxes.
If you would like to learn more about Dreamweaver training courses, visit Macresource Computer Training, a UK IT training company offering Dreamweaver Classes at their central London training centre.
Tags: Cascading Style Sheets, computer software, computers and the internet, CSS, dreamweaver training, HTML, web design, web development Posted in HTML | No Comments »

|