Basic Web Design

Table of Contents
TABLE OF CONTENTS.............................................................................................................................................1 BASIC WEB DESIGN.................................................................................................................................................2 DEVELOPING A WEB SITE.....................................................................................................................................2 INTRODUCTION TO HTML....................................................................................................................................6 INTRODUCTION TO FRONTPAGE.......................................................................................................................9 CREATING A WEBSITE.........................................................................................................................................24 BIBLIOGRAPHY & GENERAL RESOURCES...................................................................................................39
2003 Trinity University All Rights Reserved
Basic Web Design
Basic Web Design

This hands-on workshop introduces you to the basic principles of Web site design and authoring using HTML. You will then use FrontPage to create your web page or site and publish it to the World Wide Web for viewing. Objectives Understand and apply design principles when creating and modifying a Web site. Recognize HTML and Web terminology such as hypertext, tags, browser, and HTML. Identify the basic structure of an HTML document and create a simple Web page using HTML. Create a new Web site or modify an existing website using FrontPage. Use tables to design the layout of a Web page. Understand how typography works on the Web and format fonts and paragraphs.. Set Web page properties such as background colors and images. Understand graphic formats for Web pages; insert graphics, modify picture properties
Developing a Web Site

As with any other project, the first phase in creating a new web site is planning. This involves determining the sites navigation structure, content, and page layout. It is only after this has been accomplished that HTML coding or authoring tools like FrontPage can be used effectively to actually create the site. The Five Golden Rules The planning process involves: Define site purpose o What are the web sites objectives? o Who is the target audience? o What is their connectivity (dial up, broadband, network, etc.)? o What computers (PC/Mac) and browsers (IE, Netscape, Opera, etc.) do they use? Define content o What you have and what you need. o How it will be organized. Categorize information rather than defining categories and filling them. Build the site structure around content organization. o What graphics are required and how many? Remember, the larger the number of graphics, the longer the page will take to download. Develop a file naming convention and stick to it. Create a clear visual hierarchy on each page. Take advantage of conventions. Break pages into clearly defined areas. Make it obvious whats clickable. Minimize noise.
Source: Dont Make Me Think, Steve Krug
Web files and folders should not have any spaces and be in lowercase. Use the underscore (_) to connect words in file names. File names cannot contain colons (:), asterisks (*), questions marks (?), IMS Technology Trainingcharacters. -2 2003 Trinity University or other special
Basic Web Design
Avoid spaces in file or folder names. If necessary use an underscore between words. Determine site architecture and navigation. A simple flowchart-style sketch usually works best. Hierarchical models are best suited to the web. Use sticky notes to organize your navigation structure. Use one sticky note per page and arrange them on a wall or table till you achieve your desired hierarchy. Index cards can be used in a similar manner.
Sketch page layouts and content layouts to create appropriate page design. Assess sketches for appropriateness, placement, consistency and usability, and revise if necessary.
Designing Navigation Bars

