dreamweaver

What is JavaScript?

noreply@blogger.com (ashok) — Thu, 26 May 2011 08:42:00 +0000

Another term you are going to hear good bit about working with web pages is JavaScript. JavaScript is a scripting language often use for adding interactivity and functionality to web pages. It was created in 1995 by Netscape. It is been gaining popularity ever since. Although it shares the similar name, Java Script actually has nothing to do with the programming language Java.

Netscape license the term Java from son to help in the adaption of the new scripting language and it seems to be paid off. Java script is still around and more robust than ever. Even Netscape has for the most part sees to exists. Java Script allows to create interactive element such as rollovers, open new browser windows, about the forms and generate dynamic content. Many standard JavaScript libraries such as JQuarry, prototype and adobe’s spry library have been created to help web designers control complex interactions and functionality. If learning scripting language has you worried… don’t. Dreamweaver has JavaScript behind the scene as you build pages. Using behaviors will add the appropriate JavaScript to your page. Adding spry elements and functionality will prop Dreamweaver to create a sprite assets directory and add the necessary JavaScript files to the folder. Even smaller things like adding Flash files to your site will add links to your JavaScript that will help with flash detection and controlling active content in internet explorer. Truthfully if you ever want to control this type of functionality to yourself learning JavaScript is necessary and good thing. For the most part however Dreamweaver can handle what you will want to do initially with JavaScript automatically.

What is CSS?

noreply@blogger.com (ashok) — Thu, 26 May 2011 08:42:00 +0000

Another standard web technology that you will need to become familiar with when designing websites is CSS or Cascading Style Sheets. CSS is a collection of styles that control layout and presentation of XHTML. Styles can target specific elements, IDs, class names or combination these elements to write greater control over specific style application. The main purpose of using CSS is to separate structure and presentation.

That way your code is left to describe the meaning of the content. While the CSS controls typography and layout. Even better your site is now easier to update and maintain as your CSS can be contained in the single external file. If you wanna change how your main heading looks size wise for example you can change single rule and the change will cascade throughout your entire site. Another advantage in using CSS is the ability to change style sheets for different devices. You can use one style sheet for screen devices, another for print and yet another for handheld devices. That way the same content can be given three very different presentations for different devices. When writing style you can place them in external style sheets embedded then with specific sheets or write them inline in the specific tags. How you write your CSS determines in which order they cascade applies styles and it gives you greater control over styling. While we will discusses best practices and strategies for writing your CSS later, it’s important to note that Dreamweaver integrates cascading style sheets in every workflow and process that can affect layout and styling. So understanding how CSS works and having a site wise strategies emplaced priority building pages is essential to ensuring efficient style application.

File name conventions

noreply@blogger.com (ashok) — Wed, 25 May 2011 05:53:00 +0000

As you create files for the web understanding the rules governing the naming is vitally important. If your files are not named correctly certain pages might become inaccessible or just not work properly. Remember the web pages contain links to other web pages and assets. If file naming isn’t handled correctly your site’s functionality can really suffer. Fortunately, the rules for file naming conventions on the web are pretty easy to follow.

First, don’t use any spaces in your file names. If you ever file these longer than one word use ‘_’ underscore or – hyphen to separate the word. Most web servers will allow file names with spaces but when link is resolved, the special character percentage 20 can sometime used in place of space. This is really messy and can lead to a lot of confusion when sending links or displaying your rules. Second, shorten the file name if you can, rather than ‘about_us.htm’ how about just ‘about.htm’? Shorter names are easier to remember and makes URLs easier for clients to type. Next, avoid using special characters, no dollar signs ‘$’, exclamation points ‘!’, forward or back slashes, question marks or periods or really any other special characters punctuation. Many of these symbols are used to denote things like directory structure, URL parameters or other meanings that you could unwillingly trigger. Numbers are okay to use in file names just avoid using them as the first character. Also avoid uppercase letters if possible. Most web servers won’t care but some unique servers are case sensitive and links could not be result correctly even it spells correctly. When using extensions just be consistent, for non dynamic web sites it’s okay to either use dot htm or dot html. To avoid having worry about it you can set up a default extensions in Dreamweaver preferences and Dreamweaver will resolve the extension for you.

What is an index page?

noreply@blogger.com (ashok) — Mon, 23 May 2011 10:33:00 +0000

You may have noticed when surfing online that often you pointing directly to the page such as lynda.com/aboutus/mission.esp like we are here. Other time you are simply pointing to directory or root directory such as lynda.com so if we go backup and we browse to lynda.com we are still to the page even though we are pointing a specific page that lynda.com.
So how does the browser know where to go when you do an exclusively define the page as part of the path. Each directory including the root directory can have a default page when that opens up simply by pointing the browser to that directory. That page is often referred to as the index page. Since that is the most commonly named. Each web server has preference that can be set when choosing the directories default page name. Although most web server are set to either display index.htm or default.htm as the default page. Default.htm is not widely used any more so you probably pretty safe in sticking with calling your default page index.htm. For our groundswell site our index.htm page will be our site’s home page. If you don’t put it in index file in the directory some web server will displays a file listing of all the files in the directory. This can be a real secure issue. So placing it in index page in each directory is not a bad practice although these days most web servers have preferences that prevent directory listing form occurring. The best thing to do is to check with your hosting company to see if you can set these preferences.

Current Web Design Practices

noreply@blogger.com (ashok) — Mon, 23 May 2011 10:31:00 +0000

