Microsoft Expression Web is usually obtained as a program within Microsoft Expression Studio. This tutorial deals specifically with Versions 3 and 4,

Transcription

1

2 Microsoft Expression Web is usually obtained as a program within Microsoft Expression Studio. This tutorial deals specifically with Versions 3 and 4, which are very similar in most respects and the important differences are dealt with within the tutorial. Previous versions of Expression Web are very similar to FrontPage 2003 so please use our instructions for FrontPage if you have an earlier version. The next page of this tutorial starts from the assumption that you have obtained and successfully installed Microsoft Expression Studio 3 or 4 on your computer. The tutorial is based on a computer running Windows 7, but could easily apply to any computer running Windows XP or later versions of Windows.

3 When you first open Expression Web it creates a folder named My Web Sites in the Documents folder on your computer. This folder can be used for creating a website from scratch or for experimenting with but most of our clients will already have a website set up on our server and should NOT use this folder for their website. To avoid confusion we suggest that you delete the My Web Sites folder and create a new folder in the same location named My Webs and then within the newly created My Webs folder create a folder named the same as your domain name (without the www). Under NO circumstances should you create this folder within the My Web Sites folder, which contains hidden files. On the next few slides I will deal in detail with the above.

4 First open your documents folder by either clicking on documents on the start menu or clicking on the Windows Explorer icon at the bottom of your monitor. If you start from the start menu click on Documents, near the top of the right hand side of the start menu. If you start from Windows Explorer click on Libraries then Documents

5 You should now be seeing a window something like this: Select and delete the My Web Sites folder. Now click on New Folder on the pale blue band at the top of the window. Rename New folder as My Webs Press return or Enter on your keyboard twice.

6 Your window should now look something like this, but without the New folder : Click on New folder on the pale blue band. It should now look exactly like the image. Now rename the New folder the same as your domain name (without the www)

7 The window should now look like this except that sitename.co.uk should be your domain name. If it looks correct you can now close the documents library window, by clicking on the X at the top right of the window.

8 The next few pages deal with customising the layout of Expression Web. You do not need to do this but I personally think it simplifies the number of unnecessary options available to a new user and to some extent makes it more familiar to someone who has previously used FrontPage.

9 When you open Expression Web after installation it looks something like this:

10 First we will change the single line of toolbar icons to a double line. Click on the View menu then on toolbars and un-tick Common Return to the toolbars twice more to tick Standard and then Formatting Start like this and end like this

11 You can now close most or all of the panels on the left and right of the main screen by clicking on the X at the top right of each panel. In the screenshot below I have left open the folders panel at the left of the screen, but you can close this if you wish. The screenshot shows Expression Web 4 The top row of icons will be slightly different in version 3

12 First create a connection to your website folder. Click on the Site menu then on Manage Sites List The Managed Sites List shows the Default Site set-up by Expression Web. Click on Remove to remove the Default Site and then on Add to add your Site.

13 Browse to the folder you created earlier and when selected click on Add. Please note: sitename.co.uk should actually be your own domain name. After you click on Add you will return to the manage sites list and your website folder will be listed. Now click on Done

14 Click on the site menu again and then on open site. In the Open Site window click on your website in the Managed Sites box and then click on Open. Your website folder is now open in Expression Web and there will be a note in the centre of the white screen stating There are no files in this folder Click on the site menu again and then again on Site Settings On the General tab of the site settings window tick the box to Maintain the site using metadata files then click on OK. An Add Expression Web Information to the folder window will pop Click on Yes. Click on the site menu again and then again on Site Settings Click on the Publishing tab and then click on Add. The connection settings window will now open.

15 Fill in the site settings window as shown but with the details supplied to you by Eqwebs Ltd. The directory box should be left blank. Click on Add and you will return to the Site Settings window with your website listed in the Publishing Destinations box. Click on OK

16 Now click on Publishing at the bottom left of the window. In the centre of the new window click on Connect to the current publishing destination

17 You may get a warning message about allowing Expression Web through your firewall. You must allow this access (as a permanent rule). If every thing is correct so far you should now see something like this: The right hand white window shows all of the files in your website on the webserver. The left hand white window shows the empty folder on your computer. We now need to copy the files from the right to the left

18 If you are using Expression Web 4 please move on to the next screen If you are using Expression Web 3 you should first left click somewhere in the right white window then on your keyboard hold down the Ctrl key whilst you click on the A key. This will select all the files in the right window. Some of the arrows between the two white windows will now turn blue. Click on the single blue arrow pointing from right to left. All the selected files and folders in the right window will now be copied to the left window (the folder on your computer) See next screen for this step in Version 4