The main goal of your website should be to make it easy for users to perform useful tasks. Develop a clear information architecture that is simple, consistent, and follows convention. Key Elements of Navigation Site ID. Global navigation bar. You are here indicator. Local navigation bar. Breadcrumb trail Small text version of navigation bars (optional)
IMS Technology Training
-3-
2003 Trinity University
Basic Web Design
Site ID
Global Navigation
Breadcrumb Trail You are here indicator
Local Navigation
You will know you have succeeded if your site navigation helps users answer these basic questions: Where am I? (Site ID) Where page am I on? (Indicator) Where can I go? (Navigation)
Page Design
With web pages, the layout design process accounts for the arrangement of text and graphics elements on the page. These elements can be broadly divided into: Page Header: Located at the top of the page, it includes the page banner or title and the navigation bars. Page Footer: Located at the bottom of the page, this is where you insert copyright and authoring information, the date of the most recent update, institutional affiliation. Side Navigation: This is usually a rail along the side of the page that displays the global or local navigation.
-4-
Basic Web Design
It is usually a good policy to sketch out the page layout and identify the position of each element on that page as demonstrated in the diagram below.
Page Header
Navigation Panel
Page Footer
Home Page Layout Has to convey site identity and mission: what it is and what its for. Has to provide an overview of what the site has to offer, and how its organized. Should provide a way to search the site. Has to appeal to diverse interests.
Design Concepts
When designing a web site, you need to consider four basic design elements: Appropriateness o Does it match with the sites target audience? o Do the graphics mesh with the sites intended purpose? o Do the tone and style of the language complement the sites objectives? Placement o Place the most important information at the top of the page. o Use white space to create breaks between page elements. Consistency
-5-
Basic Web Design
o Place page elements like titles, banners, logos, and navigation elements in the same spot on every page. o Consistent visual cues provide the user with a reference point, making it easier for them to navigate the site. Usability o Make the site self-explanatory. Dont make your users think! o Make your clickables obvious. o Follow conventions. o Keep your text brief and to the point. The less there is to scan, the easier it will be for your users to find their information. o Design for the lowest common denominator of 800x600 pixels in screen resolution. o Screen-size page banners and navigation bars should not exceed 760 pixels in width, and 410 pixels in height.
Introduction to HTML
What is HTML?
An acronym for Hypertext Markup Language, HTML is the language used to create web documents. Contrary to popular notion, HTML is not a programming language. It is simply a set of codes that define the layout and content of a web page so that they can be read and displayed by a web browser. A non-proprietary language, HTML can be created by a simple text editor as well as a sophisticated web authoring tool like FrontPage. The World Wide Web Consortium, also know as the W3C, monitors the development of HTML. As new features are added and obsolete ones deprecated (removed), it is assigned version numbers. The most recent version is HTML 4.01.
HTML Documents
HTML documents are made up of tags or angled brackets (<>) that contain an element within them to determine the layout and formatting of the web page. For example, is the tag used to define text in bold where B is the element contained within the tag. Elements can also include attributes, or additional information for that element. Attributes are included inside the start tag. For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code. Structure The basic HTML document is contained within the <HTML> </HTML> tags and comprises two sections: Head and Body.
-6-
Basic Web Design
The Head contains the page title and meta-tags within the <HEAD> </HEAD> tags. Any JavaScript code that is used, as well as Cascading Style Sheet information is also contained within the Head. This section will not be displayed on the web page. The Body holds the actual content of the page (text, graphics, lists, etc.) contained within the <BODY> </BODY> tags. The <HTML>, <HEAD>, <TITLE>, and <BODY> tags are also referred to as document tags. A basic HTML document would look something like this:
<HTML> <HEAD> <TITLE>A Simple HTML Example</TITLE> </HEAD> <BODY> Welcome to the world of HTML. This is the first paragraph. </BODY> </HTML>
Tags are case insensitive, i.e. will work as well as . Not all tags work with all web browsers. If a browser does not recognize a tag, it simply ignores it. It will display the information contained within the tags however.
Creating an HTML Document Since HTML documents are essentially text files with the extension .htm or.html, any basic text editor like Notepad WordPad can be used to create one. You can also the HTML view in authoring systems like FrontPage or Dreamweaver, or HTML hand coding applications like Home Site. HTML documents do not recognize white spaces created by formatting tools such as spaces, linefeeds, and carriage returns. These are automatically compressed into a single space when the page is displayed in the browser. For instance, the HTML code in the example above can also be written out as
<HTML> <HEAD><TITLE>A Simple HTML Example</TITLE></HEAD> <BODY>Welcome to the world of HTML. This is the first paragraph.</BODY> </HTML>
and it would still display in exactly the same manner in the browser. However, it is harder to read and edit in this format. Consequently, for clarity in reading and editing HTML, it is best to structure the document using carriage returns and indents. Markup Tags The information contained in the Body section of an HTML document is formatted using markup tags. These tags allow us to create paragraphs, line breaks, headings, lists, etc. They
IMS Technology Training -7-
Basic Web Design
can also be used to set the position of the content using alignment attributes. The most common markup tags are:
Heading
These tags are used to highlight text by making them bigger and bolder than normal text. There are six levels of headings numbered 1 through 6, where 1 is the biggest and 6 is the smallest heading. Headings are specified as <Hy> </Hy> where H stands for heading and y is the level number (1 to 6). E.g.: <HTML> <HEAD> <TITLE> Headings</TITLE </HEAD> <BODY> <H1>Level 1 heading</H1> <H2>Level 2 heading</H2> </BODY> </HTML>
Paragraph
These tags, denoted by , are used to define paragraphs. Since HTML does not recognize carriage returns, it is especially important to use these tags to indicate paragraphs, or you will end up with as one long block of text. E.g.: <HTML> <HEAD> <TITLE> Working with Paragraphs </TITLE </HEAD> <BODY> This is the opening paragraph for this page. It does not have much information at the moment, but it indicates how a paragraph is constructed in HTML. This is the second paragraph on this page. </BODY> </HTML> Paragraphs can be positioned or aligned relative to the sides of the page by using the ALIGN=alignment attribute within the opening tag where the value for alignment is left, right, center, or justified. The default alignment for a paragraph tag is left. E.g. <HTML>
-8-
Basic Web Design
<HEAD> <TITLE> Working with Paragraphs </TITLE </HEAD> <BODY> This is the opening paragraph for this page. I have used the attribute align with the value center to put it in the middle of the page. This is the second paragraph on this page and it is right aligned. </BODY> </HTML>
Line Break
The line break tag is used to simulate the effect of creating a line break by pressing the Enter key on the keyboard. It is one of the few HTML tags that is not paired with a closing tag. E.g. <HTML> <HEAD><TITLE> Page with Line Breaks </TITLE </HEAD> <BODY> Trinity University One Trinity Place San Antonio, TX 78212 USA </BODY> </HTML>
Comments
Comments are one of the most useful tools in HTML as they can be used to explain and clarify the structure of the HTML code to other readers. They can also be used to include information such as the name of the person editing a file or the software and version used in creating a file. Comments do not appear on the web page. To include a comment in your HTML file, enter: 
Introduction to FrontPage
What is FrontPage?
FrontPage is an application used to create web pages. As an authoring tool, FrontPage includes tools that allow you to design, create, manage, and publish web pages without needing prior knowledge of HTML. However, a basic grounding in HTML allows you to tweak and optimize the HTML code that FrontPage generates. 2003 Trinity University
-9-
Basic Web Design
Creating a New Web Page

