Kuis

1. Jelaskan pengertian internet dari segi teknis, pengetahuan dan secara umum!

2. Apa yang dimaksud dengan : browsing browser email chatting3. Mengapa Internet Explorer merupakan browser yang

paling banyak digunakan ?4. Tuliskan URL/alamat situs universitas Negeri Gorontalo5. Apakah perbedaan mendasar antara email dan

chatting. Jangan menuliskan pengertian masing-masing, tuliskan perbedaannya saja.

Microsoft® Office FrontPage® 2003 Training

Membuat Website Dengan FrontPage 2003

Materi Kuliah

• Overview: Membangun sebuah website

• Lesson 1: Bagaimana merencanakan isi

• Lesson 2: Tentang Situs Web dan Server Web

• Lesson 3: Tentang Situs Web FrontPage

• Lesson 4: Bagaimana membuat Situs Web FrontPage

• Lesson 5: Pengaturan situs dari berbagai aspek

• Lesson 6: Bagaimana membuat halaman web

So you want to create a Web site. That's great — a Web site can be a powerful and efficient way to communicate with people.

Overview: Create a Web site with FrontPage

This course will teach you how to create a Web site using FrontPage 2003. It will also teach you things you should know before creating one.

Tujuan Perkuliahan

• Mahasiswa mampu memahami konsep dasar seperti situs web, server web dan publikasi.

• Mahasiswa mampu memahami situs web FrontPage dan manfaatnya.

• Mahasiswa mampu memahami dua jenis Situs Web FrontPage: disk-based and server-based.

• Mahasiswa mampu membuat Situs Web.

• Mahasiswa mampu membuat halaman-halaman Web untuk sebuah situs, layout, teks, gambar dan lainnya.

• Mahasiswa mampu mengatur Situs Web site dari berbagai aspek.

Lesson 1

Merencanakan Isi Website

Bagaimana Merencanakan Isi

Saat merencanakan sebuah website, hal utama yang harus didahulukan adalah menentutkan tujuan.

Desain situs disamping ini memiliki tujuan untuk menghasilkan penjualan produk secara online dengan target penjualan $500,000.

Setelah melihat desain situs disamping ini, apakah anda setuju tujuan yang ingin dicapai sesuai dengan desainnya?

Tips dalam menentukan tujuan

• Pastikan dulu siapa yang anda inginkan untuk membuka situs anda.

• Pastikan tujuannya itu spesifik dan jelas.

• Buatlah tujuannya dengan sederhana, paling banyak satu kalimat saja.

Sketsa struktur situs

Begitu tujuannya telah ditetapkan, buatlah sketsa struktur/peta situs dengan pensil atau pulpen.

Atau gunakan program pembuat diagram seperti Microsoft® Visio® untuk menggambar halamankotak-kotak dan panah sebagai link. Ingatlah selalu tujuan situs saat sedang membuat sketsa ini.

Sketsa layout dasar

Setelah membuat sketsa peta situs, sekarang saatnya membuat sketsa layout dasar yang akan dipakai di setiap halaman.

Anda bisa mulai mendesain layout halaman dengan FrontPage, tetapi sebaiknya didesain dulu pada selembar kertas. Pensil dan kertas lebih mudah di ubah.

Yang Perlu Diperhatikan :

Beberapa hal yang perlu diperhatikan saat membuat layout :

• Apakah setiap halaman memiliki header dan footer yang sama?

• Apakah situs ini akan memiliki metode navigasi yang konsisten?

• Apakah situs ini bersifat interaktif atau statis?

Sketsa layout dasar

Dengan sketsa anda sebagai model, gunakan FrontPage untuk mendesain halaman-halaman web dalam HTML. Anda bisa menggunakan tabel sebagai untuk membuat struktur atau layout halaman.

Begitu layoutnya sudah jadi, anda bisa segera mengisinya. Sebgai contoh anda bisa menambahkan teks, hyperlink, gambar, dan tombol-tombol interaktif

Test 1, question 1

It is beneficial to sketch a map of your Web site before you create it because: (Pick one answer.)

1. It is easier to change a site on paper than it is to change it after it has been built.

2. It helps to improve your drawing skills every now and then.

3. Sketching out a map can make it easy to find a page when you need to start designing it.

Test 1, question 1: Answer

It is easier to change a site on paper than it is to change it after it has been built

Erasing boxes and arrows is a lot easier than changing or deleting pages that are already built.

Test 1, question 2

Which of the following is an example of a good goal for a Web site? (Pick one answer.)1. "To create a site that lets customers order products,

lets employees access internal and confidential documents, and lets vendors submit orders."

2. "To present our product catalog online, thereby saving $10,000 a month in printing and shipping costs."

3. "The bottom line is that this Web site should make my boss and coworkers happy."

Test 1, question 2: Answer

"To present our product catalog online, thereby saving $10,000 a month in printing and shipping costs.“

Yes. This goal is specific, and it is also quantifiable.

Lesson 2

Tentang Situs Web dan Server Web

Tentang Situs Web dan Server Web

Sebuah situs web adalah sekumpulan halaman-halaman HTML dan gambar-gamabar yang saling terhubung dengan hiperlink.

Situs web juga dapat mengandung dokumen-dokumen word, multimedia, scripts, dan databases—berbagai tipe file.

Web servers, defined

A Web site cannot be seen by others unless it is published to a Web server.

A Web server runs software that "serves" HTML pages and associated files when requested by a client, such as a Web browser.

Where to find a Web server

Where do you find a Web server? That depends on how widely available you want your site to be:

• For the World Wide Web, find a hosting company.

• For a company’s Intranet, see the IT department, your manager, or the nearest computer guru.

More information about Web servers

When looking for a hosting company, cost, reliability, storage space, customer service, and security are good things to compare.

One additional thing to look for is whether or not the hosting company supports FrontPage Server Extensions from Microsoft or Microsoft SharePoint® Services.

How to put your site on a server

To put your site on a Web server, you publish it. Publishing generally means copying all of the files to a remote location on a server.

In most cases, the remote location is either an HTTP path or an FTP path. The path you use depends on what technologies your server supports.

To find out which one your server supports, contact your hosting company, or your IT department.

Web server details

Once you find a Web server and determine the remote location for your site, there are other important things to know before you create your Web site:

• URL

• The correct file name for your home page

• User name and password

• Server restrictions

Suggestions for practice

1. If you want your site on the World Wide Web, search for a hosting company using your favorite search engine. Or, go to the Locate a Web Presence Provider site.

2. If you want your site on your company's intranet, contact your IT department, your manager, or the nearest computer guru.

3. Once you've found a server for your site, make sure to get the URL, publishing destination, user name, password, and the correct file name of the home page. It's also important to know if there's a file size limit.

Test 2, question 1

Other people will be able to see your Web site on the World Wide Web if: (Pick one answer.)1. You do nothing else but create your site on

your own hard drive.

2. It is available on a Web server.

3. The site is interesting to look at.

Test 2, question 1: Answer

It is available on a Web server.

You got it. A Web server has special server software that will make your pages and files available on the Web.

Test 2, question 2

If you need to set up a Web site on an intranet, you should: (Pick one answer.)

1. Pay a hosting company to host your site inside your network.

2. Pay a hosting company to host your site outside of your network

3. Ask someone in the IT department.

Test 2, question 2: Answer

Ask someone in the IT department.

Yes, that's right. The people who maintain your company's network, typically called the IT department, are the right people to contact. Other potential contacts could be your manager, or the nearest computer guru.

Lesson 3

About FrontPage Web sites

About FrontPage Web sites

FrontPage is a Web site design tool. But it’s also a Web site management tool. You can use it to:• Add, rename, delete, or move

around files (without doing it in Microsoft® Windows® Explorer).

• Fix problems using special reports, like the broken hyperlinks report.

• Publish a Web site using FrontPage.

(Continued on next slide)

About FrontPage Web sites, cont’d.

The important thing to remember is that these management features are not available when opening and working on single HTML files. They are only available when you open and work on a FrontPage Web site.

What is a FrontPage Web site?

What is a FrontPage Web site?

A FrontPage Web site is a site created in FrontPage. It contains Web pages, graphics, documents, multimedia—almost any kind of file you want.

A FrontPage Web site also contains hidden folders and files that support FrontPage-specific functionality. These hidden items are the FrontPage metadata for your site.

When you open a FrontPage Web site, the Web Site tab appears at the top.

About FrontPage metadata

FrontPage metadata is information about your FrontPage Web site that makes managing the site possible.

This data is used by FrontPage to do all of the great management features we spoke of earlier (creating and moving files, running reports, publishing, and so on).

Two kinds of FrontPage Web sites

There are two kinds of FrontPage Web sites:

• disk-based sites • server-based sites

Disk-based Web sites

A disk-based Web site is a site you create on your local hard drive.

After you design and work on the site, you can later publish it to a remote location like a Web server.

Server-based Web sites

A server-based Web site is a site you create and work with directly on a Web server.

As soon as you save your changes, they will be seen immediately on the Web.

Note To use a server-based site, your FrontPage Web site must be on a server running FrontPage Server Extensions or SharePoint Services.

Test 3, question 1

What is one of the major advantages of using a disk-based Web site? (Pick one answer.)

1. You can test features like FrontPage hit counters if your site is disk-based.

2. Web sites that are disk-based are often more eye-catching.

3. You can edit and test a disk-based site before other people see it on the World Wide Web.

Test 3, question 1: Answer

You can edit and test a disk-based site before other people see it on the World Wide Web.

Yes, that's it. A disk-based Web site is stored on your local computer. Since it is stored locally, you can test most of the site functionality before it is available to the Web.

Test 3, question 2

A FrontPage Web site: (Pick one answer.)

1. Consists solely of HTML files and pictures.

2. Is a site created in FrontPage that contains FrontPage metadata.

3. Is a site created in any other product besides Microsoft FrontPage.

Test 3, question 2: Answer

Is a site created in FrontPage that contains FrontPage metadata.

Yes, that's it. The FrontPage metadata is not visible while you are working in FrontPage, but it helps FrontPage manage your site.

Lesson 4

How to create a FrontPage Web site

How to create a FrontPage Web site

So far you’ve learned how to plan your content, where to find a Web server, and the differences between disk-based and server-based sites.

Now it's time to dive in and actually create a FrontPage Web site.

New task pane

The place to create a new FrontPage Web site is on the New Page or Web Site task pane. This task pane offers two ways to create a site:

• Click the One page Web site link.

• Click the More Web site templates link.

Specify a location

If you choose to create a site with a template, you can choose the template you want on the left side of the Web Site Templates dialog box.

(Continued on next slide.)

Specify a location, cont’d.

Then, do one of two things:

• To create a disk-based site, specify a location on your computer. For example: C:\My Documents\My Web Sites\MyWebSite.

• To create a server-based site, specify a location on a Web server that is running FrontPage Server Extensions or SharePoint Services. For example: http://MyServer/MyWebSite.

Convert a Web site

If you made a site using another program, you can convert it to a FrontPage Web site.

To convert a Web site made in another program, click Open Site on the File menu. After you specify the folder you want to convert, FrontPage will ask you if you want to add information to that folder.

Suggestions for practice

1. Create a disk-based Web site using a template.

2. If you have access to a server running FrontPage Server Extensions or SharePoint Services, create a server-based site.

Online practice (requires FrontPage 2003)

Test 4, question 1

If you want to create a server-based site, which of the following is required? (Pick one answer.)

1. A Web server running FrontPage Server Extensions or SharePoint Services.

2. A Web server that is running the FrontPage program.

3. A Web server running Microsoft Office.

Test 4, question 1: Answer

A Web server running FrontPage Server Extensions or SharePoint Services.

Exactly. If a Web server is running one of these technologies, you can create a server-based Web site

Test 4, question 2

If you need to create a disk-based site, which of the following would be the correct path to specify? (Pick one answer.)

1. http://MyServer/MyWebSite

2. http://MyServer/MyWebSite/MySubSite

3. C:\My Documents\My Web Sites\MyWebSite

Test 4, question 2: Answer

Is a site created in FrontPage that contains FrontPage metadata.

Yes, that's it. The FrontPage metadata is not visible while you are working in FrontPage, but it helps FrontPage manage your site

Lesson 4

Manage a Web site using different views

Manage a Web site using different views

Now that you know how to create a FrontPage Web site, you should know about the two kinds of views you can use to manage and design the site:

• Web site views

• Page views

Folders view

When you open a site and click the Web Site tab, the Web site view buttons are displayed at the bottom.

In this illustration, the Folders view is selected. This view lets you see the files and folders that make up your FrontPage Web site, much like Windows® Explorer.

Remote Web site view

The Remote Web site view is the place to go when you need to publish your Web site.

The local version of the site will appear on the left.

The remote site will appear on the right.

Reports view

Another powerful view is the Reports view. It contains many different diagnostic reports that you can run against your site.

Three of the most helpful troubleshooting reports are:

• Unlinked files report

• Slow pages report

• Broken hyperlinks report

Reports view, cont’d.

When you open a page or create a new one, you are working in one of the Page views: Design, Split, Code, and Preview.

When a page is open, these views are accessed by buttons at the bottom, as shown here.

Split view

The Split view splits the view in half. The top half displays the HTML code for the page, and the bottom half shows the page as it looks in the Design view.

Advantages:

• Design accuracy

• Flexibility

• Education

Code view

The Code view displays the HTML code for the page. If you are an experienced Web designer, you might feel more comfortable in this view.

Preview view

Finally, you can preview your page in the Preview view. Preview view lets you see what the page will look like when rendered in a browser. Things like dashed lines for tables won't appear in this view.

Suggestions for practice

1. Open the Web site you created earlier.

2. Click the Web site tab, and then explore the various Site views.

3. Open a page, and then explore the various Site views.

Online practice (requires FrontPage 2003)

Test 5, question 1

Which of the following is not a Page view? (Pick one answer.)

1. Split view

2. Code view

3. Normal view

Test 5, question 1: Answer

Normal view

Correct. Normal view was found in previous versions of FrontPage. And it's a popular view in Microsoft Office Word and PowerPoint. But in the current version of FrontPage, this is not one of the Page views.

Test 5, question 2

What is the primary difference between Web site views and Page views? (Pick one answer.)1. You use Web site views only for running site-wide

reports. You use Page views when you need to work on an individual page.

2. Web site views let you work with the entire site as a whole. Page views are for when you want to work with individual pages.

3. Web site views let you work on a page in your site. But Page views only let you work on specific portions of the page.

Test 5, question 2: Answer

Web site views let you work with the entire site as a whole. Page views are for when you want to work with individual pages.

Correct. That is why the Web site views are available when clicking the Web site tab. And the Page views are available when opening a page.

Lesson 6

How to create a Web page

How to create a Web page

You learned how to navigate through the FrontPage program by using various views. But what about creating and designing Web pages?

This lesson will cover:

• Adding a page layout

• Formatting text

• Inserting hyperlinks and pictures

Add a page layout to the page

The layout of a Web page is the skeletal structure of the page. It lets you arrange and position text and graphics in a grid-like fashion. A popular way to create a layout is to use an HTML table.

The quick and easy way to add a layout is to choose a ready-made layout from the Layout Tables and Cells task pane

Add text and format it

We won't go into too much detail on how to add text to the page.

However, after your text is on the page, you'll want to apply a style to it:

1. First select some text.

2. Then click the Style box.

3. And then select a style in the list to apply it.

Insert hyperlinks

It's easy to add hyperlinks to your pages by using FrontPage. The illustration here shows you how to get started.

1. First you select either some text or a picture.

2. Then you click the Insert menu.

3. And then you click Hyperlink.

Insert pictures

Picture this: a page with no pictures. What? That's no fun. Nowadays, pictures are pretty mandatory in keeping your audience's attention.

To insert a picture that you have on your computer:

• Click the Insert menu, point to Picture, and then click From File.

Preview in a browser

After you're done filling your layout with text, pictures, and hyperlinks, you should always use the Preview in Browser command to make sure that it looks okay in a Web browser.

Suggestions for practice

1. Create a new Web page, and give it a layout.

2. Add images and text to the page.

3. Format text with a style.

4. Insert a hyperlink.

5. Save the page, and preview it in a Web browser.

Online practice (requires FrontPage 2003)

Test 6, question 1

Which of the following can you use to create a layout for a page?

1. Tiled background images, frames, or Cascading Style Sheet Positioning.

2. Tables, frames, or Cascading Style Sheet Positioning.

3. Guides, tables, or frames.

Test 6, question 1: Answer

Tables, frames, or Cascading Style Sheet Positioning.

Correct. You can use any of the these three to create a layout structure for a Web page. You can even use them in combination with each other if you want.

Test 6, question 2

You've got a picture on your computer and you'd like to insert it on a Web page. How should you do this? (Pick one answer.)

1. On the Insert menu, point to Picture, and then click From File.

2. On the Insert menu, point to Picture, and then click New Drawing.

3. On the File menu, click Import. Then select the picture and click Add File to insert it

Test 6, question 2: Answer

On the Insert menu, point to Picture, and then click From File.

Yes, you're right. This is the way to insert a picture. Something handy to note: If the picture is already in your Web site folder, you can drag it onto the page from the Folder List.

Quick Reference Card

For a summary of the tasks covered in this course, view the Quick Reference Card (requires FrontPage 2003 or another Microsoft Office 2003 program).