Cascading Style Sheets (CSS) & Content Management Systems (CMS)

Slides:



Advertisements
Similar presentations
DOCUMENT TYPES. Digital Documents Converting documents to an electronic format will preserve those documents, but how would such a process be organized?
Advertisements

Cascading Style Sheets
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2: Planning.
Understand Web Page Development Software Development Fundamentals LESSON 4.1.
Project 1 Introduction to HTML.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Web Accessibility Tests Using the Firefox Browser ACCESS to Postsecondary Education through Universal Design for Learning.
Chapter 1 Understanding the Web Design Environment
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Developing a Basic Web Page with HTML
Dreamweaver 8 Concepts and Techniques Introduction Web Site Development and Macromedia Dreamweaver 8.
1st Project Introduction to HTML.
Chapter 3 Software Two major types of software
Jiří Balej, Martin Podborský, Petra Čačková.  Tools, which enables to produce content without source code knowledge  Text document ◦ MS Word/OO Writer.
Web Browsers It is an application software that is used to display and interact with text, images and other information located on web pages at web sites.
Website Design BTT1OC/2OC. What is web design? O A web site is a digital page consisting of HTML (hypertext markup language) files, images, movies, sound,
Build a CMS Website. The topics this chapter covers are: What is CMS ? What you can do with CMS The benefits and disadvantages of using a content management.
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.
Chapter ONE Introduction to HTML.
Web Design Basic Concepts.
Dobrin / Keller / Weisser : Technical Communication in the Twenty-First Century. © 2008 Pearson Education. Upper Saddle River, NJ, All Rights Reserved.
Web 2.0: Concepts and Applications 2 Publishing Online.
Chapter 1 Variables in the Web Design Environment.
Chapter 1 Variables in the Web Design Environment
Cs413_design01.ppt Web Design vs. GUI Design Designing for the Web: the designer has to give up full control of the design In traditional design, you control.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Using Styles and Style Sheets for Design
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
PUBLISHING ONLINE Chapter 2. Overview Blogs and wikis are two Web 2.0 tools that allow users to publish content online Blogs function as online journals.
HTML, XHTML, and CSS Sixth Edition Chapter 1 Introduction to HTML, XHTML, and CSS.
Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
Introduction to HTML Tutorial 1 eXtensible Markup Language (XML)
© 2001 Business & Information Systems 2/e1 Chapter 8 Personal Productivity and Problem Solving.
Lead Black Slide Powered by DeSiaMore1. 2 Chapter 8 Personal Productivity and Problem Solving.
Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.
Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.
PART 1: INTRODUCTION TO BLOG Instructor: Mr Rizal Arbain FB:Facebook/rizal.arbain Website: H/P: Ibnu.
Software. A web site is a collection of web pages on a particular topic. A web page is a document written in HTML code. Web pages are linked together.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
Cascading Style Sheets CSS. Source W3Schools
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.
Oman College of Management and Technology Course – MM Topic 7 Production and Distribution of Multimedia Titles CS/MIS Department.
Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry.
Introduction. Internet Worldwide collection of computers and computer networks that link people to businesses, governmental agencies, educational institutions,
Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Working with Cascading Style Sheets
Pre-Production Meet with the client to create a project plan:
Overview Blogs and wikis are two Web 2.0 tools that allow users to publish content online Blogs function as online journals Wikis are collections of searchable,
Web Site Development and Macromedia Dreamweaver 8
Chapter 1 Introduction to HTML.
Tables and Frames.
Unit 2, Lesson 5 Website Development Tools
Unit 2, Lesson 5 Website Development Tools
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

Cascading Style Sheets (CSS) & Content Management Systems (CMS)

Definition: Cascading Style Sheets  Style sheet language : a computer language that expresses the presentation of structured documents.computer languagestructured documents  Cascading Style Sheets : a style sheet language used to describe the look and formatting of a document written in a mark-up language like HTML.style sheet language

Purpose Behind  Designed primarily to enable the separation of document content from document presentation.  This can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content.accessibility  CSS can also allow the same mark-up page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice and on Braille-based, tactile devices.Brailletactile  readers can use a different style sheet to override the one the author has specified.

In other words  A Cascading Style Sheet is a single page which contains the formatting of a document. Documents linked to this sheet all apply the same format  This makes it easy to change the format of the presented document to fit an individuals requirements.  It also means that the user can change the format without having the privilege to change content.

