Difficult User Interface Designer Interview Preparation Guide

Download PDF

Style specification method in your document should be used according to your need and requirements. The methods that can be used are:
- External Style Sheets: should be used when you want to apply the same style to multiple documents.
- Embedded Style Sheets: should be used if you want to specify styles for a single document.
- Inline Styles: should be used if you want to apply style to one or few elements in a document.

Media is used to render the design and customize the documents. Media types allow user to load and apply their own selected style sheets. Media control is applied to external style sheets, in this way user can save time by retrieving the sheets from the network itself. Example: Speech based browsers can avoid the download of style sheets which are designed for visual rendering.

The specification which is been given for the size of div in IE is as follows:
Width of a box (i.e. a containing area) in CSS = width + border +padding (+margin).
Total box width is: 300px with a padding of 10px and a border of 5px. This requires the total area of 330px. IE5 uses different rules and out of width it subtracts the padding and border from the specific width so the total width becomes 270px. So, instead of 330px, IE uses 270px that is why the div are of different sizes.

.rolloverfordnd is a class selector to which the style gets applied. Dot(.) is used for class selector as it applies to any HTML elements that have the attribute as: class="rollverfordnd". This attribute can be added to multiple elements such that, if separate declarations are defined then the declaration with a specific selector win over any other.

Situation - You want to place a text over an image. How would you do that?
Situation - You want to combine multiple sheets into one. How would you do that?
Situation - You want to specify background images. How would you do that?
Explain following elements: a.) Inline b.) Block c.) Parent d.) Children
How do you separate content and design in CSS?
Explain pseudo classes.
Explain: a.) CSS declaration b.) Important declaration
Situation - You just set the background image and you want it to be non-repeating. What would you do?
Differentiate between ID and Class.
You want to have a you text-links without an underline. How would you do that?
Explain cascading order.
You want links of different colours on the same page. How would you do that?
Explain: a.) Value b.) Initial value
How would you style the following? a.) Table cells b.) Forms
Are there any WYSIWYG editors available for creation of style sheets?
You want to justify your text. How would you do that?
I want to place two paragraphs adjacent to each other. How should I do it?

What is CSS? Explain its features.
Why do you use CSS?
What is a style sheet?
Why do you need a style sheet over regular HTML?
List different types of Style Sheets and how do you link to them?
Explain Class.
Explain Grouping.
What are the functions of following selectors? a.) h1 b.) .warning c.) #footer
Explain Embedded Style Sheet. How would you link to it?
Explain External Style Sheet. How would you link to it?
What is selector? Explain: a.) ID Selector b.) Contractual Selector c.) Attribute Selector d.) Parent Child Selector
What are the advantages and disadvantages of following style methods? a.) External Style Sheets b.) Embedded Style Sheets c.) Inline Styles
Situation - You want to set up a minimum width for IE. How would you do that?

A DHTML application supports numerous events, many of them quite analogous to those of a standard VB application. Events are the beating heart of any JavaScript application. For handling event in DHTML we attach event handler to HTML elements. The event handler waits until a certain event, for instance a click on a link, takes place. When it happens it handles the event by executing some JavaScript code that has been defined by us. After it has executed the code the event handlers comes to its initial state and wait for the user to fire any event. Hence to handle events in DHTML we need to register an event handler.

- A web page with large number of images takes a longer time to load. This is because each image separately sends out a http request.
- The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.

The attributes that make up DHTML are HTML, JavaScript, CSS and DOM. These are explained below as:

JavaScript: Whether we call it JavaScript, Jscript, or ECMAScript, it is the most common language used today for client-side scripting. The main reason for this JavaScript comes with virtually every browser. In DHTML JavaScript JavaScript comes with virtually every browser. For example, an onload event could execute a JavaScript function to query the browser’s cookies collection to determine whether the user is a first-time visitor to the page.

CSS: It stands for Cascading Style Sheet. This is used for the presentation part of the web page. In simple words it holds the designing of the page. The look & feel of the page completely depends on CSS. In DHTML CSS rules can be modified at both the document and the element level using JavaScript with event handlers, they can add a significant amount of dynamism with very little code.

DOM: It stands for Dynamic Object Model and it is the weakest link in DHTML as many of the browser does not support the DOM functionality. It defines the object and its properties. It is a standard way of accessing and manipulating the static content. The Document Object Model is a platform and language-neutral interface that allows program and scripts to dynamically access the content and update it.

HTML: It stands for Hyper Text Markup Language. As the names suggest it is not a programming language, it is a markup language which consists of a set of markup tags.

- RWD is the abbreviation for Responsive web design.
- In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device.

