CVEV 118/698 MS FrontPage

1. CVEV 118/698MS FrontPage Lecture 2 Prof. Mounir Mabsout Elsa Sulukdjian Walid El Asmar

2. Getting Started • Some Definitions: • Hyperlink: Text or graphic hotspot that loads other webpages when clicked on. • Pixel: Unit of measurement on the web. One pixel is approximately the size of a period (.) in 12-point Arial font. • URL (Universal Resource Locator): Address of a web site. This is what is after the "http://" on the location bar on your browser. • Web: In FrontPage, your web site is referred to as a web.

3. FrontPage Screen Layout

4. MS FrontPage Views • Page: is the editing environment for creating and editing web pages (Normal, HTML, Preview). • Folders: lists all of the files and folders in your web for easy management. • Reports: identifies problems with pages and links in the web including slow-loading pages, broken links, and other errors. • Navigation: lists the navigation order of the site and allows you to change the order of viewing the pages. • Hyperlinks: allows you to organize the links in the web pages. • Tasks: provides a grid for inputting tasks you need to complete in your web.

5. Creating a WebPage • Select File|New|Web… and create a page using the Wizard • Select File|New|Page... and choose a template

6. Page Properties • The Page Properties (from File|Properties) window will allow you to change many general properties, the page background, margins, etc...

7. Text • Font Properties: Font, Font Style, Size, Effects. • Convert Text to Tables by selecting Table|Convert|Text to Table:

8. Hyperlinks • Hyperlinks are text or graphics that can be clicked to bring the user to another web file such as a web page or graphic. • They are the essence of the World Wide Web as they link pages within sites and web sites to other web sites. • Create a hyperlink by: • Highlighting the text or graphic of concern • Selecting Insert|Hyperlink

9. Hotspots • By making a graphic a link as described before, each graphic can only link to one location. • However, you may have a single graphic that has several sections that each need to link to different pages. • Hotspots allow you do to this by creating an image map over the graphic. • The hotspot tools (from the Drawing toolbar) allows you to use the necessary shapes to draw the hotspots on the graphic.

10. Tables • On web pages, tables can serve many functions: • Page layout • Displaying information in formatted tabular form • Adding background color and borders to blocks of text • A quick way to create a table: • You all know: • Table Properties • Cell Properties

11. Graphics & Pictures • Image Types: HTML code recognizes two basic graphic formats - GIF and JPEG. • JPEG (Joint Photographic Exchange Group) - Generally, photos should be saved as JPEGs. This file type consists of 16 million colors. • GIF (Graphic Interchange Format) - These contain 256 colors or less and should generally be used for non-photo graphics.

12. Web Design Tips • Fonts: Stick with common fonts such as Arial and Times New Roman. • Long Pages: Divide the information into different pages (long and endless scrolling pages are difficult to read). • Sound Files: increase the download time of the page so if a sound file must be included, make it a link. • Hyperlinks: better use descriptive words for link text. • Page Size: Design your web pages so all material is viewable on the small resolution 640X480.

13. Testing • To make sure the page looks the way you want it, preview it on both IE and Netscape. • Select File|Preview in Browser from the menu bar:

14. Introduction to HTML • HTML, or HyperText Markup Language, is the standard set of codes used on the Internet to design and view World Wide Web pages. • HTML documents are basically text documents (also known as ASCII documents) which can be typed up on a word processor, or plugged in automatically using an HTML editor. • What makes HTML documents functional, however, are the codes that are inserted throughout the text, which in turn tell a computer's web browsing software how the document should appear and behave on the screen.

15. HTML Basic Example <HTML> <HEAD> <TITLE>Example Home Page</TITLE> <H1>The CVEV118/698 Example Home Page</H1> </HEAD> <body> Welcome to the CVEV118/698 Home Page! This site is still under construction, but if you'd like, you can look at the <A HREF=“feawebsite.html">FEA WebSite</A>. <P></body> </html> This code is viewed on a web browser as: The CVEV118/698 Home Page Welcome to the CVEV118/698 Home Page! This site is still under construction, but if you'd like, you can look at the FEA WebSite.

