A very good example of navigation listing via CSS at http://l.pr/a43f9/ (Nifty Navigation Tricks Using CSS) the site shows us how simply by using CSS the user is able to generate JavaScript free dynamic navigation menu. It generates attractive, text based menu that loads easily and faster and boosts accessibility and enhances SEO for website. It replaces old fashioned image based navigation. CSS styles the navigation menu markup (avoids standard bulleted format). CSS builds attractive rollover effects far simpler that of image based JavaScript (old fashioned).CSS creates rollover effect using the: hover pseudo-class selector, which is the same selector the user uses for styling the hover state of the link. It is worth noting that in IE 7.0 onwards the: hover pseudo-selector can be applied to any HTML element in the HTML document. Another feature of CSS styling for navigation menu is creating consistent (in appearance) sub navigation listing, adding nested list, and menu. Further one can make horizontal aligned menu listing using CSS styling. Moreover for creating boxes around links the developer needs to increase the left and right padding to the links. Further it also possible to create button like navigation system, a common occurrence in most websites, using only CSS. This is feasible by using the CSS border attributes. By assigning different colors to the border edges we create a slightly beveled effect, as for e.g. border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; as we give the left edge a slightly lighter shade than the right edge to get that effect (likewise for the top and bottom edges). Another development using this technology is creation of tabbed horizontal navigation menu (popular navigation choice) but this could be erroneous in case the user adds fresh tabs and the original navigation styling was created using a CMS, however, a small resolution the author advocates is creating a tab effect by combining background images and text styled with CSS. Thus introducing a CSS based navigation menu is a good option to increase the sites accessibility and performance sans affecting its look and feel.
I am encountering two problems regarding data validation in form and document layout in the content section (body) via div tag.
I reckon user inputs data in a Form via JavaScript, before sending it to the server can be validated using JavaScript itself. This saves time and the user needn’t be reminded in the end that he/she needs to go back and fill a particular input text, field, before submitting data online. It is a mandatory requirement that every form requires a Submit button that sends the form data to the address mentioned in the action feature of the form tag. However, at present I am only looking at the layout of the form via div tags and in that respect I reckon position the select box in my content body part of the HTML document and positioning the logo in the header section of the HTML document is a concern and I need to look at the following tutorials before resolving the issue.
Scripting is a small program that is event driven and easier to grasp. Scripts are included in the HTML document with the help of script tag. This tag may be included in the body or head of the HTML document. It is advisable to include an external JavaScript file in the head tag of the document when several HTML documents use the similar JavaScript in the respective documents. When one uses the same scripting language throughout the HTML document, then one can include a meta tag, which defines the default script type for the whole document, as shown here ‘meta http-equiv=”Content-Script-Type” content=”type”’. JavaScript designs dynamic content, programs content and displays updated content (default or automated) when the page loads, builds slide shows, redirects the user to a different page, combines with CSS to animate page elements, validates user inputs (form validation), adds conditionality to various events and performs tasks accordingly, creates navigation bars and alters the menus dynamically (UTS website). A good example of JavaScript generated UI is seen in Gmail Interface. Some good resources for JavaScript Programming and free JavaScript are available at (http://l.pr/a43bm/). The tutorials for making image rollovers and navigation menu are note worthy. Another good site for creating JavaScript clock is at (http://l.pr/a43bn/).These sites give you a readymade code. Apart from this I rely a lot on Alastair video tutorials, as I find them very comprehensive. In fact I find JavaScript complete and best of everything. I find it very closely related to the processing language ‘C’ though it is event driven. Also an added advantage with JavaScript is that it works well with majority of the browsers and can be made into an external file and called from a plain HTML document. Moreover majority of the JavaScript code are freely available, however, one needs to customize them accordingly. WebDeveloper has more than 700 downloadble JavaScript samples at (http://l.pr/a43bo/).
CSS (Cascading Style Sheets) was a technology recommended by W3C (consortium) in 1996. CSS acts additional to HTML documentation and supports page layout. In fact some CSS effects are not possible via HTML. In fact HTML sans CSS support produces truly boring looking pages. CSS specifies a style once but the HTML reader can apply that CSS rule as many times as it wishes in the document. CSS uses many English keywords to specify the names of various style properties and possess a simple syntax. Defining CSS style rule in one location such as an external .css file eliminates unnecessary repetition or redundancy. Subsequently css makes easy handlers or classes for controlling or formatting of HTML elements. I hope to contribute more towards CSS blogs but at the moment I am researching more on this topic of client side technology.
I came to know about debugging and validating HTML and CSS codes though Firebug, which in my opinion acts as a compiler.
I learned about the webdeveloper tool bar in the Mozilla browser to understand and view the CSS and source code of the webpage on display.
I tried display layout tools via CSS rules for my website that I am developing.
I saw Alastair’ video tutorial on XHTML and CSS layout, which was very informative. I understood the basics of Cascading Style Sheets and their types and contents (properties and values).
I managed to stitch together the layout (rough) of my home page. I am okay with the content and the structure of the page. However I need to fine tune some parts of it. At present I have the following concerns:-
1.The buttons in my secondary navigation bar are not looking good.
I have made them as .png images (files) but still they are not looking good, the buttons are featuring as rectangular shapes with edges or corners sticking out, which should not be the case as I want them to feature as circular rectangular buttons.
2.The ‘W3C’ icons should feature at the bottom of the container (body of the page) just over the footer part of the page, so, their positioning is not correct in the page (home page).
3.At the moment I am confused regarding the allotment of position, height of the respective navigation bar with respect to the browser display ratio, of the content (frames). Should the option be relative, auto, absolute or percentage or em as hybrid and not fluid option works best with the screen ratio in era of web 2.0 and onwards. I do not understand the respective CSS elements helping in formatting of the HTML document. I need to clarify this and do more research on it. Again regarding positioning my secondary navigation buttons are not exactly aligned with respect to the secondary navigation bar height, mainly in firefox 3.5 browser. I need to check this anomaly, as to whether it is a browser issue or it is because of some error in coding in the HTML document.
4.In Firefox 3.5 browser all the buttons in the secondary navigation bar are getting surrounded by a blue border because they are converted into hyperlinks, anchor tags. This needs to be fixed.
5.The contact button is not changing appropriately in its position but it is changing into a different colored contact button at the position of resume button when the cursor is placed over it (onmouseover). This should not be the case. And it needs to fixed but I am not sure what is causing this anomaly.
6.I need to add the date option in the header navigation bar to display the corresponding day when the user visits the site. This needs to be done with PHP programming and then integrated with HTML document but how to incorporate this I do not follow at the moment.
7.I also want to display a page counter to show the user what number of page visit is his. But I am not sure as to whether necessarily I want to incorporate this option. And also what programming language I need to do whether this can be done in PHP and then incorporated with the HTML document or it needs to be done in javascripting in the HTML document.
