1. Goal See below /tables, Html-2-1.pptx rev 01/19/2016

2. Topics Today  Intro to CSS  Tables and CSS  Separating Styles and content  Color models  Color.adobe.com  Planning for index.htm

3. Separate styling from content: Sample styling body {font-family: "Gill Sans MT",verdana, sans-serif; color:#666666; background-color:#cccccc; } h1 {font-family:verdana; font-size : 2em; color : #087368;}

4. Then add the content Should be html

5. OK?  Do you understand the concept of using styles?  We are separating the content (body) from styling  The formatting information (style) is set apart from the content (body)

6. :Margins, padding, esp with tables …skip … h1 { font-size: 1.5em; background-color: #cccccc; margin: 20px; padding: 40px; } Look at the margin and padding Copy and paste into new Notepad file, into html folder, USB, named tableTerms.htm render

7. Tables… concepts

8. Tables for layout Objectives for today: Use HTML elements and Notepad to start creation of your index.htm page (Digital Portfolio). Using tables for layout/design OOPS wrong table type ! Our table: 3 rows: Banner List of projects Misc. row

9. elements  to create a table  add a row  add data to a cell

10. Download a txt file  Overview We can use a txt file I created  Download a txt file  Into jma260  Rename as index.htm

11. Creating an index page…One way  Create a new html page using Notepad  Double click the tablebig. txt link on the class site  Copy, paste into Notepad  Mainly CSS is what we need  Use File> Save as and save inside USB >JMA260 folder as index.htm:  Drag to your pub/jma260 folder (Z: drive)  To view the page www.jma.duq.edu/users/webtest260-03/pub/jma260 Q:Wedo not NOT need to specify index.htm at end of UR;L why not Here is the page that results

13. Table-related elements   Will add to index.htm

14. Table format  recall: We want 3 rows :  Top one holds a banner  Second contains the content (links to other work)  Third row, misc. content, like E-mail, copyright symbol,…  Should be working with index.htm

15. Inside Add and 3

16. Move  Place it before the

17. Add + content for each cell adds a space © adds a copyright symbol

18. Add ’s…empty content to start

19. Add some content adds a space © adds a copyright symbol Delete border=“’2”

20. Add real content to Row 1 Drag to row 1

21. Add content to row 2  Row 1 Delete content in row 2 Go to the course syllabus Copy the text ( a pdf document: Portable Document Format, or Word document) Paste it inside row 2’s see next page…

22. Paste text here

23. Row 2 modified  Make the row 2 text into a paragraph, because we can style paragraph elements using CSS:  inside Course Description New Media Production is an introductory course that provides an overview of the industry standard software that is used to create New Media content. The major objective of the course is to use the tools from the course to develop a New Media advertising campaign for a real or hypothetical organization. Save and test (USB)

24. Row 3  Leave alone  Only has a space

25. Final  Save as index.htm inside JMA260 (USB)  Drag to pub/jma260  Test via link on class site  Add lists, tables next