IITS Workshop. Expression. Web 3

Transcription

1 IITS Workshop Expression Web 3 (for formerr users of FrontPage) Microsoft s basic web page software provides the same basic functionality ass its predecessor, while expanding on concepts like CSS and HTML tagging.

2 Contents Opening Your Site... 1 Creating New Pages... 3 Formatting Text and Pages... 3 Previewing your Page Online... 5 Adding a Background Image... 6 Creating a hyperlink to an external website... 7 Making a Menu... 8 Creating an link... 9 Creating Additional Pages... 9 Inserting a Table Modifying Table/Cell Properties The Tag List in the Toolbox Adding a Bulleted List Advanced Users Can Explore... 15

3 Opening Your Site To establish web space at King s, the Help Desk and request to have space set up on the Staff server. Understandd that your space and content will be hosted by King s College and must adhere to rules and standards set out in employee handbooks (available through Human Resources) and technology policies (available at My King s). To open your King s College Staff website, click Site > Open Site You will be prompted to select an existing website. To open your site for the first time, enter the following in the Site name area: ftp://staff.kings.edu NOTE: You do NOT put your username at the end off this address. If you want to open your Department website, follow the same instructions, but open ftp://departments.kings.edu/biology (for example). If your site hangs off of you cannot use ExpressionWeb to editt it. Contactt IITS for Adobe Contribute. Click the Open button to accesss your site. When prompted about Remote Web Site Editing Options, choose the default Edit live Web site now and click OK. Page 1

4 You will be prompted to login to your site. Do this using your address and network password, then click OK. Your site will open in Expression Web. It will look similar to FrontPage: your Folder List is on the left, listing all files and folders, and the center will show any pages you re working on, once you open one or create new ones. Page 2

5 Creating New Pages Create new pages by clicking File > New > Page or clicking the New Page button ( ). On your new page, type Yourname s Web Page, usingg your name. As you type, you will see a small P tab at the top of where you re typing. This is to indicate that you re working on a Paragraph ( Note: The blue outline will not appear on your web page). You can apply attributes to the entiree paragraph or just certain words. Let s do thatt now Formatting Text and Pages Highlight your page title. On the toolbar, select a different font style, size, and/or color, using the buttons and menus available. Bold and Center your title using the other formatting buttons. After these changes, you ll notice the P tab on your paragraph has the words style1 attached to it. This means that the formatting changes you ve made have been saved in a style sheet and you can re-use them again. If this concept is confusing, just ignore the styles and work with the directions provided. Now we will edit the Page Properties. Right-click on the page (a white area, outside of your paragraph) and select Page Properties. The Page Properties box opens. Type in your page Title. Page 3

6 This is what appears on the Title Bar of your browser. Next, click the Formatting tab in the Page Properties box. Select a default text color, background, and colors for various links. Link colors will display whenever you make a hyperlink to another website, file, or page. Hyperlinks are plain old links to websites, files, or other pages. When someone puts their mouse over your link, it is a Hovered Link. When someone clicks your link, it becomes ann Active Hyperlink. When someone comes back to your page, after viewing the website, file, or page you linked them to, the link is a Visited Hyperlink. You ll see the colors change as you preview your site in this tutorial. Click OK to apply your changes. On the page, click under your title and type one or two lines about yourself. If the center and bold attributes apply themselves to the paragraph, take them off using the formatting buttons on the toolbar. Need something to write? My name is and I am a Faculty/Staff member at King s College in Wilkes-Barre, PA.. I am learning to develop my own website by taking an IITS Workshop. This is some preliminary information about me, but I will update and expandd my site in thee future. We ve got a good start, so let s save our work. Click File > Save or the Save button ( This is our homepage, but we do NOT want to save it as home, homepage, or main. Our homepage MUST be saved as index.html ). The index pagee is the root file for the directory. When we save our file as index, then will take us right to this page. If we saved it ass home, someone would have to type out Page 4