Benefits  Style sheets allow you to separate the style and layout of your HTML files from their informational content.  Using relative measurements content can be reasonably displayed on any monitor.  You have finer and more predictable control over presentation. CSS has been designed to deal with issues which HTML was not.  People with disabilities have better access to your pages. Visually impaired Web users may need increased font sizes and will be among the first to benefit from style sheets.

Disadvantages  Collapsing Margins – Margin collapsing is, while well-documented and useful, also complicated and is frequently not expected by authors, and no simple side-effect-free way is available to control it.  columns subject to a constraint on the sum of all columns.  Lack of Variables – CSS contains no variables. This makes it necessary to do a “replace-all” when one desires to change a fundamental constant, such as the colour scheme or various heights and widths.  Inconsistent Browser Support – Different browsers will render CSS layout differently as a result of browser bugs or lack of support for CSS features. Numerous so-called CSS “hacks” must be implemented to achieve consistent layout among the most popular or commonly used browsers. Pixel precise layouts can sometimes be impossible to achieve across browsers.  Vertical Control Limitation – While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or impossible. Simple tasks, such as centring an element vertically or getting a footer to be placed no higher than bottom of viewport, either require complicated and unintuitive style rules, or simple but widely unsupported rules.  Control of Element Shapes – CSS currently only offers rectangular shapes. Rounded corners or other shapes may require non-semantic mark-up.  Poor Layout Controls for Flexible Layouts – While new additions to CSS3 provide a stronger, more robust layout feature-set, CSS is still very much rooted as a styling language, not a layout language.  Lack of Column Declaration – While possible in current CSS, layouts with multiple columns can be complex to implement.  No of Multiple Backgrounds per Element – Highly graphical designs require several background images for every element, and CSS can support only one.

Flash: Other Option  Better design quality  Easier to make quality designs with  Does not support any where near as many systems: only works with specific programs  Much large files  More on design then content  Allows for easy application of multiple media

Relating to the Case Study  Limited IT Skills : Would suggest flash as html and other mark up languages require reasonable knowledge  Limited Time: CSS would mean modifications could be done a lot quicker with less effort  Internet Usage: CSS decrease the amount of internet usage its suggested her internet is limited  Art and Image company: CSS does not lend itself to beautiful web design ; this company may rely on impressing its customers straight off.  Cascading Styles Sheets are free to implement.

Content Management System  Define: A content management system ( CMS ) is the collection of procedures used to manage work flow in a collaborative environment.

Purpose  Allow multiple users to add to and work on a single collection of stored data  Control access privileges of users  Improve Storage and retrieval  Reduce duplication of inputs  Improve report writing ease  Improve communications between users  Can remove need to work through HTML and other mark-up language; it apply the ‘what you see is what you get’ concept (WYSIWYG) which allows ones to modify the page as they see it.

In other words  They are designed to simply the production and publication of web site content.  Allow for business to make moderate changes to their website without technical assistance.  Allows for multiple people to manipulate content  Allows for tools which manipulate web page data such as forums, shopping carts, images and multimedia galleries.  Can allow users to create news pages and add elements like star ratings very simply.

Open Source Vs Closed  In relation to CSS and this case study it seems logical that open source is referring to free software rather then open access to the source code.

Pros and Cons  Open Source means that the CSS is free  It also means that the owner may use more then one IT group as the source code is not locked  This means that the business does not have to invest large sums into the concept.  The disadvantage is that the software may be low quality and buggy  It also may be difficult to find support as open source software will mean its designers are making limited to no profit from the software.  Close source however will mean that the system is reasonably stable and secure  There is increase chance of regular patching and support.  However, each CSS is different and provides different features. Close Source may not provide trails and as such there is a risk of purchasing something which does not meet the users requirments.

Other Options  The other option is to use HTML and other mark up language to work with the web site.  The advantage is that one can do a lot more with this and there is no need to install or set up a program.  The disadvantage is that business owners generally don’t have to IT knowledge to use this.  This means every time a company wants to make a modification they have to call in a specialist which takes time and money.

Relating it back to the Case Study  She has limited time and IT knowledge, this makes a CSS extremely advisable.  The site is relatively new and undergoing a complete modification: advisable to use an Open Source CSS until the web site is stable and all the tools which will be needed are well determined.  Her clients need to be able to upload images and videos which means the CSS will require privileges settings as well as the capacity to allow video and image uploads.  The CSS should not require networking tools beyond possibly a business blog which mentions new developments or sales