19 In Expression Web 4 the actual copying is much simpler than version 3. Just click on the Get all files in your site icon near the top of the screen * In both versions 3 and 4, immediately after you have downloaded the files you will need to exclude various files from publishing, if you have them in your website folder.. * First click on Folders at the bottom left of the screen to close the right hand window. * The files that must be excluded from publishing, if you have them, are counter.cgi and counter.txt in the main folder and then counter.txt and visitors_ips.txt inside the counter folder. * Files are excluded by right clicking on the file name and then left clicking on Exclude from Publishing.

20 Your Expression Web should now look like this:

21 Preparing and saving your image files in the images directory of your website. THIS IS VERY IMPORTANT FOR THE CORRECT FUNCTIONING OF YOUR WEBSITE - UNLESS YOU HAVE A BETTER METHOD OF PRODUCING SMALL FILE SIZES FOR YOUR IMAGES PLEASE FOLLOW THE INSTRUCTIONS ON THE NEXT PAGE EXACTLY - DO NOT USE IMAGES DIRECTLY FROM YOUR CAMERA OR SCANNER. Images used on a website are usually.gif or.jpg format. Gif images are used for man made images, such as logos etc, where there is a limited number of colours present. Amongst other features,.gif images can have an irregular shaped mask and can be moving images. Jpegs (.jpg) are generally used for photographs as they have a much wider colour range. Photographs are usually scanned or downloaded (from a digital camera) and always require preparation for use on a website. This preparation must be done in a photo editing program and not in Expression Web.

22 The formula I use for photographic image preparation is as follows:- 1. ensure the photo is cropped to what you want to show. 2. resample the image to the size you require - I generally use a maximum of 380 pixels in any direction (horizontally or vertically)- the DPI doesn't really matter but for uniformity I always set it to 100dpi. 3. carry out any adjustment to tone / colour etc as necessary. 4. save the image as a.jpg in the images directory of your website - I generally use a compression of 50 and if smoothing is available to you I would suggest you set this to 10. Using these settings you should be able to achieve a file size of less than 20kb. Please do NOT use uppercase letters or spaces in the file name. 5. when putting the image in your page do NOT adjust the size as this will produce a poor image, adjustment for size should be carried out as above. IF YOU DO NOT UNDERSTAND ANY OF THE ABOVE PLEASE CONTACT OUR HELPDESK

23 At this time I suggest you take time out to learn more about Expression Web and a good place to start would be the Microsoft website

24 Once you have familiarised yourself with Expression Web by using the tutorials you should be ready to edit your website. Please look at how things are already done and laid out to give you guidelines to how you should proceed. Some general tips are: Always use tables to put text in columns or alongside images. Do NOT use multiple spaces to format text - there are other formatting tools available. Always remember that other people are likely to be viewing your website on a screen that is set differently to yours (larger or smaller). With our older frames websites, if you have a file named indexm.htm in your website, unless you are sure you know what you are doing, do not edit the file index.htm (or index.html) in the root directory of your website. The homepage of older websites is indexm.htm, the other pages should have self explanatory names. Websites produced since late 2007 use templates rather than frames and do not have the file indexm.htm. In these cases index.html (or index.htm) is the homepage. You would need to use FrontPage 2003 or later (including Expression Web) to have the full features of editing a template website. With a template website the top and bottom of each page must be edited in templates/basic.dwt - changes here change every page.

25 When you have finished editing your website it is a good idea to preview your website in the browser before you publish as you can pick up most errors this way before someone else sees them. In Expression Web, with your index.html file open, click on the F12" key at the top of your keyboard. This will open the website on your computer in your default browser and it will look almost exactly like it will when published. There are more browser options available on the File menu. Some things, such as the hit counter and the guestbook script will not work (they only work on the server). Fully check out your website before you publish your website. If you find errors, correct them in Expression Web and keep checking your website until you are sure it is error free

26 There are differences in the way you publish your website dependant upon the version of Expression Web you are using. In version 3 click on Publishing at the bottom left of the screen. Then at the top left of the left window open the View dropdown box and select Changed Files. Click on the single blue arrow pointing from left to right on the panel between the left and right white windows. All changed files are now being published to your website. You can use the same procedure for version 4, but in version 4 there is a Publish all changed files icon at the top of the screen just click it to publish.

27 It is always a good idea to view your website immediately after publishing as a final check that all is as you intended. You sometimes have to click on refresh (sometimes repeatedly) in your browser to view the updated pages. If you are still seeing the old pages please see our page about ISP caching - If you have problems publishing it is usually a slow or bad connection to the Internet issue. In this circumstance it is quite a good idea to close down Expression Web completely, wait a minute or two, maybe re-connect to the Internet, re-open your web in Expression Web and republish.

28 Hopefully by the time you have got to this stage your website has been successfully published exactly as you wanted. Well done! Congratulate yourself! If this is not the case please go back and review this procedure. If this does not help then please ask us for help by raising a Support Ticket at

29 You have just viewed an Eqwebs Tutorial prepared by Brian Dowding. If you have any comments or suggestions please them to This whole document is Copyright by Eqwebs Limited and Brian Dowding