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 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 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 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.
Page 4 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 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 o 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 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!! 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.
Hide the Table s Borders.. if desired When created, a table s borders are visible lines. To hide the table s borders: Page 6 Right click anywhere on the table, Choose Borders and Shading, then select the None button in the Borders and Shading window as shown here. 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 Navigation Menu Text Home Resume My Pictures My Links Gary Mote 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.
Page 7 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. 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. 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 In the example below, we selected all the cells in the bottom row by dragging a selection over them. o Right click on the selected cells o 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 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 You could type in text here. Gary Mote 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. Gary Mote New row inserted 2 nd column of new row 3 rd column of new row [ In 2003: Choose Table > Insert > Rows Below ]
Page 9 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 You could type in text here. Gary Mote 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. Gary Mote New Column on left with independent column border New Column on Right with independent column border
Page 10 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.
Adding Text Hyperlinks to other Websites Page 11 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. 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.
Page 12 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 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)
Page 13 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.
Page 14 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.