Web Technologies Website Development Trade & Industrial Education Copyright © Texas Education Agency, 2013. All rights reserved. Trade & Industrial Education

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 Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Gathering Information When meeting with the client, you should complete a needs assessment. 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. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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? The storyboard should give the designer an idea as to how to structure the site. The user should be able to locate his/her information within 3 clicks. The scoreboard will help the designer determine if this is possible. The number of links on each page should be limited. If there are too many links on a single page, the design should be reconfigured. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Sample Storyboard Trade & Industrial Education Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Consistency – Also point out that consistency helps unify all the pages so they look like a single site. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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 Navigation – Should be easily seen and should be very clear as to where each link takes the visitor. Balance – The content should be arranged on the page so that one side does not appear to “outweigh” another side. Images generally weigh more then text with regards to balance. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Have students open the web design software and follow along with the following steps. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Web Design Sample Work Area Screen Layout A. Document Tabs: Allow you to easily work with, and switch between, multiple documents. B. Menu Bar: Provides access to the most common menu items. C. Workspace Bar: Allows you to select between various workspace layouts. D. Documents Views: Buttons allowing you to switch between different views. E. Panel Groups: Provides quick access to files, properties, and the site profiles. F. Document Workspace: This is the current document you are working on. G. Property Inspector: Gives quick access to the formatting of content. Is split between HTML and markup. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Web Design Work Area FTP Toolbar Manages the uploading and downloading of files. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Your Web Design software will ask about the type of document to open. Have students open the Blank Page – HTML document. Click Create Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Make sure you are in Design View. There should be a design view choice available in your web design software. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Editing Page Properties Click on the Page Properties button on the Properties panel at the bottom of the screen. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Students should set the Page font to Arial. They should also select a dark background color of their choice and set the text color to white. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Formatting Text For basic formatting, select the HTML button. We set the selected text to a Heading 1. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Formatting Text The text has been formatted to a Heading Level 1 Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Creating a Table The Table window will appear. Settings: Rows – 2 Columns – 2 Table width – 500 Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Creating Tables The table structure should be displayed below the heading. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Have students add the text from their notes page into the corresponding cells in the first row of the table they created. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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 Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Inserting Images Place your cursor into the bottom left cell of the table. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Inserting Images From the Insert menu, select Image. Select the EngineImage.jpeg from your Student Files folder. Click OK. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Inserting Images From the Image Tag Accessibility Attributes Enter Difference Engine into the Alternate text field. Click OK. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Inserting Images Follow the same procedures to insert the Engine image into the bottom right cell. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Creating Links Locate the Insert panel on the right. Select the Hyperlink button. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. The link has been set to http://www.xyz.net To link to another file, students can click the folder icon to select the file to link to. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Change Link Colors Select the Links category. Link color and style properties can be modified here. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software Aligning Objects The following alignments can be applied to most objects: Left Right Center Justify (text only) Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

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. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education

Using Web Design Software The title should then be centered on the page. Students can also center the link. In order to center the table, the center would need to be applied to the body tag. Copyright © Texas Education Agency, 2013. All rights reserved. IT: Web Technologies – Website Development Trade & Industrial Education