Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.
3. Content Management Systems: Joomla, Plone, Wordpress. Professional tools for web design (dreamweaver)
4. Pre-production, Organizing a web site information, Information ARchitecture (IA), IA Diagrams
5. Colors and emotional impact
6. Smart navigation, accessibilty and usability
7. Search Engine Optimization, site analytics
8. Web 2.0 tools: user created content, communities, blog in business.
9. Future trends: 3d Internet, “future Internet”, convergence, mobile Internet.Students will set up a web site using professional tools and available CMS as a course project.
On completion of the course a student should be able to
1. Apply the technology behind modern professional web design and development
2. Utilize the standard tools for web design: CMS, Web editors
3. Develop and validate web sites conform to usability and accessibility W3C rules;
4. Apply Design Principles to Website design
The "BOX" model - 1
Control every aspect of the box with CSS: the size of the padding around the content, whether or not the element has a border (as well as what kind and how large), and how much margin there is between your element and other elements.
The "BOX" model - 2
The "BOX" model - 3
The "BOX" model - 4
The "BOX" model - 5
The box model may look simple with just the content,
some padding, a border, and margins. But when you
combine these all together there are endless ways
you can determine the layout of an element with its
internal spacing (padding) and the spacing around it
(margins). Take a look at just a few examples of how
you can vary your elements.
The "BOX" model - a look at the code
FLOW & FLOAT
Flow is what the browser uses to lay out a page of XHTML elements.
The browser starts at the top of any XHTML file and follows the flow of elements from top to bottom, displaying each element it encounters. And, just considering the block elements for a moment, it puts a linebreak between each one. So the first element in a file is displayed first, then a linebreak, followed by the second element, then a linebreak, and so on, from the top of your file to the bottom. That’s flow.
FLOW & FLOAT - combined together makes a "LAYOUT"
Liquid and Frozen Designs
Designs are called liquid layouts because they expand to fill whatever width we resize the browser to.
These layouts are useful because, by expanding, they fill the space available and allow users to make good use of their screen space.
Sometimes, however, it is more important to have your layout locked down so that when a user resizes the screen, your design still looks as it should. There are a couple of layouts that work like this, but let’s start with frozen layouts.
Frozen layouts lock the elements down, frozen to the page, so they can’t move at all, and so we avoid a lot of issues that are caused by the window expanding.
Frozen layout code changes
Jello layout code changes
The frozen layout has some benefits, but it also just plain looks bad when you widen the browser. But we’ve got a fix, and it’s a common design you’ll see on the Web. This design is between frozen and liquid, and it has a name to match: Jello. Jello layouts lock down the width of the content area in the page, but center it in the browser.
A website template is a design used for the physical appearance or facade of your website. It is a layout that can be used to display content and information for a simple website, or used as a neat package in which to program additional features, such as scripts and databases. However a website template in itself does not contain any scripts or databases, and thus it will not “operate” the services of a “functioning” website without additional
To restate the above, a website template will not run your dating service, nor will it include search features, membership databases, or have a back end administration for updating your website by default. These are all the functions of website scripts that are often found in “turnkey websites” and other “content management systems”, which are referred to as CMS's for short. If you require a ready to go solution that includes features such as the above, then a better solution for you may be a turnkey website from Built2Go.com(http://www.built2go.com/) or a CMS Template from ThemeStock.com (http://www.themestock.com/).
However, a website template is helpful for the design and look of your content based website, or as a foundation in which to add your own scripts. This means if you would like to set up or redesign an informational website that simply displays content and consists of any number of linked pages, then it is very easy to add your content to a professional looking design that perfectly matches the theme of your website. Alternatively, if you are a programmer, developer, or if you have hired a programmer or developer that can provide your website with functionality, then a web template will be helpful in providing a clean and professional design that can easily integrate with any type of programming and on any type of platform.
Therefore, website templates will benefit any number of individuals from first time webmasters to advanced developers that require an attractive appearance in which to apply their own website content or website programming.
Exercise : select a Coffeecup Template and modify it.
(later in the course we will use CMS templates, too)
The term Ajax has come to represent a broad group of web technologies that can be used to implement a web application that communicates with a server in the background, without interfering with the current state of the page. In the article that coined the term Ajax,Jesse James Garrett explained that the following technologies are incorporated:
The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use. The public interface of a DOM is specified in its application programming interface (API).
The XML DOM defines a standard for accessing and manipulating XML.
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents like XML and HTML:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The DOM is separated into 3 different parts / levels:
Core DOM - standard model for any structured document
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.
See DOM on W3SCHOOL or DOM in WIKIPEDIA
Write a script asking name and last name to user before the page is loaded.
Call a dialog window (type prompt) that shows "Welcome" + name + lastname and date and time.
The bottom of the page (footer) must always show "Welcome" + name + lastname and date and time
Make a decent HTML !!
Ask the user font size and color for tags p, body, h1
ask the user bkgcolor for tag body
Automatically derive font sizes for tags h2 and h3 from tag h1 as defined by user
Generate an internal style sheet using these specifications
HTML5 is a superset of HTML 4.01 (meaning practically everything
in it is still supported in HTML5) and all you need to do is know how to specify your doctype and the rest of the tags in theelement to get started with HTML5.
XHTML 2 was a dead-end. Everyone who wrote real web pages hated it. XHTML reinvented the way we write markup for a web page, and would have made all the pages already out
XHTML is no longer the standard for web pages. Developers and the W3C decided to keep extending and improving HTML instead.
The new, simpler HTML5 doctype is supported by older browsers—they use standards mode when they see this doctype.
The type attribute is no longer needed in the