17
How to create a How to create a website for free website for free Panagiotis Kafkarkou Panagiotis Kafkarkou

How to create a website for free Panagiotis Kafkarkou

Embed Size (px)

Citation preview

Page 1: How to create a website for free Panagiotis Kafkarkou

How to create a website How to create a website for freefor free

Panagiotis KafkarkouPanagiotis Kafkarkou

Page 2: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

A website…A website…

……consists of files with text, images…consists of files with text, images…• We will use NVU editor to create the filesWe will use NVU editor to create the files

……has a hosting service (a folder in a has a hosting service (a folder in a computer, accessible online)computer, accessible online)• We will use a free hosting serviceWe will use a free hosting service

……needs a domain name (the url, eg needs a domain name (the url, eg www.yoursite.comwww.yoursite.com))• A free domain comes with the free A free domain comes with the free

hostinghosting

Page 3: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

NVU: NVU: A complete Web Authoring A complete Web Authoring System System

Installer (Windows XP): Installer (Windows XP): httphttp://nvudev.com/download/nvu-1.0-win://nvudev.com/download/nvu-1.0-win32-installer-full.exe32-installer-full.exe

Portable (Windows XP – Runs from a Portable (Windows XP – Runs from a USB drive): USB drive): http://downloads.sourceforge.net/porhttp://downloads.sourceforge.net/portablenvu/Nvu_Portable_1.0r4_en-us.ptablenvu/Nvu_Portable_1.0r4_en-us.paf.exe?downloadaf.exe?download

Page 4: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Register for a free hosting planRegister for a free hosting plan

Point your browser at Point your browser at http://www.100free.com/http://www.100free.com/

Click Click Sign UpSign Up on the left side on the left side Fill the form with your informationFill the form with your information ATTENTION: Your username will be the first ATTENTION: Your username will be the first

part of your domain. Eg if your username is part of your domain. Eg if your username is mynamemyname then your url will be then your url will be http://www.http://www.mynamemyname.100free.com/.100free.com/

Check your email and follow the Check your email and follow the instructions to activate the hosting planinstructions to activate the hosting plan

Page 5: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Set up NVUSet up NVU

Run NVURun NVU The The Site ManagerSite Manager is on the left side. is on the left side.

If it is not there, press F9 to activate If it is not there, press F9 to activate itit

Click Click Edit SitesEdit Sites

Page 6: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Set up NVU (2)Set up NVU (2)

Site name: The name of your site. Eg Site name: The name of your site. Eg My WebsiteMy Website HTTP address: Your url eg www.yoursite.100free.comHTTP address: Your url eg www.yoursite.100free.com Publishing address: Your FTP server eg ftp.yoursite.100free.comPublishing address: Your FTP server eg ftp.yoursite.100free.com Username: Your username eg mysiteUsername: Your username eg mysite Password: Your password eg mypasswordPassword: Your password eg mypassword Check Check Save Password Save Password if you want NVU to remember the passwordif you want NVU to remember the password Click Click Select DirectorySelect Directory to select the folder on your computer, where the to select the folder on your computer, where the

project will be saved.project will be saved. Click OK when finishedClick OK when finished

All the details needed here, are in your email inbox

Page 7: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Optional: Find a templateOptional: Find a template

Find and download a templateFind and download a template Some free template sites are:Some free template sites are:

• http://www.freetemplatesonline.com/http://www.freetemplatesonline.com/• http://www.2createawebsite.com/build/http://www.2createawebsite.com/build/

templates.htmltemplates.html Open the template with NVUOpen the template with NVU

• File – Open FileFile – Open File

Page 8: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Create your homepageCreate your homepage

Create the page that you want to Create the page that you want to appear when someone visits your appear when someone visits your site.site.

Save this page as index.htmSave this page as index.htm IMPORTANT: If you don’t name your IMPORTANT: If you don’t name your

homepage as index.htm, then when homepage as index.htm, then when someone visits your site, no page will someone visits your site, no page will appear!!!appear!!!

Page 9: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Use photosUse photos

A website with no pictures, is a A website with no pictures, is a boring website!boring website!

