Dylunio Gwefannau yn Nvu Llyfr Gwaith 1

Inspiring | Creative | FunYsbrydoledig | Creadigol | Hwyl

Dylunio Gwefannau yn Nvu

1

Mae’r galw am sgiliau Datblygu Gwefannau ar ei uchaf erioed oherwydd y galw cynyddol ar fusnesau ac unigolion i gael presenoldeb ar-lein. Bydd y ddogfen hon yn arwain defnyddwyr trwy’r broses o ddylunio a datblygu eich gwefan eich hun trwy ddefnyddio meddalwedd Nvu, HTML a CSS.

Wrth ddylunio gwefan mae nifer o elfennau i’w hystyried:

• Pwy yw eich cynulleidfa darged?• Beth yw diben eich gwefan?• Beth yw swyddogaeth y wefan?• Sut y mae’r wefan yn edrych?• Beth yw’r cynnwys?• A oes modd ei defnyddio?

1) Dylunio gwefan

Edrychwch ar rai enghreifftiau o wefannau a dechreuwch greu drafft o sut y dymunwch i’ch gwefan edrych. Sawl tudalen fydd gan eich gwefan? Ar ôl i chi benderfynu ar hyn, dechreuwch ddylunio siart lif ar gyfer cynllun eich gwefan yn debyg i’r isod:

Hafan

Adnoddau Cysylltu â NiGwybodaeth Digwyddiadau

Ar ôl i chi ddylunio eich gwefan yn llwyddiannus, gallwch ddechrau ei chael i weithio, ond yn gyntaf mae’n rhaid i chi ymgyfarwyddo â’r rhyngwyneb Nvu.

Mae Nvu yn WYSIWYG editor sy’n golygu “What you see is what you get”. Ystyr hyn yw y caiff tudalennau eu harddangos wrth i chi ddatblygu gwefan ar Nvu yn debyg iawn i’r ffordd y byddant yn cael eu harddangos ar borwr gwe fel y cynnyrch gorffenedig.

Gellir lawrlwytho Nvu i un ai systemau gweithredu Mac, Windows neu Linux.

2

Dylunio Gwefannau yn Nvu

Wrth ddefnyddio’r feddalwedd Nvu, mae tabiau ar waelod y sgrin sy’n cael eu defnyddio wrth ddatblygu. Y tab cyntaf yw “Normal”, sy’n defnyddio WYSIWYG editor. Wrth i chi deipio ac ychwanegu cynnwys at eich gwefan, mae’n ei throsi’n ddogfen HTML y tu ôl i’r llenni. I weld y cod hwn gallwch glicio ar y tab “Source”. Bydd y tab “HTML Tags” yn dangos dadansoddiad o’r tagiau HTML yn y rhyngwyneb “Normal”, a bydd hyn o gymorth mawr i ddechreuwyr wrth gael eu cyflwyno i HTML. Bydd “Preview” yn dangos sut y bydd y wefan yn ymddangos ar eich porwr, mae hyn yn dueddol o fod yn debyg iawn i’r dewis “Normal”.

2) Cadw

Cliciwch ar “Save As” ar gyfer gwefan newydd a rhowch enw iddi, dewiswch leoliad addas ar eich cyfrifiadur i ffeiliau’r wefan lle hoffech gadw eich tudalen. Sicrhewch y caiff y ffeil ei chadw mewn cyfeiriadur o’r un enw. I greu gwefan newydd, agorwch “Site Manager” a chliciwch ar “Edit Sites”. Ar ôl dewis enw i’r wefan, rhowch yr enw yn y blwch “Site Name”. Yn y rhan “Publishing Server” cliciwch ar “Select Directory” a phorwch i’r ffolder lle mae eich gwefan newydd, dewiswch y wefan a chliciwch ar “Ok”. Yn ôl yn y golofn “Site Manager” â’r pennawd “Name”, dylai’r wefan newydd bellach fod ar y rhestr a gallwch ei hymestyn i ddangos ei chynnwys.

Dylunio Gwefannau yn Nvu

3

3) Delweddau

Gellir creu delweddau y tu allan i’r feddalwedd Nvu a gallwch ei lwytho i fyny nes ymlaen. I ddechrau byddwch yn gweithio ar yr hafan ac yn datblygu’r cynnwys ar ei chyfer. Sawl botwm y mae ei angen ar eich hafan a fydd yn mynd â’r defnyddiwr i bob tudalen a ddangosir yn y siart lif o’r gweithgaredd cyntaf?