To launch FrontPage 2002, click on the shortcut on your desktop (see image on the right). If no icon is available on the desktop, click on the Start button in the lower left corner of the screen, then Programs, and then on Microsoft FrontPage. Unlike previous versions of FrontPage where a new page automatically appeared on launching the application, when you first launch FrontPage 2002, it displays an empty screen (grey area). To create your first web page click File New Page or Web or on the Create a new normal page icon. Your screen should now look like this.
Source: Microsoft Office XP Inside Out
- 10 -
Basic Web Design
The Views bar, on the left of the screen, allows you to view your web page or site, in many different ways. Notice that the topmost button titled Page seems to be depressed. This indicates that you are in the Editor view. This view is primarily used when creating and editing a web page or site. Folders, shows you your web site in file form. You cant see anything at the moment because we havent created a web site. Reports will show you the status of all the pages in your web site as you create them. Navigation will show you, as you create your web site pages, a little organization chart. The lines connecting the boxes (as shown in the Navigation icon button), indicate the hyperlinks between the pages. Tasks is a little word processor that lets you maintain a To Do list once you begin creating your web site. Click back on the Page view to begin building your web page.
Page Views
FrontPage allows you to work on your page in three views: Normal View or the WYSIWYG (What You See Is What You Get) editor. This is the most commonly used view. HTML View, which displays the HTML code generated for the page. This is useful if you want to modify or tweak the HTML code. Preview Page View displays the page as it would appear on a web browser. You cannot make any modifications in this view.
To select a specific view, click on the appropriate tab in the lower left hand corner of the Page View window. Use the Reveal Tags (Ctrl+/) option under View in the Menu Bar to display HTML tags in the Normal View. These tags are for information only and cannot be edited or changed in this view.
- 11 -
Basic Web Design
Page Properties
The page properties option allows you to change the default look (white) of your webpage by adding a background images or color, page titles, and even sound and animation. To view the Page Properties screen, select Format Background in the Menu Bar. You can also right-click on the page and select Page Properties in the pop-up menu.
You should now see the Page Properties screen shown below.. As you can see, you can set a number of page options here. For this class, we will only work with title, and background color and image. General In the title box, type in a new page title, appropriate to your page. It is not a good idea to have background sounds on your web page as it slows the download. Background Click on the Background tab to change screen options. To add a background image, click on the Browse button and navigate to the location of the desired image. To change the default background and text colors, click on the little arrow to drop down the menu.
- 12 -
Basic Web Design
You can also change hyperlink colors in the same manner. However, it is advisable to stay with the convention i.e.: Blue for a page that has not been visited yet. Purple for a page that has been viewed. Red is the color of the link as it is being pressed. Light colored backgrounds with dark text work well together. A dark background can add drama, but needs a bright text color for contrast.. Bright colors are eye-catching, but can tire a reader. Use them sparingly. Use background images that have subtle patterns and textures. A busy background image makes it harder for the user to read the content.
Working with Text

To place content in a new page simply start typing in the information onto the page, like you would in a word processor. Check that you are in the Page View (the Page button in the View bar will have a square around it) and that your cursor is flashing on the left hand side of the white area. At the upper left corner, above the white area, you should see the indicator new_page_1.htm. If you dont, click on the Page button again. Type in a heading for your page (E.g. My First Web Page) and then press the Enter key. Every time you press the Enter key, FrontPage automatically generates a paragraph tag ( ) with a blank line after it. To insert a line break ( ) instead of a paragraph break, use the Shift-Enter combination. When modifying a web page, it is best to view the formatting marks. Use the Show All button - to display formatting marks.
Formatting Text You can format text to be in different fonts, sizes, styles, and colors using the lists and buttons
on the toolbar or the Format Font option in the Menu Bar.

