FrontPage to ExpressionWeb

1. 28 slides remaining 28 slides total FrontPagetoExpressionWeb

2. 27 FrontPagewas great! • Creating websites from FP themes • Photo galleries • Email forms • Creating forms and outputting the data to Access database • FP had turned into a pretty decent web-authoring tool by the last version

3. 26 Why FP is going away • Microsoft has discontinued support for FrontPage • FP used non-standard technology and formatting (the web is no place to be non-standard) • FP lacks enterprise functionality • Until the last version, didn’t produce “clean code”

4. 25 WhenFP is going away • Pretty much a year ago! Microsoft quit supporting it but has allowed us to keep using it for the time being • We’re not sure when FP will no longer be allowed under our campus license

5. 24 What is ExpressionWeb? • New web-design product from Microsoft • Closely resembles industry-leader DreamWeaver… • (icon is slightly different shade of green) • Covered by our campus license • Standards-based from the ground up

6. 23 What about all our FrontPage websites? • Won’t disappear. FP was used to create them but they still reside on our web servers • EW can maintain existing pages created in FP themes, but… • EW cannot create new pages using FP themes

7. 22 slides remaining 7 slides on web standards Standards

8. 21 What “Standards” are we talking about here? • W3 Consortium is around 400 people from industry, governments, science and academia • Decides how various web technologies will work together • Criticized for being dominated by rich countries that use a lot of technology, especially the US

9. 20 #1 reason Standards matter • Because it’s the World-Wide web

10. 19 #2 reason standards matter • Because no software is forever. Not even Microsoft. You don’t want your website dependent on a specific piece of software. If ExpressionWeb went away for some reason, there are other standards-compliant programs that can do the job

11. 18 What was the old web “standard”? • An adaptation from the days when the WWW was just a bunch of geeky scientists trading data at CERN • Use tables for page layout • Mix style with content, so it’s… • …difficult to maintain large sites, even minor style changes require editing every page. • Not compatible with multiple devices or presentation technologies

12. 17 “New” web standard • Is a mature standard, but new to us • Separate style from content • Content goes in web pages • Styles and layout elements as much as possible go in “Style Sheets” Restyle entire site just by changing a Style Sheet. This is a real time saver.

13. 15 Begin with “Style Sheets” What does it mean to separate style from content? A Beautiful Web Page • Link • Link • Link • Link • Link • Link • Link • Link Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Unformatted Content Style Sheet Bold Italic Plain Page footer stuff |……………………….|

14. 14 A ‘style sheet’ … is just a text file with instructions for how a device should present your web page content. Don’t worry! This file is already made before you start. We won’t show you a naked style sheet again. (Unless you like that sort of thing)

15. 13 Now cascade that style! .css wrapped around the whole website Page Header style Wrapped around just one page Style Sheet Wrapped around a specific bit of text Inline text style Bold Italic Plain • Style information “closest” to the text in question, wins by overriding style information “above” it

16. 12 Keep as much of your style in the .css style sheet as possible • Avoid painting text with styles; instead apply styles from the .css style sheet • This matters because you want to keep as much style information as possible in the .css sheet for easy redesign Here’s how that works…

17. 11 One Style Sheet to rule them all A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page Style Sheet • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Bold Italic Plain Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff

18. 10 Just change the style sheet… A Beautiful Web Page A Beautiful Web Page • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Page footer stuff Page footer stuff

19. 9 …and all the web pages change! Style Sheet Bold Italic Plain A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page A Beautiful Web Page • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link • Link Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Paragraphs of text formatted exactly the way you want them. Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff Page footer stuff

20. 8 Well actually, three or four style sheets to rule them all… Because web pages aren’t just for computers anymore. Different style sheets can format your content for different presentation devices! • Computer • Portable device or smartphone • Handicap access reader • RSS No need to make different versions of each page for different devices!

21. 16 “Because the Web is not just for computers anymore”

22. 7 How CSS saves you time Condition: your website is three years old and looks a little dated. You want to update it but it’s too much! Solution: just change the style sheet and your entire website has a new look! We now have a CSS-based web template that allows us to share style sheets for easy customization and updates

23. 6 Our Fac-Staff Web Template • Developed by LILT just for COB • Matches our color scheme • Can be customized • CSS-formatted for easy maintenance

24. 5 Using Expression Web with our Shiny New Web Template

25. 4 Opening a website • Instead of opening web pages and editing them, in Expression Web you open the whole website. • This lets EW track file changes and navigation • Not a new feature, but considerably improved

26. 3 Dynamic web templates • For repeating content, just as CSS is for repeating style • Header • Footer • Navigation Compliments CSS as a site management tool. Edit two or three .dwt files and use them to create and update content

27. 2 Finally, to create a new page… • Create the page from one of the .dwt pages, give it a name, and paste in your content. • There’s another .dwt for your site navigation. Update and save it, and EW will ask you “There are 99 pages attached to this template. Update them?” Say yes.

28. 1 Enough wordy PowerPoint slides! • If you want to create a new COB Faculty-Staff website, give me a call. Or email. Carrier pigeon. Or even stop by room 22D and I’ll help you get started. • Now let’s play with Expression Engine and see how it really works…