Адаптивный дизайн веб-страниц с использованием сеточных технологий

Size: px

Start display at page:

Download "Адаптивный дизайн веб-страниц с использованием сеточных технологий"

Lesley Warner
5 years ago
Views:

1 Адаптивный дизайн веб-страниц с использованием сеточных технологий ТНК 2018

2 Теоретический материал

3 960 System (960.gs)

4 Пример

5 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>responsive.gs Example</title> <link rel="stylesheet" media="all" href="css/style.css" /> <script src="scripts/respond.min.js"></script> </head> <body> <div class="container row"> <header role="banner" class="row"> Header </header> <main role="main" class="row gutters"> <article class="col span_8"> Content </article> <aside role="complimentary" class="col span_4"> Sidebar </aside> </main> <footer role="contentinfo" class="row"> Footer </footer> </body> </html> index.html

6 /* IMPORT RESET url("reset.css"); /* IMPORT 12 COLUMN RESPONSIVE GS url("responsive.gs.12col.css"); /* EXAMPLE STYLES */ body { font-family: sans-serif; color: white; } header { } line-height: 15em; text-align: center; background: #333; article { } aside { } footer { } line-height: 20em; text-align: center; background: #666; line-height: 20em; text-align: center; background: #999; line-height: 15em; text-align: center; background: #BBB; style.css

