Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Module III: Design Principles II United Nations ESCAP Sessions: 7,8, and 9 Naylin Oo Information, Communication and Space Technology Division UNESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module III: Design Principles II United Nations ESCAP Session 7: Frames, Forms, Multimedia Session 8: Using Cascading Style Sheet (CSS) Session 9: Dynamic Pages (JavaScript) Using Web Site Templates Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module III: Design Principles II United Nations ESCAP Session 7: HTML Frames Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Introduction to frames • A frame page is best described as a page that divides the browser’s window into multiple windowpanes (frames). • Frame pages are a special type of HTML page that aid navigation. • Particularly useful for content consisting of lists, categories, and pictures, such as that found in catalogs. • Not compatible with very early versions of web browsers. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Frames Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Frame Template <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD><TITLE>Document Title</TITLE></HEAD> <FRAMESET ...> <!-- FRAME and Nested FRAMESET Entries --> <NOFRAMES> <BODY> <!-- Stuff for non-Frames browsers --> </BODY> </NOFRAMES> </FRAMESET> </HTML> Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Frame Border Frame Border Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Creating a Frames Page (1) Select File >>> New >>> Page from the menu bar and click the Frames Pages tab. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Creating a Frames Page (2) Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Creating a Frames Page (3) Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Creating a Frames Page (4) Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Frame Properties Name Assign a name to each frame for linking purposes. Initial Page Assign the initial HTML source page. Frame size Designate the width and height of the frame in absolute pixels or as a percentage of the screen. Options Check "Resizable in Browser" if the user should be able to click and drag the frame borders to resize them. Make a selection from "Show scroll bars" if scroll bars should be visible in the frame. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Linking Frames Page Default will load the page in the default frame indicated in parentheses. Same Frame will load the new page in the same frame. New Window will open a new browser window. Parent Window will load the page in the current window. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module III: Design Principles II United Nations ESCAP Session 7: HTML Forms Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Introduction to Forms United Nations ESCAP • Forms allow you to receive information from the visitors to your web site. • Forms work with all browsers • Forms are platform independents Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Form Page Wizard (1) Steps File >>> New >>> Page from the menu bar and Click the General tab. Double-click on Form Page Wizard and Click Next on the first explanatory wizard window. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Form Page Wizard (2) Steps The second window will allow you to add the questions that will appear on the form. Click the Add button to insert new questions into the form. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Form Page Wizard (3) Steps Select an input type from the scrolling menu and edit the prompt for the question in the text box below if necessary. Click Next > when finished. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Form Page Wizard (4) Steps Select the input type for the question you entered in the previous window. The contents of this window will vary depending on the type of question that was entered. Click Next > when the selections have been made. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Form Page Wizard (5) Steps The question will now appear in the question listing. Click Add to add more elements to the form. If a question should be changed, highlight the title in the list and click Modify or Remove to delete the question. Reorder the questions using the Move Up and Move Down buttons. Click Next > to proceed to the next step after the questions have been added. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Form Page Wizard (6) Steps Presentation Options - On this window, determine the layout of the form from several options and click Next >. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Form Page Wizard (7) Steps Output Options - Now that the form elements are in place, you need to designate a way to view the results of the form. You will want to save them either as a web page or text file and enter the base name for the file where results will be stored. Click Next > when finished. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Creating a Form manually • Activate the Form toolbar by selecting Insert >>> Form and dragging the menu off the menu bar. • First, click the Form button. A dotted area with Submit and Reset buttons inside will appear. • Click the Form Properties button. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Creating a Form manually (2) Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Creating a Form manually (3) Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Text Box • Text boxes allow the user to enter one line of text. • Click the Text Box button on the form toolbar to add a text box to the form. • Activate the text box and select Format|Properties from the menu bar. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Text Box Validation Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Text Area • Text boxes allow the user to enter multiple lines of text. • Click the Text Area button on the form toolbar to add a text area to the form. • Activate the text area and select Format|Properties from the menu bar. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Check Box • Check boxes allow the user to make multiple selections from a list. • Add check boxes by clicking the button on the form toolbar, enter value, and press ENTER or SHIFT+ENTER after each one. • Select Format >>> Properties to change the checkbox properties. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Radio Button • Radio buttons allow the user to make only a single selection from a list. • Add a list of radio buttons by clicking the button on the form toolbar, enter value, and press ENTER or SHIFT+ENTER after each one. • Select Format >>> Properties to change the radio butto properties. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP • • • • Drop-down Menu Drop-down menu is more suitable if a check box or radio button is too long. The menu will consolidate the choices and take up less vertical space on the page. Add a drop-down menu to the form by clicking its button on the form toolbar. Add values to the menu by double-clicking on the menu. First, name the drop-down menu in the first field. Add choices to the menu by clicking the Add... button. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP Drop-down Menu Properties Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Forms - Example United Nations ESCAP <html> <head> <title>Get Identity</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <p><b>Who are you?</b></p> <form method="post" action=""> <p>Name: <input type="text" name="textfield"> </p> <p>Gender: <input type="radio" name="gender" value="m">Male <input type="radio" name="gender" value="f">Female</p> </form> </body> </html> Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module III: Design Principles II United Nations ESCAP Session 7: HTML and Multimedia Basic Audio and Video Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Multimedia United Nations ESCAP Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films, and more. Multimedia comes in many different formats. On the Internet you will find many of these elements embedded in web pages, and today's web browsers have support for a number of multimedia formats. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan File Extensions and Types United Nations ESCAP File Type Extention/Mime type ====================================================== Plain text: HTML document: GIF image: Acrobat file: AIFF sound file: MP3 QuickTime movie: MPEG movie: .txt .html .gif or .jpg or .png .pdf .aiff .au . wav .mp3 .mov .mpeg or .mpg Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Embedding Audio United Nations ESCAP For Internet Explorer, you can use BGSOUND: <BGSOUND src=" http://www.domain.com//sound.wav "> Netscape doesn’t support BGSOUND, so you need to use the EMBED tag: <EMBED SRC="http://www.domain.com/sound.wav" CONTROLS="playbutton" WIDTH=25 HEIGHT=25 AUTOSTART=false> Use the Embed tag: <EMBED SRC="http://www.domain.com/video.avi" AUTOSTART=false width="300" height="300"> Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module III: Design Principles II United Nations ESCAP Session 7: Using Cascading Style Sheet (CSS) Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Definition of CSS United Nations ESCAP Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages. - WikiPedia Benefits of Using CSS Pages load faster Increased accessibility Pages are easier to maintain and update Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Types of CSS United Nations ESCAP External Internal/Embedded Imported Inline Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan United Nations ESCAP CSS - External Connection made via the LINK tag Use the optional TYPE attribute to specify a media type <head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css”/> </head> Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan CSS - Internal/Embedded United Nations ESCAP Style characteristics are embedded in the HEAD section of the webpage Perhaps best used when a single page requires a unique style sheet <head> <style type=“text/css”> hr { color: navy} body {margin-left: 20px} </style> </head> Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan CSS - Imported United Nations ESCAP Allows for using style sheets from other sources Must be included at the beginning of the style sheet using the @import statement Other CSS rules can be included Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan CSS - Inline United Nations ESCAP Least flexible Requires each element to be tagged if you want them to appear differently Looses the advantage of using CSS <p style=“color: yellow; font-family: verdana”> This is a paragraph </p> Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module III: Design Principles II United Nations ESCAP Session 7: Dynamic Pages Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Dynamic Pages United Nations ESCAP First introduced in 1995 with the creation of JavaScript Multiple technologies of delivering interactive content used Two major categories of technologies: a) Server-side technology b) Client-side technology Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Server-Side United Nations ESCAP Web pages are produced on-the-fly by server-side programs, frequently based on parameters in the URL or from an HTML form. 1) 2) 3) 4) The browser sends an HTTP request. The server retrieves the requested file with the script. The server executes the script or program which typically outputs an HTML web page. The server sends the HTML output to the client's browser. Scripting Languages (PHP, Perl, Coldfusion, etc.) in combination with database. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Client-Side United Nations ESCAP Web pages containing content that can change without the actual HTML code being changed. Client-side dynamic content is generated on the client's computer. JavaScript: client-side scripting language. Flash: an alternative approach to scripting language, prepackages the scripted actions into a new file format. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan JavaScript — Strength United Nations ESCAP Speed: fast, code functions run immediately on the user’s computer Simplicity: relatively simple to learn and implement Versatility: plays nicely with other languages, can be inserted into any web page regardless of the file extension. Server load: reduces the demand on the site server. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module III: Design Principles II United Nations ESCAP Session 7: Using Website Templates Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan What is a Web Site Template? United Nations ESCAP A Web Template is a ready-made website that will allow you to create high-quality websites in a fraction of the time. Why web templates make sense in web design: Fast Speed Reduce Cost In a nutshell: web templates offer a lot of variety in both style and presentation, with all the nitty gritty problems already solved. Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Website Template Sources United Nations ESCAP Included with Web Editor web page editors (FrontPage, Dreamweaver, Net Fusion Objects) come with pre-built templates which you can use or modify. Make your Own Template Need to understand web page layout. Use tables for the layout and CSS for the element formatting Free or Purchased Template Many websites offering good high quality professional templates for free or low cost. need to change are the navigation options and the logo Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan