Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново? |
Опубликован: 29.08.2012 | Доступ: платный | Студентов: 51 / 15 | Длительность: 08:05:00
Специальности: Разработчик интернет-проектов
Теги:
Практическая работа 2:
Разработка галереи изображений
< Лекция 2 || Практическая работа 2 || Практическое занятие >
Аннотация: В ходе выполнения данной работы учащиеся познакомятся со способами создания галереи изображений.
В ходе выполнения второй практической работы мы разработаем две галереи изображений. В первом примере мы будем использовать каскадную таблицу стилей, во втором случае нам понадобится синтаксис Razor.
Пример 1(sample_1)
Создаем папку images и помещаем в нее 15 изображений с именами от 1.jpg до 15.jpg. Далее, в блокноте создаем файл index.html со следующим кодом:
index.html
<!DOCTYPE html> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>Галереяизображений</title> <linkhref="myStyle.css"rel="stylesheet"type="text/css"/> </head> <body> <divclass="container"id="container"> <divclass="gallery"> <atabindex="1"><imgsrc="images/1.jpg"/></a> <atabindex="1"><imgsrc="images/2.jpg"/></a> <atabindex="1"><imgsrc="images/3.jpg"/></a> <atabindex="1"><imgsrc="images/4.jpg"/></a> <atabindex="1"><imgsrc="images/5.jpg"/></a> <atabindex="1"><imgsrc="images/6.jpg"/></a> <atabindex="1"><imgsrc="images/7.jpg"/></a> <atabindex="1"><imgsrc="images/8.jpg"/></a> <atabindex="1"><imgsrc="images/9.jpg"/></a> <atabindex="1"><imgsrc="images/10.jpg"/></a> <atabindex="1"><imgsrc="images/11.jpg"/></a> <atabindex="1"><imgsrc="images/12.jpg"/></a> <atabindex="1"><imgsrc="images/13.jpg"/></a> <atabindex="1"><imgsrc="images/14.jpg"/></a> <atabindex="1"><imgsrc="images/15.jpg"/></a> <spanclass="close"></span> </div> </div> </body> </html>
После этого вновь открываем блокнот и создаем каскадную таблицу стилей myStyle.css:
myStyle.css
.container { margin:5pxauto; padding:20px; position:relative; width:800px; } .gallery { width:800px; margin:0auto; } .gallerya { display:inline-block; position:relative; width:200px; height:150px; } .galleryaimg { border:1pxsolid#fff; cursor:pointer; display:block; height:100%; left:0px; position:absolute; top:0px; width:100%; z-index:1; -moz-user-select: none; -khtml-user-select: none; -moz-box-sizing:border-box; box-sizing:border-box; -moz-transition-property:width, height, top, bottom, left, right, z-index, border; -moz-transition-duration:1s; -o-transition-duration:1s; transition-property:width, height, top, bottom, left, right, z-index, border; transition-duration:1s; } .gallerya:focusimg { border:15pxsolid#fff; cursor:default; height:500%; position:absolute; width:500%; z-index:25; box-shadow:1px1px5px#888; -moz-box-shadow:1px1px5px#888; -moz-transition-property:width, height, top, bottom, left, right, z-index, border; -moz-transition-duration:1s; transition-property:width, height, top, bottom, left, right, z-index, border; transition-duration:1s; } .gallerya:focus:nth-child(3n+1)img { left:150px; } .gallerya:focus:nth-child(3n+2)img { left:-50px; } .gallerya:focus:nth-child(3n+3)img { left:-250px; } .gallerya:focus:nth-child(-n+3)img { top:140px; } .gallerya:focus:nth-child(n+7)img { top:-150px; } .gallerya:focus:nth-child(n+10)img { top:-295px; } .gallery.close { background:transparent; cursor:pointer; display:none; height:360px; left:180px; position:absolute; top:160px; width:500px; z-index:30; } .gallerya:focus~.close { display:block; }
Пример 2 (sample_2)
Запустите программу WebMatrix, создайте веб-сайт Gallery. Создайте папку images и поместите в нее 18 изображений домов с именами от 1.jpg до 18.jpg. Создайте файл Gallery.cshtml со следующим кодом.
Gallery.cshtml
@{varmyPath= ""; if( Request["SelectPhoto"] != null){ myPath = @"images\"+ Request["SelectPhoto"]; } } <!DOCTYPEhtml> <html> <head> <title>Картиннаягалерея</title> <styletype="text/css"> h1 { font-family: 'Comic Sans MS';color: #0094ff; } </style> </head> <body> <h1>Галерея</h1> <formmethod="post"action=""> <div> <selectname="SelectPhoto"> <optionvalue="1.jpg">Дом 1</option> <optionvalue="2.jpg">Дом 2</option> <optionvalue="3.jpg">Дом 3</option> <optionvalue="4.jpg">Дом 4</option> <optionvalue="5.jpg">Дом 5</option> <optionvalue="6.jpg">Дом 6</option> <optionvalue="7.jpg">Дом 7</option> <optionvalue="8.jpg">Дом 8</option> <optionvalue="9.jpg">Дом 9</option> <optionvalue="10.jpg">Дом 10</option> <optionvalue="11.jpg">Дом 11</option> <optionvalue="12.jpg">Дом 12</option> <optionvalue="13.jpg">Дом 13</option> <optionvalue="14.jpg">Дом 14</option> <optionvalue="15.jpg">Дом 15</option> <optionvalue="16.jpg">Дом 16</option> <optionvalue="17.jpg">Дом 17</option> <optionvalue="18.jpg">Дом 18</option> </select> <inputtype="submit"value="Смотреть"/> </div> <divstyle="padding:10px;"> @if(myPath != ""){ <imgsrc="@myPath"alt="Дом"width="800px"/> } </div> </form> </body> </html>
Запустите проект
< Лекция 2 || Практическая работа 2 || Практическое занятие >