Font List Size List
- 13 -
Basic Web Design
Font Type
It is best to select a simple, san-serif font that is easily available on most computers to avoid variations in how the page is displayed. Choose fonts such as Arial, Verdana, or Helvetica that are easy to read and available on most computers. Avoid leaving the font setting at Normal or Default. This will display the page in whatever font the user has set as default.
Font Style
This usually refers to setting text as bold, italics, headers, lists, etc.. An easy method to convert text to bold or italics is to select the text and then click on the Bold ( button. Dont use the underline style as it will look like a hyperlink and confuse the reader. ) or Italics ( )
To set text as a header or list, select the appropriate option from the Style menu on the Tool Bar. Header sizes range from 1 to 6, with 1 as the largest and 6 as the smallest.
Font Size
In web documents, font sizes have different values from the point sizes used in word processors. The latter are indicated in parentheses next to the HTML sizes for a sense of proportion. A point size of 2 or 3 works the best for paragraph text. Select the desired size from the list or the Font dialog box. The Font dialog box offer allows you to set text effects such as superscripts, subscripts, strikethrough, etc. Not all of them are supported by browsers, and some, like Blink, can also be annoying. Avoid using them.
Font Color
You can select font color along with other options in the Font dialog box. You can also use the Font Color button on the Tool Bar.
- 14 -
Basic Web Design
Formatting Paragraphs Paragraphs are aligned or positioned relative to the sides of the web page as Left, Right, Centered, or Justified. You can align a paragraph with any of the following methods: Right-click in the paragraph and select the Paragraph command from the menu. Select Format Paragraph Use the Align Left ( ), Align Right ( ), Center ( ), or Justify ( ) buttons on the Tool Bar. The first two methods will open a dialog box where you can set the alignment as well other options such as text indents and line spacing.
Inserting a Picture
Graphics for web documents should be in one of the following formats: GIF (Graphic Interchange Format): Limited to 256 colors, therefore, best suited for logos and clip art (non-photo images) JPEG (Joint Photographic Experts Group): This format supports millions of colors and is ideal for photographs. Save scanned photos in this format. To insert your picture, click on Insert Picture in the Menu Bar. Select From File or Clip Art to specify the file location. When the Picture menu screen appears, navigate to the location of the desired image, select it, and then click Insert to place it on the page.
In order for the page to load correctly, all the parts of the web page (graphics, animations, video files, photos, sounds, etc.) have to be located in the same place. If the web page cant find items, you will not be able to see them in your page. Make sure you put your image files in the same location as your web page.
Modifying Picture Properties Once you have inserted the image, you can change its size and positioning on the screen. To resize an image, click on it once to select and display the sizing handles (small squares at each of the corners and in the middle of the top, bottom, and side edges). Use these handles to change image proportions.
IMS Technology Training - 15 -
Basic Web Design
Dragging on a corner handle sizes the graphic proportionately. Dragging the middle handle will distort the image. For precise sizing as well as to set other options, right-click on the image and select Picture Properties from the menu to display the Picture Properties dialog box. Change the Alignment of the image depending on how you want it positioned on the page. To add a border, enter a value (in pixels) in the Border Thickness box. The higher your value, the thicker your border will be. The default value is 0 or No Border. Use the Horizontal spacing and Vertical spacing options to add white space around the picture, both above and below (vertical) or on both sides (horizontal). This prevents text from running into the image. Cropping Graphics You can also resize an image by cropping it so that you only retain the details you want. Basic cropping can be done in FrontPage itself as follows: Select View Toolbars Pictures to bring up the Pictures toolbar. Click on the Crop button ( ) to display the cropping box on the graphic. Drag the cropping box handles to size the box and click on the Crop button again to crop the graphic. It is highly recommended that you use an image editing application like Adobe Photoshop to resize and crop images, and then insert the modified images into your web page.
- 16 -
Basic Web Design
Hyperlinks
A web pages power lies in its ability to link text and/or an image to another document or section of a document. Text hyperlinks are underlined and highlighted in blue to make it easy for the reader to pick them out while scanning the page. Select the text or graphic that will function as the hyperlink, then select Insert Hyperlink from the Menu Bar or use the shortcut Ctrl+K. You can also click on the Hyperlink button on the Tool Bar. In the Insert Hyperlink dialog box, click on the Hyperlink button at the top of the dialog box.
Hyperlink button
A Text Help will appear indicating that this button will Browse to the web. You will then be taken to the default page in your browser. In the Address Area, type in the address of the web page or site you would like to link to and tap the Enter key to go to that page. When you see the web site, click on the Front Page button at the bottom of your screen in the task bar.
This will take you back to FrontPage 2002 and the Insert Hyperlink dialog box.
- 17 -
Basic Web Design
Click on the Browsed Pages button and select your site from the list of choices that appears. The Address area at the bottom of the menu screen will also indicate the web address to which you browsed. Click on OK to complete placing the hyperlink.
Web address
Bookmark Links Bookmark links are used to link to a section within the same document. It is particularly useful with long documents that would require the user to scroll up and down. There are two steps to adding a bookmark link: Create the bookmark. Create a link to the bookmark. To create a bookmark, position the cursor by the first word of section you want to bookmark and select Insert Bookmark from the Menu Bar. Give the bookmark a suitably descriptive name and select OK. In the Normal Page View, a bookmark will show with a dashed underline. the
To create the hyperlink to the bookmark, select the text to be hyperlinked, then select Insert Hyperlink from the Menu Bar or use the shortcut Ctrl+K. You can also click on the Hyperlink button on the Tool Bar.
This will open up the Insert Hyperlink dialog box. Click on the Bookmark button and select the appropriate bookmark. The hyperlinked text will now appear as blue underlined on the page. To test your link, hold down the Ctrl key and click on the link.
IMS Technology Training - 18 -
Basic Web Design
Email Links Email links are used so that users can email webmasters or other contact individuals their comments and feedback. To create an email link, select Insert Hyperlink from the Menu Bar or use the shortcut Ctrl+K. You can also click on the Hyperlink button on the Tool Bar. In the Insert Hyperlink dialog box, click on Email Address and fill out the email address.
Saving Your Web Page