7 Previewing your Page Online Now let s take a look at your page, live and on the web!! Click the Preview in Browser button ( ) and choose your browser or hit the F12 key on your keyboard. You will see a notice that explains an FTP site will not preview properly. Click Yes to enter a preview URL for your site. In the Site Settings box, type in your site address (URL) like this: Click OK to apply the change. (Note: You will not havee to enter the preview URL each time you preview, only for the first time.) Your browser will preview your page. Your page MAY take up to 60 seconds to display your change. It s expected that changes will be posted faster than 60 seconds, but be aware that if you Refresh your browser or Preview your page, the change may not appear immediately. Wait a bit, then refresh and your change will be posted. You will see your page title, font changes, and text that you typed. Page 5

8 Adding a Background Image Let s dress things up even more. Right-click on the pagee to access Page Properties, then click the Formatting tab. Check the box to use a Background image (be careful to use subtle patterns when using background images, as readability is the most important part of your site). Browse out to your computer and find an image (JPG and GIF are the best image formats to be used on the web), then click Open. Click OK to apply the background image. Now my page reflects the change and has some added spice to it. Save the page. You will see the Save Embedded Files box. This shows all files that you have on your computer and asks if you d like to upload them to the web so others can see them you always say yes. On the left is the filename, on the right is a thumbnail of the image. Click OK to upload the file. Now if we preview, the change will be posted online. Page 6

9 Creating a Hyperlink to an External Website On your page, highlight the words King s College Click the Insert Hyperlink button ( ) to open the Insert Hyperlink box. In the Address area, type the King s College website address: / Click OK to apply the hyperlink. Did you notice? You may not have any, but if you did have additional pages already made, you would see them listed in the files area in the Insert Hyperlink box (seee example, above). This makes it very easy to link to pages in your own site by just clicking on them. You may have to re-evaluate but you can always modify them in Page your hyperlink color choices when you see them against your background, Properties. Page 7

10 Making a Menu The most important part of making your site is the planning stage. Once you know all the material you want to put on your site, you can create ann organization structure, then a menu to make things easy to find for your visitors. To make a text Menu, simply click on a line and type in your menu, like this: Home About Me Courses My Department Me King s Website Decoratee the text any way you like, but bear in mind that all these will become hyperlinks, so our hyperlink colors (set in Page Properties) will override any colorr changes you make. Highlight the word Home and insert a hyperlink. Inn the addresss bar, type index.html Repeat these steps for the other links: About Me about.html Courses My Department courses.html Your department hyperlink. Ex. /history/ King s Websitee NOTE: We will create the pages about.html and courses.html through the tutorial. We are creating links to them now, even though they don t exist, because they re part of our plan. When we make about.html, then all the pages that link to it will show it when clicked. Save your changes. Page 8

11 Creating an link Highlight the words Me on your menu. Click the Insert Hyperlink button. In the Insert Hyperlink box, on the left, click the Address button. The box changes to look like the box below: When you type in your address, Expression willl add mailto: before it. Leave this text, because it makes your link into an link. You can optionally addd a Subject, too. Click OK to add this link to your menu. Save your document. Creating Additional Pages With your index.html page opened and saved, click Filee > Save As In the File name area, type about.html Click Save to save your page as a new file name. This lets us make a copy of our homepagee and build a new one off of it, saving us all the work of re-creating the fonts, images, and style. Delete the short paragraph you wrote by highlighting it and hitting the Delete key. Be sure to leave your Menu. Modify your page title to reflect the new page About Me Page 9

