Microsoft FrontPage. Microsoft Frontpage was designed to allow novice users to create and edit web pages without knowing any HTML.

Transcription

1 Microsoft FrontPage Microsoft Frontpage was designed to allow novice users to create and edit web pages without knowing any HTML.

2 Microsoft FrontPage IDE for web site development Provides both WYSIWYG and HTML editing capabilities Provides tools for layouts, graphics, coding, HTML, scripting Good for small web sites Common look and feel with other Office applications Integrates well with other Microsoft applications but also works with standard web servers

3 Microsoft FrontPage FrontPage consists of a Split View option to allow the user to code in Code View and preview in Design View without the hassle of switching from the Design and Code View tabs for each review Dynamic Web Templates (DWT) were included for the first time in FrontPage allowing users to create a single template that could be used across multiple pages and even the whole Web site. Interactive Buttons give users a new easy way to create web graphics for navigation and links, eliminating the need for a complicated imageediting package such as Adobe Photoshop

4 Authoring tools additional features of a good authoring tool: CSS editor (Java)script editor templates (web pages, style sheets) image editing (clickable maps, ) handling multimedia objects web site maintenance capabilities database support (ODBC)...

5

6

7

8

9

10

11

12

13

14

15

16 Hyperlink in Front page

17

18

19

20

21 Insert Form Elements on Web page

22

23 Insert 1. Hover Button 2. Marquee

24

25

26 Insert Marquee

27

28

29 About link bars A link bar is a set of hyperlinks used for navigating a web site. For example, a typical link bar might have hyperlinks to the web site's home page and its main pages Types of link bars A custom link bar A link bar with back and next links

30

31

32

33 Once you click on the New Page button, FrontPage adds a blank white page based on the Normal Page template. Click on the Save button and you will see that FrontPage wants to name this index.htm because this will be the home page of your web.

34

35 Repeat this process to create six more pages. However, obviously you won't be naming them all index.htm. Instead, name them the following (remember, it's best not to use capital letters or spaces in your web page names): products services contact newprods oldprods newsreleases

36

37 Go to the View menu in FrontPage and click on Navigation and you will see your Navigation View where there is one page called New Page 1. This is your home page, or index.htm:

38 Right click on the New Page 1 page you see in the Navigation view and choose Rename and name it Home. With a real web, you probably would want to name this with your web site's name, but remember that this name is what will appear on your navigation buttons or text links, so keep the name short so it doesn't get chopped off.

39 Now, click and drag the services.htm, products.htm, and contact.htm pages from your Folder List over to the Navigation screen. You will see lines attaching them to your Home page. Just drop them there and rename them all to be Services, Products, and Contact. Your navigation tree should now look like this:

40

41 Go to the Format menu and choose Shared Borders. When the Shared Borders dialog box comes up, choose to apply the borders to All Pages and put checks beside Top, Left, and Bottom and click OK.

42 Your blank page should now look like this, and since we chose to do this to All Pages, all of your pages should now look like this also:

43 When you add Shared Borders to your web, FrontPage adds another folder which includes an html page for each border, but this folder is hidden by default. To see this folder, go to the Tools menu and click on Web Settings. In there, click on the Advanced tab and put a check in the box that says Show hidden files and folders:

44 Now, double click on the page named bottom.htm in your _borders folder in your Folder List. When you have this page open, go to the Insert menu and choose Navigation. The first box you will see, is this. Choose Bar based on Navigation Structure, then click Next:

45

46

47

48 Click OK and then save your bottom.htm page. Once you've saved it, look at your other pages and you will see that they all have this at the bottom: Then, finally, open the left.htm file and choose the same graphic that you chose for the top.htm file, but select the Vertical style instead of horizontal, and when it comes to the part where you choose your navigation structure, do not choose Child Pages Under Home, but instead, choose Same Level and do NOT put a check where it says Home.

49

50

51 Types of link bars A custom link bar When you add a custom link bar, you can add any of the pages within your web site as well as external pages. You can set this link bar up in any way you want, and you can add and remove pages from it at any time. A link bar with back and next links When you add a link bar with back and next links, FrontPage looks at the navigation structure of your web site in order to determine which page will be linked to when your site visitor clicks the Back link, and which one will be linked to when your visitor clicks the Next link. In addition to these choices for a link bar, you can also include hyperlinks to the web site's home page and/or to the parent of the current page, and you can also link to external web pages.

52 About the photo gallery A photo gallery is a web page that contains a collection of graphics arranged in a specific layout. Microsoft FrontPage provides four different layouts in which you can arrange your graphics, and if you are creating an album, each page can have a different layout

53

54 Check files in and out using source control Microsoft FrontPage provides a built-in source control feature that ensures that only one person at a time can edit a file. Check Out When you check out a file, only you can modify it. Other authors can open the last-saved version of the file to view it, but cannot save any changes to it.

55 Check in You can check in a file that you have edited. Other authors will then be able to check out the file and modify it.

56

57

58

59

60 Your blank page should now look like this, and since we chose to do this to All Pages, all of your pages should now look like this also:

61 Tools Web Settings. In there, click on the Advanced tab and put a check in the box that says Show hidden files and folders:

62 Now, double click on the page named bottom.htm in your _borders folder in your Folder List. When you have this page open, go to the Insert menu and choose Navigation. The first box you will see, is this. Choose Bar based on Navigation Structure, then click Next:

63

64

65

66

67 Doubble Click on Index.html

68