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

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

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;}

Then add the content Should be html

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)

: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

Tables… concepts

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

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

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

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 Q:Wedo not NOT need to specify index.htm at end of UR;L why not Here is the page that results

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

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 , copyright symbol,…  Should be working with index.htm

Inside Add and 3

Move  Place it before the

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

Add ’s…empty content to start

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

Add real content to Row 1 Drag to row 1

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…

Paste text here

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)

Row 3  Leave alone  Only has a space

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