IDM 221. Web Design I. IDM 221: Web Authoring I 1

Size: px

Start display at page:

Download "IDM 221. Web Design I. IDM 221: Web Authoring I 1"

Ashley Norma Long
6 years ago
Views:

1 IDM 221 Web Design I IDM 221: Web Authoring I 1

2 Week 5 IDM 221: Web Authoring I 2

3 Working With Text IDM 221: Web Authoring I 3

4 Special Characters IDM 221: Web Authoring I 4

5 > < & IDM 221: Web Authoring I 5 When working with text, sometimes we have to deal with special characters like these. Can anyone tell me a problem with dealing with any of these characters in our HTML code?

6 Special Characters <p> 12<6 </p> <p> Research & Development </p> <p> 2016 </p> IDM 221: Web Authoring I 6 How about in this example, where we look at the actual HTML code. What are some of the issues present in this source code?

7 Reserved/Special Characters reserved characters special characters IDM 221: Web Authoring I 7 Reserved characters in HTML must be replaced with character entities. Characters that are not present on your keyboard can also be replaced by entities. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

8 Character En++es &entity_name;  &#entity_number; IDM 221: Web Authoring I 8

9 Character En++es <p> 12<6 </p> <p> Research & Development </p> <p> 2016 </p> IDM 221: Web Authoring I 9

10 Useful En**es Useful En++es IDM 221: Web Authoring I 10 Here's a list of some useful entities. Note: Entity names are case sensitive.

11 Typography IDM 221: Web Authoring I 11 Before we dive into any new code, let's take a moment to review some of the basic concepts of typography.

12 The Five (generic) Families IDM 221: Web Authoring I 12

13 The Five (generic) Families Name serif sans-serif monospace cursive fantasy Descrip+on Tapered, flared or slab stroke ends Plain stroke ends Every character uses the same width Connected, flowing le?ers DecoraAve styling IDM 221: Web Authoring I 13

14 IDM 221: Web Authoring I 14

15 IDM 221: Web Authoring I 15

16 IDM 221: Web Authoring I 16

17 Web Safe Typefaces IDM 221: Web Authoring I 17 Our discussion on web typography begins with web safe typefaces. Can anyone tell me what we mean by the term "Web Safe"?

18 Most Safe Arial Times New Roman / Times Courier New / Courier IDM 221: Web Authoring I 18 The fonts that are most safe to use are:

19 Also Safe Pala%no Garamond Bookman IDM 221: Web Authoring I 19 Other options that usually work cross-platform are:

20 macos / Window Safe Verdana Georgia Comic Sans MS Trebuchet MS Arial Black Impact IDM 221: Web Authoring I 20 Fonts that work on Windows and MacOS but not Unix+X are:

21 Web Safe Fonts Web Safe Fonts IDM 221: Web Authoring I 21

