web technologies
Download
Skip this Video
Download Presentation
Web Technologies

Loading in 2 Seconds...

play fullscreen
1 / 36

Web Technologies - PowerPoint PPT Presentation


  • 95 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Web Technologies' - virgil


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

ad