1 / 36

Web Technologies

Web Technologies. Website Development . Website Planning. Before beginning any web development project, you should c omplete a n eeds assessment c reate a s tory b oard plan the l ayout and style of the site. Gathering Information.

virgil
Download Presentation

Web Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Technologies Website Development

  2. Website Planning • Before beginning any web development project, you should • complete a needs assessment • create a story board • plan the layout and style of the site IT: Web Technologies – Website Development

  3. Gathering Information • When meeting with the client, you should complete a needsassessment. • A written document stating • what is the client’s purpose for the site? • who is the site being designed for / target audience? • what Information should be included on the site? • what are the client’s design preferences? • The needs assessment is the plan of action for developing the site design. IT: Web Technologies – Website Development

  4. Storyboarding • The storyboard is a diagram of the website’s structure. • It should show all required pages of the site. • It should show how each page is related to the others. • You should take the following into consideration: • Is the structure logical? • Can the user find information quickly? • How many links are on each page? IT: Web Technologies – Website Development

  5. Sample Storyboard IT: Web Technologies – Website Development

  6. Layout & Design • Once the site structure has been determined, you can consider the layout and design of the individual pages. • Layout Considerations: • Consistency: Each page should have the same layout and design. • Also includes the pages’ style. • The same design style should be used on each page of the site. IT: Web Technologies – Website Development

  7. Layout & Design • Navigation: The navigation should be in a standard position (top or left side) • Balance: The page should be balanced • Fonts: The selected font should be easy to read, and it generally should be a generic font • Colors: A color scheme should be selected with the client. The color scheme should be applied the same on each page IT: Web Technologies – Website Development

  8. Web Design Software • Web pages are created using HTML, a code for specifying how content should be formatted. • Web pages are interpreted by the web browser. • The web pages can be created using a text editor or a program that can create HTML code. IT: Web Technologies – Website Development

  9. Web Design Sample Work Area IT: Web Technologies – Website Development

  10. Web Design Work Area • FTP Toolbar • Manages the uploading and downloading of files. IT: Web Technologies – Website Development

  11. Using Web Design Software • Creating a New Document • Open a blank document in your web design software. Press CTRL+N or click on the File menu and select New. IT: Web Technologies – Website Development

  12. Using Web Design Software • Create an HTML document from a blank page. There are other • document type choices, but we will be focusing on the HTML • document. IT: Web Technologies – Website Development

  13. Using Web Design Software Make sure you are in Design View. There should be a design view choice available in your web design software. IT: Web Technologies – Website Development

  14. Using Web Design Software • Editing Page Properties • Click on the Page Properties button on the Properties panel at the bottom of the screen. IT: Web Technologies – Website Development

  15. Using Web Design Software • Editing Page Properties • From the Page Properties screen you can edit the default text, link, and background properties of the page. IT: Web Technologies – Website Development

  16. Using Web Design Software • Formatting Text • Default text formatting should be defined on the Page Properties window described in the previous slide. • If you want to format specific sections of text on the page, you should select the text you wish to format with your mouse. IT: Web Technologies – Website Development

  17. Using Web Design Software • Formatting Text • For basic formatting, select the HTML button. • We set the selected text to a Heading 1. IT: Web Technologies – Website Development

  18. Using Web Design Software • Formatting Text • The text has been formatted to a Heading Level 1 IT: Web Technologies – Website Development

  19. Using Web Design Software • Creating a Table • Tables allow you to layout content and display content in a grid structure. • From the Insert menu, select Table. IT: Web Technologies – Website Development

  20. Using Web Design Software • Creating a Table • The Table window will appear. • Settings: • Rows – 2 • Columns – 2 • Table width – 500 IT: Web Technologies – Website Development

  21. Using Web Design Software • Creating Tables • The table structure should be displayed below the heading. IT: Web Technologies – Website Development

  22. Using Web Design Software IT: Web Technologies – Website Development

  23. Using Web Design Software • Inserting an Image • Before you can add the image, you must save the page. • Save the page to your Student Files folder as WebDesignPractice.htm IT: Web Technologies – Website Development

  24. Using Web Design Software • Inserting Images • Place your cursor into the bottom left cell of the table. IT: Web Technologies – Website Development

  25. Using Web Design Software • Inserting Images • From the Insert menu, select Image. • Select the EngineImage.jpeg from your Student Files folder. • Click OK. IT: Web Technologies – Website Development

  26. Using Web Design Software • Inserting Images • From the Image Tag Accessibility Attributes • Enter Difference Engine into the Alternate text field. • Click OK. IT: Web Technologies – Website Development

  27. Using Web Design Software • Inserting Images • The image will be placed where the cursor was located. • When you click on the image, the Properties panel will display the properties for the image. IT: Web Technologies – Website Development

  28. Using Web Design Software • Inserting Images • Follow the same procedures to insert the Engine image into the bottom right cell. IT: Web Technologies – Website Development

  29. Using Web Design Software • Creating Links • The text XYZ Website was added below the table. • Select the text you want to make into a link. IT: Web Technologies – Website Development

  30. Using Web Design Software • Creating Links • Locate the Insert panel on the right. • Select the Hyperlink button. IT: Web Technologies – Website Development

  31. Using Web Design Software • Creating Links • The Hyperlink window will appear. • Text: The text shown on the screen • Link: where you want to go • The remaining fields can be left blank on basic links. IT: Web Technologies – Website Development

  32. Using Web Design Software • Additional Formatting • Changing link colors • Click the Page Properties button on the bottom of the Properties panel at the bottom of the screen. IT: Web Technologies – Website Development

  33. Using Web Design Software • Change Link Colors • Select the Links category. • Link color and style properties can be modified here. IT: Web Technologies – Website Development

  34. Using Web Design Software • Aligning Objects • The following alignments can be applied to most objects: • Left • Right • Center • Justify (text only) IT: Web Technologies – Website Development

  35. Using Web Design Software • We have selected the title to be centered on the screen. You can use the alignment buttons to center the title. IT: Web Technologies – Website Development

  36. Using Web Design Software • The title should then be centered on the page. IT: Web Technologies – Website Development

More Related