22 Define A Font Family p { font-family: Arial, Helvetica, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Courier New', Courier, monospace; } IDM 221: Web Authoring I 22 When you code the values for the font-family property, you code a list of the fonts that you want to use. The browser will use the first font in the list that is available to it. If none of the fonts are available, the browser will substitute its default font for the generic font that's coded last in the list. If the name of a font family contains spaces, you need to enclose the name in quotation marks when you code the list.

23 Set Font Size p { font-size: 12px; /* in pixels */ font-size: 150%; /* as a percentage of the parent element */ font-size: 1.5em; /* desired / parent */ } IDM 221: Web Authoring I 23 To set the font size, you use the font-size property.

24 Type Scale Developed in the 16th century Pleasing to the eye Now used in programs such as Word, Photoshop etc. IDM 221: Web Authoring I 24

25 Why ems? rela&ve units more precision preferred method IDM 221: Web Authoring I 25

26 How to calculate ems 1em = 100% of parent font body { font-size: 16px; } h1 { font-size: 2em; /* 32px */ } h2 { font-size: 1.5em; /* 24px */ } desired px value / parent px value IDM 221: Web Authoring I 26

27 body { font-size: 16px; } main { font-size: 0.88em; /* 14px */} main p { /* font-size: 12px; */ font-size:??em; } IDM 221: Web Authoring I 27

28 body { font-size: 16px; } main { font-size: 0.88em; /* 14px */} main p { /* font-size: 12px; */ font-size: 0.86em; } IDM 221: Web Authoring I 28

29 rem Not the band IDM 221: Web Authoring I 29

30 html { font-size: 100%; /* ~16px */} body { font-size: 1rem; } main { font-size: 0.88rem; /* 14px */} main p { /* font-size: 12px; */ font-size: 0.75rem; } desired px value / root px value IDM 221: Web Authoring I 30

31 Font styling proper.es Property font-style font-weight font-variant line-height Descrip,on how the font is slanted: normal, italic, oblique the boldness: normal, bold, bolder, lighter, small caps used: normal, small-caps amount of ver>cal space for each line IDM 221: Web Authoring I 31

32 Font styles & variants p { font-style: italic; font-style: normal; /* remove style */ font-variant: small-caps; } IDM 221: Web Authoring I 32

33 IDM 221: Web Authoring I 33

34 Font weights p { font-weight: 700; font-weight: bold; /* same as 700 */ font-weight: normal; /* same as 400 */ font-weight: lighter; /* relative to parent element */ } IDM 221: Web Authoring I 34

35 IDM 221: Web Authoring I 35

36 Line height p { line-height: 14px; line-height: 140%; line-height: 1.4em; /* same as 140% */ line-height: 1.4; /* same as 140% and 1.4em */ } IDM 221: Web Authoring I 36 The excess space is divided equally above and below the text.

37 Example p { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: 500; line-height: 1.4; } IDM 221: Web Authoring I 37 You can set the font-style, font-weight and font-variant properties to a value of "normal" to remove any formatting that has been applied. The line-height property determines the spacing between lines within a block element. If you specify just a number for the line-height, the font size is multiplied by that value to determine the line height, and the multiplier is inherited by child elements.

38 Shorthand font: [style] [weight] [variant] size[/line-height] family; p { font: italic bold 14px/19px Arial, sans-serif; font: small-caps 150% "Times New Roman", Times, serif; font: 90%/120% "Comic Sans MS", Impact, sans-serif; } IDM 221: Web Authoring I 38 You can use the shorthand property for a font to set all six font properties with a single rule. The font-size and font-family are the only required properties.

39 Forma&ng Text Property text-indent text-align ver+cal-align text-decora+on Descrip,on rela+ve/absolute value le4, center, right, jus+fy rela+ve/absolute/keyword underline, overline, line-through, none IDM 221: Web Authoring I 39 The text-indent property is a relative or absolute value that determines the indentation for the first line of text. This property is inherited. The text-align property is defined by a keyword that determines the horizontal alignment of text. This property is inherited. The vertical-align property is a relative or absolute value or a keyword that determines the vertical alignment of text. Possible keywords are baseline, bottom, middle, top, text-bottom, text-top, sub and super. The text-decoration property determines special decorations that are applied to text.

40 Forma&ng Text main p { text-indent: 2em; } main a { text-decoration: none; } main a:hover { text-decoration: underline; } footer p { text-align: right; } IDM 221: Web Authoring I 40

41 Text shadows text-shadow: horizontaloffset, verticaloffset, blurradius, shadowcolor; h1 { text-shadow: 4px 4px 8px rgba(0,0,0,0.3); } h2 { text-shadow: -2px -2px 4px red; } IDM 221: Web Authoring I 41 Before CSS3 you had to use an image to display text with a shadow. CSS3 provides the text-shadow property which makes this much easier. You can specify four parameters. The first specifies how much the shadow should be offset to the right/left. The second specifies the offset up/down. The third specifies how big the blur radius is, and the fourth specifies the color of the shadow. Remember to much shadow makes text harder to read.

42 Exercise! h"p://digm.drexel.edu/crs/idm221/exercises/text IDM 221: Web Authoring I 42

43 Custom Fonts IDM 221: Web Authoring I 43 So we have the basics of how to work with text. But so far everything we've been building is using web safe fonts. Wouldn't it be more interesting if our websites could use any typeface we want?

44 CSS3 Web Fonts body { font-family: ChunkFiveRegular, Times, serif; } IDM 221: Web Authoring I 44 Why can't we spec any typeface we want in our font-family declaration? For years web designers were frustrated with the limited number of fonts available for a website. (further explanation of web safe fonts) CSS3 offers a feature to embed fonts within your pages. You can also use third party services to embed fonts within your pages.

45 { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot'); } h1, h2 { font-family: ChunkFiveRegular, Georgia, serif; } IDM 221: Web Authoring I 45 Copy the file for the font family into a subfolder within your website. In the CSS, code a rule set for selector. Use the font-family property to provide a name for the imported font family, and use the src property to locate the font file. In the rule set for an HTML element, use the name that you gave the font as the value for the font-family property. Then, list one or more other font families in case the brwoser doesn't support the selector. Windows fonts: C\Windows\Fonts OSX fonts: System\Library\Fonts

46 Bulletproof Font Face IDM 221: Web Authoring I 46 Unfortunately not all operating systems and browsers can work with a single type of font file. We need to provide an array of font files to ensure our custom fonts work properly on all operating systems and browsers.

47 @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot'); src: url('fonts/chunkfive.eot?#iefix') format('embedded-opentype'), url('fonts/chunkfive.woff') format('woff'), url('fonts/chunkfive.ttf') format('truetype'), url('fonts/chunkfive.svg#chunkfiveregular') format('svg');} IDM 221: Web Authoring I 47 A few years ago - this is what it looked like to get the job done on all modern browsers.

48 @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.woff2') format('woff2'), url('fonts/chunkfive.woff') format('woff'); } IDM 221: Web Authoring I 48 Currently, we can trim this down to just two formats.

49 Tools Web Font Generator Font Squirrel IDM 221: Web Authoring I 49 There are a number of tools that will take your font file and generate the array of files you need for your website. Melior. Let's try implementing this font.

50 Online Font Services Google Fonts Adobe Edge Fonts IDM 221: Web Authoring I 50 Let's try using Google fonts.

51 Example Time IDM 221: Web Authoring I 51

52 IDM 221: Web Authoring I 52 Here's our example wireframe. Our plan here is to build three simple sections. The first section is going to fill the entire "above the fold" area. How many containers do we see?

53 IDM 221: Web Authoring I 53

54 IDM 221: Web Authoring I 54

55 IDM 221: Web Authoring I 55

56 Let's Build it IDM 221: Web Authoring I 56

57 Let's Get Online! FTP IDM 221: Web Authoring I 57

58 For Next Week... IDM 221: Web Authoring I 58

Web Site Design and Development Lecture 6

Web Site Design and Development Lecture 6 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Inheritance Before we talk about font properties, it needs to be known that font properties are inherited by the descendants