Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.

Published by栓 步 Modified over 6 years ago

Similar presentations

Presentation on theme: "CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design."— Presentation transcript:

1 CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

2 w3.css So, we’ve looked at Flexbox and Bootstrap As it turns out, W3Schools also has a responsive framework called W3.CSS Much of the same functionality is included as with Bootstrap Less bloat East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

3 What is W3.CSS? Smaller and faster than other CSS frameworks Easier to learn, and easier to use than other CSS frameworks Uses standard CSS only (No jQuery or JavaScript library) Speeds up and simplifies web development Supports modern responsive design (mobile first) by default Provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and more Provides CSS equality for all devices. PC, laptop, tablet, and mobile East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

4 Mobile First Design Methodology
Website design first focused on creating the most optimal user experience for the largest screen size a user would be on, such as a desktop screen Responsive web design was born as a solution to having to create multiple web designs – one for desktop, one for mobile, etc. Designing for mobile first takes this one step further, and is based on the idea that the optimal viewing experience should be on a mobile device vs. a desktop device East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

5 Mobile First Design Methodology
There’s a lot of debate over which methodology is superior Mobile friendly - aims to meet the majority of its mobile users’ needs Responsive design - encompasses the idea of a mobile friendly design; a broader term used to define the designing of web pages for a variety of screen sizes and orientations Mobile first design - takes the age old habit of designing for the biggest possible screen first, and designing for the smallest possible screen first East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

6 Mobile First Design Methodology
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

7 w3.css - Ease of Use Here, again, we see the importance of CSS classes in design, particularly how they can be combined to create the layout we’re looking for East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

8 w3.css - Ease of Use East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

9 w3.css - Adding to Page(s)
To use W3.CSS in your web site, just add a link to "w3.css" from your web pages (You could download the stylesheet and add the file to your site, linking to it internally) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

10 w3.css - Containers East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

11 w3.css - Containers The w3-container class is the most important of the W3.CSS classes. It provides equality like: Common margins Common paddings Common vertical alignments Common horizontal alignments Common fonts Common colors The w3-container class is typically used with HTML container elements, like <div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

12 w3.css - Containers East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

13 w3.css - Containers East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

14 w3.css - Responsive East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

15 w3.css - Responsive W3.CSS includes a responsive, mobile-first grid system to handle layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

16 w3.css - Responsive W3.CSS includes a responsive, mobile-first grid system to handle layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

17 w3.css - Responsive W3.CSS's grid system is responsive, and the columns will re- arrange automatically depending on the screen size: w3-half ½ of display (med & lg) w3-third 1/3 of display (med & lg) w3-twothird 2/3 of display (med & lg) w3-quarter ¼ of display (med & lg) w3-threequarter ¾ of display (med & lg) w3-rest The rest of the display w3-col Defines 1 column in 12-col grid w3-mobile Adds mobile-first responsiveness to a column East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

18 w3.css - Responsive http://www.csci1720.net/examples/w3layout.php
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

19 w3.css - Responsive Responsive classes must be placed inside a w3-row class (or w3-row-padding class) to be fully responsive w3-row Container for responsive classes (no padding) w3-row-padding Container for responsive classes (8px L & R) w3-content Container for fixed size centered content w3-hide-small Hides content on small screens (>601px) w3-hide-medium Hides content on med screens w3-hide-large Hides content on large screens ( <992px) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

20 w3.css - Responsive Responsive classes must be places inside a w3-row class (or w3-row-padding class) to be fully responsive l1 - l12 Responsive sizes for large screens m1 - m12 Responsive sizes for medium screens s1 - s12 Responsive sizes for small screens East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

21 w3.css - Responsive Example(s)
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

22 w3.css - Responsive Example(s)
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

23 w3.css - Responsive Example(s)
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

24 w3.css - Responsive Example(s)
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

