CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Information Systems :. © Martina Cesalova, 2005 MS FRONTPAGE 1 1.Open FrontPage – View -> Page 2.Open a new page (file-new-page or web) / click first button 3.Click on html tag (notice opening and closing html tags, head tags – information about the page that is not displayed – title, Meta Tags - used by some search engine to provide a brief description of the web page for the search result, contain keyword, description, generator, etc.) 4.Save as the page as L/bsba/IS330, name it with your last name 5.Type a headline (Your Name – Web page design) on the page, hit enter and type a paragraph of information about yourself. Hit enter. 6.Open a word document (e.g. from IS330 site – lesson notes), copy a paragraph, and paste it in the FP document. 7.Save 8.Click HTML tag, Preview tag.

CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Information Systems :. © Martina Cesalova, 2005 MS FRONTPAGE 1 1.Select the text (Ctrl+A, Edit – Select all) 2.Align the text to center (click, Format – Paragraph, right-click – paragraph properties) 3.Select the headline – in the Style option box choose heading 1. (careful, this command makes the entire paragraph larger, no matter if you selected whole paragraph or not! – try it with the 1st sentence of the paragraph, then click undo) 4.Select the 1st word in your paragraph and make it bold. Highlight it, (click on button with B, Format – Font – Font Style, right-click – Font Properties – Font Style) 5.Select 1st sentence in the copied paragraph to make it italic. Highlight, click I button. 6.Default font - TNR and Arial - change font type and size - just like in MS Word – choose from the font type and size menu.

CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Information Systems :. © Martina Cesalova, 2005 MS FRONTPAGE 1 1.Save 2.Look at the generated HTML code –, h1, align center, font face, I, … 3.Place cursor at the end of the copied paragraph, hit enter write couple of words– notice the space! Paragraph vs. Break 4.When you hit enter, FP will automatically make a space between the lines (and write the P command in the HTML code). In case you do not want the space, use the “break” function 5. Place cursor at the beginning of the word, hit backspace, then – Insert - break – normal line break – OK. In HTML code -.

CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG 416 – Information Systems:. © Martina Cesalova, 2005 MS FRONTPAGE 1 1.To change background – click Format – Background, eventually right-click – page properties –background, from the background color menu choose more colors. 2.To use a web safe color, go to - downloads section, click the “web safe color chart” link, copy the hexadecimal code of desired color. Back in Frontpage, paste the code in the value field. 3.If you look at the html coding, the body tag changed to e.g.. Try to rewrite some values of the hexadecimal code and click on the preview tag. 4.Similarly, you can change font color. 5.Highlight the heading, change the color. Use a web safe shade for the rest of the text 6.If you look at HTML – see the color defined in the font tag Again you can change the color by rewriting certain values right in the html code.

CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG 416 – Information Systems:. © Martina Cesalova, 2005 MS FRONTPAGE 1 1.Insert two pictures 2.Click Insert – Horizontal line 3.Right-click the line, choose horizontal line properties, decrease width to 75, and increase height to 5 pixels. Change color. (choose some of the document’s colors) 4.Insert another horizontal line on top of the page, adjust its properties. 5.Save and preview

CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Database Management:. © Martina Cesalova, 2005 MS FRONTPAGE 1 Create links Within the document 1.Place cursor in front of your last sentence and hit enter until you can’t see it. 2.Scroll down and place the cursor in front of the last sentence, click Insert – Bookmark (CTRL+G) 3.Meaningfully name the bookmark (LAST) 4.Scroll up, highlight the headline, insert bookmark, name it TOP 5.Under the heading type “bottom”, select it, click insert – hyperlink,). In Insert hyperlink window choose button bookmarks – select LAST. Click ok. 6.Scroll down, below the last sentence type “back to top”, select, insert hyperlink, choose the TOP bookmark.

CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Database Management:. © Martina Cesalova, 2005 MS FRONTPAGE 1 External links 1.Below the heading type IS 330 Web Site 2.Insert hyperlink and in the address field type Click OK 3. insert other two external links to take you to your favorite site Enter active address 1.Write your address, select it 2.Click the Insert hyperlink button 3.In the address field type mailto:your address (no spaces!)mailto:your address Click OK

CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Database Management:. © Martina Cesalova, 2005 MS FRONTPAGE 1 1.Place cursor below the text, click Table - Insert Table, choose 3 rows and 2 columns, Alignment – center, border size, cell padding and cell spacing =2 2.Click OK and save. Highlight the table. 3.Click HTML and notice the table tags.,, 4.Right-click the table, choose table properties, change width to 80, border color to black and background color to white. 5.Highlight the first row, right-click and choose merge cells. 6.Cut the page title and paste it into the first row. 7.Right-click on the row below – choose insert rows. 8.Again, merge the cells of the row right below the title. Save. 9.Right click, choose cell properties and change background color of the cell to background of the page.

CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Database Management:. © Martina Cesalova, 2005 MS FRONTPAGE 1 Cut the first image and paste it in the 1 st cell of the 3 rd row. Cut the 1 st paragraph and paste it in the 2 nd cell of the 3 rd row, align it to the right Cut the 2 nd paragraph and paste it in the 1st column of the 4th row, align it to the left. Cut the second image and paste it in the right column of the 4 th row. Insert other 2 rows (Table-Insert-Rows or Columns) Merge the cells of the new rows, and change the background color of the 5 th row (select the same shade as in row 2). Split the last row into 3 columns. In the left cell type today’s date, change the text color and align it to center, in the right cell paste your . Save, preview.