Web technologies
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

Web Technologies PowerPoint PPT Presentation


  • 68 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Web technologies

Web Technologies

Website Development


Website planning

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


Gathering information

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


Storyboarding

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


Sample storyboard

Sample Storyboard

IT: Web Technologies – Website Development


Layout design

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


Layout design1

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


Web design software

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


Web design sample work area

Web Design Sample Work Area

IT: Web Technologies – Website Development


Web design work area

Web Design Work Area

  • FTP Toolbar

    • Manages the uploading and downloading of files.

IT: Web Technologies – Website Development


Using web design software

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


Using web design software1

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


Using web design software2

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


Using web design software3

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


Using web design software4

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


Using web design software5

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


Using web design software6

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


Using web design software7

Using Web Design Software

  • Formatting Text

    • The text has been formatted to a Heading Level 1

IT: Web Technologies – Website Development


Using web design software8

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


Using web design software9

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


Using web design software10

Using Web Design Software

  • Creating Tables

    • The table structure should be displayed below the heading.

IT: Web Technologies – Website Development


Using web design software11

Using Web Design Software

IT: Web Technologies – Website Development


Using web design software12

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


Using web design software13

Using Web Design Software

  • Inserting Images

    • Place your cursor into the bottom left cell of the table.

IT: Web Technologies – Website Development


Using web design software14

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


Using web design software15

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


Using web design software16

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


Using web design software17

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


Using web design software18

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


Using web design software19

Using Web Design Software

  • Creating Links

    • Locate the Insert panel on the right.

    • Select the Hyperlink button.

IT: Web Technologies – Website Development


Using web design software20

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


Using web design software21

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


Using web design software22

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


Using web design software23

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


Using web design software24

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


Using web design software25

Using Web Design Software

  • The title should then be centered on the page.

IT: Web Technologies – Website Development


  • Login