C. Cavan VEC C. Cavan VEC Prgramme Mdule fr Web Design leading t Level 4 FETAC Web Design 4N1122 Web Design 4N1122 AMENDED APRIL 2013 1
C. Cavan VEC Intrductin This prgramme mdule may be delivered as a standalne mdule leading t certificatin in a FETAC minr award. It may als be delivered as part f an verall validated prgramme leading t a Level 4 FETAC Certificate. The teacher/tutr shuld familiarise themselves with the infrmatin cntained in C. Cavan VEC s prgramme descriptr fr the relevant validated prgramme prir t delivering this prgramme mdule. The prgramme mdule is structured as fllws: 1. Title f Prgramme Mdule 2. FETAC Cmpnent Title and Cde 3. Duratin in hurs 4. Credit Value f FETAC Cmpnent 5. Status 6. Special Requirements 7. Aim f the Prgramme Mdule 8. Objectives f the Prgramme Mdule 9. Learning Outcmes. Indicative Cntent 11. Assessment a. Assessment Technique(s) b. Mapping f Learning Outcmes t Assessment Technique(s) c. Guidelines fr Assessment Activities 12. Grading 13. Learner Marking Sheet(s), including Assessment Criteria Integrated Delivery and Assessment The teacher/tutr is encuraged t integrate the delivery f cntent where an verlap between cntent f this prgramme mdule and ne r mre ther prgramme mdules is identified.this prgramme mdule will facilitate the learner t develp language, literacy and numeracy skills relevant t the themes and cntent f the mdule. Likewise the teacher/tutr is encuraged t integrate assessment where there is an pprtunity t facilitate a learner t prduce ne piece f assessment evidence which demnstrates the learning utcmes frm mre than ne prgramme mdule. The integratin f the delivery and assessment f level 4 Cmmunicatins and level 4 Mathematics mdules with that f ther level 4 mdules is specifically encuraged. Structured cmmunicatin and teamwrk is encuraged between the teacher/tutr delivering this prgramme mdule and the language, literacy, numeracy and learning supprt teacher/tutr, as apprpriate, t facilitate the learner in cmpleting the prgramme mdule and achieving certificatin in the award. Web Design 4N1122 AMENDED APRIL 2013 2
C. Cavan VEC Indicative Cntent The indicative cntent in Sectin des nt cver all teaching pssibilities. The teacher/tutr is encuraged t be creative in devising and implementing ther appraches, as apprpriate. The use f examples is there t prvide suggestins. The teacher/tutr is free t use ther examples, as apprpriate. The indicative cntent ensures all learning utcmes are addressed but it may nt fllw the same sequence as that in which the learning utcmes are listed in Sectin 9. It is the teacher s/tutr s respnsibility t ensure that all learning utcmes are included in the delivery f this prgramme mdule. Web Design 4N1122 AMENDED APRIL 2013 3
C. Cavan VEC 1. Title f Prgramme Mdule Web Design 2. Cmpnent Name and Cde Web Design 4N1122 3. Duratin in Hurs 0 Hurs 4. Credit Value Credits 5. Status This prgramme mdule may be cmpulsry r ptinal within the cntext f the validated prgramme. 6. Special Requirements Nne 7. Aim f the Prgramme Mdule This prgramme mdule aims t equip the learner with the knwledge, skill and cmpetence t design and cnstruct a basic website. 8. Objectives f the Prgramme Mdule T learn abut cnstructing a basic website, the terminlgy assciated with it, their functins and features. T be able t use a text editr t insert HTML tags, and create a webpage. T develp a webpage / website which has clear presentatin and prper use f clur (RGB) T develp a webpage / website which has easy t use navigatinal features T assist the learner t develp the language, literacy and numeracy skills related t Web Design thrugh the medium f the mdule themes and cntent T enable the learner t take respnsibility fr his/her wn learning. Web Design 4N1122 AMENDED APRIL 2013 4
C. Cavan VEC 9. Learning Outcmes f Level 4 Web Design 4N1122 Learners will be able t: 1. Describe the structure f a webpage 2. Discuss the features f a gd website 3. Design a basic website t a maximum f tw pages 4. Insert basic HTML tags 5. Frmat text t include bld, italics, fnt size, fnt clur 6. Frmat page layut t include centre, backgrund clur and backgrund 7. Apply RGB clur system 8. Create rdered and unrdered lists 9. Insert hyperlinks, and images r graphics. Use a paper based system and a cmputer system t enter and retrieve data 11. Save webpage as HTML file 12. Preview webpage in internet brwser 13. Print finished website. Web Design 4N1122 AMENDED APRIL 2013 5
C. Cavan VEC. Indicative Cntent This sectin prvides suggestins fr prgramme cntent but is nt intended t be prescriptive. The prgramme mdule can be delivered thrugh classrm based learning activities, grup discussins, ne-t-ne tutrials, field trips, case studies, rle play and ther suitable activities, as apprpriate. Indicative Cntent fr Sectin 1 here Sectin 1 : Web Design In rder t achieve the Learning Outcmes fr this prgramme, facilitate the learner t: Understand and demnstrate in their designs, the Basic Structure f a Web Page, including: The Dctype The Dcument Tree pening and clsing dcument elements in tabbed structure e.g. <html> <head> <title>page Title</title> </head> <bdy> </bdy> </html> html - Begins yur HTML dcument. head - Cntains infrmatin abut the page such as: title - which represents the dcument s title, it identifies what this dcument is. The cntent inside the title may be used t prvide a heading that appears in the brwser s title bar. base - URLs fr links r resurces n the page, and target windws in which t pen linked cntent link - refers t a resurce f sme kind, mst ften t a style sheet that prvides instructins abut hw t style the varius elements n the web page meta - prvides additinal infrmatin abut the page; fr example, which character encding the page uses, a summary f the page s cntent, instructins t search engines abut whether r nt t index cntent, and s n Web Design 4N1122 AMENDED APRIL 2013 6
C. Cavan VEC bject - represents a generic, multipurpse cntainer fr a media bject script - used either t embed r refer t an external script style - prvides an area fr defining embedded (page-specific) CSS styles All f the abve elements are ptinal and can appear in any rder within the head. Bdy - This is where the bulk f the page is cntained. Everything that yu can see in the brwser windw is cntained inside this element, including paragraphs, lists, links, images, tables etc. Understand and apply gd design principles t website develpment, including: General Design: Websites must lk presentable with apprpriate use and placing f text, phts, headings, as well as ther graphic elements. A website shuld suit the purpse fr which it is made and the page style, themes, etc shuld remain the same thrughut the website. The rule f the thumb is websites must lad quickly. If the website takes t much time t lad, then it is cunted as a serius bad feature which discurages users frm visiting the website. Cntent: It is imprtant t see t it that the backgrund clur des nt interrupt the readability f the cntent and the sequence f infrmatin is presented in the crrect manner. The fnt, fnt clur and fnt size are friendly t the reader. One f the recent features is, publishing cntent in the center f the page. Web pages that include paragraphs f web cntent in all caps/bld/italic/underlined/all-at-nce are seriusly cnsidered t be a bad feature. Navigatin: Each website has its wn navigatin theme which shuld be reflected thrughut the website. The Navigatin bars and buttns shuld be designed in such a manner that they are visible at first sight and enhance the user s experience f navigating the website. If a website has a lt f cmplicated frames embedded within it, then users will have t unnecessarily keep scrlling twice, thrice r even mre. Web Design 4N1122 AMENDED APRIL 2013 7
C. Cavan VEC Links: Underlined links with a clur different frm the simple text and backgrund clur make it easy fr the user t understand that it is a link. The link must always remain live while at the same time, the links within the backgrund pages must always be visible t the user. Dead links cnstitute a bad design. Graphics: Websites must have graphics with an ALT label and every graphic links shuld have a similar text link. Preferably, it is advisable t use small buttns. Websites must use graphics that lad fast. Large graphic files wuld take a lng time t lad if the user is using a slw Internet cnnectin. Brwser-safe clurs must be used within the graphics as well as backgrunds. T many graphics r animated graphics cunt as a bad feature and shuld be avided. Embed gd design principles and features int website design in rder t enhance a user s experience. Design a basic website t a maximum f tw pages. Create rdered and unrdered lists Insert hyperlinks, and images r graphics Understand the use f basic HTML tags and apply them t their website design fr example: Links Ordinary link: <a href="http://www.example.cm/">link-text ges here</a> Image-link: <a href="http://www.example.cm/"><img src="url" alt="text" /></a> Mailt link: <a href="mailt:webmaster@example.cm">send e-mail</a> A named anchr: <a name="tips">tips Sectin</a> <a href="#tips">jump t the Tips Sectin</a> Heading Elements Unrdered list <h1>largest Heading</h1> <ul> <h2>... </h2> <li>item</li> <h3>... </h3> <li>item</li> <h4>... </h4> </ul> <h5>... </h5> Ordered list Web Design 4N1122 AMENDED APRIL 2013 8
C. Cavan VEC <h6>smallest Heading</h6> <l> Text Elements <li>first item</li> <p>this is a paragraph</p> <li>secnd item</li> <br /> (line break) </l> <hr /> (hrizntal rule) Definitin list <pre> prefrmatted</pre> <dl> <em>this text is emphasized</em> <dt>first term</dt> <strng>this text is strng</strng> <dd>definitin</dd> <cde>cmputer cde</cde> <dt>next term</dt> <b>this text is bld</b> <dd>definitin</dd> <i>this text is italic</i> </dl> Other Elements Tables <!-- This is a cmment --> <table brder="1"> <blckqute> <tr> Text quted frm a surce. <th>tableheader</th> </blckqute> <th>tableheader</th> <address> </tr> Written by??<br /> <tr> <a href="mailt:me@example.cm">email <td>smetext</td> me</a><br /> <td>smetext</td> Address:??<br /> </tr> Phne:?? </table> </address> Frmat text t include bld, italics, fnt size, fnt clur etc. Use the html elements t frmat text fr example: <p> <fnt size="5" face="arial" clr="red"> This paragraph is in Arial, size 5, and in red text clr. </fnt> </p> Frmat page layut t include centre, backgrund clur and backgrund Web Design 4N1122 AMENDED APRIL 2013 9
C. Cavan VEC Use the html elements t frmat the page layut fr example: <bdy backgrund="" bgclr=""><center> <p>hell wrld</p> </center> </bdy> Understand and be able t demnstrate hw t: Save a webpage as HTML file Preview a webpage in internet brwser Print a finished website. Describe what the RGB clur system is and apply the principles t web design Additive Clur System, Red - Green - Blue (RGB) This clur mdel is used in cmputer mnitrs, televisin sets, and theatre. This system applies nly t devices emplying light, such as cmputer mnitrs and televisin sets. Web clurs are clurs used in designing web pages, and the methds fr describing and specifying thse clurs. Hexadecimal clur cdes begin with a hash (#). Clurs may be specified as an RGB triplet in hexadecimal frmat (a hex triplet); they may als be specified accrding t their cmmn English names in sme cases e.g. "red, blue etc.". A hex triplet is a six-digit, three-byte hexadecimal number used in HTML & CSS, and ther cmputing applicatins, t represent clurs. The bytes represent the red, green and blue cmpnents f the clur e.g. #FFFFFF = White. Cmpare the use f paper based systems and cmputer systems t enter and retrieve data, the advantages/disadvantages f each and their applicatin Design a paper based system t stre a set f specified data Design a cmputer based system t stre the same data Web Design 4N1122 AMENDED APRIL 2013
C. Cavan VEC 11. Assessment 11a. Assessment Techniques Prject 0% 11b. Mapping f Learning Outcmes t Assessment Techniques In rder t ensure that the learner is facilitated t demnstrate the achievement f all learning utcmes frm the cmpnent specificatin; each learning utcme is mapped t an assessment technique(s). This mapping shuld nt restrict an assessr frm taking an integrated apprach t assessment. Learning Outcme Assessment Technique 1. Describe the structure f a webpage Prject 2. Discuss the features f a gd website Prject 3. Design a basic website t a maximum f tw pages Prject 4. Insert basic HTML tags Prject 5. Frmat text t include bld, italics, fnt size, fnt clur Prject 6. Frmat page layut t include centre, backgrund clur and backgrund Prject 7. Apply RGB clur system Prject 8. Create rdered and unrdered lists Prject 9. Insert hyperlinks, and images r graphics Prject. Use a paper based system and a cmputer system t enter and retrieve data. Prject 11. Save webpage as HTML file Prject 12. Preview webpage in internet brwser Prject 13. Print finished website. Prject Web Design 4N1122 AMENDED APRIL 2013 11
C. Cavan VEC 11c. Guidelines fr Assessment Activities The assessr is required t devise assessment briefs and marking schemes fr the Prject. In devising the assessment briefs, care shuld be taken t ensure that the learner is given the pprtunity t shw evidence f achievement f ALL the learning utcmes. Assessment briefs may be designed t allw the learner t make use f a wide range f media in presenting assessment evidence, as apprpriate. Quality assured prcedures must be in place t ensure the reliability f learner evidence. Prject 0% The prject will be cmpleted ver a perid f 3 t 6 Weeks Evidence fr this assessment technique may take the frm f written, ral, graphic, audi, visual r digital evidence, r any cmbinatin f these (select as apprpriate). Any audi, vide r digital evidence must be prvided in a suitable frmat. All instructins fr the learner must be clearly utlined in an assessment brief. Using nly a text editr fr example (Ntepad, Textpad); Design a prject brief t create a website fr example (with hbbies and interests) and als t write a reprt. The website shuld include the fllwing: 2 pages with wrking internal links t and frm hme page. Include a clur scheme with a backgrund clur r image. Include external links, ne that includes text and anther fr an image. Include images apprpriate size fr page. Create rdered and unrdered lists. Frmat text t include bld, italics, fnt size, fnt clur. Thumbnail links t larger images if apprpriate. Captins/descriptins if necessary. Include links t related sites. Reprt t include: Describing the structure f their webpage / website. Discuss the features f a gd webpage / website. Print the finished reprt and website. 12. Grading Distinctin: 80% - 0% Merit: 65% - 79% Pass: 50% - 64% Unsuccessful: 0% - 49% At levels 4, 5 and 6 majr and minr awards will be graded. The grade achieved fr the majr award will be determined by the grades achieved in the minr awards. Web Design 4N1122 AMENDED APRIL 2013 12
C. Cavan VEC Web Design 4N1122 Learner Marking Sheet Prject 0% Learner s Name: Learner s PPSN: Assessment Criteria Maximum Mark Learner Mark 2 pages with wrking internal links t and frm hme page included. RGB Clur scheme with a backgrund clur r image included Use f external links, ne that includes text and anther fr an image. Use f images apprpriate size fr page. Ordered and unrdered lists created HTML tags inserted crrectly. Save the webpage as a HTML file Text frmatted t include bld, italics, fnt size, fnt clur. 15 5 5 Reprt shuld include the fllwing: Describing the structure f the webpage / website. Features f gd website discussed. Reprt and website printed. Sub -Ttal 75 5 Sub-Ttal 25 Ttal Mark 0 This is t state that the evidence presented in the attached prtfli is cmplete and is the wrk f the named learner. Assessr s Signature: Date: External Authenticatr s Signature: Date: Web Design 4N1122 AMENDED APRIL 2013 13