HTML 4.0 and 4.01: Concepts
Within HTML 4.0 are specific ideas necessary to study if you’re to have a full understanding of the versions and languages that have followed. Specifically, HTML 4.0 provides these critical concepts as follows:
Deprecation of presentational elements in favor of style sheets. Consider this the heart and soul of contemporary Web design. HTML 4.0 clearly states that the separation of structure and presentation are an imperative goal in order for Web authoring to progress. CSS is the suggested alternative, which in HTML 4.0’s emergence in 1997 was more problematic due to browser support than it is today.
Awareness of Accessibility and Internationalization. HTML 4.0 is very concerned with ensuring that pages are available to those individuals using alternative user agents, whether due to a disability or simply by virtue of circumstance. Internationalization concerns are brought forth in HTML 4.0, and discussions about how to Internationalize and Globalize HTML and XHTML are ongoing.
Improved rendering of Web documents. HTML 4.0 added several elements, specifically in terms of tables, that aid in accelerated interpretation and rendering of markup.
Introduction of three unique DTDs. With HTML 4.0 came the concept of three unique public DTDS: Strict, Transitional, and Frameset. The Strict DTD is HTML 4.0 at its most ideal, with the presentation of a document relying on CSS almost entirely. The Transitional DTD allows for the use of deprecated elements, understanding the transitional need for presentation in HTML. Finally, the Frameset DTD formalizes the use of frames in HTML 4.0 and provides a specific set of rules for their implementation.
HTML 4.0 really upped the ante in terms of offering real options and alternatives to Web developers interested in also writing documents that conformed to W3C goals. However, many authors have missed learning these important concepts, which lay the foundation for XHTML.
With HTML 4.01, a few errors and editorial changes were introduced. These changes are minor in terms of general concept, but are important because it is upon the updated HTML 4.01 DTDs rather than HTML 4.0 DTDs that XHTML 1.0 is based upon.
XHTML 1.0 and 1.1: Current Ideas and New Directions
XHTML 1.0 is the reformulation of HTML as an XML application. This means that documents as well as syntax must conform strictly to the concepts and DTDs of the language version. The ideas from HTML 4.0, especially the separation of document structure from presentation and issues concerning accessibility and internationalization, are intact in XHTML 1.0. What’s more, the three DTD offerings (strict, transitional, and frameset) originally from HTML 4.0 and later refined by HTML 4.01 are essentially the same DTDs found in XHTML 1.0.
XHTML 1.0 is best seen as a transitional language that helps puts professional Web authors in the position of writing specification-oriented markup. It puts browser manufacturers on the hot-seat and tells them “get your acts together!” It also moves us toward the extensible intelligence of XML and away from the limitations of HTML.
But transition also means that readying yourself for XML is very important, too. Fortunately, XHTML contains enough of each to help strengthen your HTML skills and to get those of you unfamiliar with XML more comfortable with its applications. Several of the primary XML concepts introduced in XHTML 1.0 are as follows:
Reintroducing structure back into the language. Picking up on the SGML and XML idea that documents should be written in conformance with the rules set out within the languages, XHTML insists upon a variety of syntax and semantic rules that must be adhered to. One such rule is the idea of well-formed.
Providing authors with incentives to validate documents. The validation of documents is somewhat controversial for a number of reasons. Certain people believe that validation is an unnecessary part of the process so long as the documents are well-formed. However, I personally feel that validation is a powerful learning tool that helps us find our mistakes, fix them, and in the process, understand the way a specific DTD works. Validation, therefore, is encouraged throughout.
Accommodating New Devices. Part of the drive to accommodate XML in the Web development environment has to do with an intriguing phenomenon. If the 90s were the years of information explosion and the movement of the PC from the workplace to the home, this decade will be known for the movement away from the desktop.
With XHTML 1.1, the concept of separation of structure and presentation is complete. XHTML 1.1 has only one public DTD, based on the Strict DTD found in XHTML 1.0. Web authors also have the option to work with modularization. Modularization breaks HTML down into discrete modules such as text, images, tables, frames, forms, and so forth. The author can choose which modules he or she wants to use and then write a DTD combining those modules into a unique application. This is the first time we really see the extensibility introduced by XML at work, because instead of having only the public DTDs to choose from, authors can now create their own applications.
Common Ideas Between HTML and XHTML
How to create HTML forms in Dreamweaver
1. Open a page and place the insertion point where you want the form to appear.
Select Insert > Form, or select the Forms category in the Insert bar and click the Form icon.
2. Dreamweaver inserts an empty form. With a page in Design view, forms are indicated by a dotted red outline. If you don’t see this outline, check that View > Visual Aids > Invisible Elements is selected.
3. Specify the page or script that will process the form data.
In the Document window, click the form outline to select the form. In the Property inspector (Window > Properties), type the path in the Property inspector’s Action text box, or click the folder icon to navigate to the appropriate page or script.
4. Specify the method to use to transmit the form data to the server.
In the Property inspector, select one of the following options in the Method pop-up menu:
Default uses the browser’s default setting to send the form data to the server. Typically the default is the GET method.
GET appends the value to the URL requesting the page.
POST embeds the form data in the HTTP request.
5. Insert form objects.
Place the insertion point where you want the form object to appear in the form, and then select the object in the Insert > Form menu, or in the Forms category of the Insert bar.
If desired, set the properties of the form object after inserting it in the page. For more information, select the form object and click the Help icon in the Property inspector.
6. Adjust the layout of the form as desired.
You can use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a form in another form (that is, you cannot overlap tags), but you can include more than one form in a page.
When designing forms, remember to label the form fields with descriptive text to let users know what they’re responding to--for example, "Type your name" to request name information.
Use tables to provide structure for form objects and field labels. When using tables in forms make sure all the table tags are included between the form tags.
Tips to convert layers into tables
Instead of using tables or Layout mode to create your layout, some web designers prefer to work with layers. Dreamweaver enables you to create your layout using layers, then (if you want) convert them into tables. For example, you might need to convert your layers to tables if you need to support browsers before version 4.0.
NOTE: You can’t convert layers to tables or tables to layers in a template document or in a document to which a template has been applied. Instead, create your layout in a non-template document and convert it before saving it as a template.
You can convert back and forth between layers and tables to adjust the layout and optimize page design. You cannot convert a specific table or layer on a page; you must convert layers to tables and tables to layers for an entire page.
NOTE: Converting from layers to tables may result in tables with a large number of empty cells.
Preventing layer overlaps
Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping layers. If you plan to convert the layers in a document to tables, use the Prevent Overlap option to constrain layer movement and positioning so that layers don’t overlap.
When this option is on, a layer can’t be created in front of, moved or resized over, or nested within an existing layer. If you activate this option after creating overlapping layers, drag each overlapping layer to move it away from other layers. Dreamweaver does not automatically fix existing overlapping layers in the page when you enable Prevent Layer Overlaps.
When this option and snapping are enabled, a layer won’t snap to the grid if it would cause two layers to overlap. Instead, it will snap to the edge of the closest layer.
NOTE: This is a new Note table. It is attached to a ta Table_anchor paragraph tag. To create one, copy and paste from the reference page.
NOTE: Certain actions allow you to overlap layers even when the Prevent Overlaps option is enabled. If you insert a layer using the Insert menu, enter numbers in the Property inspector, or reposition layers by editing the HTML source code, you can cause layers to overlap or nest while this option is enabled. If overlaps happen, drag overlapping layers in the Design view to separate them.
To prevent layers from overlapping, do one of the following:
1. In the Layers panel (Window > Layers), select the Prevent Overlaps option.
2. In the Document window, select Modify > Arrange > Prevent Layer Overlaps.
Converting between layers and tables
You can create your layout using layers, then convert the layers to tables so that your layout can be viewed in older browsers.
Before you convert to tables, make sure layers do not overlap.
To convert layers to a table:
1. Select Modify > Convert > Layers to Table.
The Convert Layers to Tables dialog box appears.
2. Select the desired options.
3. Click OK.
The layers are converted to a table.
To convert tables to layers:
1. Select Modify > Convert > Tables to Layers.
The Convert Tables to Layers dialog box appears.
2. Select the desired options.
3. Click OK.
The tables are converted to layers. Empty cells are not converted to layers unless they have background colors.
NOTE: Page elements that were outside of tables are also placed in layers.
Tips to setting up a site in Dreamweaver 8
A website is a set of linked documents and assets with shared attributes, such as related topics, a similar design, or a shared purpose. Macromedia Dreamweaver 8 is a site creation and management tool, so you can use it to create complete websites, in addition to individual documents.
The first step in creating a website is planning. For best results, design and plan the structure of your website before you create any of the pages that the site will contain.
The next step is to set up Dreamweaver so that you can work on the basic structure of the site. If you already have a site on a web server, you can use Dreamweaver to edit that site.
TIP: As you develop site content, consider basing your pages on Dreamweaver templates.
Understanding local and remote folder structure
When you set up access to the remote folder for your Dreamweaver site, you must determine the remote folder’s host directory. The host directory you specify should correspond to the root folder of the local folder. The following diagram shows a sample local folder on the left and a sample remote folder on the right. 
If the structure of your remote folder doesn’t match the structure of your local folder, Dreamweaver uploads your files to the wrong place and the files might not be visible to site visitors. Also, your image and link paths might be broken.
The remote root directory must exist before Dreamweaver can connect to it. If you don’t have a root directory for your remote folder, create one or ask the server’s administrator to create one for you.
Even if you intend to edit only part of the remote site, you must locally duplicate the entire structure of the relevant branch of the remote site, from the remote site’s root folder down to the files you want to edit.
For example, if your remote site’s root folder, named public_html, contains two folders, Project1 and Project2, and you want to work only on the HTML files in Project1, you don’t need to download the files in Project2, but you must map your local root folder to public_html, not to Project1.
Setting up a new Dreamweaver site
After you plan your site structure, or if you already have an existing site, you should define a site in Dreamweaver before you start developing. Setting up a Dreamweaver site is a way to organize all of the documents associated with a website.
NOTE: You can also edit files without setting up a Dreamweaver site.
After you set up a Dreamweaver site, it’s a good idea to export the site so that you have a local backup copy.
To set up a Dreamweaver site:
1. Select Site > Manage Sites.
The Manage Sites dialog box appears.
NOTE: If you don’t have any Dreamweaver sites defined, then the Site Definition dialog box appears and you can skip the next step.
2. Click the New button.
The Site Definition dialog box appears.
3. Do one of the following:
>> Click the Basic tab to use the Site Definition Wizard, which steps you through the setup process.
NOTE: Users who are new to Dreamweaver are encouraged to use the Site Definition Wizard; experienced Dreamweaver users might prefer to use the Advanced settings.
>> Click the Advanced tab to use the Advanced settings, which enable you to set up local, remote, and testing folders individually, as necessary.
NOTE: To get started, you can set up a Dreamweaver site completely or you can just start with the first step, setting up your local folder.
4. Complete the Dreamweaver site setup process:
>> For the Site Definition Wizard, answer the questions on each screen, then click Next to advance through the setup process or click Back to return to a previous screen.
>> For Advanced settings, complete the Local Info category, the RemoteInfo category, and the Testing Server category, as necessary.
TIP: After you set up a Dreamweaver site, it’s a good idea to export the site so that you have a local backup copy.
Setting local/network options for remote access
The purpose of this dialog box is to select a folder on your local machine or network to store files. This folder is often a folder or a remote web server that you can connect to through your local network.
To select a server folder:
>> Enter the path to the local or network folder where you store your files or click the folder icon to browse to the folder.
Setting FTP options for remote access
The purpose of this dialog box is to complete information about your FTP access to the remote server where you store files.
To complete remote server FTP information:
1. Enter the host name of the FTP host to which you upload files.
Your FTP host is the full Internet name of a computer system, such as ftp.mindspring.com. Enter the full host name without any additional text. In particular, don’t add a protocol name in front of the host name.
NOTE: If you do not know your FTP host, contact your web hosting company.
2. Enter the path to the folder where you store files or click the folder icon to browse to the folder.
3. Enter the login name and password that you use to connect to the FTP server.
4. Select the Use Secure FTP (SFTP) checkbox to use SFTP for secure authentication.
SFTP uses encryption and public keys to secure a connection to your testing server.
NOTE: Your testing server must be running an SFTP server.
5. Click Test Connection to test your login name and password.
Animation tips for timelines
The following suggestions can improve the performance of your animations and make creating animations easier:
1. Show and hide layers instead of changing the source file for multiple-image animations. Switching the source file of an image can slow down the animation, because the new image must be downloaded. There will be no noticeable pauses or missing images if all images are downloaded at once in hidden layers before the animation runs.
2. Extend animation bars to create smoother motion. If animation looks choppy and images jump between positions, drag the end frame of the layer’s animation bar to extend the motion over more frames. Making the animation bar longer creates more data points between the start and end point of the movement and also makes the object move more slowly. Try increasing the number of frames per second (fps) to improve speed, but be aware that most browsers running on average systems cannot animate much faster than 15 fps. Test the animation on different systems with different browsers to find the best settings.
3. Don’t animate large bitmaps. Animating large images results in slow animations. Instead, create composites and move small parts of the image. For example, show a car moving by animating only the wheels.
4. Create simple animations. Do not create animations that demand more than current browsers can provide. Browsers always play every frame in a timeline animation, even when system or Internet performance decreases.
Tips to Animating layers in Dreamweaver 8
Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting language that allows you to change the style or positioning properties of HTML elements. Timelines in Dreamweaver use dynamic HTML to change the properties of layers and images over time. Use timelines to create animations that do not require any ActiveX controls, plug-ins, or Java applets (but do require JavaScript).
NOTE
The word dynamic can mean different things in different web-related contexts. Don’t confuse Dynamic HTML with the idea of a dynamic web page, which means a web page generated dynamically by server-side code before being served to a visitor.
Timelines allow you to change the position, size, visibility, and stacking order of a layer. (The layer functions of timelines work only in 4.0 or later browsers.) Timelines are also useful for other actions that you want to occur after a page loads. For example, timelines can change the source file of an image tag so different images appear in the page over time.
To see the JavaScript code generated by a timeline, open the Document window’s Code view. The timeline code is in the MM_initTimelines function, inside a script tag in the head section of the document.
When editing the HTML of a document containing timelines, make sure you do not move, rename, or delete anything that a timeline refers to.
Using the Timelines panel
Timeline pop-up menu specifies which of the document’s timelines is currently displayed in the Timelines panel.
Playback head shows which frame of the timeline is currently displayed in the Document window.
Frame numbers indicate the sequential numbering of frames. The number between the Back and Play buttons is the current frame number. You control the duration of animation by setting the total number of frames and the number of frames per second (fps). The default setting of 15 frames per second is a good average rate to use for most browsers running on common Windows and Macintosh systems.
NOTE
Faster rates may not improve performance. Browsers always play every frame of the animation, even if they cannot attain the specified frame rate. The frame rate is ignored if it is higher than the browser can manage.
Context menu contains various timeline-related commands.
Behaviors channel is the channel for behaviors that should be executed at a particular frame in the timeline.
Animation bars show the duration of each object’s animation. A single row can include multiple bars representing different objects. Different bars cannot control the same object in the same frame.
Keyframes are frames in a bar where you have specified properties (such as position) for the object. Dreamweaver calculates intermediate values for frames in between keyframes. Small circles mark keyframes.
Animation channels display bars for animating layers and images.
Playback options
Rewind moves the playback head to the first frame in the timeline.
Back moves the playback head one frame to the left. Click Back and hold down the mouse button to play the timeline backward.
Play moves the playback head one frame to the right. Click Play and hold down the mouse button to play the timeline forward.
Autoplay makes a timeline begin playing automatically when the current page loads in a browser. Autoplay attaches a behavior to the page’s body tag that executes the Play Timeline action when the page loads.
Loop makes the current timeline loop indefinitely while the page is open in a browser. Loop inserts the Go to Timeline Frame behavior in the Behaviors channel after the last frame of the animation. Double-click the behavior’s marker in the Behaviors channel to edit the parameters for this behavior and change the number of loops.
Moving a layer using a timeline animation
The most common kind of timeline animation involves moving a layer along a path. Timelines can move only layers. To make images or text move, create a layer using the Draw Layer button on the Insert bar and then insert images, text, or any other type of content in the layer.
Timelines can also change other attributes of layers and images.
To animate a layer using a timeline:
1. Move the layer to where it should be when the animation begins.
2. Select Window > Timelines.
3. Select the layer you want to animate. 
Make sure you have selected the desired element. Click the layer marker or the layer selection handle, or use the Layers panel to select a layer. For more information, see Manipulating layers. When a layer is selected, handles appear around it as shown in the following illustration.
4. Clicking inside the layer places a blinking insertion point inside the layer, but it does not select the layer.
5. Select Modify > Timeline > Add Object to Timeline or simply drag the selected layer into the Timelines panel.
A bar appears in the first channel of the timeline. The name of the layer appears in the bar.
6. Click the keyframe marker at the end of the bar.
Move the layer on the page to where it should be at the end of the animation.
A line appears showing the path of the animation in the Document window.
7. If you want the layer to move in a curve, select its animation bar and Control-click (Windows) or Command-click (Macintosh) a frame in the middle of the bar to add a keyframe at the frame you clicked, or click a frame in the middle of the animation bar and select Add Keyframe from the context menu.
Repeat this step to define additional keyframes.
8. Hold down the Play button to preview the animation on the page.
Repeat the procedure to add additional layers and images to the timeline and to create a more complex animation.
Creating a timeline by dragging a path
If you want to create an animation with a complex path, it may be more efficient to record the path as you drag the layer rather than creating individual keyframes.
To create a timeline by dragging a path:
1. Select a layer.
2. Move the layer to where it should be when animation begins.
Make sure you have selected the layer; if the insertion point is in the layer, the layer is not selected. To select a layer, click the layer marker or the layer selection handle, or use the Layers panel.
3. Select Modify > Timeline > Record Path of Layer.
4. Drag the layer around the page to create a path.
5. Release the layer at the point where the animation should stop.
Dreamweaver adds an animation bar to the timeline, containing the appropriate number of keyframes.
6. In the Timelines panel, click the Rewind button; then hold down the Play button to preview your animation.
Tips to design clean blog layout
I want to share simple suggestions which can help you in order to make your site more attractive.
Simplicity is better
Be simple. Don't use complex site structure for your informative blog (like my site for example). A vertical orientation with two main columns is the better solutions, linear and simple to manage. If you need for help to design the page layout take a look at this post: Conceptual design for site's layout
Background and text color for content
Use a white background (#FFFFFF) with black/gray scale text for the content. You can use black color (#000000) in order to emphasize title of posts and gray scale color (#444444, #555555...) for text (but don't use a gray too bright!). Other color combinations, such as background black and text white, are more indicated for design-oriented sites such as on-line portfolio or similar. Get an idea from this cool color examples colourlovers.com
Use nice colors
Colors are nice but if poorly used they make a webpage very unsightly. If you have some doubts about colors you used on your site, take a look at Adobe Kuler and colourlovers.com an useful web application to create harmonious color themes online for your blog/site.
Don't add & Remove
Remove all things are not really useful to attract traffic or earn money. Don't amuse your readers from content and don't fill your page with advertisements. Two ads block (below post title and on sidebar) are a good solution to perform good incomes.
Widget invasion
Widgets like MyBlogLog Recent Readers are funny but don't use them only because give "color" to the page. They can help you to attract more visitors if used in a good way.
Explore "who you are"
Tell your visitors "who you are" in a section on top of the page. Add links to your identity on social network sites like digg, delicious, technorati. Use a small section on right side of your template, below who you are, with icons and a short description. If this can help you, take ispiration from my social network section.
Giant feed icon. Why?
Ok, feed subscribers are important. But is not necessary use giant icon to say "subscribe my feed!". Your readers are not blind and if the content of your site is good you will find new subscribers also using a small icon.
Social Networks buttons
Trying a lot of social buttons combinations is a good move. Now I found a good compromise, using only digg and delicious buttons. Designers use digg to promote posts immediately after published them so, in general, your post receive a lot of traffic in the first two hour after submission. At the same time, all readers who find the post interesting add it to delicious and when the post become popular you receive a lot of traffic for many days after.
I hope you can find this informations more useful. Share your thoughts and ideas to comment this post.
Conceptual design for site's layout
This post explains how to organize the HTML code to design index.php page's layout using the default.css file
Step 1: HTML code
First step, we create a file called index.php in the site root; in the previous post we have added a link to CSS file (default.css) in the index.php head tag and now, we use it to create the page's layout structure wich will be like this:
All pages will be loaded into main section using URL variables. Open index.php and copy and paste this code into the body tag:
Step 2: CSS file
Copy and paste this code into default.css file:
PAGE STRUCTURE
------------------------------ */
/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
The graphic result will be like this:
Now, our site structure is ready to be completed adding other elements that we will see in the next lessons.
by woork.blogspot.com