Its wise to save your web page periodically so that you dont lose your work. You can save your file by selecting the Save option from the File menu (File Save), or by clicking the Save button. When you save a web page for the first time, the Save As dialog box will appear. The Save In box displays the location name. Click on the arrow on the right hand corner of the box to display more locations. When the Save In box displays the desired location, type in the file name in the File name box and click the Save button. FrontPage will automatically add the extension .htm to the file name.
Location name
More locations
File name
FrontPage will try to use your title for the name of the web page. If it is more than 8 characters long, some older computer systems and servers might not work well with the name. Also, the name should not have an apostrophe () as this is a reserved Java character and could cause later problems as well. IMS Technology Training - 19 2003 Trinity University
Basic Web Design
Tables
A table on a web document is essentially a grid of rows and columns. Each intersection of a row and a column creates a cell. Tables make it easier to design page layouts because they allow you to display information in a formatted tabular form. Table properties for each web page should be determined and sketched out as early as possible. Several small tables will load faster than one long table. Sometimes, depending on the content, you may need to tables within tables. These are called nested tables. Creating a Table To create a table on your page, place the cursor at the point you want the table to be and select Table Insert Table from the Menu Bar. This will display the Insert Table dialog box shown below. Use the Rows and Columns options to determine the number of rows and columns in the table. (This is where having a sketch becomes handy.) Select OK once you have entered your options.
You can create a basic table using the Table button ( ) on the Tool Bar. Click the button and drag the mouse over the grid, highlighting the cells that should appear on the table. When the table size has been selected, click the mouse button again.
- 20 -
Basic Web Design
Table Properties Specify width sets the width of the table by a distinct number of pixels or by a percentage of the screen width. Use the In pixels option, when you want the table to be a certain width and avoid horizontal size changes. Alignment refers to the table's position on the page as in centered, left, right, or justified. The default is usually left alignment. Cell padding is the number of pixels between the text and the cell walls. Cell spacing is the number of pixels between each table cell. Specify height is usually not necessary to set since the height depends on the number of rows in the table. Border size indicates the thickness of the border around each cell. Tables used for content layout should have a border of 0 to hide the borders. Tables that are used to display tabular information can have their borders set to higher values. E.g. Table with no border The same table with a border of 5 pixels
Border color defines the color used for the border. For example, the border color in the table above is grey. Background color adds a colored background to the table cells. E.g.
Use background picture add a background image to the table. E.g.
- 21 -
Basic Web Design
Working with Cells To add content (text or graphic) to a cell, click in the cell to place the cursor there, then type to enter text or insert the graphic. Within a cell, the formatting options are the same as within the document. Therefore, pressing the Enter key will create a paragraph break, while pressing Shift+Enter will create a line break. Pressing the Down Arrow () key will move the cursor out of the table and to a new paragraph below.
Cell Properties
To modify cells properties, first select the cells to be changed, then select Tables Properties Cell from the Menu Bar. You can also right-click within a cell and select Cell Properties from the menu. Either option will bring up the Cell Properties dialog box.
Horizontal alignment defines the position of the content within the cell. The default is the Left side of the table cell. You can change this to Centered, Right, or Justified. Vertical alignment refers to the position of the contents relative to the top and bottom of the cell. The default is at the Middle.
- 22 -
Basic Web Design
Specify width and specify height defines the width and height of the cells. Percentages refer to the portion of the table, not the entire screen. The Header cell option will automatically bold and center the cell content. Border color changes the color of the cell border as demonstrated below.
Background color changes the cell's background color.
Background image adds a graphic to the background of each cell.
Spanning Cells
Sometimes, you may need to create a cell that spans rows or columns; a cell that carries the page banner or title for example. In such situations, you will need to span that cell across columns or rows as the case may be. Using the table used in the above examples, it would work like this: Insert a new row at the top of the table. Type the text of the row that will be spanned across the columns into the first cell.
Highlight both cells in the top row and select Table Merge Cells from the Menu Bar. You can also right-click and select it from the popup menu.
- 23 -
Basic Web Design
Inserting Rows and Columns To add rows or columns to a table, place a cursor in the cell that the new row or column will be adjacent to. Then select Table Insert Rows or Columns from the Menu Bar to open the Insert Rows or Columns dialog box. To insert a row, select Rows and enter the Number of Rows. Then select the Location of the new row by selecting Above selection or Below selection from where you placed the cursor in step 1. Click Columns to insert a new column and the choices will change. Enter the Number of columns and the Location left or right of the selected point. Click OK. You can also insert a row or column right-clicking in the cell the new row or column will be adjacent to. Select Insert Row or Insert Column from the popup menu.
Creating a Website
In this section, you will learn to create a small web site using FrontPage. It is recommended that you familiarize yourself with the basic concepts of web design, and learn to use FrontPage to create and edit web pages prior to creating a web site. In the chapter Introduction to FrontPage, you learnt to hyperlink to other web pages and sites. When creating a web site, FrontPage automatically creates the links to the other pages in your web site. Launch FrontPage by clicking on the shortcut on your desktop (see image on the right). If no icon is available on the desktop, click on the Start button in the lower left corner of the screen, then Programs, and then on Microsoft FrontPage. Take a few moments to review what the screen should look like and re-familiarize yourself with the various buttons on the top and left side of the screen. If you still have your single web page on the screen, select File Close in the Menu Bar. If you are prompted to save your changes, select Yes.
- 24 -
Basic Web Design
To create a new web site, select File New Page or Web in the Menu Bar. This will bring up a Task Pane on the right hand side of your screen.
The Task Pane is Office 2002s alternative to the dialog box. It is a Web-style command area that you can dock along the right or left edge of your screen or float anywhere on the screen.
Source: Microsoft Office SP Inside Out
Place your cursor over the small yellow folder with an earth on it or on the text Empty Web. You will notice that the words Empty Web are now underlined in blue. You will also notice that your cursor will change to the small pointy hand hyperlink icon. Click on Empty Web to display the Web Site Templates dialog box. To create a space for your web site, you need to do the following in the dialog box: First (1) , make sure that the upper left icon One Page Web is highlighted. If it is not, click on it. Second (2), in the white area under Options, specify the location of your new web by typing in c:\webtest.
If your Web Site Templates dialog box should looks like the one on the following page, click OK. This will take you back to the FrontPage 2002 main screen. It may appear that nothing has happened. However, if you look at the upper left corner of your screen you will see that the web site c:\webtest has been created (se image below).
Since this is a web site, and the Views Bar on the left of the screen is set on Page, you will have to select another button in the Views Bar to be able to see and work with your web site.
- 25 -
Basic Web Design
1. 2.
To visually see/confirm that your web site has been created by FrontPage, click on View in the Menu Bar. In the drop-down menu, click on Folder List .
The Folder List will now appear on the left side of your screen to the right of the Views Bar. The Folder List indicates that your new web site is located on the C: drive in the Folder webtest. Notice also that two new folders have been created by FrontPage: private and images. FrontPage has also created your initial home page called index.htm
- 26 -
Basic Web Design
To create our web site well want to be in the Navigation View, so click on the Navigation button on the View Bar. When this process is complete you will see your initial Home Page of the web site in the center of the screen.
Take a few minutes to look at all of the stuff on the screen. Take note of the words below the Home Page (index.htm), theyre important.
Saving Your Web Site