12 Inserting a Table Be sure that you have a new paragraph line under your Menu, then click the Insert Table button ( ) on the toolbar. A grid will display. Highlight squares like the image below: A table will show up on your page, where your cursor was placed. Click in the first cell of the table. Type a little bit about yourself in this cell. Where are you from? Where did you go to school? Need something to write? My name is. I was born and raised in Larksville, PA, in Luzerne County. I attended Wyoming Valley West High School, then went on to my undergraduate work at King s College. I pursued my Master s in Instructional Technology at Bloomsburg University. After working as an adjunct professorr at Misericordia University for a few years, I completed my doctorate at the University of Scranton. Shortly after I accepted a position with King s College, where I ve been enriching young minds for years, and years to come. As you type, the cell becomes wider and wider. This is okay. We will add to the table to even things out. At the end of your paragraph, hit the RIGHT arrow key to move to the next cell. Inserting an Image We will put an image in this cell, to make the page look a little livelier. You can return to this page and post a picture of yourself later. Click the Insert Image button ( ) on the toolbar. The file browser takes us to our site, but click on My Computer or Desktop to find an image that is on your computer, USB drive, or network drive. When you find the image you want to use, click on it, then click the Insert button. Page 10

13 Once you do this, a box will popp up for Accessibility Properties. What you type in this area will display for the visually impaired and their text-to-speech software will read the text to them. This feature makes your site more compliant withh the standards of web design. Type in a description of your picture, like Sunset or Photo of me. Uncheck the Show this prompt when inserting images box if you feel thatt this featuree is not important for your audience. When your picture lands on your page, it will look something like this: You can resize your photo at will, by clicking on it and using the resizing handles in the bottom-right corner of your image. When you resize your image, Expression will give you an option to resample your image, which means that it will resize the image file to the dimensions you set. If you do not resample, a large image that was resized small will still take a long time to load (because the file is still large). Resample your image by clicking the Image Resize button ( ) that appears when you resize, then select Resample Picture To Match Size. Click Save to save your changes. Page 11

14 Modifying Table/Cell Properties Depending on the size of your image, your text may be floating in the middle of the left cell of your table. If this is the case, right-click in the cell that your text is in and select Cell Properties. In the Cell Properties box, in the Layout area, choose Top for Vertical Alignment. Now the text looks much better with my image. Extra space is at the bottom. Save your changes and click OK when prompted to Save Embedded Files. Hit the F12 key to see your new page. Page 12

15 You may notice a few things 1. Your visited links are displaying properly, sincee we ve visited some pages/sites already. 2. Your un-clicked hyperlinks are displaying properly, since we have not visited some. 3. The table borders, when set to 0 do not display in the browser. 4. The text in our first cell is set to the top. As I resize my window, it always stays up top. Click the Home link and you should be taken to your homepage. From your homepage, click the About link and you ll be taken to the About Me page. The Tag List in the Toolbox You may have noticed an area on the right side of the Expression interface. This area has some shortcut options for you, like the Image or Horizontal Line shortcuts. This menu works by clicking a Tag and dragging it onto your page. On your About Me page, click in the bottom-left cell. In the Tags list, click on Paragraph and drag it to the cell you re in. You ll seee the area change from to. Page 13

16 Adding a Bulleted List Type in States I ve Seen: then hit ENTER. Type in states you ve seen, separating each with a hit of the ENTER key. Your list might look like this: Highlight all of the states you ve seen, then click the Bulleted List button ( ). Before After Making a bulleted list can make some conten easier to read. Click the end of the line by the last state you listed and hit ENTER again. Type in a state you d like to see. It s bulleted automatically, much like in Microsoft Word. Page 14

17 Advanced Users Can Explore Advancedd Users: You can also insert an interactive menu using Insert > Interactivee Buttons. Select a button type, type in button text,, and Browse to the page (or type in the website address) you want to link to. Experiment with the Font and Image tabs to make your button look perfect. Rollover states* will be generated for your buttons, too, which can add an extra touch of wow to your page. *When the user puts his/her cursor over the button, it will change, to show interactive, fun buttons. Table and Cell Properties can also be edited to use background colors, border colors, and cell widths. Right-click in a table and choose Cell Properties to work only on that cell or Table Properties to change the entire table. Both Cell and Table Properties boxes look exactly alike, so be careful which you choose! With the right settings in Tables and Page Properties, you could have a page like this: Page 15