Tynnwch lun o ddelweddau eich botwm a’u cadw yn yr un ffeil â’r wefan. Gallwch greu’r delweddau hyn ar Paint/Paint brush neu gallwch hyd yn oed ddefnyddio offer ar-lein creadigol ar gyfer ffontiau deniadol a lliwgar ac arddulliau logo. Edrychwch ar www.cooltext.com i gael syniadau neu ddelweddau botymau i’w llwytho i fyny i’ch gwefan.

Maes o law bydd pob un o’r botymau hyn yn arwain at dudalennau gwahanol ar y wefan e.e. “Cysylltu â Ni” neu “Gwybodaeth”. Ni chaiff y rhain eu defnyddio tan yn ddiweddarach, ond byddant yn cael eu mewnosod i’r wefan. Isod ceir enghreifftiau o ffontiau ac arddulliau logo i’w defnyddio ar eich gwefan o www.cooltext.com:

Byddwch am i’ch gwefan ymddangos yng nghanol y porwr gwe (yn debyg i wefan Technocamps). I gael yr holl wybodaeth yng nghanol y dudalen ac i sicrhau bod yr wybodaeth yn aros yn y man cywir gallwch fewnosod tablau i’r wefan.

4) Tablau

Mewnosodwch dabl a nodwch ei faint. Cliciwch ar “Table” a chliciwch ar “Precisely” i sicrhau bod un rhes ac un golofn wedi’u dewis, gosodwch y maint yn 800 o bicseli. Yna cliciwch ar “Advanced Edit”, ac o dan “Attributes” dewiswch “bgcolor”. Ystyr hyn yw lliw’r cefndir ac o dan “Value” gallwch ddewis lliw fel lliw eich cefndir. Dewiswch “Align” a sicrhewch fod y tabl wedi’i osod yn y canol. Nawr cliciwch ar “Ok” ddwywaith a gwelwch eich tudalen yn dechrau ffurfio ar Nvu.

4

Dylunio Gwefannau yn Nvu

5) Ymestyn tablau

Y tu mewn i’r tabl presennol mewnosodwch dabl, gydag 1 rhes ac 1 golofn (nid oes angen lliw cefndir nac alinio). Yna mewnosodwch dabl arall gydag 1 rhes a faint o golofnau y mae eu hangen i fod yn gyfartal â nifer y tudalennau sydd gennych yn y wefan. Gallwch olygu’r tabl unrhyw bryd trwy dde-glicio ar y tabl a dewis priodweddau’r tabl. Bydd hyn yn alinio eich botymau ar hyd rhes. Neu gallwch ychwanegu eich botymau at restr fertigol ar hyd ochr y dudalen.

6) Pennawd

Rhowch eich pennawd yn y gell ar y brig. Gallwch lawrlwytho delwedd ar gyfer eich pennawd. Cliciwch ar y gell ar y brig, yna cliciwch ar “Image”. Llywiwch i leoliad cywir y ddelwedd rydych am ei llwytho i fyny a’i dewis. Yn “Alternate text” rhowch i mewn rywfaint o destun eglurhaol, e.e. “TopBanner”. Bydd ychwanegu testun amgen yn cyflymu’r broses o lwytho’r wefan wrth i bobl edrych arni, a bydd yn ymddwyn fel dalfan tan i’r ddelwedd lwytho’n llawn.

I olygu ymddangosiad eich tudalen, gallwch glicio ar y tabl a newid y lled trwy symud y pwyntyddion yn y bar uwchben eich gwefan. Gallwch hefyd alinio cynnwys y celloedd i’r chwith, i’r canol neu i’r dde fel eu bod yn gorwedd yn iawn ar eich tudalen.

7) Cynnwys

Ychwanegwch gynnwys at weddill eich tudalen, gallech hyd yn oed ychwanegu baner waelod at y dudalen.

Dylunio Gwefannau yn Nvu

5

Gallwch weld rhagolwg o’ch gwefan trwy ddefnyddio’r tab “Preview” ar waelod y sgrin. Bydd hyn yn dangos sut y bydd yn edrych mewn porwr gwe. Arbrofwch ar eich gwefan, golygwch y cynllun, y lliwiau a’r delweddau tan eich bod yn hoffi’ch hafan neu tan ei bod yn debyg i’r dyluniadau gwreiddiol. Gallwch hefyd fynd i “Format”, yna “Page Colours and Background” a newid gosodiadau’r cefndir yno hefyd.

8) Dyblygiadau

