Table of Contents
advertisement
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can’t Do with Word ................................................................................... 1 Get Organized.......................................................................................................................................................... 1 Create the “Home Page”....................................................................................................................................... 1 Adding a Background Color or Texture ......................................................................................................... 1 Save the Word Document as a Web Page ...................................................................................................... 3 Reopening your Web Pages for Editing .................................................................................................... 3 Create a Table to Hold Everything ................................................................................................................... 4 Why do you need a table? ........................................................................................................................ 4 Centering the Table on the Web Page ........................................................................................................................ 5 Lock the Table Width to Prevent Table Resizing ................................................................................................... 5 Hide the Table’s Borders .. if desired .......................................................................................................................... 6 Adding Content: Text and Pictures................................................................................................................. 6 Resize Inserted Pictures to fit into the width limit of the table ................................................................ 6 Aligning Text or Pictures Inside a Cell ....................................................................................................... 7 Adjust the Table Column Width to Fit the Content .................................................................................... 7 Adjusting the Table Column Width on Different Rows ............................................................................ 7 Adding Rows to a Table ....................................................................................................................................... 8 Adding Background Color to Cells in a Table .............................................................................................. 9 Adding the Text Hyperlinks to other Pages on your Website ............................................................ 10 Adding Text Hyperlinks to other Websites ............................................................................................... 11 Adding Text Hyperlinks to Documents and Media ................................................................................. 11 Adding an e-Mail Link to Yourself ................................................................................................................ 12 Uploading Your Website to the Kent Personal Server .......................................................................... 12 Viewing your Website on the Internet using a Browser....................................................................... 13 Making Changes to Web Pages after You’ve Uploaded Them to the Server .................................. 13 To Upload Revised Web Pages to the Server ............................................................................................ 14 Page |1 Use Microsoft Word to Create a Website Just so you know: Things You Can’t Do with Word • • Create interactive “rollover” buttons Put a picture in the “background” unless you want it to “tile”. o However, you can choose a solid background color or texture that will tile correctly. Get Organized • Create a folder on you USB jump drive. • Name the folder anything you want but for this tutorial we are naming it, website • Put DOCUMENTS AND MEDIA files into the website folder • • Put any documents (word, PDF, excel, etc.) or media (video or audio) that you are going to include on your website into this folder, too. • If you don’t have all the documents/media yet, that’s ok. Just make sure you place them into the website folder BEFORE you create hyperlinks to them from any of your web pages. PICTURES • You don’t have to, in fact you shouldn’t, put the “original” pictures that you are going to insert onto your pages into the website folder. • Keep your original pictures somewhere else on your jump drive. You could create a folder just for these pictures but not inside the website folder. • When you save the Word Document as a Web Page, “copies” of the pictures will automatically be created and saved inside the website folder. • If you have the “original” pictures inside the website folder, they won’t actually be used. Instead, the “copies” are used. But since you are going to upload the website folder AND all of its contents to the server to “publish” your website, you will be using up unnecessary file space on the server by having both the originals and the “copies” of the pictures inside the folder. Create the “Home Page” • • • Open MS Word 2007 Click on the View tab on the Main Toolbar Choose Web Layout from the Document Views section on the Toolbar Note: These instructions are for Word 2007 but you should be able to follow them if you’re using 2003. The concepts are identical… the “tools” are just in a different location. [In 2003: Choose View > Web Layout ] Page |2 Use Microsoft Word to Create a Website Adding a Background Color or Texture If you want to add a background color or texture, you can do it now or at anytime. You should add the SAME background to ALL the pages you create for consistency on your website. To add a background color: • Click on the Page Layout tab on the Menu Toolbar • Choose Page Color from the Page Background group on the Toolbar • Select a color from the Theme Colors section since the “Theme” will automatically choose a text color that works with the background color. o You will see the background colors change as you position the cursor over different “theme” colors. If there’s text on the page, you’ll also see the text change colors. [ In 2003: Choose Format > Background then select a color swatch or More Colors. Or, even better, Choose Format > Theme then select a “theme style” ... text and bckgd will be set to the right contrast ] To add a background “texture”: • • • • • Click on the Page Layout tab on the Menu Toolbar Choose Page Color from the Page Background group on the Toolbar Choose Fill Effects Click on the Texture tab Click on a texture and then click OK [ In 2003: Choose Format > Background then select Fill Effects and the Texture tab ] While you can add Another Texture or a Picture as a background, remember that it will “tile” on the page. Textures generally “tile” so that you can’t see the edges of the texture but Pictures will tile so that it repeats itself both horizontally and vertically on the page. Tiled pictures on web pages are generally considered to be “bad” design Web Page with Picture that “tiles” a lot! Web Page with very “large” picture but can still see tiling on higher resolution monitor. Both pictures are high contrast so black text becomes unreadable over dark areas of the picture. Recommendation… Don’t use Pictures as background! Stick to solid color or “textures” made for use as backgrounds. Page |3 Use Microsoft Word to Create a Website Save the Word Document as a Web Page Even though you haven’t done anything yet, now is as good a time as any to save your Word Document as a Web Page. • From the OFFICE BUTTON choose SAVE AS > OTHER FORMATS • In the Save In: box, browse to your website folder In the File Name: window, type-in: index.htm • o • • Use all lower-case letters. Do not capitalize the “I” in “index.htm” In the Save As Type: window, choose Web Page, Filtered (*.htm, *.html) Click the Save button. A “warning” window will “pop up” … Just click OK. From this point on, you only need to click “Save”. The web page will automatically be saved as a filtered web page. You should “Save” frequently! [ In 2003: Choose File > Save As a Web Page. Then, follow directions above for File Name and Save As Type] Reopening your Web Pages for Editing If you close Word and need to reopen the “web page” that was created when you saved it “as a web page, filtered” (.htm document), you can’t just “Double-Click” on the file. Because it now has a “.htm” extension, the “word” document will not open automatically in MS Word. It will open in whatever Internet Browser you’re using, like Internet Explorer. You can’t edit your web page in an Internet Browser. You must open it in MS Word by: • • • Right click on the web page you saved (it will have an .htm extension) Choosing “Open With” Choosing “Microsoft Office Word” from the choices (see below) Alternately, you can first open MS Word, Select Open, then choose the index.htm document (or any other .htm document created using “Word”. [ In 2003: Same as 2007 ] Page |4 Use Microsoft Word to Create a Website Create a Table to Hold Everything • • Make sure you’re still using the WEB LAYOUT view you set at the beginning of this tutorial. Create a TABLE o Click on the Insert tab on the Main Toolbar o Choose Table Drag the mouse cursor over the Table Layout boxes to create a table with 2 Rows and 2 Columns • This is just to get you started and this tutorial is based on this starting point. As you become more familiar with Tables, you can start with different numbers of rows/columns as needed for your website. Your 2 Row, 2 Column table should look like this: [ In 2003: Choose Table > Insert > Table. Enter the # of Rows and Columns.] Why do you need a table? o o You MUST use a table to control the positioning of text and pictures on the page since many “word specific” tools that work for “printed” documents won’t work after the word document is converted to a web page. Things that work for “printed” documents that won’t work for Web Pages include: Applying “text wrapping” or other “layout options” to pictures (which allows you to drag pictures to any spot on a page and have text wrap around the picture or using a picture as a “background” so that text appears in front of the picture). Tabs for indenting rows of text Bulleted and numbered lists ”sometimes” won’t work correctly Create just ONE table to hold ALL of the page’s “content”, including the title “banner” at the top of the page. As mentioned above, this tutorial starts with just 2 Rows and 2 columns. Keep in mind that you can always add or delete rows, add columns by splitting cells or merge multiple “cells” (or columns) in a “row” into one “cell” (or column). AGAIN….DO NOT CREATE MULTIPLE TABLES on the same page to hold different parts of your content. EVERYTHING should be contained within the ONE Table you create. If you create multiple tables, the tables themselves will “wrap” around each other, destroying your page design and layout. However, in special cases, it’s sometimes easier to control complex content if you insert a new table WITHIN a cell on the existing table (create “nested tables”), but this is generally not necessary. Page |5 Use Microsoft Word to Create a Website Centering the Table on the Web Page Newly created tables are automatically aligned to the left edge of the web page. If you want to CENTER the table on the page, you do it by: • • • • First, click anywhere on the table You will see the table’s “move” tool, it looks like a four-way arrow in a box. Click on the “move” tool o The entire table is selected… Don’t use this tool to drag the table to a new location!! It will work as a “word document” but not as a “web page”. o You can also select the table by clicking anywhere on the table , choosing Table Tools on the Menu Toolbar, click on the Layout Tab, then click on Select > Select Table After the table is selected, Click on the PARAGRAPH CENTER ALIGNMENT button on the Menu Toolbar . . . o Again….DO NOT move the table by selecting the table and manually moving it to a new location on the page. It will look OK in word but WILL NOT be in the location where you placed it after you save your word document as a web page!! [ In 2003: Same as 2007 ] Lock the Table Width to Prevent Table Resizing After you created the table and, if you desired..centered it on the page, you should “lock” the width of the table so that it won’t get wider or narrower when viewed on different computers. If your table changes width, your content may not look the way you designed it to look. You “lock” the width of a table by: • • • • Right clicking anywhere on the table then choosing Table Properties. In the Table Properties window check the Preferred Width checkbox Type in [ 8” ] (This is the typical width of many web pages) Choose Measure In [ inches ] o You can check to see if the table width has been properly “locked” to 8” by changing the size of the Word Document window. If the table’s cells get smaller or larger as the window width changes, then the table isn’t “locked”. Also notice that when the Word Document window gets smaller than 8” wide, the table won’t “shrink” to a shorter width than the *” you set as the “preferred width”. [ In 2003: Same as 2007 ] Page |6 Use Microsoft Word to Create a Website Hide the Table’s Borders .. if desired When created, a table’s “borders” are visible lines. To “hide” the table’s borders: • • • Right click anywhere on the table, Choose Borders and Shading, then select the None button in the Borders and Shading window as shown here. [ In 2003: Same as 2007 ] It’s helpful to be able to see the border’s edges while your construction your site. If you can’t see them, you can “show” the border’s edges after you’ve made them “invisible” by choosing: Table Tools > Layout > View Gridlines. o The table will now have light blue dotted lines indicating the location of rows and columns but they won’t appear when the page is printed or converted to a web page. The table will look like this… (In word 2003, the borders will appear as light gray lines) [ In 2003: Do nothing. The “hidden” borders will automatically appear as light gray lines] Adding Content: Text and Pictures • • Text: Just type text into a cell. It will “wrap” within the cell. Pictures: Click inside a cell then choose Insert > Picture from the Menu Toolbar. Browse to the location where you saved your “original” pictures and choose a picture. My Web Page Gary Mote Navigation Menu Text Home Resume My Pictures My Links Resize Inserted Pictures to fit into the width limit of the table Inserted pictures are often larger than the cell they are being inserted into. This makes the table width wider than 8”. To reduce the size of the picture, select the picture the drag a corner handle toward the center of the picture. The width of the table will automatically “shrink” as the size of the picture becomes smaller. Make sure the table is no more than 8” wide. [ In 2003: Same as 2007 ] Page |7 Use Microsoft Word to Create a Website Aligning Text or Pictures Inside a Table’s Cell • Right click inside any cell, choose Cell Alignment, then choose the type of vertical and horizontal alignment you want for that cell from the icons. o You can also just click inside a cell and choose the Left, Center or Right Paragraph Alignment button from the “Home” Menu Toolbar. This won’t control the text or picture’s vertical position within the cell though. [ In 2003: Same as 2007 ] Adjust the Table Column Width to Fit the Content • You can also adjust the width of the columns by selecting the border between the columns and dragging it to the right or left as shown in the example above. When you do this, notice that the border for BOTH the top and bottom rows changes. [ In 2003: Same as 2007 ] Adjusting the Table Column Width on Different Rows Note: It’s best to decide how many columns you will need in a row BEFORE adding Text or Pictures to the cells in the Row. For the example below, we’ve removed the text and picture from the bottom row so we can Merge the Cells on that Row, split them into 3 columns, then add text and pictures into the new cells on that row. When the table was created, the borders of the columns in all the rows are “locked” together. If you move one border between columns, all the borders in all the rows move. But, sometimes you may need to “disconnect” the column borders between rows so you can position text and pictures differently on different rows. To do this: • Merge all the cells in the row that you want to “disconnect borders” from other rows o o o In the example below, we selected all the cells in the bottom row by dragging a selection over them. Right click on the selected cells Then, choose Merge Cells This example show the table with the second row of cells merged My Web Page • Gary Mote Now Split the merged cell into 2 or more columns. o Right click inside the cell you want to split and choose Split Cell. o Select the number of Columns (or rows) you want to split the cell into Page |8 Use Microsoft Word to Create a Website In the example below, the bottom row was “split” into 3 columns and the column borders on that row moved to hold the content. Notice that the resulting column borders are no longer “linked” to the top row’s column borders. My Web Page Home Resume My Pictures My Links Gary Mote You could type in text here. [ In 2003: Same as 2007 ] Adding Rows to a Table To add another row to a table, right click inside any cell in the bottom row then choose Insert > Insert Rows Below (there are also other options for inserting above or inserting columns). Notice in the example below, that the newly inserted row has the same number of columns (3) as the row above it. Also note that the Column borders of the new row are “locked” to the column borders of the row above it. My Web Page Home Resume My Pictures My Links You could type in text here. New row inserted 2nd column of new row [ In 2003: Choose Table > Insert > Rows Below ] Gary Mote 3rd column of new row Page |9 Use Microsoft Word to Create a Website Question: How do you “disconnect” the column borders of the newly added row from the column borders of the row above it to make your table look like the table below? My Web Page Home Resume My Pictures My Links Gary Mote You could type in text here. New Column on left with “independent” column border New Column on Right with “independent” column border Adding Background Color to Cells in a Table To add color to a cell, row or column: • • • • • Select a cell or group of cells and right click Choose Borders and Shading Select the Shading Tab in the Borders and Shading Window Open the “Fill” window and select a color Click OK My Web Page Home Resume My Pictures My Links You could type in text here. New Column on left with “independent” column border [ In 2003: Same as 2007 ] Gary Mote New Column on Right with “independent” column border P a g e | 10 Use Microsoft Word to Create a Website Adding the Text Hyperlinks to other Pages on your Website Before starting this step make sure that you’ve saved your “homepage” as index.htm inside the website folder as described earlier in this tutorial. Note: These instructions hyperlink “text” but hyperlinks can be created the same way with pictures. • To add a text hyperlink o Select the site navigation text, like the word “home” o Right click and choose Hyperlink You can also choose the Menu Toolbar’s Insert Tab then select Hyperlink from the Links Section Also…Since you already saved this “home” page in the website folder (as index.htm), the Hyperlink dialogue will automatically show you the contents of website folder and all the pages, documents and media that’s been placed into it. o In the Address: window, for the link to the homepage, type-in: index.htm Make sure that you only use lower-case letters. Don’t use a Capital “I” in “index.htm” Remember? Index.htm is the filename you used when you saved the “home” page earlier. Add hyperlinks for the other pages on your site. o Repeat the above for all the site navigation hyperlink text: o In this example Resume, My Pictures and My Links could be hyperlinked to filenames you enter in the Hyperlink Address window as: resume.htm pictures.htm links.htm • [ In 2003: All above the same as 2007 ] REMEMBER the filename you used for these links since you MUST save each of the web pages you will create later using the exact same filename. ALSO MAKE SURE YOU ADD THE “.htm” to all the hyperlink filenames when you type them into the Address: type-in box or they won’t work after you create and save the new pages you create as web pages. This tutorial assumes that you will create other web pages using the techniques described here for creating a “home page” and save them into the “website” folder along with the “home page” (index.htm) file you created using this tutorial. P a g e | 11 Use Microsoft Word to Create a Website Adding Text Hyperlinks to other Websites • • • • Add text to your webpage to be used as the hyperlinked text. o For example type-in: Kent State University Select the text Right click and choose Hyperlink Type in the full URL to the website in the Hyperlink Address window. o For a hyperlink to “Kent State University” type-in: http://www.kent.edu o You can also browse to the website using IE or any other browser, copy the URL from the Browser’s Address bar, then paste the copied URL into the Hyperlink Address window. [ In 2003: Same as 2007 ] Adding Text Hyperlinks to Documents and Media • Type-in text that you will use to hyperlink to the document or media o Select the text, like the words: “play video” or “Link to PDF Resume” o Right click on the selected text and choose Hyperlink o In the Hyperlink window, just click on the document or media clip that you want to link the selected text to. Note: You should already be inside the website folder where your web page is saved when the Hyperlink Window opens and the Existing File or Web Page button on the left should be selected. o The filename of the linked document or media clip will appear in the Address: window o Click OK Changing Hyperlink and Followed Hyperlink Text Colors o On the Page Layout tab, in the Themes group, click Theme Colors o Click Create New Theme Colors o Under Theme colors, select the colors that you want to use o In the Name box, type a name for the new color theme. o Click Save. In 2003: If you want to change the appearance of all text hyperlinks in a document, do the following: • Open the document that contains the hyperlinks you want to change. • • On the Formatting toolbar, click Styles and Formatting . Do one of the following: o To change the appearance of hyperlinks, in the Pick formatting to apply box, right-click the Hyperlink style, and then click Modify. o To change the appearance of followed hyperlinks, in the Pick formatting to apply box, right-click the FollowedHyperlink style, and then click Modify. o Note If the Hyperlink or FollowedHyperlink styles do not appear in the Pick formatting to apply box, in the Show box, click All Styles. Select the formatting options that you want, or click Format, and then click Font to see more options. • • • To use the modified Hyperlink or Followed Hyperlink style in new documents based on the same template, select the Add to template check box in the Modify Style dialog box. You can also use themes (theme: A set of unified design elements that provides a look for your document by using color, fonts, and graphics.) to change the appearance of hyperlinks and other elements in your document or Web page. P a g e | 12 Use Microsoft Word to Create a Website Adding an e-Mail Link to Yourself • • • Right click on the text or a picture then choose Hyperlink In the Insert Hyperlink window under the Link To: section choose E-Mail Address Type-in your email address in the E-Mail Address text entry window You can also add a “subject” to the email that gets sent to you if desired, like “email from my website” [ In 2003: Same as 2007 ] Uploading Your Website to the Kent Personal Server • Open MY COMPUTER • In the Address Bar for My Computer type-in: • ftp://mail.kent.edu/public_html Enter your Flashline User Name (don’t include the @kent.edu) and your Password o You should now be connected to the server and looking INSIDE the public_html folder on the server. This is where you have to upload your website folder • Copy and Paste or Drag and Drop your website folder from you local computer (probably saved on your Jump Drive) to the open My Computer Window. o Note: You should close all open word documents (web pages) on the local computer before uploading them to the server. If you don’t, you might get an error message when you try to upload. • That’s it Your website is now on the server and can be viewed by anyone in the world…. If they know the correct “URL” address to find it. You might even be able to “Google” your name to find it if you put your name anywhere on any of the web pages. The example below shows how you can open the My Computer window and login to the Kent Personal Server then open another window that has your website folder, resize them on the monitor so you can see both windows side by side then drag and drop the website folder from the Local Computer to the Kent Personal Server. Notice that the Address bar on the Kent Personal Server shows that you are INSIDE the public_html folder on the “server” … the Circled Area … Your Local Computer (your jump drive) Kent Personal Server (ftp://mail.kent.edu/public_html) P a g e | 13 Use Microsoft Word to Create a Website Viewing your Website on the Internet using a Browser • • Open Internet Explorer (or any Browser) In the Address type-in: http://www.personal.kent.edu/~yourusername/website • Your website should open in the browser. o Note: If you didn’t name your folder, website, then you would replace the word “website” at the end of the above URL address with whatever word you used for your folder Making Changes to Web Pages after You’ve Uploaded Them to the Server Need to make changes to a web page… no problem. • • • Reopen your webpage in Microsoft Word. o Remember to right click on the file then choose Open with Microsoft Word or Open Word then open the document in word. Edit the page and Save it Log into the Kent Personal Server but… o This time you don’t need to upload the entire website folder. You only need to upload the one web page AND the “associated” folder that contains the “copies” of pictures, especially if you added or deleted pictures from the page. After logging in, you will see your website folder on the server. Double click on the website folder to open it o You will now see all the individual web pages, documents and media clips that were in the website folder you uploaded to the server AND if the web pages had linked documents or pictures, there will be a folder “associated” with that page. For example, your home page, index.htm will probably have an “associated folder” named index_files The “associated folder” for each page contains the “copies” of the pictures we mentioned at the beginning of this tutorial. You must have the associated folder for each page on the server in order to see the pictures you inserted onto the web pages. Note: If you added new media (video or audio clips) or documents to the website folder and created hyperlinks to those clips or documents, you will also have to upload the clips and documents. P a g e | 14 Use Microsoft Word to Create a Website To Upload Revised Web Pages to the Server • • Drag/Drop or Copy/Paste the revised web page from the local computer to the Server so that you replace the existing page on the server with the new web page. o If you do this correctly, you will be asked to confirm that you want to replace the existing file with the new one. OK this. If you added images or links to documents to your web page…. o You MUST also Drag/Drop or Copy/Paste the folder “associated” with the web page to the server. See the explanation about “associated folders” above. DO NOT DROP THE NEW “ASSOCIATED” FOLDER ON TOP OF THE OLD “ASSOCIATED” FOLDER ON THE SERVER! • • IF YOU DO THIS, THE NEW FOLDER WILL BE PLACED “INSIDE” THE OLD FOLDER AND IT WILL NOT WORK! JUST DRAG THE NEW FOLDER TO ANY BLANK SPACE ON THE SERVER. If you did this properly, you will get the same notification that you are going to replace the old files with new ones. Your Local Computer (Shows that you’re INSIDE the website folder) The Kent Personal Server (Shows that you’re INSIDE the website folder) When you’re done uploading the web page and the associated “ _files” folder to the server, open your Browser and go to your website to confirm that the changed page works.