Find your pictures. UseFind your pictures. Use• Google Image SearchGoogle Image Search• http://www.sxc.hu/http://www.sxc.hu/ (Registration is (Registration is

required)required) Save all of your images in the Save all of your images in the

project’s folder. project’s folder.

Page 10: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Images in NVUImages in NVU

To insert an image To insert an image go go Insert - ImageInsert - Image

Click Click Choose FileChoose File and find the image and find the image you wantyou want

Check Check URL is URL is relative… relative…

Click OKClick OK Resize and move Resize and move

the image as you the image as you likelike

Page 11: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Create more pagesCreate more pages

A website contains more than one A website contains more than one pages, besides the FrontPage.pages, besides the FrontPage.

Some pages…Some pages…• About meAbout me• Contact meContact me• PortfolioPortfolio• PhotosPhotos• ……

Click Click File – New File – New to create a new pageto create a new page

Page 12: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

HyperlinksHyperlinks A hyperlink opens an other page or document, A hyperlink opens an other page or document,

when clickedwhen clicked To create a hyperlink, highlight the text you wish To create a hyperlink, highlight the text you wish

to set as hyperlink and go to set as hyperlink and go Insert – Link Insert – Link or press or press CTRL+LCTRL+L

If you want to create a link to an other existing If you want to create a link to an other existing website, type or paste the address and click OKwebsite, type or paste the address and click OK

If you want to create a link to an other page of If you want to create a link to an other page of your site, click your site, click Choose File Choose File and browse for the and browse for the pagepage

If you want to create a link to an email address, If you want to create a link to an email address, check check The above is an email address.The above is an email address.

Page 13: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Create tablesCreate tables

Tables are a good way to keep your Tables are a good way to keep your text aligned and tidytext aligned and tidy

To create a table, go To create a table, go Table – Insert – Table – Insert – TableTable

Select the size of the table and click Select the size of the table and click OKOK

Page 14: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Create a navigation menuCreate a navigation menu

A navigation menu must exist on all A navigation menu must exist on all your pages and links the visitor to your pages and links the visitor to every of your pagesevery of your pages

Usually it is located on the left or Usually it is located on the left or right sideright side

Create a single column table, to keep Create a single column table, to keep things organized and alignedthings organized and aligned

Page 15: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Upload your websiteUpload your website To upload (or publish) your To upload (or publish) your

websitewebsite

To upload (or Publish) To upload (or Publish) your page, go your page, go File – File – Publish.Publish.

Site name: Site name: Select your Select your sitesite

Page title: Page title: The title of The title of your page, that will your page, that will appear on the top of appear on the top of Internet ExplorerInternet Explorer

Check Check Include images… Include images… and and Use the same Use the same locationlocation

Click Click PublishPublish and wait to and wait to uploadupload

Visit your site, to see if Visit your site, to see if everything went fine.everything went fine.

Page 16: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Optional: Register for a domain Optional: Register for a domain namename

A free domain service is http://www.co.nr/A free domain service is http://www.co.nr/• Your domain name will be Your domain name will be

www.yourname.co.nrwww.yourname.co.nr Visit the website and click on the upper Visit the website and click on the upper

left site the link left site the link Basic Free DomainBasic Free Domain Follow the instructions and fill the formFollow the instructions and fill the form Pay attention to the Pay attention to the Target URL Target URL field. This field. This

MUST be your website URL, eg MUST be your website URL, eg http://mysite.100free.comhttp://mysite.100free.com

Page 17: How to create a website for free Panagiotis Kafkarkou

© Panagiotis Kafkarkou© Panagiotis Kafkarkouhttp://pkafkarkou.co.nrhttp://pkafkarkou.co.nr

Final wordsFinal words

NVU is similar to FrontPage and even NVU is similar to FrontPage and even WordWord• Use drag and dropUse drag and drop• Use formattingUse formatting• Use paragraph alignmentUse paragraph alignment• Use colorsUse colors• Remember to save your work!Remember to save your work!

Visit my website for more infoVisit my website for more info• http://pkafkarkou.co.nr/http://pkafkarkou.co.nr/