Website Design, Development & Maintenance | Foundations | Week 02
•Descargar como PPT, PDF•
0 recomendaciones•285 vistas
The next layer of web design and development we take a look at the structure and language around CSS and making the house that HTML built look pretty.
Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (15)
Último
Último (20)
Website Design, Development & Maintenance | Foundations | Week 02
- 1. Week 02 a new layer
- 2. From Last Week What does HTML stand for? What does CSS stand for? What is the difference between them?
- 3. From Last Week What does FTP stand for? What does HTTP stand for? What is the difference between FTP and HTTP?
- 9. Root Directory TOP LEVEL FOLDER FOR FILES
- 11. rules on files and dir all lower case no spaces can use ‘-’ or ‘_’ to separate words if need be
- 12. rules in effect /something/over there/never buy remotes/ /something/over-there/never-buy-remotes/ X
- 14. default file names the first file browsers look for is ‘index’ for us we are authoring in html so index.html will be our default file name Home Page = index.html default page for each directory = index.html
- 15. seeing it work go to snarkygargoyle.com/inClass/ (don’t need the file name since we want index.html to show)
- 17. Doing it ourselves open up filezilla/cuteFTP/firefox
- 18. Break 15 minutes
- 19. Style Sheets Ability to stylize any element of HTML (style sheet) COLOR BORDER FONT PADDING MARGINS POSITION FONT-VARIANT WIDTH HEIGHT Z-INDEX
- 20. Cascading refers to the order in which the browser reads the CSS rules
- 21. CSS 3 Primary kinds of CSS External (separate document) Internal (styles in the <head>) Inline (within each element)
- 22. CSS Browsers obey CSS in the order they read it
- 23. External CSS
- 24. Internal CSS
- 25. Inline CSS <p style="color:blue; font-size:12px; font-family:verdana,<p style="color:blue; font-size:12px; font-family:verdana, arial,'times new roman';">paragraph that is blue, 12px andarial,'times new roman';">paragraph that is blue, 12px and verdana</p>verdana</p>
- 26. So Cascading means External style sheet says all P tags are blue Internal style sheet says all P tags are green Inline style tag says the p tag is red the p tag is red IF: THEN:
- 27. Inline CSS To assign styles to an element inline, we use an attribute called style
- 28. Attribute <p<p stylestyle="color:blue;">paragraph that is blue</p>="color:blue;">paragraph that is blue</p>
- 29. Property <p<p stylestyle="="colorcolor:blue;">paragraph that is blue</p>:blue;">paragraph that is blue</p>
- 30. Value <p<p stylestyle="color:="color:blueblue;">paragraph that is blue</p>;">paragraph that is blue</p>
- 31. Selector <<pp stylestyle="color:blue;">paragraph that is blue</p>="color:blue;">paragraph that is blue</p>
- 32. Declaration <<pp stylestyle="="color:bluecolor:blue;">paragraph that is blue</p>;">paragraph that is blue</p>
- 34. 2 new tags <strong>stuff</strong> <em>more stuff</em> MAKES THINGS BOLD, IMPORTANT MAKES THINGS ITALICS (EMPHASIZE)
- 35. Lets Practice To the Text Editor Robin!
- 36. The Box Model The ability to control block level elements with a series of layout controls PADDING BORDER MARGIN
- 37. Box Model PADDING BORDER MARGIN
- 38. Box Model <p style=”border: 1px black solid; padding:2px; margin:15px;”> some stuff in here </p> PADDING BORDER MARGIN
- 39. Box Model But Jason, boxes have 4 sides, what about different values? padding: 5px; padding: 5px 10px; padding: 3px 5px 10px 2px; ALL SIDES ARE EQUAL TOP/BOTTOM FIRST THEN LEFT/RIGHT TOP RIGHT BOTTOM LEFT SAME LOGIC WITH ‘MARGIN’
- 40. Box Model Borders are a little different border: 1px; border: 1px red; border: 1px red solid; YOU SET WIDTH, BROWSER ASSUMES WIDTH, COLOR, BROWSER ASSUMES YOU GAVE THE BROWSER ALL VARIABLES LONG HAND IS USING ‘BORDER-COLOR’ | ‘BORDER-WIDTH’ | ‘BORDER-STYLE’
- 41. Inheritance elements inside of other elements will inherit its values unless you tell it otherwise <p style=”color:red”> <strong>some stuff in here</strong> </p> <p style=”color:red”> <strong style=”color:blue;”>some stuff in here</strong> </p>
- 42. Lets rock...
- 43. Anchors making links uses a tag called the anchor <a></a>
- 44. Anchors the anchor tag also uses an attribute href HYPERTEXT REFERENCE
- 45. Anchors the attribute ‘href’ needs a definition, no? href=”http://www.google.com” WHEN YOU USE AN ‘HTTP’ REFERENCE YOU ARE CREATING AN ABSOLUTE LINK. THERE IS ANOTHER TYPE OF LINK CALLED ‘RELATIVE’ - COMING SOON
- 46. Anchors put it all together <a href=”http://www.google.com”>google</a>
Notas del editor
- Hyper text markup language cascading style sheets HTML is the framework and CSS is the pretty layer
- File Transfer Protocol Hypertext transfer protocol FTP puts and gets files with no care to their type HTTP requests files and attempts to read them
- - FTP lets us put files from our local machines to a remote lcoation on another server - we will want to organize our files locally so we can simply mirror them with our host
- - all HTML documents have a relationship to the website on which they live - like a word document, where you place a photo in the document
- - then you move the file and the image dissapears? - you changed the location of the document and the image, so the relationship broke
- - we will be building relationships with all sorts of docuements - html -css -images - other file types.
- - servers are just big computers, so we use the same logic - if we want the files to retain their relationship we must have them mirrored - FTP lets us move the files from our local machine to the server and preserve the organization of those files
- - the folder structure on our servers is called the ‘root directory’ - root is where we can begin placing our files
- - when you see a URL you are essentially seeing a window into their file system - directories are designated with a ‘/’ - when you type in just a URL you are asking for a designated file at the ‘root’ level 1.File paths are based on your own naming convention – so they should make sense Since files paths also are visible to the user in many cases they should be friendly too
- 1.So how does FTP work? a.Open up Filezilla b.Set up site c.Typically an FTP program will offer you two windows i.One for your local machine ii.One for the remote server d.These are the files that users request via their browser e.On my site you can see a number of different directories i.To see whats in one all you need to do is type it in after bostonshaker.com/ ii.Lets see whats in the student folder – what would you type in? iii.Anything strange about the end of this URL? 1.How does the browser know what file to present to you? 2.Does student/easy.html work? 3.Why not?
- a.All servers are set up by a server administrator – not us b.You can configure the server to look for a particular file when a directory is requested c.Most servers look for an index file or a home file i.Index.asp, .html, .php ii.Home.asp .html, .php d.For my host (and most likely) index.html will be the default – so that’s what I named my document
- 1.So lets do some FTP our selves 2.Got your own computer? Install Filezilla 3.Using the lab machine? Try Cute FTP or just pay attention 4.Get out the FTP information from your hosting package 5.Start your FTP engines Set up account Connect Move a file over Highlight lower case no spaces Suggest architecture for organizing their sites Express importance to keeping local files and remote files mirrored so what works on locally will work remotely
- css is a secondary layer of code that helps HTML look good you can use different defining terms like these to tell the HTML what to do
- cascading refers to the order of hierarchy and control the styles follow - this is in case there is conflict - we have a way of resolving
- when you define styles inline the selector is by default the tag in which you are defining the style, but we will need to retain the selector when we elevate our CSS to internal or external
- when you have a selector, a property and a value - you have made a declaration.
- - consolidate your definitions and you will save time and energy - we don’t have the time to go over all the values, but the bible has it
- try some nesting and inheritance samples and also box model items