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: 71
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: 59
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: 54
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: 626
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: 70
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: 298
Downloads: 0
Ireland
Facebook
Digg
del.icio.us
Furl
rededit
StumbleUpon