16. Markup Tags • HTML uses what are known as Markup Tags (or Tags) to let a Web browser know how to display the document. • Tags are always surrounded by Brackets: (< and >). • For example, the <TITLE> tag specifies the title of a document. For the web browser to recognize the end of a given title, it needs a corresponding close tag - which in this case is </TITLE>. • In HTML, slashes (/) connote the end of a command. • The only kind of tag in our example that does not have a corresponding close tag is the Paragraph Tag, which appears as <P> (used to signify the end of a paragraph). • Note: HTML is not case sensitive, so you could also use <title> instead of <TITLE>.

17. Essential HTML Tags • At the top of any HTML document, you're bound to find three tags, <HTML>, <HEAD> and <BODY>. • The HTML tag tells the web browser that the document it's looking at is indeed an HTML page. • The head of our example is: <HTML> <HEAD> <TITLE>GWMS Home Page</TITLE> <H1>The CVEV118/698 Example Home Page</H1> </HEAD> • And the body is: <body> Etc. <P></body> <html>

18. Headers, Titles & Paragraphs • Title Tags (<TITLE> and </TITLE>); titles appear at the top and center of a web browser's open window. • Headers (<Hx> and </Hx>); There are six levels of header tags, numbered 1 through 6 (1 being the largest and the boldest). The syntax of the header tag is: <Hx>My Header</Hx> • Paragraph Tags <P>; HTML files do not recognize carriage returns (Enter). • Line Break Tags <br>; In many cases, you'll want to end a line of some text, but you won't want to leave the amount of space below it that the paragraph tag leaves. In these situations, you can use the line break tag, or <br>.

19. Text Formatting

20. Escape Sequences • Four characters of the ASCII character set -left angle bracket (<), right angle bracket (>), ampersand (&) and double quote (")- are used in HTML to represent certain aspects of markup tags. • Codes known as escape sequences are used to represent these characters four characters and other special ones. • Some of the more common codes: • &lt; is the escape sequence for < • &gt; is the escape sequence for > • &amp; is the escape sequence for & • &quot; is the escape sequence for " • &ntilde; is the escape sequence for ñ: a lowercase n with an tilde • &Egrave; is the escape sequence for È: an uppercase E with a grave accent

21. Horizontal Rules • The <HR> tag produces a horizontal line the width of the browser window. It's often used as a way to break up information in your document. • Example: <HR WIDTH=50% SIZE=2>

22. Hypertext Links • A nice aspect of writing in HTML is its ability to link text to other texts, a concept commonly known as hypertext. HTML uses an anchor tag, or <A HREF>, to link documents together. • Every anchor tag includes the following elements: • the anchor code <A HREF= • followed by the file to which it should connect; • the text that be used as the "link," and • the closing tag </A> • Example: <A HREF="http://www.aub.edu.lb">The AUB Home Page</A>

23. Lists • Unnumbered Lists <UL> • Ordered Lists <OL>

24. Using Images • To include an image in a web document, you need to use an image tag: <IMG SRC=imageaddress> where imageaddress is the address and name of a given image file. • If the image file is a GIF file, then make sure your imageaddress ends with .gif. Similarly, JPEG-formatted images must end with .jpg.

25. Managing Your Site • Name your files appropriately: • Use simple names of 8 characters or less in length. Some networks and older operating systems only allow this maximum length. • Remember that file extensions must be .htm or .html for HTML files. Note: The page to be viewed first when visiting a site should always be named index.htm or index.html. When typing a URL into a browser without specifying an HTML file (e.g. http://www.aub.edu.lb), the default settings of the server usually display the document called index.htm. • Keep track of your site with a site map (a sketch that shows the structure of the entire site). • Organize your files

26. What’s Next ? • Some ASP…