Starting+with+Web+Designing

toc = Introduction = Before beginning this project students need to download the attatched files: The aim of this project is for you to learn how to design, plan, research and create a website. The theme of your website is: Your website should: • Be suitable for the intended audience • Have relevant and interesting content • Have a consistent look and feel • Show features of good design • Use hyperlinks to navigate from page to page • Contain images
 * Topic 2 WEB SITE DESIGN**
 * Topic 3 ||  || Web Site Design using Dreamweaver ||   ||   ||
 * Task 1 ||  || Website Evaluation ||   || [[file:Evaluating Internet Sites.doc]] ||
 * Homework Task 4 ||  || Website Planning Sheet ||   || [[file:Website planning Sheet.pdf]] ||
 * Homework Task 12 ||  || Word Search ||   || [[file:Wordsearch.pdf]] ||
 * Image ||  || World Wide Web ||   || [|www.gif] ||

= Task 1 = Before you create your own web pages, you need to consider what makes an effective website.Open the document called Evaluating Internet Sites.doc Look at the following two websites • [|www.andertoons.com] or [|www.tbshumorstudy.com] • [|www.cartoonnetwork.com] Assess these websites and answer the questions in the document. From your research, list 6 key points that describe a well designed website. Print out the finished document and make sure that you put your name in the header or footer. Complete the following quizzes and test your knowledge about the internet and the world wide web []
 * Extension Task**

= Task 2 = Open a new Word document and save it, calling it ‘Designing Websites for Different Audiences’. Find a website aimed at an adult audience and one aimed at teenagers. Try to identify the techniques they have used to appeal to each different audience. Create a table in your Word document (see below) and record the different points that you have identified. Print out the finished document and make sure that you put your name in the footer. = **Homework Task 1** = Website Evaluation, download the work sheet and complete for homework.

= **Task 3** = Using Notepad to create a HTML webpage. Follow the instructions step by step. Open **Notepad** (Programs > Accessories) (for Macintosh users - use **Simple Text**) or **Text Edit** in the applications folder) File name: index.htm Note … the first page in a website is always called index.htm Save as type: All Files (change from Text Documents) Favorite Pages
 * Save the file straight away as:**
 * A basic page** **...(Do not type the words that are shown in bold)**
 * Save the file //& Look at the results in the web browser//**
 * What shows up on the page?

Changing text styles Favorite Pages
 * Save the file //& Look at the results in the web browser//**
 * How has the text changed?

Favorite Pages YouTube Facebook Google
 * Splitting lines**
 * Save the file //& Look at the results in the web browser//**

Favorite Pages YouTube Facebook Google
 * Adding Hyperlinks**
 * Save the file //& Look at the results in the web browser//**
 * What colour are the links?

Information on Search Engines Search Engines YouTube Facebook Google
 * Adding a title to the page**
 * Save the file //& Look at the results in the web browser//**
 * What colour are the links?

//**Make a note of the file size of the document “index.html” …………………… (Right mouse click over the file and look in Properties)**//

Other colours include: FF0000 = Red EEEE00 = Yellow 00FF00 = Green 800080 = Purple FFFFFF = White 000000 = Black || For some great info and cool tips and tricks go to: [|www.lissaexplains.com] || 
 * < ?????? is the colour as a number. Each colour has a code.
 * Set background colour** (Note the spelling of colour … **color**)


 * Set text colour**

 
 * Italic text**


 * New paragraph**

< p align=?>
 * New paragraph aligned to left, right or center** (this aligns the text to itself … not the page)

 change to size 6 font (you can choose any size between 1 and 7)  Create a bulleted list (this tag must be put in front of each item in the list) Horizontal line
 * Some more common HTML tags**

<img src="www.gif"> This tag would insert a picture with the filename www.gif The picture you want to enter must be in the same directory (folder) as your web page.
 * To Insert a Picture**

//**Make a note of the file size of the document “index.html” ……………………**//

= Task 4 = Type the following:** Favorite Pages YouTube Facebook Google Highlight ‘//**Favorite Pages**//’ and make it into a //Heading// (from the text formatting tools) Highlight ‘//YouTube//’ and from the Insert menu select //Hyperlink// Type in the web page name for the site http://www.youtube.com Repeat for the other two sites [|http://www.facebook.com] http://www.google.com
 * Use a word processor to create a web pages. Using Word open a new document

//For users of the new Office 2007, Click on the yellow button on the top left of the page to save it//. //Select "**Other Formats**"// //and use the **file type** Web Page *htm, *html (It will automatically open up as an interactive page)//

Save as Favorite Pages.htm and select the file type as Web Page *htm, *html (It will automatically open up as an interactive page) Open your web browser and open Favorite Pages.htm //**Make a note of the file size of the document “Favorite Pages.htm” …………………… (Look in Properties)**//
 * Compare and make notes about making these two similar basic web pages, using HTML code and a word processor
 * Now return to your Word file “Search Engines.htm” and from the View menu select “HTML Source”
 * Compare this HTML code with the code you wrote using Note Pad
 * What do you notice?

//**Think about the technical issues that affect electronic communication.**//

= Homework Task 2 = This task is to be completed for homework. Write a document entitled ‘Is the Internet more useful than traditional printed material?’ Consider different methods of publishing material e.g. Points to think about: • How up to date is the information? • How accurate is the information? • How many people can access the information at a given time? • Do you need any special equipment? • Are there any potential dangers with this resource? Add your name, class and the title ‘Homework Task 2’ and the date in the footer

= Notes & Info = Hypertext Markup language … the code used to write web pages Uniform Resource Location (or Locator) … the address of a web page When designing web pages … Everything is measured in **pixels** (the dots that make up a screen picture) The first page must always be called **index.html** Use **.jpg files** for photographs, **.png files** if you want a transparent background for a picture or button and **.gif** if you want an animated picture (can also have a transparent background but only limited colours) When colouring images in other software e.g. Xara, Photoshop or Flash, use web safe colours, **hexadecimal** colours Use tables to lay out the contents of a web page Make sure text stands out clearly against the background of the page Do not use too many flashing animated gifs
 * HTML**
 * Tag** …e.g. … an HTML instruction code
 * URL**
 * //Never//** use capital letters in any file names and use _ (underscore) instead of spaces
 * Optimise** pictures before putting them on web pages … i.e. make them the right size (in pixels) and the file as small as possible to make sure they load quickly before you insert them into your website.

• Design • Ease of use • Copywriting • Interactivity • Use of technology • Innovation • Content
 * Golden rules when designing a website…**

= Assessment = It is important for all ICT assignments to understand the assessment rubric, which is attached to each booklet and there is a guide for each project outlining which areas you will be assessed on. Read through them carefully.

= Evaluation = //Here is an example of the evaluation used for the Website Design Project:// Using the table below open your website onto the computer and invite four people to review it using PIM's You can copy this into your blog or open the attached word document then copy that into your Google Site [|Web Site Evaluation.doc] Once completed copy onto your blog page.
 * Peer Evaluation**
 * **Name** || **Positive** || **Minus** || **Interesting** ||

= **Self Evaluation** =
 * Have I planned and created pages for my website?
 * Have I added appropriate text and images to my website?
 * Have I planned and created hyperlinks to navigate through my web page?
 * Have I evaluated my pages to make sure they were suitable for a wide audience?
 * I can describe the steps I have worked through to create my web pages and suggest how they can be improved?

Once again copy the statements into your Google Site and complete for homework