TID Chapter 8 Web Page Development

WEB PAGE DEVELOPMENT Iife is about the moments you live, not the regret you feel Unanimous

Understanding a Web Web page is a single page containing text and graphics that has been labeled with the appropriate HTML coding for the web. Web site is a collection of linked Web pages containing various content that easily be navigated using a Web browser. It includes a beginning file called a home page. From the home page, you can navigate to all other pages on the site.

A web page can contain any of the following: Text Graphics (gif or jpeg) Audio (.mid or .wav) Interactive multimedia content that requires a plug-in such as Flash, Shockwave or VML applets (subprograms that run inside the page) which often provide motion graphics, interaction, and sound Web Page

Terms used on the Web WWW (World Wide Web) The Web is the part of the Internet that includes all files and documents that are available through servers. The two main parts of the Web are Web clients and servers. Browser Browser is Internet computer programs that allow you to navigate through the Internet. The most common Web browsers are Microsoft Internet Explorer and Netscape Browser (Navigator). URL (Uniform Resource Locator) A URL is a Web site’s network address. If you enter a URL in a browser, you will be taken directly to the Web site. E.g: http://www.uum.edu.my/hea protocol server name path

Terms used on the Web HTTP (Hypertext Transfer Protocol) HTTP is a protocol that is used to transfer and receive files on the internet. Hyperlinks A link to another Web page on your site or another Web site on World Wide Web. HTML (Hypertext Markup Language) HTML is a markup language or a collection of markup tags that define the various components of a WWW document. Web Server a computer on the World Wide Web (connected to the Internet Backbone) that stores HTML documents that can be retrieved via a Web browser.

This is a webpage displayed by Internet Explorer.

Essentials of Good Web Design  Navigation buttons or bars are easy to understand and use.  A large site has an index or site map.  The navigation bar or button give the visitor a clue as to where they are, what page of the site they are currently on.  The hierarchy of information is perfectly clear.  Text is big enough to read, but not too big.  Graphics and backgrounds use safe colors.  Page download quickly.  Consistency from page to page  every web page in the site looks like it belongs to the same site.

Planning a Web Site Provide answers to the following planning questions. What are the goals of the web? What will its content be? How will it be organized? What do you want it to look like?

Hierarchical Structure of Web Site Sketching out a structure before creating a site can save you lots of work later. After you've sketched a map of your site, it's time to start sketching a common layout for each of your pages. Prepare a sketch of your proposed website that shows the relationships between the pages.

Hierarchical Structure of Web Site

Web Page Development Web page can be created in a number of ways: Using a plain text editor such as Notepad (writing HMTL code). Using a WYSIWYG editor (web authoring tool) such as Microsoft FrontPage or Macromedia Dreamweaver.

Writing HTML Code HTML Exercise All you need is a text editor (eg: Notepad) Open Notepad Type the following code into your file and then save as index.html <html> <head> <title> My First Web Page </title> </head <body> Hello World </body> </html>

Writing HTML Code Open browser to view your page

Writing HTML Code (continue..) <html> <head> <title> My First Web Page </title> </head <body> <center><H1>Hello World</h1><br> <a href=http://www.uum.edu.my> Universiti Utara Malaysia</a> </body> </html>

Using FrontPage FrontPage is a great Web editing tool for people with limited knowledge and time for HTML coding. It’s similar to using Microsoft Word and it allows for two different editing modes, Normal and HTML view. As you are bolding text and inserting graphics in Normal view, FP is writing the HTML code for you.

Understanding the FrontPage Screen Page view tabs Web Page windows Web page name Insertion point Views bar

Understanding the FrontPage Screen Description Window Element You can view your page in three different ways: Normal, HTML and Preview. Page View tabs Used to display your Web site in six different views: Page, Folder, Reports, Navigation and Tasks. Views bar The small, blinking line is where your typed text appears in the Web page. Insertion point The name of the Web page you are working on. Web page name This is where you type in text and work on your Web pages. You can have more than one Web page open at a time. Web page window

Understanding the FrontPage Screen Allows you to see the Web page as it would appear in a Web browser. Preview Allows you to edit the Web page directly in HTML code. It is very textual and shows the code that translates the code onto the Internet. HTML Allows you to edit the Web page in WYSIWYG (What You See Is What You Get) mode. Normal Description Page View

Creating Web Pages and Web Sites

Create a New Web Site Using a Template Using the templates and wizards makes it quick and easy to create a Web site. If you know what kind of information you will display in your web site, FrontPage’s Web site templates are a good resource. There are several templates to choose from a fun, personal site, to a more formal, customer support site. The pages and themes within each template change according to its type.

Create a New Web Site Using a Template Click the New Page button arrow. A list of items you can create appears: Page: Creates a single Web page based on the Normal Page template. Web: Creates a new Web Site from a template or wizard.

Create a New Web Site Using a Template Select Web from the list. Click a template to see its description. E.g. Select Personal Web from the Web Sites tab.

Create a New Web Site Using a Template From the Navigation View: Double-click any page to be edited. E.g. Double-click Home Page Change the properties from the Format button or right click the mouse. Replace the template’s example text with your own text.

Create a New Web Site Using a Template

