CIS 250 Advanced Computer Applications Web Publishing

University of South Alabama - CIS 2502 Web Page Development Web Page – hypertext document you see on the web Web site – a group of related web pages HTML – language used to build web pages Controls web page appearance Web browser software translates HTML messages and creates text, images, and plays sound based on those commands Sounds, graphics, and animations are separate files referenced by the web page

University of South Alabama - CIS 2503 HTML HTML tag – provides filenames, locations of files, and instruction to browser. “ ” symbols are used to mark the tag Speed of display of web page depends on speed of modem, amount of traffic on network (Internet) and how many graphics and sound files displayed on web page

University of South Alabama - CIS 2504 Planning Your Web Site Begin with an outline on paper Test on several different browsers – some features may not be displayed the same on all IE Netscape What does your server support? FrontPage extensions (support for feedback pages, hit counts, etc.)

University of South Alabama - CIS 2505 Common HTML commands “ ” characters mark begin and end of tag “/” indicates feature is being turned off In every web doc: begin/end of HTML cmds begin/end of intro portion name of page to appear in title bar Not all commands require a closing tag

University of South Alabama - CIS 2506 Basic Web Design Pointers Keep it simple – simple design, no background picture or simple pattern (watermark). Light backgrounds with dark text are easier to view. Be consistent – common “look and feel” from one page to another. Similar fonts and formats in related docs for continuity View source code (HTML) of other sites you like to incorporate into your pages.

University of South Alabama - CIS 2507 Developing your Web Site First, develop a general outline of what you want your site to look like. What is the site about? Should be a collection of related pages – some common overall theme or focus. What is your target audience? You want the viewer to “visit” longer. Remember – a large number of graphics can take a long time to load.

University of South Alabama - CIS 2508 Organizing Your Site A site map visually organizes how your site will be navigated. Also, think about organizing file and directory structures (e.g. all photos/images into one folder). Home Page About Me My FamilyMy Dog LinksPhotos Pictures Resume

University of South Alabama - CIS 2509 Design Stage Add text and images just as you do in other applications such as MS Word. Pages are saved in HTML format Give the page a meaningful name Home page should usually be index.html (may be home.html; depending on host provider)

University of South Alabama - CIS Posting Your Site Upload to host provider Usually via File Transfer Protocol (FTP) Depends on provider You’re still not done…

University of South Alabama - CIS FrontPage 2002 Many of the same screen elements as MS Word and other Office applications Title bars, menu bars, standard toolbars Additional screen elements Page title Views bar (page, folders, reports, navigation…) Working area

University of South Alabama - CIS Views Page View – used when creating, editing and formatting the content of your pages Folders View – manage/manipulate files related to your site Reports View – generate reports relating to your site Navigation View – control/view structure of site Hyperlinks View – map of hyperlinks included in site Tasks – tasks associated with creating and maintaining site

University of South Alabama - CIS Creating your Web Site Template or blank web Can modify any template to custom needs FrontPage creates site folders and default pages for you (home page is index.html) In order to link pages easily, all must be part of a site (i.e. create site first, then pages) Some components will not work unless a site is created first.

University of South Alabama - CIS Templates Pre-designed sites which contain common pages for specific types of web sites May select empty web Common templates: corporate, customer support, personal, project, discussion, team, etc

University of South Alabama - CIS Creating Web Pages Each page should have a main focus/purpose Add text just as in Word and other MS apps Type directly into doc, cut and paste, or import from another file Add clip art and photos to add interest Tools: spell checker, find and replace

University of South Alabama - CIS Formatting Web Pages Use themes to add a pre-designed layout with default colors, font specifications, banners, etc. Apply to selected pages or to entire site Link bars – hyperlinks to other web pages in site User-defined or controlled by FP navigation structure Add pictures – same as in Word and other apps Can resize, change position Graphics lines – separate sections of page and group pieces of information Saving embedded objects – saves images to images folder

University of South Alabama - CIS Adding Links Types of hyperlinks Internal hyperlink – link to other pages within your web site; allows visitor to navigate your site Bookmark – internal hyperlink to a spot on the same page used to redirect the viewer Two step process (create bookmark then hyperlink) External hyperlink – link to another site on the web (external to yours) Mail to: links – link used to evoke default client

University of South Alabama - CIS Other components Marquee – scrolling area of text or animated message, usually used to welcome visitors to your site Time/date stamp – automatically log when page was last updated Included Content – displays content of a referenced document or file Other – search engines, hit counters, applets, plug-ins, etc.

University of South Alabama - CIS Previewing, Printing, and Publishing Preview or open in browser Print from Normal view Publishing prepares pages and files for posting to Web Floppy disk or to web server

University of South Alabama - CIS How to make an annoying web site Use very small fonts Make one word many different colors Overuse italics and boldface Misspell words Use too many graphics Use large graphics Use annoying background colors

University of South Alabama - CIS Annoying web site pointers (cont) Use background pictures that are not transparent and place text on top Include broken links and/or too many links Overuse animated gifs Overuse bullets Include annoying MIDI files (music)

University of South Alabama - CIS Pointers for good web page design Create an outline of your site. All pages should be related with a common look and theme. Keep your site focused; each page should have one distinct theme; related themes should be linked from other pages. Look at other web pages for ideas. Know which tools are supported by your web host. Know your target audience.

CIS 250 Advanced Computer Applications Web Publishing