7 responsive.gs.12col.css /* COLUMN WIDTH ON DISPLAYS +768px You might need to play with media queries here to suite your design. ( min-width : 768px ) {.span_1 { width: %; }.span_2 { width: %; }.span_3 { width: 25%; }.span_4 { width: %; }.span_5 { width: %; }.span_6 { width: 50%; }.span_7 { width: %; }.span_8 { width: %; }.span_9 { width: 75%; }.span_10 { width: %; }.span_11 { width: %; }.span_12 { width: 100%; } }.gutters.span_1 { width: 6.5%; }.gutters.span_2 { width: 15.0%; }.gutters.span_3 { width: 23.5%; }.gutters.span_4 { width: 32.0%; }.gutters.span_5 { width: 40.5%; }.gutters.span_6 { width: 49.0%; }.gutters.span_7 { width: 57.5%; }.gutters.span_8 { width: 66.0%; }.gutters.span_9 { width: 74.5%; }.gutters.span_10 { width: 83.0%; }.gutters.span_11 { width: 91.5%; }.gutters.span_12 { width: 100%; }

8 responsive-gs/

10 Пример 2

11 Пример 3

12 .examples li { (properties of.grid_4) } <ul class="examples"> <li> </li> <li> </li> <li> </li> </ul>

Пример <h1><a href="http://960.gs/"> 960 System </a> </h1> <div class="container_12"> <h2>12 Column </h2> <div class="grid_12"> <p>940px</p> <!-- end.

13 Пример <h1><a href=" 960 System </a> </h1> <div class="container_12"> <h2>12 Column </h2> <div class="grid_12"> <p>940px</p>  <div class="clear"> <div class="grid_9"> <p>700px</p> <div class="grid_3"> <p>220px</p> <div class="grid_12"> <p>940px</p>

<!DOCTYPE html "> <html xmlns="http://www.w3.

14 <!DOCTYPE html "> <html xmlns=" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>my Blog - My Name</title> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> </head> <body> <div class="container_12"> <div id="header" class="grid_12"> <h2>my Blog</h2> <p>description of my blog</p>  <div class="clear"> <div id="maincontent" class="grid_9"> <h1>title of the blog post</h1> <p><strong>published on Jan. 01, 2009 by Zac Gordon</strong></p> <p>.</p> <p> </p> <p>... </p> <div id="aside" class="grid_3"> <h3>navigation</h3> <ul> <li><a href="#">home</a></li> <li><a href="#">about Me</a></li> <li><a href="#">articles</a></li> <li><a href="#">contact</a></li> </ul> <h3>more Articles:</h3> <ul> <li><a href="#">article 1</a></li> <li><a href="#">article 2</a></li> <li><a href="#">article 3</a></li> <li><a href="#">article 4 </a></li> </ul> <div id="footer" class="grid_12"> <p> Footer information like and licensing for site </p>  </body> </html>

15 grid-system--net-13794

16 34 RESPONSIVE GRID SYSTEM

17 Видео-контент <div class="col_[*]"> <p class="video-holder"> <iframe width=640 height=480 src= frameborder=0 allowfullscreen> </iframe> </p>

18 8-колоночная сетка css-grid/full_screen_preview/

19  <div class="f1 animate stack1"> <div class="one"> 1  1 колонка на всю ширину

20  <div class="f2 animate stack1"> <div class="one"> 1 <div class="two"> 2  2 колонки

21 3-колоночный шаблон 3 columns layout  <div class="f3 animate stack1"> <div class="one"> 1 <div class="two"> 2 <div class="three"> 3   <div class="f3 animate stack1"> <div class="one"> 1 <div class="two-three"> 2-3   <div class="f3 animate stack1"> <div class="one-two"> 1 2 <div class="three"> 3

22 4 колоночный шаблон

23 4 колоночный шаблон html-код  <div class="f4 animate stack1"> <div class="one"> 1 <div class="two"> 2 <div class="three"> 3 <div class="four"> 4   <div class="f4 animate stack1"> <div class="one"> 1 <div class="two-four"> 2-4   <div class="f4 animate stack1"> <div class="one-two"> 1-2 <div class="three-four"> 3-4  And so on

24 5 колоночный шаблон  <div class="f5 animate stack1"> <div class="one-four"> 1-4 <div class="five"> 5

25 6 колоночный шаблон  <div class="f6 animate stack1"> <div class="one-four"> 1-4 <div class="five-six"> 5-6

26 7 колоночный шаблон  <div class="f7 animate stack1"> <div class="one">1 <div class="two-three"> 2-3 <div class="four-seven"> 4-7 <!-- 7 col fixed (1, 2, 4) End - ->

27 8 колоночный шаблон  <div class="f8 animate stack1"> <div class="one-seven"> 1 7 <div class="eight"> 8

28 Файлы css <html class="no-js"><head> <title>responsive website CSS, HTML5. For responsive websites.</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="css/nav-top.css" rel="stylesheet" type="text/css" media="all" />  <link href="css/default.css" rel="stylesheet" type="text/css" media="all">  <link href="css/fixed-1024.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)">  <link href="css/fixed-768.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1023px)">  <link href="css/fixed-480.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)">  <link href="css/fixed-320.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)">  <link href="css/percent.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px)">  <link href="css/stack2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)"> <link href="css/stack1.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 479px)"> <link href="css/stack1-2.css" type="text/css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 767px)"> <link href="css/prettify.css" type="text/css" rel="stylesheet"> </head> <body> </body></html>

29 Заголовок (логотип), выпадающее меню, футер

30 Html- код навигации  <div class="navclosed slide"> <a href="#" title="menu"></a>   <nav> </nav>  <ul class="nav-buttons"> <li><a href="#" class="dropdown">page 1</a> <ul> <li><a href="#">page 1-1</a></li> <li><a href="#">page 1-2</a></li> </ul> </li> <li><a href="#" class="dropdown">page 2</a> <ul> <li><a href="#">page 2-1</a></li> <li><a href="#">page 2-2</a></li> <li><a href="#">page 2-3</a></li> </ul> </li> <li><a href="#" class="dropdown">page 3</a> <ul> <li><a href="#">page 3-1</a></li> <li><a href="#">page 3-2</a></li> <li><a href="#">page 3-3</a></li> </ul> </l ></ul>

Используйте CSS файлы http://nadin.miem.edu.ru/grid/css/.

31 Используйте CSS файлы например:

32 Пример выпадающего меню

33 Задание Напишите код страницы адаптивного сайта в сеточной технологии по вашей теме Используйте в навигации выпадающие меню (в соответствии со структурой приложения)

34 Литература 1 Title: CSS: The Missing Manual, 4th Edition Author: David Sawyer McFarland Year: 2015 Publisher: O'Reilly ISBN: Pages: 720 Language: English

35 Литература 2

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows