We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byRachel Fritter
Modified about 1 year ago
Frontpage2000.ppt Page 1 © 2001 Alan B. Weaver – firstname.lastname@example.org FrontPage 2000 taught by: Alan B. Weaver email: email@example.com Web Site Design
Frontpage2000.ppt Page 2 © 2001 Alan B. Weaver – firstname.lastname@example.org FrontPage 2000 Open the program by clicking on the shortcut or opening the program. You get the window shown here. Right now, the program is open, but no site has been set up yet. To open an existing site or create a site, click on File and follow instructions that proceed.
Frontpage2000.ppt Page 3 © 2001 Alan B. Weaver – email@example.com Creating a Web One page web allows you to keep adding pages. There are “wizards or templates” that can be used - remember these are not “originals” - others use them. If you are creating a new site, you need to specify the name of it, and also indicate the “drive” it is located on (C - hard drive). If folder or directory is not already created, it will automatically create it.
Frontpage2000.ppt Page 4 © 2001 Alan B. Weaver – firstname.lastname@example.org Initial Set Up Click here to go to “folder” view. This is the most efficient way of viewing your site, it shows it by folder Note how a blank “new_page_1.htm” is displayed. As soon as a page is open, this blank page disappears.
Frontpage2000.ppt Page 5 © 2001 Alan B. Weaver – email@example.com Folder View The index.htm page is always the “home” page. For example: If someone clicks on www.mynewweb.com, the index page is what will appear. All web pages have unique addresses. To create new folders or pages, click here. Choose “New”, then page or folder. You can also click on “New Page” indicate just below File Naming Files: Do NOT use spaces in folder or file names (you may have problems with Netscape), if you want space, use underscore or hyphen.
Frontpage2000.ppt Page 6 © 2001 Alan B. Weaver – firstname.lastname@example.org Folders - Organizing the Site It is very important to stay organized. What you may think is a simple five page site can easily turn into a site with over 200 files in it and you need to know where things are located! It is a good idea to put each “section” into a separate folder. Note how “subfolders” are utilized, you can have multiple levels of folders To edit an existing page, double click on file name To create a new page, click on File New or press Control + N inside an open web page. Text can be entered in here and page is saved.
Frontpage2000.ppt Page 7 © 2001 Alan B. Weaver – email@example.com File Components of Website Web Pages are.htm or.html extensions. Remember all websites are written in HTML (hypertext mark-up language). FrontPage is a program that allows user to work in a WYSIWYG (what you see is what you get) environment, making it fairly easy for user to work. Images - they can come in many different types, these are the three basics –JPG - this is the most compressed version, has a couple of million colors –GIF - limited to 252 colors, it is used to create buttons or simple images for site –BMP - bit map - takes up a lot of memory, can create images in Paint (this program is found in accessories). Image can be converted into a GIF file when opened in Image Composer (this is part of FrontPage program) For example, if you have a page with 3 pictures and 7 GIFs, this means there are 11 files for this one page. Keep all information that is specific for this page in one folder. If you have pictures/GIFs that are “shared” between pages, keep them in an “images” folder.
Frontpage2000.ppt Page 8 © 2001 Alan B. Weaver – firstname.lastname@example.org Front Page Editor - the right side of the screen Begin typing as if in a word processing program. There are symbols located in this bar which allow you to create fonts, enlarge, change justification, add numbers, bullets, indent. Note: you get red squiggly lines under misspelled words or with incorrect capitalization as shown in example on top line. For editing purposes, this allows you to see the “paragraph” marks and returns. You can widen or narrow down the windows by dragging the “pipes” to the right or the left. There is also an icon (folder list) at the top to hide the folders.
Frontpage2000.ppt Page 9 © 2001 Alan B. Weaver – email@example.com Design Tips Use a sans serif font (like what is shown here) to work with, it shows better on monitor. Keep images small (in memory and size) so that they don’t clutter or overpower the site. It also allows for quicker downloads. Multiple fonts can be used, etc. However, try not to make site look like a ransom note! Remember, less is more! Tables can simplify your life. This is just “trial and error” - some information is indicated on next page. Try not to underline the text on your site, viewers may believe they are links when they aren’t and could become frustrated. Test (which means all links) your site before publishing. There is nothing worse than having links that go to incorrect pages, worse yet to no place at all, resulting in an “error” message!
Frontpage2000.ppt Page 10 © 2001 Alan B. Weaver – firstname.lastname@example.org Tables You can either “draw” or insert a table. Insert table allows you to set up # of rows/columns, alignment, and border size, padding, and spacing. By having zeroes (as shown here), the table will not show up when previewed in browser)
Frontpage2000.ppt Page 11 © 2001 Alan B. Weaver – email@example.com Table Properties By right clicking in the table you can see the “table” properties wherein defaults can be changed for column width, colors applied to borders, etc. Below is indicated how “properties” were changed and result is shown on next page (sorry for black & white image!)
Frontpage2000.ppt Page 12 © 2001 Alan B. Weaver – firstname.lastname@example.org Sample View of Tables As you can see, there are lines in here now and column width has changed. There are three different views in FrontPage - we usually work in Normal, HTML shows the code, Preview shows how it looks in browser
Frontpage2000.ppt Page 13 © 2001 Alan B. Weaver – email@example.com Preview Tab See how no gridlines show in this section. Table gridlines appear here The preview tab shows you what site will look like up on the WWW - in Netscape or Explorer. You can also click on File, Preview to see how it will look. Below shows how long it takes the page to download.
Frontpage2000.ppt Page 14 © 2001 Alan B. Weaver – firstname.lastname@example.org Toolbars Clicking on View allows you to see different toolbars to work with your website.
Frontpage2000.ppt Page 15 © 2001 Alan B. Weaver – email@example.com Saving a New Page (or “save as”) An existing page can be “saved as” a new page. This screen also shows up when saving a new page. Make sure you put it in the correct folder! Again, give the page a title and a distinct name. To give the page a new title, click on the Change button. You can also create a “template” - that is a blank form that can be filled in each time so that you don’t have to recreate or re-input information. Click on the drop down arrow.
Frontpage2000.ppt Page 16 © 2001 Alan B. Weaver – firstname.lastname@example.org Creating a Link from Text You can create links to any location within your site or even to another website. As mentioned, we want to keep the visitors on our site and not have them go shopping at Amazon or looking at the scores from the latest football game! A link can go from text or from an image. –From Text - 1. first select the text and highlight it. 2. Click on Insert, Hyperlink (or press CTRL-K). “Open pages” are indicated at the top, just double click on it to select where the link will go to. If you click once, click the OK button. The result on your page will show text in a default bright blue text with an underscore. This means there is a link. Note: when creating a website, do not underline text for emphasis as the viewer may assume there are links. If you wish to emphasize, boldface or use capital letters.
Frontpage2000.ppt Page 17 © 2001 Alan B. Weaver – email@example.com Creating a link - from an image Once the image is in the document, you can link in two different ways. –You can select the image (when it is selected, there will be little boxes in the corner and follow procedures indicated on previous page). This may result in a blue border showing up. (personally I find it ugly) –You can create a “hot spot”. Click on the box (or oval) on the toolbar and draw it over the entire image. After the hot spot is created, it will prompt you where you want the link to go to. After shape is drawn, this dialogue box appears Creates “hot” spot, this toolbar pops up when an image is selected.
Frontpage2000.ppt Page 18 © 2001 Alan B. Weaver – firstname.lastname@example.org Image Composer A “gif” - this is a little button on a website that has a “hot” spot applied to it so it will link to another page. Double clicking on one of these in FrontPage allows you to create a new image. Only one image can be worked on at a time. (multiple windows do not work) This program allows you to create GIFs. By clicking on the shape box here, you can create your own image. Again, a lot of this program is just “trial and error” i.e. experimentation. When saving the file, make sure it goes into the correct folder!
Frontpage2000.ppt Page 19 © 2001 Alan B. Weaver – email@example.com Working with Image Composer To create a new shape, click here Selects the color for your box, click on “create” when done Allows you to create “text boxes” - note, you can only do one line at a time and hit the space bar at end (otherwise it “truncates” Creates special effects! This image has 4 components - the background box, the box behind home page, the text box, and the oval shape Clicking on here will give you this tool so you can create a shape.
Frontpage2000.ppt Page 20 © 2001 Alan B. Weaver – firstname.lastname@example.org Saving File Make sure you have selected the correct folder! Give it a filename you will remember. When there are “multiple” components (as the previous page shows), you will get this prompt. Click “ok”
Frontpage2000.ppt Page 21 © 2001 Alan B. Weaver – email@example.com Insertion of Image Image can be inserted in two different ways: 1. Dragging the file name into website 2. Clicking on Insert, Picture, From File “GIF” has now been inserted on site. A hot spot can be created and put in here so that this page can link back to homepage! Note: sometimes it is necessary to “refresh” FrontPage Explorer as it will not show the images you have just saved. To refresh, either click on View, Refresh or press F5 key. If there are a lot of images and you wish to remain organized, you may consider a separate folder for separate categories of images, i.e. photos, navigation buttons, etc.
Frontpage2000.ppt Page 22 © 2001 Alan B. Weaver – firstname.lastname@example.org Creating New Pages There are many different types of forms you can create. Make your choice here! For the most part, the “normal page” is selected.
Frontpage2000.ppt Page 23 © 2001 Alan B. Weaver – email@example.com Feedback Forms Comments are included in here and you can change this form to suit your requirements. Right click inside the form section to set properties as to where it will be sent (your email address)
Frontpage2000.ppt Page 24 © 2001 Alan B. Weaver – firstname.lastname@example.org Other Components of Feedback Form Brief summaries are indicated below This allows you to save information up on your WWW site in addition to receiving emails. A good way to have “backup” You can have a “confirmation” page if someone responds to site. A good customer service tool.
Frontpage2000.ppt Page 25 © 2001 Alan B. Weaver – email@example.com Other Components of Feedback Form Allows you to only include certain fields or specific data from the responder. IN this section, you can have the responses from your website sent to specific email addressees. The email can be formatted as required.
Frontpage2000.ppt Page 26 © 2001 Alan B. Weaver – firstname.lastname@example.org Publishing the Site 1. Save and close out all documents in front page editor 2.Make sure you have dialed up to the ISP 3. Collapse all folders (avoids only publishing part of the site) 4. Click on File, Publish 5.Select the correct URL or location. (If you have multiple web sites, be careful as you could end up publishing to incorrect site! Choose box indicated for publish changed pages only. 6.You will be prompted to provide ID and password. There may be prompts to ask if you want to replace pages, say “yes” or “yes to all”
Frontpage2000.ppt Page 27 © 2001 Alan B. Weaver – email@example.com Photos - JPGs It is best to keep the photos as small files - less than 25K if possible. The goal is to get the page to download in 30 seconds or less. Also, 6 or less photos per page is a good guideline. If you’re using thumbnails and click through to “larger” photos of higher quality, you can use two versions, a low-resolution, low DPI (low memory) thumbnail and a larger file with higher resolution and DPI. There are many programs out there to edit and touch up photos. Adobe Photoshop is probably the most powerful program available. It is expensive and complicated. Corel has a very simple package, Adobe also has a simpler, less frills version. There are also some very simple packages available for less than $50. In fact, some programs are included with a scanner. To obtain “digital” images, there are three ways: 1) digital camera (Sony Mavica has low resolution but uses a floppy disk and is very easy to use; 2) scanner (good to have, costs are very reasonable now); 3) having photos developed and returned on disk - Kodak, Mystic, even the local drugstore!
Frontpage2000.ppt Page 28 © 2001 Alan B. Weaver – firstname.lastname@example.org Corel Photo House 1. Crop picture 2. Reduce DPI to 75 - works in most cases (remember this is for the web, not a fancy brochure 3.Reduce size of photo to a “manageable” size - 2” wide is usually sufficient. 4. When saving, “reduce” quality This program is relatively simple to use and quite straightforward. Some quick tips to get photos down to under 25K: There are other choices here so that you can change appearance, improve contrast or brightness. Click on tabs going down or on side.
Frontpage2000.ppt Page 29 © 2001 Alan B. Weaver – email@example.com Microsoft Photo Editor This is another simple program that can be figured out fairly quickly. Again, you can crop, cut, enlarge, and do special effects. It does not have the sophistication of a photo editing program, but is quite useful for simple retouches.
Frontpage2000.ppt Page 30 © 2001 Alan B. Weaver – firstname.lastname@example.org Final Notes A provider that I’ve worked with is pick.net. They’re reasonably small so I’ve gotten some very good customer service from them. However, if you have a problem, don’t blame the messenger! (I don’t get any commissions from them.) Their website is www.pick.net. They will register your domain name as well as provide you with IDs and passwords fairly quickly. Customer service is fairly quick (usually within two hours they will reply with an email). They can also provide a secure server for credit card transactions. If you’re working with FrontPage, make sure you choose the right package! Prices are about $20/month for a site, with discounts for one year pre-paid. Domain name registration can range from $10 to $35 per year. Any further questions - email me! I’ll be happy to answer an occasional question (or two) but please remember that I make my living by creating/designing websites and am not a “help desk.” I can provide one-on-one training as well as consultation if needed (for a fee, of course). With practice, you can learn much of this on your own. Alan Weaver
Frontpage98.ppt Page 1 © 2001 Alan B. Weaver – FrontPage 98 Staples High School taught by: Alan B. Weaver
FrontPage 2002 taught by: Alan B. Weaver
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Creating a Web Page HTML, FrontPage, Word, Composer.
Designing a Classroom Web Site Using NVU Beginning Level.
1 FrontPage 2000 Online Tutorial The following tutorial aims to help you get started with FrontPage 2000 for the creation of basic web pages. The different.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
XP Information Technology Center - KFUPM1 Microsoft Office FrontPage 2003 Creating a Web Site.
WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development.
FrontPage Tutorial Part 2 Creating a Course Web Site.
Downloading and Installing AutoCAD Architecture 2015 This is a 4 step process 1.Register with the Autodesk Student Community 2.Downloading the software.
Downloading and Installing Autodesk Revit 2016 This is a 4 step process 1.Register with the Autodesk Student Community 2.Downloading the software 3.Install.
Downloading and Installing Autodesk Inventor Professional 2015 This is a 4 step process 1.Register with the Autodesk Student Community 2.Downloading the.
Web Design-Lecture3-QN-2003 Web Design Enhancing a Website.
Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
INTRODUCTION TO DREAMWEAVER 8. What we already know… Design basics Contrast Repetition Alignment Repetition HTML.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
11/8/ Word Processing Building a Website Using Microsoft Word Please visit and sign-up the free account using verified.
Microsoft Access 2010 Chapter 10 Administering a Database System.
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
1 Web Technologies Website Development with Dreamweaver.
Internet Publishing Luke E. Reese ANR Education and Communication Systems
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
How To: Add HYPERLINKS and IMAGES with HYPERLINKS to your Outlook Signature. By: Tom Jackson
Creating Integrated Web-based Projects using Microsoft Word.
Adding Content to the Agency Web Site - Part 2. Adding individual web pages for success stories Agency Web Site Adding Content 2, Slide 2Copyright © 2004,
Steps how to design a web page using Microsoft Frontage Steps how to design a web page using Microsoft Frontage Video related to the topic Video related.
@Ms. Masihi. Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator,
Create Your Own Webpage. Fun with images Today we’ll cover –Working with images Including an image on your page Making the image a link Editing images.
To begin you first need to sign up to Weebly by going to or alternatively and we will create an account.
Word and the Writing Process. To create a document 1.On the Start menu, point to Programs, and then click Microsoft Word. A new document opens in Normal.
Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.
XP New Perspectives on Microsoft Office Excel 2003, Second Edition- Tutorial 11 1 Microsoft Office Excel 2003 Tutorial 11 – Importing Data Into Excel.
Office 2003 Post-Advanced Concepts and Techniques M i c r o s o f t Word Project 7 Creating an Online Form.
Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
MICROSOFT WORD GETTING STARTED WITH WORD. CONTENTS 1.STARTING THE PROGRAMSTARTING THE PROGRAM 2.BASIC TEXT EDITINGBASIC TEXT EDITING 3.SAVING A DOCUMENTSAVING.
FrontPage Express By John G. Summerville Ph.D.©, RN.
XP Browser and Basics1. XP Browser and Basics2 Learn about Web browser software and Web pages The Web is a collection of files that reside.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED………. Introduction Introduction Features Features Starting Front Page Starting Front Page Components.
Understanding Web Sites. What is a Web Site A collection of Web pages which you can view on the Internet Contains text, graphics, sound, and video to.
Web Site Development Test 2 Working in DreamWeaver.
How To Make Your Own Web Page: Basic Web Design. Step One: Creating a Home Page Through this PowerPoint, you will learn how to create a webpage using.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 1 1 Microsoft Office FrontPage 2003 Tutorial 1 – Creating a Web Site.
Understanding a Web Web page is a single page containing text and graphics that has been labeled with the appropriate HTML coding for the.
Learning the Basics – Lesson 11 Learning the Basics Lesson 1.
How to use the internet The internet is a wide ranging network that thousands of people use everyday. It is a useful tool in modern society that once one.
© 2017 SlidePlayer.com Inc. All rights reserved.