Microsoft expressions website correction

style_sheets_-_layouts.pdf

Home >Computer Science homework help >Microsoft expressions website correction

Style Sheets – Layouts

I. What is a style sheet a. Style Sheets are basically to help with keeping appearance consistent b. Cascading Style Sheets (CSS) is the standard style language for the

Web and allows you to control HTML elements appear in a browser – how elements look on your site or individual pates

II. Creating a style sheet a. CLICK on File… New … Page

i. Choose CSS ii. File … Save as

iii. Name the file Play Styles.css and save in your styles folder

b. Go to your play template i. On the style sheet pane, click

attach style sheet ii. Go find the specific style sheet (in this case play styles) that

you are attaching iii. Save

1. Overwrite Style Sheet 2. Update attached pages

III. Creating Styles a. Click on Apply Styles pane (lower right

corner) b. Click on New Style

Style Sheets – Layouts

 Style name (will begin with a ‘.’ or ‘#’) o A name that makes

sense, no spaces and must start with a character (after . or #)

 Make sure you choose existing style sheet and connect it to the correct style sheet

 Categories (for font, difference in appearances…)

 This area will depend on what category you select

i. In selector list (top of window) type .body 1. Note: make sure the dot in front and there are no spaces

ii. In the define in list (box below where you chose body) choose existing style sheet

1. (In the URL box (you should see the name of your style sheet)

iii. In the font family, choose a font that you want to use in your body

iv. In the font size box, TYPE the size you want (I would suggest either 12 – 16 depending on your font)

v. Click OK c. For Heading 1

i. Click on new style ii. Select h1 from the selector list

iii. From the Define in list box type .h1 iv. Choose your Play Styles.css in the URL area and click OPEN

Style Sheets – Layouts

v. In the font size box, type 22 (or larger depending on your Font)

vi. On Weight, choose bold vii. Choose an appropriate color

viii. Click OK d. For Heading 2

i. Click on new style ii. Choose h2

iii. Existing Style sheet iv. Make sure Play Styles.css is selected, if not browse and select v. Choose a font size 18 (or there about)

vi. Choose font color vii. Click OK

e. For heading3 emphasis i. Click on new style

ii. Type .h3emph iii. Existing Style sheet iv. Make sure Play Styles.css is selected, if not browse and select v. In font-size, choose 18 (or there about)

vi. In font-style, choose Italic vii. In font-Weight, choose bold

viii. In font-color, choose an appropriate color ix. Click OK

f. For emphasis i. Click on new style

ii. Type .emphasize iii. Existing Style sheet iv. Make sure Play Styles.css is selected, if not browse and select v. In font-style, choose Italic

vi. In font-Weight, choose bold vii. Click OK

viii. Save file g. If you need to edit any of these elements, right click on the element

and choose modify style h. Click back on your style sheet and notice the text/code

IV. Applying styles

a. Click back to your play file (or open your play file)

Style Sheets – Layouts

b. Click on Apply Styles tab c. Select your page Title in your play file d. Click on your h1 style e. In the content area, Highlight all your text f. Choose body g. Highlight your titles in the content area h. Choose h2 i. Highlight the genres in the descriptions (you will have to do each

separately) j. Choose either h3emph or emphasize k. Save your file l. Expressions will ask if you wish to overwrite your style sheet – say ok

More Styles V. Open up your template

VI. Changing styles on your Style Sheet

a. Click on Apply Styles pane Note: you can change files from any document as long as you remember to select the correct style sheet b. Click new style c. In Selector box, type #navigation d. From the Define in list, select Existing Style Sheet

i. Make sure your style sheet is selected e. In the Category list, select Background f. Choose an appropriate background color g. From the Category list, select border

i. Under border-style, deselect same for all 1. From the bottom list, select solid

ii. Under border-width, deselect same for all 1. From the bottom list, select medium

iii. Under border-color, deselect same for all 1. From the bottom list, choose an appropriate color

Style Sheets – Layouts

iv. You might want to try some of the other border styles (depending on your colors, several look good)

v. Click OK vi. Note – you can alter the above, you can put a border all the way

around, but be careful so that it doesn’t stand out too much vii. In the Apply Styles pane, click new style

1. In selector box, type #copyright 2. In define in list, choose Existing Style Sheet 3. In the Category list, select font

a. In Font-size, choose smaller b. In Font-weight, choose bold c. In Font-style, Choose italics

4. In the Category list, select Block a. In the text-align list, select center b. Click OK

viii. Save your style sheet ix. Before applying a style for containers – you must wrap the

container 1. Select your entire navigation bar by clicking on the

container tab a. In the toolbox pane, under tags, right click on <div>

and choose wrap 2. Select your copyright line container tab

a. In the toolbox pane, under tags, right click on <div> and choose wrap

---- This process allows you to apply styles to entire containers h. Save template and click yes

i. Navigation bar – 1. Click in the navigation bar and click on the tab above

area (Note – you have already wrapped the container) 2. In the Apply styles pane, click on #navigation 3. Click on tab for copyright information (Note – you have

already wrapped the container) 4. Click on the copyright line, click on #copyright

ii. Save template and update all files

VII. Open up your play document ~~~ If you wish, you may save this document with a different name so that you can play, compare and try all kinds of things

Style Sheets – Layouts

a. Open up your play document b. Click in the content container tab c. Click on the <div> and wrap your text (like you did for navigation and

i. Name it #maincontent ii. In the Define list, select Existing style sheet

iii. If your style sheet is not visible in the URL area, browse and select it

iv. Click the box that says apply new style to document selection v. From the Category list, select background

1. From the color list, choose and appropriate (this will go behind the text area) (note you can also choose a background image if you have a solid color for your page background – but for this instance, choose a solid color)

2. Click ok 3. Save page and click ok

vi. Preview page and resize browser window vii. C lose the browser window

viii. In the Manage styles pane, right click on #maincontent 1. Choose modify style 2. From the Category list, select Position and specify the

width to 95% 3. Click OK and save file

ix. View in browser and resize window to see effect x. Close browser

xi. In the Manage styles pane, right click on #maincontent 1. Choose modify style 2. From the Category list, select Position and from the

width list, choose auto

3. From Category List, choose Box a. Under margin, deselect apply to all box

i. Change right and left to 5% b. Click OK

4. Save the page and click OK 5. Preview in Browser

a. Resize window to see effect

Style Sheets – Layouts

6. Close Browser xii. In the Manage styles pane, right click on #maincontent

1. Choose modify style 2. From the Category list, select Border

a. Under Border-style, choose ridge b. Under border-width, type 3 c. Under border-color, choose an appropriate color

3. Save the page and click yes 4. View in browser again

xiii. In the Manage styles pane, right click on #maincontent 1. Choose modify style 2. From the Category list, select Box

a. In padding, enter 15 and click ok b. Save page and preview