I arbed gorfod mynd trwy’r un broses ar gyfer pob tudalen ar y wefan, gallwch glicio ar “Save As” a chadw’r dudalen hon gynifer o weithiau ag y dymunwch. Gallwch ailenwi pob un yn ôl y tudalennau yr hoffech ar gyfer eich gwefan, e.e. “Gwybodaeth amdanom ni” neu “Cysylltu â Ni”. Sicrhewch fod y rhain i gyd yn cael eu cadw yn yr un lleoliad. Bydd angen i bob tudalen we gael cynnwys a delweddau gwahanol, ar y cam hwn ewch

Peidiwch ag anghofio cadw eich gwaith wrth i

chi fynd!

Ar yr hafan wreiddiol, gallwch droi delweddau eich botymau’n fotymau go iawn trwy eu cysylltu â thudalennau eraill. I wneud hyn ar gyfer pob delwedd ar y bar llywio de-gliciwch ar y ddelwedd a dewiswch “Create link”. Cliciwch ar “Choose File” a dewiswch y ffeil gywir ar gyfer pob delwedd. Peidiwch ag anghofio ailadrodd y broses hon ar gyfer pob botwm ar yr holl dudalennau eraill.

9) Teitlau

Ar gyfer pob tudalen ewch i’r “Source code” trwy ddefnyddio’r tab “Source” a golygu’r llinell “<title>here will be some other text</title>” fel bod gan bob tudalen deitl gwahanol. Ond sut y gallwch nodi i’r defnyddiwr, yn glir, pa dudalen y mae arni?

6

Dylunio Gwefannau yn Nvu

10) Botwm newydd

Ewch yn ôl i www.cooltext.com neu i’r lle y gwnaethoch ddylunio eich botymau gwreiddiol. Mae angen cadw’r rhain ag enwau newydd a’u diwygio ychydig. Ewch yn ôl i’ch hafan ar Nvu a de-gliciwch ar ddelwedd y botwm “Hafan” a dewiswch “Image and link properties”. Newidiwch y ddelwedd i’r botwm newydd rydych wedi’i greu. Gwnewch hyn ar gyfer pob un o’ch tudalennau ac yna edrych ar ragolwg ohonynt trwy ddwbl glicio ar y ffeil ac agor y ffeil ar eich porwr gwe dewisol.

Gallwch weithredu tudalen cysylltu â ni mewn nifer o ffyrdd. Dull cyffredin iawn yw defnyddio ffurflen a all yrru neges yn hytrach na chynnig amrywiaeth o ddulliau o gysylltu. I ddechrau, lluniwch dabl sy’n ymddangos sut y dymunwch i’ch ffurflen ymddangos. Edrychwch ar rai enghreifftiau isod i gael ysbrydoliaeth:

Dylunio Gwefannau yn Nvu

7

11) Ffurflen cysylltu â ni

Cliciwch ar ganol y tabl ac yna cliciwch ar y tab “Source” ar waelod y ffenestr. Ychwanegwch y cod canlynol isod:

<form method =”post” action=”mailto:someone@somewhere.com” enctype=”text/plain”>Name: <input name=”username” type=”text”> <br>Email: <input name=”email” type=”text”> <br><input name=”sex” value=”male” type=”radio”> Male<input name=”sex” value=”female” type=”radio”> Female <br><input name=”vehicle” value=”Bike” type=”checkbox”> I have a bike<input name=”vehicle” value=”Car” type=”checkbox”> I have a car <br>Comments <br> <textarea name=”Comments” rows=”10” wrap=”hard”></textarea><input name=”redirect” value=”index.html” type=”hidden”><input name=”NEXT_URL” value=”index.html” type=”hidden”><br><input value=”Send” type=”Submit”><input value=”Clear” type=”reset”></form>

Gallech hefyd weithredu tudalen “Wedi’i anfon” sy’n dweud wrth y defnyddiwr bod yr wybodaeth wedi’i hanfon, a chysylltwch â’r dudalen newydd hon trwy newid “Index.html”.

Peidiwch â defnyddio eich cyfeiriad e-bost eich hun.

Os ydych wedi bod i weithdy Scratch o’r blaen, gallwch fewnosod yr HTML i leoliad eich gêm Scratch ar wefan Scratch yn weddol rwydd. Gallwch hefyd fewnosod gêm Greenfoot. Agorwch y dudalen rydych am i’ch gêm gael ei llwytho iddi. Cliciwch ar ganol y sgrin ac ychwanegwch ddisgrifiad o’r hyn y mae’r gêm yn ei wneud ac yn bwysicach oll sut i’w defnyddio. Cliciwch ar y tab “Source” ar y gwaelod a lle mae’r cyrchwr yn fflachio mewnosodwch y cod yn y gweithgarwch i ddilyn.