If you havent already, youll notice that the Save option under File in the Menu Bar is grayed out, as is the Save button in the Tool Bar. One of the neat things in FrontPage 2002 is that it automatically saves your web site as you make a change. To see this, select File Exit in the Menu Bar. FrontPage will close. Now open FrontPage as you did at the beginning of this tutorial. Your new web site will shows up just as you had left it. This is a new feature of FrontPage 2002.
Working on Your Web Site

To begin working on your web site pages, select File Open and click on the small triangle to the right of the Look in area. Navigate to your saved Web (webtest), select index.htm (or the file you want to work on), and click on Open. Then switch to the Navigation View so you can get started creating your web site If your Folder List view area is still visible, simply click on the small X in the upper right corner of the Folder List view area.
You will still have to save individual web page changes as you work on them.
- 27 -
Basic Web Design
Creating Web Site Structure You should be in Navigation View at this point. First, click on the Home or Index Page in the middle of the screen. Prior to your click, it will appear as a light yellow icon, when you click on it, it will turn blue. This indicates to FrontPage which page you desire to work on. In this case you will add, and automatically link, three additional pages below your main home page. If you accidentally double-clicked on the Home/Index Page icon, FrontPage will assume you want to edit the page and load it in the Editor. Simply click on the Navigation button in the View Bar and youll be back where you want to be. Again, make sure the Home Page icon is blue. To add the first page under your home page, click on the New Page button (looks like a sheet of paper) in the upper left corner of the screen. As soon as you click, your screen will change to reflect that you have just created New Page 1 below your Home Page (index.htm). This is where FrontPage really does its work. When you add a new page, FrontPage automatically hyperlinks it to the corresponding page. Your screen should now look like the one at the right. Add two more pages under your Home Page (index.htm). Each time, click on the Home Page (index.htm) to turn it blue, and then click on the New Page button. Your screen should now look like the one below:.
Next, well add two pages under New Page 3. The process is similar to what we just did. First, click on New Page 3, to turn it blue, and then click on the New Page button. Do this twice. Your web site should now look like the one below.
- 28 -
Basic Web Design
If you make a mistake as you are adding new pages, simply click-on the erroneous new page and tap the Delete key. Or right click on the page and select Delete from the popup menu. You can also click on the Undo button.
You now have the beginning of a small web site. Before you can look at it however, you need to do a very important task. You need to tell FrontPage what you want to see on your web pages in your web site. To do this, select Format Shared Borders in the Menu Bar. This will bring up the Shared Borders dialog box. Shared borders allow you to display content that is identical to all pages without having to repeat the process for each page. If you add or edit an element in a shared border in one page, it will affect the content in all the pages that display that shared border. Typically, a top shared border will contain a page banner and navigation bar, the left another navigation bar, and the bottom, information such as email, copyright notice, etc.
To make the titles and the links of each web page visible, select All Pages. Also check the squares to the left of Top and Include navigation buttons, and Left, and Include navigation buttons. Your Shared Borders screen should look exactly like the one on the following page. When it does, select OK.
- 29 -
Basic Web Design
To see what your site looks like at this point, double click on the Home Page (index.htm) icon. You can also right-click on the Home Page (index.htm) icon and select Open from the popup menu. This will load the Home Page in the Editor (Page View). Take a few moments to look at the top of the page in the Editor (Page View). It should look like the view below.
Observe that the title to the Home Page (index.htm) appears at the top of the page in the Editor (Page View) just as it did when FrontPage created it. Also, New Page 1, 2 and 3 on the left side of the page are links to the pages that you created one level below the Home Page (index..htm). As indicated earlier, you will return to the Navigation View and re-name these pages so that they make more sense to your web site. Dont worry about the dashed lines, these are simply
- 30 -
Basic Web Design
there to assist you later in the Page View. They will disappear when you view your web site in a browser. Viewing Your Website in a Browser To see what the site would look like on the Web, in Page View, click the browser button in the Tool Bar. Or select File Preview in Browser from the Menu Bar. When you choose Preview in Browser, FrontPage will ask you to choose a browser available on your computer. Internet Explorer is the default browser at Trinity University. However, when possible, it is recommended that you view the site in other browsers such as Netscape and AOL to ensure compatibility.
on
Your initial view of your Home Page (index.htm) should look like the image below.
In the browser, your blank website will respond like any other website. When you move the cursor over the titles New Page 1, New Page 2, and New Page 3, you will notice that the pointing hand appears, indicating a hyperlink. Click on New Page 1, it should look like the image below.
The text buttons on the line below the title New Page 1 are hyperlinks back to the Home Page and to pages 2 and 3. When you created your Shared Borders, you set it up so that
- 31 -
Basic Web Design
links to pages that are above or on the same level as the current page (New Page 1 in this example) show below the page title. It does not matter if there are more than three pages above, or on the same level as the current page, all the pages will show with their names. These are part of the automatic hyperlinks that FrontPage creates. Now click on New Page 3 in the browser. Your browser should now look like the image below.
Pages Below New Page 3
Pages Above and at the Same Level as New Page 3
Remember the two new pages you created below New Page 3? These now show up as New Page 4 and New Page 5 on the left side of the page. The line below New Page 3 now contains the text links for pages above or on the same navigation level as New Page 3. Creating Titles for Website Pages To get an idea of how page titles are displayed in FrontPage, click on the Folders button in the View Bar. You should now see the following screen:
The Name column on the left side of the screen displays the file names (index.htm, new_page_1, etc.) for each page. The Title column displays the actual page names as they appear on the Navigation View boxes (index.htm, New Page 1, etc.). When you rename the page titles, the new titles will appear in the Title column. To rename a file name (new_page_1.htm in this example), right-click on the file name in the Folder View in the View Bar, select Rename, and type in the desired file name.
IMS Technology Training - 32 in this book Remember the file name conventions-outlined earlier2003 Trinity University when renaming files.
Basic Web Design
Return to the Navigation View in the View Bar to give your pages new titles. Click once on the Home Page (index.htm) box to turn it blue. Then click on the title (index.htm) and wait a few moments till the title is highlighted in blue. Your screen should look like the image on the right. In a Windows program this indicates that you can edit the text. You can start typing immediately to replace index.htm, or you can delete the text and then type in the new page title. For now, type in First Names Home Page where First Names is your first name, and tap the Enter key when you are finished. Select View Refresh on the Menu Bar to update your changes. You will see the page title is now the one you entered. Place the following titles for the other pages in your website in a similar manner. Once you get the hang of this, you can change the titles to anything you desire, add more pages, etc. New Page 1: About Me New Page 2: About My Family New Page 3: My Hobbies New Page 4: Type-in the name of a hobby New Page 5: Type-in the name of another hobby When you are done, select View Refresh on the Menu Bar to update your changes Now return to the Folder view by clicking on the Folder button on the View Bar. Your Title column, should look similar to this one.
To see what your updated site looks like in the browser, first return to the Navigation view by clicking on the Navigation button in the View Bar.
- 33 -
Basic Web Design
Double-click on your home page icon (ABCs Home Page) or rightclick on the home page icon and select Open from the popup menu. This will load the page in the Page View. In Page View, click on the browser button in the Tool Bar, or select File Preview in Browser in the Menu Bar. If nothing seems to happen, or it looks like your browser hasnt opened, look at the Task Bar at the bottom of your screen. Your browser button should be flashing blue. If it is, click on it to bring up your web site. Click around your web site. You will notice that FrontPage has automatically changed all of your pages and buttons. Themes For a website to be effective, it needs to have consistent design. FrontPage allows you to create this easily by using themes, or consistent formatting features that are applied to all the elements of a page. Applying the same theme to all the pages gives the entire website a consistent look. (You can change them page by page later if you so desire). If you are not there already, return to FrontPage by clicking on the FrontPage button in the Task Bar at the bottom of the screen. It does not matter which view (Page, Navigation, etc.) you are in when you return to FrontPage. Themes affect the following web page characteristics: Background color or image. Text colors and fonts used with paragraph styles (Normal and Heading 1 to Heading 6). Text hyperlink colors. Images used for bullets in bulleted lists. Images used for horizontal rules. Text color and font, and images used in page banners and navigation bars. Table border colors.
Source: Microsoft Office XP Inside Out
- 34 -
Basic Web Design
Select Format Theme in the Menu Bar. This will take you to the Themes dialog box.. When it first appears, you will notice that the display area is blank. this is because at this point, you have not yet selected a theme to view. Select a theme from the choices in the left side of the dialog box. When you do, your selection will be highlighted in blue and the theme will appear in the sample screen. Go through the choices to pick one you like.
When you have decided on a theme, make sure you select one of the options under Apply Theme to:. If you select All pages, the theme will be applied to all the pages in your website. If you choose Selected page(s), FrontPage will apply the theme to only those pages.
Remember the consistency rule while making your choice! Click OK when you are ready.
- 35 -
Basic Web Design
This will bring up the following message screen: It
indicates that all of your formatting will be changed to the theme you selected. Click Yes. To see if your theme has been applied to the website, click on the Navigation button in the Views Bar. When you see your website organization chart, double-click on your home page at the top of the chart. As before, this will take you to the Page view and your home page. You will notice that the theme you chose has been applied to this page. You are now ready to save your website and view it in a web browser. To save your pages, select File Save All in the Menu Bar. When you are in the Page view, youll need to save your changes to each page just like you did when creating a single web page. You can save each page individually, or all of them at the same time with the Save All option. Dont forget to save frequently as you are editing your individual web pages.
You are now ready to view your updated website in the browser. Click on the Preview in Browser button, or select File Preview in Browser in the Menu Bar to open your website in the browser. Browse around to see how everything works. Once you have created a website, you can make changes to it at any time by selecting File Open Web in the Menu Bar. Make sure that you are in the Folder or Navigation view in the Views Bar when you do this.
- 36 -
Basic Web Design
Publishing Websites For people to see it on the Web, you will need to publish your website. In other words, you need to copy it to a specified location on a Web server. Trinitys web server is indicated by Web on TUCC-Web (W:):. You can access it by clicking on the My Computer icon on the desktop, or by right-clicking the Start button and selecting Explore from the popup menu. As you can see, there are two parts to the Web server. The trinity folder is used to allocate web space to campus departments so they can publish departmental websites. The users folder is the personal web space allocated to faculty and staff to publish nondepartmental websites. This space is available on request. To publish your website, select File Publish Web from the Menu Bar. This will display the Publish Destination dialog box as shown below.
In the Enter publish destination box, type the full URL (address) of the location you want to publish to as indicated in the picture. Dont use the Browse button to navigate to the W: drive! You need to enter the complete URL. You will now be prompted to enter your username and password as shown below. When typing in your username, make sure you use the following format: trinity\username. Once you connect, you will see the Publish Web dialog box displayed on the following page.
- 37 -
Basic Web Design
local view
remote view
The top part of the dialog box indicates the location you are publishing from and the one you are publishing to. Use the Change button to change the publishing location if you need to. The middle area of the dialog box is divided into two parts: The local view is on the left. The remote view is on the right. If you are publishing for the first time, simply click on the Publish button to copy your files to the specified web location. If your website has subwebs (websites within websites), make sure you have checked off on the Include subwebs option. In fact, it is a good policy to check this off always before publishing. If you are publishing a modified/edited website, you can opt to publish only the changed pages by clicking on the Options button in the Publish web dialog box.
- 38 -
Basic Web Design
Once the publish is complete, you will see the following dialog box. Select Click here to view your published web site to view your web site on the Web.
Congratulations! You have successfully created your first website.
Bibliography & General Resources