DHTML stands for Dynamic HTML. The first thing that we need to clear about DHTML is that it is neither a language like HTML, JavaScript etc. nor a web standard. It is just a combination of HTML, JavaScript and CSS. It just uses these languages features to build dynamic web pages. DHTML is a feature of Netscape Communicator 4.0, and Microsoft Internet Explorer 4.0 and 5.0 and is entirely a "client-side" technology.

Features of DHTML:

Simplest feature is making the page dynamic.
Can be used to create animations, games, applications, provide new ways of navigating through web sites.
DHTML use low-bandwidth effect which enhance web page functionality.
Dynamic building of web pages is simple as no plug-in is required.
Facilitates the usage of events, methods and properties and code reuse.

- It is the short form for in-betweening.
- It is the process of generating intermediate frames between two images.
- It gives the impression that the first image has smoothly evolved into the second one.
- It is an important method used in all types of animations.
- In CSS3, Transforms(matrix,translate,rotate,scale etc) module can be used to achieve tweening.

DHTML as it is combination of HTML as well as JavaScript and it uses the HTML to render the text on the browser. It also uses DOM dynamic Object Model which renders its every element as an Object that can be changed by setting properties and methods. This is done with the help of Scripting. DHTML is part of the general computing trend of late '90s. This is a trend different from structured programming, with a focus on actions and toward object-based programming, where the objects can be compared to nouns in our language.

DHTML allows scripting languages to change variable in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process.

- Basically it is a string that identifies the elements to which a particular declaration or set of declarations will apply.
- It can also be referred to as a link between the HTML document and the style sheet.
- It is equivalent of HTML elements.

For example :
A {text-indent: 12pt}

Here, the selector is A, which is called as type selector.

The first and foremost difference is HTML is markup language but DHTML is not a language.
DHTML stands with combination of HTML, CSS, JavaScript and DOM but HTML alone is an enough although static.
HTML cannot have nay server side code but DHTML may contain server side code also.
In HTML there is no need for database connectivity but DHTML may require to connect to database as it interacts with user.

This can be done by specifying the border property for linked images in your CSS as none:
For e.g.
a img { border: none ; }

However, this makes it difficult for the users to differentiate between the clickable and non-clickable images.

As explained earlier Events is the beating heart of any JavaScript application. For handling event in DHTML we attach event handler to HTML elements. The event handler waits until a certain event, for instance a click on a link, takes place. When it happens it handles the event by executing some JavaScript code that has been defined by us. After it has executed the code the event handler comes to its initial state and waits for the user to fire any event. Hence to handle events in DHTML we need to register an event handler.

Style modification indicates the changes in the presentation or the view part that are being made in web page. This part comes under Cascading Style Sheet where the user style his web page by using the attributes and the tags that are pre-defined in CSS.

In DHTML absolute positioning means that the object will remain at the same position regardless of the condition of other elements and the size of the browser. In simple languages if an object/image is absolutely positioned (STYLE="position: absolute;"), with an offset of 150 pixels to the right and 250 pixels down from the left-hand corner of the browser screen then it will avail this position what ever the circumstances may be.

Relative positioning is the same as the current HTML3 layout and is best reserved for situations where you want to be sure that the content will revert to this default inside a document that also uses absolute positioning.

Is some what where we need the object to be placed in the graphical view i:e on screen. If we talk in DHTML sense then we have two types of positioning: Relative and Absolute.

The advantages of Inline Styles are:

- It is especially useful for small number of style definitions.
- It has the ability to override other style specification methods at the local level.

The disadvantages of Inline Styles are:

- It does not separate out the style information from content.
- The styles for many documents can not be controlled from one source.
- Selector grouping methods can not be used to handle complex situations.
- Control classes can not be created to control multiple element types within the document.

The advantages of External Style Sheets are:

- Using them, the styles of multiple documents can be controlled from one file.
- Classes can be created for use on multiple HTML element types in many documents.
- In complex situations, selector and grouping methods can be used to apply styles.

The disadvantages of External Style Sheets are:

- In order to import style information for each document, an extra download is needed.
- Until the external style sheet is loaded, it may not be possible to render the document.
- For small number of style definitions, it is not viable.

The advantages of Embedded Style Sheets are:

- It is possible to create classes for use on multiple tag types in the document
- Under complex situations, selector and grouping methods can be used to apply styles.
- No extra download is required to import the information.

The disadvantages of Embedded Style Sheets are:

- It is not possible to control the styles for multiple documents from one file, using this method.

- External Style Sheet can be called as a template/document/file which contains style information and can be linked with more than one HTML documents.
- Using this the entire site can be formatted and styles just by editing one file.
- The file is linked with HTML documents via the LINK element inside the HEAD element.
<HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>