http___www.kodadri.com_css_uredivanje__1.xml
1.1 1.2 2.1 2.2 3.1 4.1 5.1 6.1 6.2 7.1 8.1 8.2 9.1 10.1 11.1 12.1 12.2 13.1 14.1 15.1 16.1 17.1 18.1 19.1 19.2 20.1 21.1 22.1 24.1 25.1 26.1 26.2 27.1 28.1 29.1 29.2 30.1 31.1 32.1 33.1 33.2 34.1 35.1 36.1 37.1 37.2 38.1 38.2 40.1 41.1 41.2 43.1 44.1 45.1 46.1
There have been many requests for an instruction on how to build a configurator application. Actually, it’s not so difficult to build such an application if you have good understandings of views in Composer and some knowledge of HTML coding. Here is a procedure you can follow. In this tutorial, we just use the GotoView() method, which can be used without Player Pro license. Those who are already familiar with Composer’s intelligent views and HTML coding quite well can directly jump to the discussion of actual coding section at the bottom of this page. Create Views You might want to review our previous podcasts such as this and this in order to create intelligent views that can partially save and update selected properties of specified actors in Composer. In this tutorial, we access intelligent views through an API to change parts but not to change camera position or orientation and other parts. Write an HTML source code For this tutorial, we just create a simple web application with a title, Player ActiveX Control, and the control field that display radio buttons to configure parts. Here is the entire set of the source code we begin with: Configurator       Radio Controlled Car Configurator Underneath the title, which is enclosed with the tags, we set a region defined by the tags to define Player ActiveX Control on the left hand side and button controls on the right hand side. We will define the details about the controls field later. This should give an IE display as below. Add CSS to define a layout and styles We write the following CSS codes to define a layout for the application: #container { width: 940px; height: 480px; border: 2px solid black; margin-left: auto; margin-right: auto; } #controls { top: 100px; left: 640px; float: right; width: 300px; height: 480px; overflow-y: auto; background-color: #eeeeee; } Here, #container is adjusted to include the Player ActiveX and the control field with the sum of their widths and their exact height. We put a solid line around #container to define the space. margin-left: auto; and margin-right: auto; are set to centralize #container This is not necessary but in order to give a consistent style for all elements defined in this HTML, we define the following: * { margin: 0px; padding: 0px; font-family: "Segoe UI Light"; } where “margin” and “padding” are defined to have 0 values for us to control them, rather than the browser window itself. We also define the font type to give a modern look at the application. Up to now, this should yield the following screen: Defining controls Now, we are ready to define switches to control the configuration. We first define necessary radio buttons to configure the model and a push button to go back to the default view of the model. Default     Color   Red     Green     Blue     Yellow     Wheel   Type A     Type B     Body   Type A     Type B     Spoiler   Type A     Type B     Springs   Type A     Type B     Antenna   Type A     Type B     Exhaust   Type A     Type B     Bumper   Type A     Type B Since by default “Type A” is selected for all parts, we added “checked” for the Type A controls. Please also note that we inserted these controls within the tags so that we can give some blank spaces around the buttons. In order for such spaces, we also need to define a CSS code sequence: #configurator { padding: 10px; } So far, the HTML window should look like this: Adding API We now add the API to access the views defined in Composer. Let’s first define a behavior for the default button. The suitable API for this purpose is the GotoView() method. Since we already gave view names such as “Default”, we can simply use the string as an argument of the GotoView() method. where “_player” is the ID given to the Player ActiveX Control object within the    tags. Next, we add the GotoView() method with an appropriate view name to each radio button. For example, for the Red radio button, we write something like this to associate the click event on the radio button with the view change via the onclick event: where “Red” is the name of the view we defined earlier as an intelligent view in Composer that can change the color of the body and the spoiler to red. We continue adding the GotoView() method until the end. The end result should look like this: Configurator    * { margin: 0px; padding: 0px; font-family: "Segoe UI Light"; } #container { width: 940px; height: 480px; border: 2px solid black; margin-left: auto; margin-right: auto; } #controls { top: 100px; left: 640px; float: right; width: 300px; height: 480px; overflow-y: auto; background-color: #eeeeee; } #configurator { padding: 10px; }        Radio Controlled Car Configurator                                             Default     Color   Red     Green     Blue     Yellow     Wheel   Type A     Type B     Body   Type A     Type B     Spoiler   Type A     Type B     Springs   Type A     Type B     Antenna   Type A     Type B     Exhaust   Type A     Type B     Bumper   Type A     Type B
1.1 2.1 2.2 2.3 3.1 3.2 3.3 3.4 4.1 5.1 9.1 10.1 11.1 13.1 14.1 16.1 18.1 19.1 19.2 19.3 19.4 19.5 20.1 21.1 22.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 31.2 32.1 32.2 33.1 34.1 35.1 35.2 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 45.1 46.1 47.1 48.1 49.1 53.1 58.1 59.1 60.1 61.1 65.1 66.1 67.1 69.1 70.1 71.1 73.1 74.1 75.1 76.1 77.1 79.1 80.1 81.1 82.1 84.1 85.1 86.1 88.1 90.1 91.1 92.1 94.1 96.1 97.1 98.1 99.1 100.1
Opća pravila Na početku CSS datoteke uvijek pišemo @charset “utf-8”; zbog naše kodne stranice. Nakon toga nabrajamo selektore (to su nazivi elemenata stranice, npr. Svojstva selektora nabrajamo unutar vitičastih zagrada { }, a njihove vrijednosti iza znaka dvotočke : i točku-zarez ; pišemo na kraju reda. Što su zapravo selektori? Možemo ih zamisliti kao površine unutar kojih smještamo svoj sadržaj na stranicu (tekst, slike itd). Svakom tom sadržaju treba odrediti lokaciju, dimnezije, boju, okvir, udaljenost od ostalog sadržaja i mnogo drugih svojstava. Korištenje pojedinih svojstava ovisi o nama samima i o želji klijenta za kojeg radimo web stranicu. Pravila korištenja selektora: Upisati selektor u HTML datoteku: Upisati taj isti selektor i njegova svojstva u CSS datoteku: #main { width: 770px; margin: 2px; background-color: #000; Upisati u zaglavlje (HEAD) HTML datoteke putanju do CSS datoteke: Grupiranje selektora Ako više selektora ima neke zajednička svojstva, onda ih možemo grupirati. Na taj način ne moramo istu stvar više puta pisati. Kasnije možemo za svaki posebno navesti svojstva po kojima se razlikuju. U donjem primjeru svi selektori imaju isti razmak između sadržaja i ruba elementa i margine. Sve ostale razlike mogu se posebno naknadno navesti u svakom selektoru posebno. #container, #header, #main, #sidebar, #footer { padding: 10px; margin: 10px; Uređivanje teksta Kod uređivanja teksta možemo koristiti sljedeće naredbe: color: boja slova; font-size: veličina slova; font-style: stil slova; font-family: oblik slova; Uređivanje elemenata Elementi CSS-a su najčešće nevidljvi okviri (boxovi) u koje stavljamo pojedine dijelove stranice. To su zapravo ti naši selektori. Nekad je zgodno prije samog početka izrade stranice, skicirati stranicu na papiru tako da otprilike vidimo kakav razmještaj želimo. Na slici ispod ovog odlomka nalazi se jedan primjer takve stranice. Ispod se nalaze najčešće korišteni nazivi elemenata stranice: Container – prikazan je svijetlo zelenom bojom i on prikazuje element u koji smještamo ostale bitne dijelove. Header (zaglavlje) – prikazan je plavom bojom. Tu obično ide neki logo (slika ili flash). Sidebar – može stajati bilo gdje (na ovoj slici je nalazi se lijevo) i obično sadrži linkove ili popis zadnjih ili načitanijih vijesti. Main – to je obično glavni ili srednišnji dio (na ovoj slici nalazi se desno) gdje stavljamo tekstove i slike. Footer (podnožje) – nalazi se u podnožju. Ovo su samo neki elementi koje možemo koristiti. Što se sve može definirati elementima? width: širina; height: visina; background-color: boja pozadine; background-image: pozadinska slika; background-repeat: slika i dio slike koji se ponavlja ili ne ponavlja; margin: debljina margine; padding: udaljenost sadržaja od ruba elementa; border: obrub; HTML kod za gornji primjer: Ovo je samo kostur stranice Zaglavlje Lijevi dio Desni dio Podnožje CSS za gornji primjer: body { color:white; #container, #header, #main, #sidebar, #footer { padding: 10px; margin: 10px; #container { background-color: lightgreen; width: 800px; height: 710px; margin: 10px auto; #header { background-color: blue; width: 760px; height: 200px; #sidebar { background-color: green; float: left; height: 300px; #main { background-color: green; float: left; height: 300px; #footer { background-color: red; clear: both; width:760px; height: 100px;