The material in this manual was adapted from the following books, documents, and online resources: Presley, Bruce, Beth Brown, and Elaine Malfas. A Guide to Web Authoring Using FrontPage 2000. Pennington: Lawrenceville Press, 2001. Halverson, Michael and Michael J. Young. Microsoft Office XP Inside Out. Redmond: Microsoft Press, 2001. Murray, Tom. Creating a Web Page and Web Site. Lynchburg College, 2002. Krug, Steve. Dont Make Me Think. Indianapolis: New Riders Publishing, 2000. Krug, Steve. Dont Make Me Think. Indianapolis: New Riders Publishing, 2000. FrontPage 2000 Tutorial. Florida Gulf Coast University. 14 May 2003 <http://www.fgcu.edu/support/office2000/frontpage/> A Beginners Guide to HTML, NCSA, 14 May 2003 <http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html> Web Design & Architecture. Educational Technology Center. University at Buffalo. <http://www.etc.buffalo.edu/workshops/html/design/web_design_arch_print.html>
General Resources
Webmonkey (http://www.webmonkey.com) About.com Guide to Web Design (http://webdesign.about.com/mbody.htm) Web Developers Virtual Library (http://wdvl.internet.com/)
- 39 -

Basic Web Design

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Basic Web Design

Transféré par

Droits d'auteur :

Formats disponibles

Table of Contents

2003 Trinity University All Rights Reserved

Basic Web Design

Basic Web Design

Developing a Web Site

Source: Dont Make Me Think, Steve Krug

Basic Web Design

Designing Navigation Bars

Source: Dont Make Me Think, Steve Krug

IMS Technology Training

2003 Trinity University

Basic Web Design

Breadcrumb Trail You are here indicator

IMS Technology Training

2003 Trinity University

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design

2003 Trinity University

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design

IMS Technology Training

Basic Web Design

Creating a New Web Page

Source: Microsoft Office XP Inside Out

IMS Technology Training

2003 Trinity University

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design

Working with Text

on the toolbar or the Format Font option in the Menu Bar.

IMS Technology Training

2003 Trinity University

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design

2003 Trinity University

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design

2003 Trinity University

Basic Web Design

Saving Your Web Page

Basic Web Design

IMS Technology Training

2003 Trinity University

Basic Web Design