12) Mewnosod gêm

<center><applet code=”greenfoot.export.GreenfootScenarioViewer.class” width=616 height=469 archive=”name.jar” alt=”Your browser understands the &It;APPLET&gt; tag but isn’t running the applet, for some reason.” > Your browser is ignoring the &It;APPLET&gt; tag! </applet></center>

Sicrhewch eich bod yn rhoi eich ffeil .jar yn y ffolder gywir.

8

Dylunio Gwefannau yn NvuOs nad ydych wedi creu gêm o’r fath yn flaenorol, ewch i www.freeworldgroup.com/koalafiles.htm a dewiswch gêm sy’n gweddu i’ch thema ddymunol. Lawrlwythwch y ffolder .zip ar gyfer y gêm a’i chadw yn eich lleoliad. Dewiswch y ffeil .swf a’i chopïo i’r ffolder rydych yn ei defnyddio ar gyfer eich tudalen we. Gallwch fewnosod hyn i un o’ch tudalennau trwy ddefnyddio’r gweithgarwch canlynol.

13) Gêm arall

Agorwch y dudalen yr hoffech i’ch gêm fod arni, ar Nvu. Mewnosodwch dabl ag un rhes ac un golofn, ac aliniwch y canol i led o 400. Mewnosodwch y canlynol i’r cod ffynhonnell (sicrhewch eich bod yn newid “name” am enw’r gêm rydych yn ei mewnosod).

<object height=”400” width=”400”><param name=”Flash” value=”name.swf”><embed src=”name.swrf” height=”400” width=”500”></object>

Ar y tab “Normal” ni fyddwch yn gallu gweld y gêm eto. Ond pan fyddwch yn ei hagor yn eich porwr gwe dylech allu ei gweld yn iawn.

Gweithgareddau Estynedig

9

14) Llinell lorweddol

Gellir defnyddio’r rhain i wahanu’n weledol darnau o gynnwys ar eich gwefan, neu hyd yn oed ar ddiwedd eich tudalen cyn eich baner ar y gwaelod. Rhowch y cyrchwr lle hoffech i’r llinell ymddangos. Ewch i “insert” a “horizontal line”. Dylai’r llinell ymddangos, fel yr isod.

15) Hyperddolen

Gellir defnyddio’r rhain i ychwanegu cysylltiadau at wefannau eraill. I ychwanegu hyperddolen at eich tudalen teipiwch y frawddeg yr hoffech ychwanegu eich hyperddolen ati e.e. “Technocamps”. Amlygwch y gair/geiriau yr hoffech eu hychwanegu at y ddolen a chliciwch ar y botwm “Link” ar frig y dudalen. Yn y ffenestr priodweddau’r ddolen, teipiwch yr URL yr hoffech gysylltu ag ef a chliciwch ar “Ok”

16) Dolen e-bost

Bydd ychwanegu dolen e-bost at eich cyfeiriad e-bost yn caniatáu i bobl anfon e-bost atoch trwy glicio ar y ddolen. Bydd eu porwr yn agor eu rhaglen e-bost ddiofyn yn awtomatig ac yn agor neges e-bost newydd gyda’ch cyfeiriad e-bost wedi’i osod yn barod yn y maes “At”.

Teipiwch rywfaint o destun i greu dolen e.e. “Click here to email me”. Amlygwch y testun yr hoffech greu dolen ohono a chliciwch ar y botwm “Link” ar frig y ffenestr. Yn y ffenestr “Link Properties” teipiwch eich cyfeiriad e-bost yn y maes “Link Location”. Yna ticiwch y blwch sy’n dweud “The above is an email address”.

Peidiwch â defnyddio eich cyfeiriad e-bost eich hun.

10

Gweithgareddau Estynedig

17) Mewnosod fideo

Gallwch lan lwytho fideos i gyfrif Youtube, ond bydd mewnosod y rhain i’ch gwefan yn dod â’r wefan yn fyw. Dylech allu cael mynediad i “embed code” ar gyfer pob fideo. Yn Youtube, cliciwch ar “Share” ac yna “Embed” a bydd yn ymddangos â’r cod y mae ei angen arnoch.

Cliciwch ar Nvu ac ar y dudalen yr hoffech ei hychwanegu eich fideo ati. Gosodwch y cyrchwr lle hoffech leoli’r fideo a chlicio, yna cliciwch ar y tab “Source”. Copïwch a gludwch y cod o Youtube i’r lle yn y cod lle mae’r pwyntydd yn fflachio.

www.technocamps.com