web applications and multimedia...
TRANSCRIPT
![Page 1: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/1.jpg)
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
![Page 2: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/2.jpg)
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)
![Page 3: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/3.jpg)
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
![Page 4: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/4.jpg)
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
![Page 5: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/5.jpg)
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
![Page 6: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/6.jpg)
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
![Page 7: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/7.jpg)
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
![Page 8: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/8.jpg)
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
![Page 9: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/9.jpg)
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
![Page 10: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/10.jpg)
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
![Page 11: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/11.jpg)
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
![Page 12: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/12.jpg)
Example 1. Using of CSS file
Lecture 04 CSS 12
Alignment justified
css-file
![Page 13: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/13.jpg)
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
![Page 14: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/14.jpg)
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
![Page 15: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/15.jpg)
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
![Page 16: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/16.jpg)
Example 2. Rezult
Lecture 04 CSS 16
![Page 17: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/17.jpg)
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.
![Page 18: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/18.jpg)
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>
![Page 19: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/19.jpg)
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.
![Page 20: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/20.jpg)
Center and Right Alignment
As mentioned above, you can change the alignment of the buttons by using text-align property.
Lecture 04 CSS 20
![Page 21: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/21.jpg)
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]-->
![Page 22: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/22.jpg)
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
![Page 23: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/23.jpg)
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
![Page 24: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/24.jpg)
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
![Page 25: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/25.jpg)
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
![Page 26: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/26.jpg)
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
![Page 27: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/27.jpg)
THE USE OF TEMPLATES (SCRIPTS, SKELETON)
Another technology
Lecture 04 CSS 27
![Page 28: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/28.jpg)
Template 1. http://www.viewlike.us/learning-resources/
Lecture 04 CSS 28
![Page 29: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/29.jpg)
CSS. Template 2. http://quirktools.com
Lecture 04 CSS 29
1. Right-click on the page
2. Choose
3. Examine the code
![Page 30: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/30.jpg)
Save page as index.html
Lecture 04 CSS 30
1. Right-click on the page
2. Save as index.html
![Page 31: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/31.jpg)
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.
![Page 32: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/32.jpg)
Working with responsive template in Dreamweaver
Lecture 04 CSS 32
![Page 33: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/33.jpg)
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
![Page 34: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/34.jpg)
Textbook
Lecture 04 CSS 34
![Page 35: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/35.jpg)
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
![Page 36: Web applications and multimedia technologiesnadin.miem.edu.ru/images_2015/!!_04_WA-2015_lec_04_css_01.pdf · Web applications and multimedia technologies Lecture № 4 Web page stylistic](https://reader030.vdocument.in/reader030/viewer/2022040605/5eabfe7686ce123e03430fd8/html5/thumbnails/36.jpg)
Thank you for attention!
Lecture 04 CSS 36