In past web pages have almost been self content. All the content, presentation, interactivity and structure have been contained within one file. Links were made to external assets such as images but by enlarge the code for the web page contented everything the browser needed to display the content. That way of working had considerable limitation not the list of which was HTML’s poor presentational capability. As web standards, such as CSS and XHTML began to gain wider adaption.

Most designer started to design web pages that were more compound documents that is document that reference other files to achieve full functionality. It’s not in common now for example for a XHTML page to contain nothing beside the basic structure in text of the file. All presentation, interactivity, functionality and dynamic content will be contained in other external files that are linked to the XHTML files. You might have an external CSS file controlling typography in layout and external java script file handling user interactivity and special effect and in data base being access for additional content. This approach may at first sound complicated but it has several advantages that is later adapted as a standard. First it makes your contents more accessible. If everything but the structure is script away other user agents can access these content without having the also understanding your CSS or run your java script. Second it makes repurposing these contents. Now instead of having to create different versions of your site for different devices you can simply change the CSS used for your site when printing or when used on mobile devise. You can even create style sheets for screen readers to further increase accessibility. In addition to these advantages it also makes working on in updating your sites easier. Instead of having change in your font size for your main heading on every single page for example you simply change one file and your entire website updates. And in collaborate environment you could have one team working on the styles, one working on external java scripts and one working on XHTML without ever worrying about overwriting what somebody else is doing. As we work on groundswell site pay attention to this approach. Our styles, scripts, and other assets will all remain in external files.

What is XHTML?

noreply@blogger.com (ashok) — Mon, 23 May 2011 10:22:00 +0000

Around January of 2000 the World Wide Web consortium the group that works to define and establish web standards announce the move from the current standard at that time which was HTML 4.0 to the new standard XHTML. XHTML stands for Extensible Hyper Text Markup Language now over 8 years old this standard XHTML is no longer than new standard it is the standard markup language for creating web content. If you never learned HTML don’t let the prospect of learning XHTML intimated you. XHTML is actually easier to learn than HTML since it contains smaller set of tags and has stricter rules about what allows. Put simply XHTML marks the transition of HTML to XML as XHTML is a combination of these two. By moving towards XML our web content becomes more conscious and its easier for browsers than other user agents to browsing understand. Currently there are 3 versions of XHTML, strict, transitional and frame set. The version your web pages using is coded in the document type definition and helps validation tool know which rules should document should follow. Strict should be used when clean structural markup is the goal. Transitional steel allows some HTML for point 0 attributes making it ideal for backward compactable websites. Frameset is used when you need to use frame within your pages. XHTML transitional is by far the most used and what we will be using on our groundswell site. Although strict is gaining in popularity as older browser use to clients. XHTML comes with creative fine tags to structure it’s contain. In XHTML for example H1 doesn’t mean the biggest boldest heading, it means the most important. Tags have logical meaning and should be used consistently throughout your site. Although XHTML comes with the wide ray of tags to help convey meaning it doesn’t contain enough tags to fully describe everything within your site. There is no side bar or footer tag for example. To help further describe your page elements you will often use the ID and class attributes of tags to attach further meaning. We will talk more about IDs ad Classes later but they worth mentioning here so you will remember that they are used with to know logical structure of your site and not just creating the style. If all this made you a bit nervous don’t worry Dreamweaver makes the creation of XHTML super easy setting a single preference. Make sure that all code generated is exactly the flavor of XHTML that you need and that will conform to that flavor standards. When we define out sites later we’ll make sure that we set the version of XHTML we want use for the document creation and will be all set. If you want to learn more about XHTML you can browse to the World Wide Web consortium’s home page at w3.org. Scrolling down you will see a list of topic somewhere left hand side and if you go all the way down the XHTML you can simply click on that and it will take you to the XHTML working groups home page. This page contains all the information that you will ever want to know about XHTML. So if you are looking for little like reading exact specification of XHTML.

Basic Site Structure

noreply@blogger.com (ashok) — Tue, 10 May 2011 06:32:00 +0000

If you are brand new to web design and brand new to Dreamweaver you are probably egger to open it up and get started. However before we start using Dreamweaver is symphonic over some of the more fundamental concepts and best practices of web design. That way you ensure that you are using Dreamweaver coreiclick. And you understand why Dreamweaver operates the way it does when building websites.

The first concept I want to discuss is basic site structure. To those new to websites the thought of creating an entire website can sometime be intimidating. The truth of the matter is the most websites are in fact quite simple. Websites at their core are merely a collection of files and folders, just like any other project on your computer. Although every websites are different some standard have emerged when structuring your site. They can help keep your site organized and running smoothly. To create your website you will first need to folder on your hard drive to put it in. This folder is referred to as the root folder and later when you define your site this is the folder that you point Dreamweaver towards. Inside the root folder, you will structure your files and folders based on how they need to appear online. If you have a small size for example all your HTML files might go right into the redirectory as your sites get larger or more complex. It’s not a common to create a subdirectory to create more structure within your site. You can easily see the structure when browsing online. If you go to Lynda.com for example and look at the about us portion of the website, we can see that the URL is lynda.com/aboutus/mission.esp. This means that inside the root directory the folder named about us and inside that folder there is a file named mission.esp. In addition to structuring pages this way, most web designer will site assets into their own folders as well. It’s a good way to organize the site and make additional assets easier to find. Images, CSS, external scripts, videos and other assets are routinely placed within their own folders. For our groundswell site, our assets will also within the _ “underscore” placed in front of the folder name. This helps to move these assets folders to the top of any directory structure and makes it easier to identify them as assets rather than mistakes.