Create a New Web Site Using a Wizard Using a Wizard is similar to using a template, but it does even more to help you create your web site. A wizard asks a series of questions that give information about your organization. The wizard then takes that information and automatically installs it into the new web site. Make sure your have preplanned your web site.

Create a New Web Site Using a Wizard

Create a New Web Site Using a Wizard Click Next to begin answering the wizard’s questions. Answer each question according to your needs and preferences. After Finish, the wizard creates the web site for you with the information you entered.

Creating a New Web Page As with other Microsoft programs, FrontPage automatically opens a blank web page. But if you want to create a new page after that, you can either use OR

Creating a New Web Page A new web page can also created in Navigation view. Click the Navigation button in the Views bar. Double-click the Home Page button to create a home page (named as index.htm).

Creating a New Web Page To add connecting pages to your home page, right click the Home Page button and then click New Page two times to add two pages. The pages appear under the home page. You can rename the pages.

Working with text in MS FrontPage is very similar to working with text in MS Word. Begin creating your Web site by building a home page. This is the “front door” to your Web site and should include a greeting, a short explanation of what the Web site is for, and links to the rest of the Web site. A home page is normally saved as index.htm/html or default.htm Creating a New Web Page

Creating a New Web Page Example: Tom Jute’s Website Your site should have: Personal detail & contact information Format the web page using the Standard and Formatting Toolbar or using the Format Menu Tips: Use table to control your layout Save your work. Title Pictures or images Hyperlink Hands On Exercise - Creating Your Own Website (plan before beginning)

Inserting Pictures or Images There are four sources of pictures for a web: Clip art from any number of sources including the Internet, FrontPage and PhotoDraw. It gives ready made images that can be placed into your work. Scan the existing photographs with a scanner. Capture pictures with a digital camera. Programs like MS PhotoDraw, CorelDraw, Windows Paint or Adobe Photoshop allow you to create your own pictures.

Formatting Pictures or Images Resizing Moving Copying Cropping Adding a Border Aligning an Image with Text Adding a Background Image Creating a Thumbnail Image Adding a Hyperlink to an Image

Changing the Title of a Web Page A Web page’s title is an important part of the page and it introduce the web. It appears at the top of the Browser window (Browser title bar) when the page is open. To change the page Title: File  Properties  Type the title in the Title box OR Right-click on the page and select Page Properties and enter the new title

Inserting Hyperlinks A hyperlink is a link to another Web page on your site or another Web site on World Wide Web. It is a main tool for navigating the WWW. Hyperlinks can take the form of text or graphics, when clicked, gives the browser an address called a URL. The browser then opens the page at that address. Hands on Exercise: Create two other web pages named My_Hobbies and My_Photo_Gallery Create links to the above web pages + a link to another Web site on WWW.

Creating Text Hyperlinks: Type the text that will serve as the hyperlink  select the text  select Insert  select Hyperlink  type the address of the site in the URL box . Creating Graphic Hyperlinks: Insert the picture of clip art to use as the hyperlink  select the graphic  select Insert  select Hyperlink  type the address of the site in the URL box . Inserting Hyperlinks

Your Website Make sure to test your new link! hyperlinks

Understanding How Web Pages are Saved Word saves different pages and pictures in the same, single file. FrontPage saves different pages and pictures in separate files. These related files are usually saved in the same folder.

Displaying a Web Page in a Web Browser it is better to view the web pages in a Web Browser because users are going to view the pages in a browser, not in FrontPage.

To view your web page using the Hyperlink View, make sure to open your web folder with Open Web menu (for the first time). On the File menu, click Open Web , and then do one of the following: To open a disk-based web on your local computer, in the Folder Name box, type the path to the folder containing the web, and then click Open . Or, use the Look In box to navigate to the My Webs folder (or any other folder containing webs). Using the Hyperlinks View

Using the Hyperlinks View To view links of the individual page: click Hyperlinks button and click the page in the Folder List on the standard toolbar. Pages to which the selected page links. A + (plus sign) indicates that the page has additional links.

Using the Navigation View Navigation view is important because it requires you to organize your Web site, and the navigation bar properties depend on the Web site’s navigational structure. Explore the Navigation View: 1. On the Views toolbar, click Navigation. 2. Click Your Home Page page ( index.htm ). 3. Click and hold the my_hobbies page, and then drag it under the index.htm page. Any changes you make in this view effect the pages in Page view. 4. From the Navigation view, you can also double-click a page to see it in Page view.

Publishing Your Web Site After completed the web site, ready to publish the Web so that your web site can be accessed by many people. Publishing the Web means place all the folders and files in the Web onto a Web server. The Web server then serves up your site to visitors on the WWW. A user cannot simply copy his or her files to a server. Two different ways/routes to get your Web onto the server: HTTP (to upload your Web files to the server) FTP (to move the files to the server).

Additional Features Inserting Line Break Inserting Table Inserting Bulleted and Numbered Lists Theme Frame Form

TID Chapter 8 Web Page Development

More Related Content

What's hot (20)

Similar to TID Chapter 8 Web Page Development (20)

More from WanBK Leo (20)

Recently uploaded (20)

TID Chapter 8 Web Page Development