Microsoft Expression Web 2 Microsoft Expression Web 2.0 updated web design program to replace FrontPage taught by: Alan B. Weaver email: info@big-pic.net

Working with a website The center panel shows the “explorer” section with files names, size, etc.

Working with a website This is a blank page to work on. Similar to Word or FrontPage, it is in a WYSIWYG environment. The panels shown left and right can be resized or removed to work with your preferences. If you are familiar with FrontPage, the program works in a very similar fashion with additional functions added.

Creating a Web In the upper left corner of the screen (see previous page), click on File, New and this dialogue box appears. Click on the tab that says “Web Site” Choose One Page Website You can either type or browse for the folder the website will be placed in. If you choose templates (above left), you can work with a predetermined set of styles (remember that this will not be a unique style)

General Comments If the original site was done in FrontPage, you need to import the file into Expression or you may have some issues. On the class website, big-pic.net/web you will find useful information about setting up the site. Previous handouts in 2003 and 2002 are online which you can find useful. The software box comes with a short instruction book on the program. Program was updated in July 2009 with version 3.0. As Microsoft is attempting to mimic Dreamweaver with many advanced functions, this class will cover the core basics of creating a website. There will be no review of Photoshop in the 3 session class. If you are on a budget with software, Photoshop Elements will suffice. Folders will keep your site organized. They take up no memory and you’ll be glad you used them. Links (aka hyperlinks) allow you to go from one page to another. You can put the link in text or in an image. Thumbnails are smaller versions of a large image that link to the large picture.

File Components of Website Web Pages are .htm or .html extensions. Remember all websites are written in HTML (hypertext mark-up language). FrontPage is a program that allows user to work in a WYSIWYG (what you see is what you get) environment, making it fairly easy for user to work. Images - they can come in many different types, these are the three basics JPG - this is the most compressed version, has a couple of million colors GIF - limited to 252 colors, it is used to create buttons or simple images for site BMP - bit map - takes up a lot of memory, can create images in Paint (this program is found in accessories). Image can be converted into a GIF file when opened in Image Composer (this is part of FrontPage program) For example, if you have a page with 3 pictures and 7 GIFs, this means there are 11 files for this one page. You may wish to keep all information relevant to this page or topic in one folder. Images that are shared by many web pages should be kept in an “images” folder.

Design Tips Use a sans serif font (like what is shown here) to work with, it shows better on monitor. Keep images small (in memory and size) so that they don’t clutter or overpower the site. It also allows for quicker downloads. Multiple fonts can be used, etc. However, try not to make site look like a ransom note! Remember, less is more! Tables can simplify your life. This is just “trial and error” - some information is indicated on next page. Try not to underline the text on your site, people will think they are links when they aren’t and could become frustrated. Test (which means all links) your site before publishing. There is nothing worse than having links that go to incorrect pages, worse yet to no place at all, resulting in an “error” message!

FrontPage - 98, 2000, 2002, 2003 FrontPage 98, 2000, 2002 and 2003 are no longer made by Microsoft. (you may be able to find it through Ebay or other online sources). There are differences between all of the packages. These differences include: 2000/2002/2003 - Only one window – editor and explorer are combined. It makes things a bit easier in not having to go back and forth between windows but it also means the workspace is now a bit smaller. Tables have many new features in 2003. Click and drag capabilities – you can now click on a jpg or gif image in the explorer and drag it over into the editor. (98 requires you to use the menu bar). 2000+ allows more than one website open at a time. (if you’re disorganized, it can make life miserable for you but it allows you to look at different sites at the same time) 2000+ More features with photos – you can make them transparent, bevel them, make them black and white, as well as “overlap” them. 2000+ If a word is misspelled, it will put a red underline underneath typo (as Word does). Other similarities to word include the “paintbrush” wherein formatting (font, color, boldface, etc.) can be applied.