Embed Size (px)
Citation preview
Web applications and
multimedia technologies
Lecture № 4
Web page stylistic markup with CSS
Prof. N.K. Trubochkina
Department of computer engineering, HSE
2015
Lecture 04 CSS 1
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language
Lecture 04 CSS 2
Filename extension
.css
Internet media type
text/css
Developed by
•Håkon Wium Lie •Bert Bos •World Wide Web Consortium
Initial release December 17, 1996;
Type of format Style sheet language
Standards
•Level 1 (Recommendation) •Level 2 (ditto) •Level 2 Revision 1 (ditto)
Before the advent of CSS
• Web-designers prescribed the layout styles in html tags. This is rather inconvenient, because if you want to change a style, you need to make changes in many places.
• After appearance cascading style sheets (CSS) we solved all these problems.
• Consider ways to connect styles to the web page.
Lecture 04 CSS 3
Ways to connect styles to the web page (1)
1. Connecting the CSS a separate external file with the extension .css. The most convenient way. It guarantees the most easy and convenient editing styles, and does not increase the page code.
To the page itself is connected as follows: Between the tags: <head> </ head> insert the code: <link href="style.css" rel="stylesheet" type=text/css>
Accordingly, the style file must be named style.css and is located in the same folder as html file.
Lecture 04 CSS 4
Ways to connect styles to the web page (2,3)
2. Integration of the block of styles in the web page code. The convenience of this method is that it is not necessary to create additional file and the main drawback is increasing html code. Connect as follows:
<style type="text/css">Code of styles… </style>
3. Embedding style to tags. The most inconvenient way, since the subsequent editing is difficult and increases the code of web page. Connect as follows: within the tag you write: <h3 style="color:green;">Congratulations</h3>
Lecture 04 CSS 5
Advantages of using CSS
• Cleansing the html-code from the stylesheet
• Faster loading of web pages
• The maximum cross-browser compatibility
• Extensive work with styles
• The possibility of achieving interesting graphical effects (such as drop-down menu, adaptive (responsive) menus, etc.)
Lecture 04 CSS 6
Setting the color. Create an html file and write to the following code:
<html> <head>
<style type="text/css" media="screen"> h1 {color:#003366;} h2 {color:#e2b500;} h3 {color:#9d0000;} </style> </head>
<body> <h1>Heading of the first level</h1> <h2>Heading of the 2d level</h2> <h3>Heading of the 3d level</h3> </body> </html>
Lecture 04 CSS 7
All styles are written in curly brackets separated by semicolons
Alignment
• Now put the title of the 1st level in the center of the web page.
• For this in style list h1, after color: # ......; we add a style:
text-align:center; <style type="text/css" media="screen">
h1 {color:#003366; text-align:center;} h2 {color:#e2b500;} h3 {color:#9d0000;} </style>
Lecture 04 CSS 8
Font Name
• Now we will change the font for the header of the 2nd level. Take, for example the font Verdana. We add only in h2 style:
font-family: Verdana;
<style type="text/css" media="screen"> h1 {color:#003366; text-align:center;} h2 {color:#e2b500; font-family: Verdana;} h3 {color:#9d0000;} </style>
Lecture 04 CSS 9
Background and Border
• For example, select the title of the 3rd level background color and border (pretend block). We add to it such styles:
background: #d4e6ff; border: solid 1px #006cff; width: 200px; <style type="text/css" media="screen">
h1 {color:#003366; text-align:center;} h2 {color:#e2b500; font-family: Verdana;} h3 {color:#9d0000; background: #d4e6ff; border: solid 1px #006cff; width: 200px;} </style>
Lecture 04 CSS 10
Selectors: element, a class, or an identifier
p { color:blue; }
The selector p means all paragraph elements in the entire page. Applying this rule will result in all paragraphs in the entire page being rendered in blue.
.blue { color:blue; }
The selector .blue represents all the elements in
the page that have the class blue,
whether they are paragraphs, headings, or so on.
p.blue { color:blue; }
This selector represents the collection of all
paragraph elements on the page with
the class set to blue.
Lecture 04 CSS 11
Example 1. Using of CSS file
Lecture 04 CSS 12
Alignment justified
css-file
Example 1. html-file <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>My page</title> <link rel="stylesheet" type="text/css" href="css/222.css"> </head> <body class="body" > <p>текст текст текст 0 текст текст текст текст текст текст текст текст текст текст текст0 текст текст текст текст текст текст текст текст текст 2 текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 3 текст текст текст текст текст текст текст текст 8 текст текст текст текст текст текст текст текст текст текст текст </p> <p> </p> <p> </p> <p class="justify"> lkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk j lkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk jlkj lk lj lk lkj lk lk lk lkj lkjlkjlkjlkjl lkjlkj lkj ljlkjlk jlk jlk jlk j</p> </body> </html>
Lecture 04 CSS 13
What is responsive web design ? Responsive web design is web pages design, providing an excellent display of a site on different devices connected to the Internet. Due to the adaptive layout of the site will be efficiently and conveniently displayed on different devices, such as: personal computers, laptops, plates, smartphones. Every day adaptive layout is becoming more popular. Adaptive sites appear more and more. To begin development of adaptive layout we will try to make a simple responsive menu, which will be well displayed in different devices.
Lecture 04 CSS 14
Tag <div>. Example 2. Responsive image
html css
<div> <img src="../images/pl_002_1500_ap.jpg"> </div>
div { width: 100%; text-align: center; } div img { width: 100%; height: auto; }
Lecture 04 CSS 15
Example 2. Rezult
Lecture 04 CSS 16
Example 3. Responsive menu
Lecture 04 CSS 17
Task. Mobile navigation for responsive design, a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup.
Nav HTML Markup
Here is the markup for the navigation. The <nav> tag is required to create the dropdown with the css property absolute position.
The .current class indicates the active/current menu link.
Lecture 04 CSS 18
<nav class="nav"> <ul> <li class="current"><a href="#">Portfolio</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Print Media</a></li> <li><a href="#">Graphic Design</a></li> </ul> </nav>
CSS
Lecture 04 CSS 19
Note that we specified display:inline-block instead of float:left for the nav <li> element. This allows the menu buttons to be able to align left, center or right by specifying text-align on the <ul> element.
Center and Right Alignment
As mentioned above, you can change the alignment of the buttons by using text-align property.
Lecture 04 CSS 20
Internet Explorer Support
HTML5 <nav> tag and media query is not supported by Internet Explorer 8 or older. Include css3-mediaqueries.js (or respond.js) and html5shim.js to provide fallback support. If you don't want to add html5shim.js, replace the <nav> tag with a <div> tag.
Lecture 04 CSS 21
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
Resp
on
sive 1
@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon- menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
Lecture 04 CSS 22
Resp
on
sive 2
.nav li { display: none; /* hide all <li> items */ margin: 0; } .nav .current { display: block; /* show only current <li> item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* on nav hover */ .nav ul:hover { background-image: none; }
Lecture 04 CSS 23
Resp
on
sive 3
.nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* right nav */ .nav.right ul { left: auto; right: 0; } /* center nav */ .nav.center ul { left: 50%; margin-left: -90px; } }
Lecture 04 CSS 24
25
Task (Control Week 5)
• In the "Notepad" please write HTML-code for responsive single Level menu of your website, using lecture materials
Lecture 04 CSS
View in browser
An example of the block layout. Tag <div>. Simple template
Tutorial:
http://www.css-school.ru/css_verst/44-urok-css-vjorstki-4.-prostojj-shablon.html
Lecture 04 CSS 26
Handmade coding
THE USE OF TEMPLATES (SCRIPTS, SKELETON)
Another technology
Lecture 04 CSS 27
Template 1. http://www.viewlike.us/learning-resources/
Lecture 04 CSS 28
CSS. Template 2. http://quirktools.com
Lecture 04 CSS 29
1. Right-click on the page
2. Choose
3. Examine the code
Save page as index.html
Lecture 04 CSS 30
1. Right-click on the page
2. Save as index.html
You save the index.html file and folder index-files with content files: css, png, js:
Lecture 04 CSS 31
1. Open index.html in a web editor Dreamweaver. 2. Replace content of web page. 3. Change the content, change the design of the page, leaving it adaptive.
Working with responsive template in Dreamweaver
Lecture 04 CSS 32
Textbook
Title: CSS: The Missing Manual, 4th Edition Author: David Sawyer
McFarland Year: 2015 Publisher: O'Reilly ISBN: 978-1491918050 Pages: 720 Language: English
Lecture 04 CSS 33
Textbook
Lecture 04 CSS 34
Task (control in 6th week) Create your first adaptive site using a template from the lecture and the theme of your project:
1. Open index.html in a web editor Dreamveawer.
2. Prepare content on the theme of the project (text, images in the formats jpg, gif, png).
3. Images should be optimized by file volume in PhotoShop: Save for Web…
4. Change the template content, change the design of the page, leaving it adaptive.
Lecture 04 CSS 35
Thank you for attention!
Lecture 04 CSS 36