25 w3.css - Responsive Example(s)
Note that the first column (blue) of the first row is hidden (because of the w3-hide-small class directive East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

26 w3.css - Nested Rows We can nest rows responsively as well
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

27 w3.css - Nested Rows We can nest rows responsively as well Row
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

28 w3.css - Layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

29 w3.css - Layout Another w3.css layout feature further eases the pain of achieving a column-like layout using CSS w3-cell-row Container for cells (columns) w3-cell Layout cell (column) w3-cell-top Aligns content at the top of a cell w3-cell-middle Aligns content at the vertical middle of a cell w3-cell-bottom Aligns content at the bottom of a cell w3-mobile Adds mobile-first responsiveness to a cell. Displays elements as block elements on mobile devices East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

30 w3.css - Layout Originally, HTML block elements (like <div> elements) display as vertical blocks The w3-cell class redefines block elements to display horizontally (like table cells) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

31 w3.css - Layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

32 w3.css - Layout The w3-cell-row is a container for cells (columns) The width of the w3-cell-row container defines the total width of all the contained cells The default width is 100% If you change the width of the cell container, it will reduce the total width of the contained cells East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

33 w3.css - Layout Display resolution: 550px x 670px
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

34 w3.css - Layout The w3-cell class has a very nice built-in self adjusting standard. Side-by-side elements will automatically adjust to the necessary width East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

35 w3.css - Layout Display resolution: 796px x 670px
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

36 w3.css - Layout Notice from this example that cells automatically adjust to be equal height (a real pain to accomplish with vanilla CSS) Display resolution: 796px x 670px Display resolution: 495px x 670px East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

37 w3.css - Layout The w3-mobile class ads mobile first responsiveness to any HTML element Used together with w3-cell it will display the layout columns vertically on small screens/mobile phones and horizontally on medium/large screens East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

38 w3.css - Layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

39 w3.css - Layout Display resolution: 755px x 670px
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

40 w3.css - Layout The w3-cell class makes it very easy to align text w3-cell-top (default) w3-cell-middle w3-cell-bottom East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

41 Notice, no ‘w3-mobile’ class
w3.css - Layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

42 w3.css - Layout Display resolution: 744px x 670px
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

43 w3.css - Layout Display resolution: 470px x 670px
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

44 (Added ‘w3-mobile’ class)
w3.css - Layout (Added ‘w3-mobile’ class) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

45 w3.css - Layout Display resolution: 588px x 670px
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

46 w3.css - Layout NOTE: Setting up your grid can be greatly facilitated by creating templates, like we did in CSCI 1710 Much of the code is repetitive You can set things up initially so that you don’t have to keep typing the same thing over and over again East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

47 w3.css - Layout When it’s time to create a new web page, all you have to do is fill in the meta-information and add your content, styling the elements as you go. You can create multiple templates to fit different needs, for example: template-1col.html template-2col.html template-3col.html and so on East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

48 w3.css - Colors East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

49 w3.css - Colors The w3-color classes are inspired by modern colors used in marketing, road signs, and sticky notes East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

50 w3.css - Colors The w3-color and w3-text-color classes can be used to color any HTML element East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

51 w3.css - Background Colors
The w3-color classes set the background color for any HTML element East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

52 w3.css - Hover Colors The w3-text-color classes set the text color for any HTML element Background Text East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

53 w3.css - Panels East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

54 w3.css - Panels The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

55 w3.css - Panels The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

56 w3.css - Panels for Alerts
The w3-panel class is perfect for displaying quotes East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

57 w3.css - Panels for Alerts
The w3-panel class is perfect for displaying alerts. Alerts are often displayed using a strong color East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

58 w3.css - Rounded Panels East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

59 w3.css - Hiding a Panel Hiding a panel is easy Javascript
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

60 w3.css - Showing a Panel Starts out hidden Showing a panel is easy, take this: and add this Javascript East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

61 w3.css - Borders East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

62 w3.css - Borders http://csci1720.net/examples/w3borders1.php
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

63 w3.css - Border Colors http://csci1720.net/examples/w3borders2.php
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

64 w3.css - Thick Borders http://csci1720.net/examples/w3borders3.php
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

65 w3.css - Hoverable Borders
East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

Download ppt "CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design."

Similar presentations

Coding a Responsive HTML

Coding a Responsive HTML
Slice and Dice: From PSD Image to XHTML+CSS Svetlin Nakov Telerik Corporation www.telerik.com.

Slice and Dice: From PSD Image to XHTML+CSS Svetlin Nakov Telerik Corporation
Chapter 3 – Web Design Tables & Page Layout

Chapter 3 – Web Design Tables & Page Layout
Twitter Bootstrap. Agenda What is it? Grids and Fluid layouts Globals and Typography Tables, Forms and Buttons Navigation Media and thumbnails Responsive.

Twitter Bootstrap. Agenda What is it? Grids and Fluid layouts Globals and Typography Tables, Forms and Buttons Navigation Media and thumbnails Responsive.
Web Standards XHTML and CSS. Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?

Web Standards XHTML and CSS. Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Using HTML Tables.

Using HTML Tables.
CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.

CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS

TUTORIAL 8: Enhancing a Web Site with Advanced CSS
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.

1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.

Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.
Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.

Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.
Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.

Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.
Actual Building the Pages Tables. Using Table Elements  To build effective page templates, you must be familiar with the HTML table elements and attributes.

Actual Building the Pages Tables. Using Table Elements  To build effective page templates, you must be familiar with the HTML table elements and attributes.
Responsive design - Bedrock to our site Responsive site templates included.

Responsive design - Bedrock to our site Responsive site templates included.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.

CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.

Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.
Positioning Objects with CSS and Tables

Positioning Objects with CSS and Tables
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.

 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.

Similar presentations

Ads by Google