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 ,[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Web Page

Terms used on the Web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],protocol server name path

Terms used on the Web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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 ,[object Object],[object Object],[object Object],[object Object],[object Object]

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. ,[object Object]

Hierarchical Structure of Web Site

Web Page Development ,[object Object],[object Object],[object Object]

Writing HTML Code ,[object Object],[object Object],[object Object],[object Object],<html> <head> <title> My First Web Page </title> </head <body> Hello World </body> </html>

Writing HTML Code ,[object Object]

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 ,[object Object],[object Object],[object Object]

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 ,[object Object],[object Object],[object Object],[object Object]

Create a New Web Site Using a Template ,[object Object],[object Object],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 ,[object Object],[object Object]

Create a New Web Site Using a Template ,[object Object],[object Object],[object Object],[object Object],[object Object]

Create a New Web Site Using a Template

Create a New Web Site Using a Wizard ,[object Object],[object Object],[object Object],[object Object]

Create a New Web Site Using a Wizard

Create a New Web Site Using a Wizard ,[object Object],[object Object],[object Object]

Creating a New Web Page ,[object Object],[object Object],OR

Creating a New Web Page ,[object Object],[object Object],[object Object]

Creating a New Web Page ,[object Object],[object Object]

[object Object],[object Object],[object Object],Creating a New Web Page

Creating a New Web Page Example: Tom Jute’s Website ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Hands On Exercise - Creating Your Own Website (plan before beginning)

Inserting Pictures or Images ,[object Object],[object Object],[object Object],[object Object],[object Object]

Formatting Pictures or Images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Changing the Title of a Web Page ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Inserting Hyperlinks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],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 ,[object Object]

[object Object],[object Object],[object Object],[object Object],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 ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Additional Features ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

TID Chapter 8 Web Page Development

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie TID Chapter 8 Web Page Development

Ähnlich wie TID Chapter 8 Web Page Development (20)

Mehr von WanBK Leo

Mehr von WanBK Leo (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

TID Chapter 8 Web Page Development