Web Page Design - Extra’s
Creating a slideshow for our website
1.
What can you do with all those photos you took on the last outing?
- You took loads of photos on an outing and you would like to share them online with the rest of the group.
- Now that we have a local website for GHIS this is very easy and quick.
- The GHIS local...
More
Web Page Design - Extra’s Creating a slideshow for our website 1. What can you do with all those photos you took on the last outing? - You took loads of photos on an outing and you would like to share them online with the rest of the group. - Now that we have a local website for GHIS this is very easy and quick. - The GHIS local website is located on our own server on the second oor at our training centre so only people connected to the GHIS network can view those pages. - The actual photos will be hosted on www. slide. com under your own name and account. - Note: You need a web based email address for this assignment (Gmail/Yahoo Mail/Windows Live/Hotmail) 2. What are the steps to making a new slideshow visible on our local website? a. Create an account on www. slide. com b. Upload photos to account c. Rename each photo d. Save a copy of the code and send it to your tutor e. Publish your slideshow on the GHIS Local website 2a. Create an account on www. slidehshow. com - In
Less
From Web Design Tutor
Adobe PDF document
Pub. on Apr. 10th 2010
Pages: 4
Views: 66
Downloads: 2
Web Page Design - Manual Part 3
Web Design Template 2 - Creating a liquid design with 3 columns in Notepad++
Web Design Template 2: Liquid Layout 3 columns
(25 Nov 2009: to be completed: logo image)
Browser Window at 800px
Stage One
Stage Two
Browser Window at 1440px
With an image replacer for the ‘heading1’logo & a JS le...
More
Web Page Design - Manual Part 3 Web Design Template 2 - Creating a liquid design with 3 columns in Notepad++ Web Design Template 2: Liquid Layout 3 columns (25 Nov 2009: to be completed: logo image) Browser Window at 800px Stage One Stage Two Browser Window at 1440px With an image replacer for the ‘heading1’logo & a JS le to make the columns equal lengths (C) Martine Y. Moeykens - 2009
Less
From Web Design Tutor
Adobe PDF document
Pub. on Nov. 25th 2009
Pages: 12
Views: 57
Downloads: 0
Web Page Design - Manual Part 1
Assignment 11
browser.
1
(C) Copyright Martine Y.
Moeykens 2009
From Web Design Tutor
Adobe PDF document
Pub. on Oct. 23rd 2009
Pages: 7
Views: 51
Downloads: 0
Web Page Design - Manual Part 3
Template 1 - Creating a liquid webpage layout with relative positioning
Assignment Template 1 :
Creating a liquid layout with relative positioning
From Web Design Tutor
5/5
Adobe PDF document
Pub. on Oct. 8th 2009
Pages: 11
Views: 562
Downloads: 1
Web Page Design - Manual Part 2
Assignment Media - Creating & inserting videos & audio in a webpage
Assignment Media : Creating & inserting ‘media’ in a webpage
Embedding a video and audio in a webpage is a bit of a challenge as there is no real HTML code
which is speci c for video or audio at this stage in HTML code development....
More
Web Page Design - Manual Part 2 Assignment Media - Creating & inserting videos & audio in a webpage Assignment Media : Creating & inserting ‘media’ in a webpage Embedding a video and audio in a webpage is a bit of a challenge as there is no real HTML code which is speci c for video or audio at this stage in HTML code development. So in order to play a video online the browser needs a media player like ‘Quicktime’,‘Flash Player’,‘RealPlayer’or‘Windows Media Player’. This two videos in this assignment play with Quicktime and the audio plays with Flash Player. This webpage has been tested in Mozilla Firefox, Internet Explorer and Safari. It works in Windows Operating system, MacOSX and for Linux operating system in Ubuntu Jaunty Jackalope. Media: video & audio This assignment consists of four parts: a. Create a lmstrip (vector image) in Adobe Illustrator b. Creating a webpage background image c. Creating video for a webpage d. Creating & converting media for a webpage. e. Video
Less
From Web Design Tutor
Web Page Design - Manual Part 2
What is a thumbnail?
- A thumbnail is a smaller image version usually connected to the bigger image.
We nd thumbnails in image galleries.
Where will we be using‘creating a thumbnail from a webpage’?
- Each student creates a portfolio webpage to display all their web design work, this makes it...
More
Web Page Design - Manual Part 2 What is a thumbnail? - A thumbnail is a smaller image version usually connected to the bigger image. We nd thumbnails in image galleries. Where will we be using‘creating a thumbnail from a webpage’? - Each student creates a portfolio webpage to display all their web design work, this makes it easier for the examiner to access their work but also for anybody to view their work online, or for new students to have an idea as to what will learn and can achieve during the course. - The students portfolio is a webpage with a series of thumbnails connected to the actual web design projects when clicked on. Method to create the thumbnail of a webpage 1. Create the print-screen 2. Create the thumbnail 1. Creating the print-screen - Open up the webpage of which you need to create a thumbnail. - To take a printscreen press on the‘PrintScreen/SysRq’key on your keyboard. - An image of your computer screen will be copied automatically to your‘clipboard’ - You
Less
From Web Design Tutor
Web Page Design - Manual Part 2
Validating HTML and CSS code
Validating HTML & CSS code
Why validating the HTML and CSS code?
- Validating the HTML and the CSS code is important, it shows that we have taken the opportunity to write
our webpage correctly.
The same as when you write a piece of text, you make sure that there are no...
More
Web Page Design - Manual Part 2 Validating HTML and CSS code Validating HTML & CSS code Why validating the HTML and CSS code? - Validating the HTML and the CSS code is important, it shows that we have taken the opportunity to write our webpage correctly. The same as when you write a piece of text, you make sure that there are no grammar mistakes and that it is presented correctly for others to read. - Validating a web document can also show what version of HTML or CSS you have used by adding a special logo. Tools for validating HTML and CSS - Dreamweaver has an in-build validating tool at the bottom of the screen. - Online at http://www. w3. org in the left navigation bar choose HTML Validator to validate the HTML and CSS Validator to validate the CSS. Validating in Dreamweaver - In Dreamweaver open up the web document that needs to be validated. - Go to the bottom of the DW window and choose ‘Results’ - In‘Results’click on the green arrow, in the menu choo
Less
From Web Design Tutor
Web Page Design - Manual Part 2
Webpage Design Assignment 28: Photos from digital camera to computer
Digital cameras
Digital cameras come in di erent shapes and sizes , there are compact digital cameras, digital bridge cameras,
digital single-lens cameras, digital range nders and line-scan camera systems.
http://en.
wikipedia....
More
Web Page Design - Manual Part 2 Webpage Design Assignment 28: Photos from digital camera to computer Digital cameras Digital cameras come in di erent shapes and sizes , there are compact digital cameras, digital bridge cameras, digital single-lens cameras, digital range nders and line-scan camera systems. http://en. wikipedia. org/wiki/Digital_camera Digital cameras come also integrated in mobile phones and computers usually laptops. Connecting the digital camera and the computer The digital camera usually comes with a USB cable, on one end it will have a USB connector and on the other end a connector to the digital camera. Connect the cable to the camera then connect the USB of the cable to the USB slot on your computer. Copying the photos to your‘original images’folder using‘Windows Explorer’ Now that the camera has been connected to your computer, turn on the camera or set it to its computer setting. You don’t need special software to copy the images to your hard drive we will
Less
From Web Design Tutor
Web Page Design - Manual Part 2
Creating thumbnail images for a photogallery
Making thumbnail images for a photogallery
Picture Gallery
Click on thumbnail to view the full size picture in a new webpage
What is a thumbnail?
- A thumbnail is a smaller image version usually connected to the bigger image.
We nd thumbnails in image...
More
Web Page Design - Manual Part 2 Creating thumbnail images for a photogallery Making thumbnail images for a photogallery Picture Gallery Click on thumbnail to view the full size picture in a new webpage What is a thumbnail? - A thumbnail is a smaller image version usually connected to the bigger image. We nd thumbnails in image galleries. - Image galleries are great to display a lot of photos for one project or event; viewers can select the images that they want to see. Where are we using thumbnails? - Assignment 17 is a photogallery with a series of thumbnails connected to the actual size image. - Each student creates a Portfolio which is an easy accessible place to show o all their web design work. This webpage has space to insert the 3 or more thumbnails for each of the‘Projects’. The portfolio is a webpage with a series of thumbnails connected to the actual web design projects when clicked on. Saving your pictures rst before you make the thumbnail version. - Save the 12 pict
Less
From Web Design Tutor
Adobe PDF document
Pub. on July 28th 2009
Pages: 4
Views: 69
Downloads: 0
Web Page Design - Manual Part 2
Webpage Design Assignment 17: A simple photo gallery
1.
In Dreamweaver start a new webpage, save it as‘assign17_initials.
htm’in your webfolder on the server.
2.
For the <title> type in‘Assignment 17 - Simple Photo Gallery’
3.
Prepare a .
css document in DW and save it...
More
Web Page Design - Manual Part 2 Webpage Design Assignment 17: A simple photo gallery 1. In Dreamweaver start a new webpage, save it as‘assign17_initials. htm’in your webfolder on the server. 2. For the <title> type in‘Assignment 17 - Simple Photo Gallery’ 3. Prepare a . css document in DW and save it as‘photogal_initials. css’ 4. In Dreamweaver design view type the main titles and make these into html headings as shown: 5. Follow the method‘Creating thumbnail images for a photogallery’on previous pages. Prepare the 12 thumbnails of the 12 photos you want to show online. Make the thumbnail 190 pixels in width and whatever the corresponding height is. 6. Note: Just to remind you that these photos need to be your own creation. If people are in these photographs you need explicit permissions of these people to have the photos published online. If you have no photos tell your tutor and then arrangements can be made to go on a photo hunt in the city or country. 7. If you want t
Less
From Web Design Tutor
Adobe PDF document
Pub. on July 28th 2009
Pages: 4
Views: 260
Downloads: 0
Web Page Design - Manual Part 2
Web folders: local root folder, remote root folder, students web design folders
Publishing a website
Connecting the students web design work to the‘local root folder’
Publishing a website: local & remote folders
Where is my website when it is visible on the World Wide Web?
It is hosted on a web...
More
Web Page Design - Manual Part 2 Web folders: local root folder, remote root folder, students web design folders Publishing a website Connecting the students web design work to the‘local root folder’ Publishing a website: local & remote folders Where is my website when it is visible on the World Wide Web? It is hosted on a web server in a remote root folder /wwwroot/ Where is my website when I work on the web pages? It is on my computer / local server in a local root folder in a designated folder As students working on a common website, our web pages are rst worked on in our web folder. It is on our computer / ghis-server in our Web Design folder Student 2 Web Design folder Student 1 Web Design folder Student 3 Web Design folder Student 4 Web Design folder Student 5 Web Design folder Student 6 Web Design folder Student 7 Web Design folder Student 8 Web Design folder Local root folder of website on the local server (upstairs) Each student copies their personal work to the local root fol
Less
From Web Design Tutor
Adobe PDF document
Pub. on July 27th 2009
Pages: 4
Views: 50
Downloads: 0
Web Page Design - Manual Part 2
Webpage Design Assignment 21: Scanning and editing an image
1.
Purpose of this assignment
* Learning how to scan an image, a drawing, painting or photo
* Editing it using Adobe Photoshop * Adobe Fireworks:
- changing the hue/saturation of the image
- changing the‘look’of the image with‘Adobe...
More
Web Page Design - Manual Part 2 Webpage Design Assignment 21: Scanning and editing an image 1. Purpose of this assignment * Learning how to scan an image, a drawing, painting or photo * Editing it using Adobe Photoshop * Adobe Fireworks: - changing the hue/saturation of the image - changing the‘look’of the image with‘Adobe Photoshop’ lters - cropping parts of it for further use 2. Using the scanner Plug in: Make sure the scanner is plugged into one of the USB sockets of your computer, this is done while the pc is turned o so that the computer picks up the new hardware while it is turning on. Put image in scanner: Lift the scanner lid and put the picture down with one corner of the picture aligned horizontally and vertically. This is important if you want your image to come out straight. If your image is not aligned it will take Finding the scanner on your pc * Go to Start/ Control Panel * Switch to‘classic view’for the control panel * Find the icon for‘Scanners & Cameras’double-cl
Less
From Web Design Tutor
Adobe PDF document
Pub. on June 9th 2009
Pages: 7
Views: 71
Downloads: 1
Web Page Design - Manual Part 2
Assignment 1a + 1b
Assignment 1a + 1b: A webpage in notepad with CSS as a separate document
1a
1b
From Web Design Tutor
Adobe PDF document
Pub. on June 8th 2009
Pages: 4
Views: 55
Downloads: 0
Web Page Design - Manual Part 1
CSS Box
What is the CSS Box Model ?
- CSS designs the web document as a series of boxes containing words, lines, paragraphs,
tables, etc.
each with properties such as size, color and font.
- This page describes the CSS box in order to understand the assignments in this manual.
If you want to know more...
More
Web Page Design - Manual Part 1 CSS Box What is the CSS Box Model ? - CSS designs the web document as a series of boxes containing words, lines, paragraphs, tables, etc. each with properties such as size, color and font. - This page describes the CSS box in order to understand the assignments in this manual. If you want to know more please refer to http://www. w3. org/TR/CSS2/box. html CSS Box Model The CSS Box Model - The CSS box model has a content which can be surrounded respectively by padding, border, margin. Text, image, line, paragraph, table . . . Box Content: Padding Border Margin top top top Padding Padding Padding right right right Border Margin Margin Margin Border Border bottom bottom bottom left left left 1 2 3 4 Direction of pixel values --> CSS Box Model Coding - To code a box with padding, border & margin distances is done as follows (the words top, right etc are replaced by values) - An example: a paragraph with a heading & an image can be placed within CSS box
Less
From Web Design Tutor
Adobe PDF document
Pub. on June 7th 2009
Pages: 1
Views: 805
Downloads: 1
Web Page Design - Manual Part 1
Assignment 7 - Adding images to the webpage Webpage Design Assignment 7: Adding images to the webpage.
1.
In Dreamweaver start a new webpage, save it as‘assign7.
htm’in your webfolder on the server.
2.
For the <title> type in ‘Assign7’.
3.
Preparation: a.
Make a new folder in your web...
More
Web Page Design - Manual Part 1 Assignment 7 - Adding images to the webpage Webpage Design Assignment 7: Adding images to the webpage. 1. In Dreamweaver start a new webpage, save it as‘assign7. htm’in your webfolder on the server. 2. For the <title> type in ‘Assign7’. 3. Preparation: a. Make a new folder in your web folder and call it‘images’ b. Go to folder \\Server\ghis_webpage\Web docs 4 students\images for assignments. If you have no icon for this folder on your desktop ask your tutor to add it in. Find the image img_assign7. jpg in that folder and copy it then paste it into your image folder. 4. Setting the‘Page Properties’: - Click on‘Page Properties’in the‘Properties’panel - In the next dialog box add in: - Click‘Apply’ - Now click on the‘Headings’tab and add the following: - Click‘Apply’and‘OK’ GHIS (C) Martine Y. Moeykens 2009
Less
From Web Design Tutor
Adobe PDF document
Pub. on June 6th 2009
Pages: 7
Views: 34
Downloads: 0
Web Page Design - Manual Part 1
Assignment 10 - Ordered & unordered list with style & images
Assignment 10 : Ordered & Unordered lists with style & images
Assignment 10
browser.
(C) Martine Y.
Moeykens 2009
From Web Design Tutor
Adobe PDF document
Pub. on June 6th 2009
Pages: 9
Views: 23
Downloads: 0
Web Page Design - Manual Part 1
Chapter 4 - Colours & images for the web
What colours are safe for the web?
Where to choose a colourscheme for a webpage?
What are RGB colours?
What images are suitable for the web?
What is the ideal resolution for an image for the web?
Editing & resizing images for use on the web
Uncovering the...
More
Web Page Design - Manual Part 1 Chapter 4 - Colours & images for the web What colours are safe for the web? Where to choose a colourscheme for a webpage? What are RGB colours? What images are suitable for the web? What is the ideal resolution for an image for the web? Editing & resizing images for use on the web Uncovering the techniques for creating vector & raster images What are vector & raster images? (C) Martine Y. Moeykens 2009
Less
From Web Design Tutor
Adobe PDF document
Pub. on June 6th 2009
Pages: 8
Views: 66
Downloads: 0
Web Page Design - Manual Part 1
Assignment 14 - Adobe Fireworks: Creating a raster image
Assignment 14 : Adobe Fireworks : creating a raster image
Using layers, transparency, gradients,
applying shadow, bevel/emboss .
.
.
.
For Assignment 14:
* copy the following prepared le assign14_student_ le.
png
to your ‘original images’...
More
Web Page Design - Manual Part 1 Assignment 14 - Adobe Fireworks: Creating a raster image Assignment 14 : Adobe Fireworks : creating a raster image Using layers, transparency, gradients, applying shadow, bevel/emboss . . . . For Assignment 14: * copy the following prepared le assign14_student_ le. png to your ‘original images’ folder: * we are going to add a background and letters to this raster graphic le and turn it into this le for‘Assignment 12’ (C) Martine Y. Moeykens 2009
Less
From Web Design Tutor
Adobe PDF document
Pub. on June 6th 2009
Pages: 4
Views: 24
Downloads: 0
Facebook
Digg
del.icio.us
Furl
rededit
StumbleUpon