serif webplus 1
DESCRIPTION
Serif Webplus 1. Introduction Changing colours Adding a Navigation Bar Changing background colour Adding a new page Adding sound/video/ google map Putting words over a picture Changing size of webpage. Logo. Special Effects. Background Image. Background Colour. Navigation Bar. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/1.jpg)
IntroductionChanging coloursAdding a Navigation BarChanging background colourAdding a new pageAdding sound/video/google mapPutting words over a pictureChanging size of webpage
Serif Webplus 1
![Page 2: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/2.jpg)
Navigation Bar
Logo
Background Image
Background Colour
Special Effects
![Page 3: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/3.jpg)
Introduction
first…..The next slides will explain some of the basics of Serif
![Page 4: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/4.jpg)
This is what Serif looks like we are going to create a new site
![Page 5: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/5.jpg)
This is the Help menuIf you want to hide it click here
![Page 6: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/6.jpg)
This is what Serif looks like, there is a shortcut menu down the bottom that lets you add things quickly by dragging them onto the page
![Page 7: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/7.jpg)
If you want to know what your site looks like in Internet Explorer, go to :File – Preview Site – Preview in Internet Explorer
![Page 8: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/8.jpg)
The other way of seeing what your site will look like on the Internet is to click here and choose Preview Site in Internet Explorer
![Page 9: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/9.jpg)
Colour schemeA quick way to change the background colour of your page is click on color and schemes. Then choose a colour scheme.
The left hand square is the background colour your page will change to
![Page 10: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/10.jpg)
The 3rd square from the left is the colour your buttons will be.So,If you choose the colour scheme called Default, you will have a white background and green buttons.
![Page 11: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/11.jpg)
Adding a Navigation Bar
These are buttons that let you link to the different pages in your website
![Page 12: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/12.jpg)
To add a Navigation Bar, drag this onto your page
![Page 13: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/13.jpg)
Choose your style of navigation bar here.The ones with the word ‘Javascript’ will let you change the colour
![Page 14: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/14.jpg)
This is your Navigation Bar. It only has a ‘Home’ option because you only have a ‘Home’ page. If you add more pages they will be added to the Navigation Bar
![Page 15: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/15.jpg)
If you want to change the size of your button.Double click on it then choose Appearance and choose Button Scale
![Page 16: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/16.jpg)
Changing the Background colourof your page
![Page 17: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/17.jpg)
To change the background colour for your pageright click on the Page then choose Page Properties
![Page 18: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/18.jpg)
On the window that appears select Background and chose the ‘Use Custom Background’ then choose ‘On-page color’ and change the colour to the one you want
![Page 19: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/19.jpg)
Adding a new page
![Page 20: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/20.jpg)
To add a second page you can click here
....or you can drag this
![Page 21: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/21.jpg)
A window will show, if you want to copy all the things from your home page onto your new page, tick this box
![Page 22: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/22.jpg)
The new page shows in the right hand window….
…..and automatically adds to your Navigation Bar
![Page 23: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/23.jpg)
To change the name of the new page……right click on the new pageThen choose Page PropertiesOn the next window choose Navigation and change the Page name to whatever you want e.g. ‘About Us’
![Page 24: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/24.jpg)
Adding media (sound, video or google map)
![Page 25: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/25.jpg)
![Page 26: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/26.jpg)
Find the file you want to play
Then choose either Icon to show one of these pictures on your webpage. When you click on it, it will play the sound
Inline to get your sound to play in your webpage without an icon
OrChoose your own picture to show on your webpage. When you click on this picture it will play the sound
![Page 27: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/27.jpg)
Background Image
Adding words over an image
![Page 28: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/28.jpg)
Click on the picture then choose an option from the menu bare.g. Increase Brightness
![Page 29: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/29.jpg)
Then click on the A to add some words and add some words over the picture
![Page 30: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/30.jpg)
To change the colour of the words click on the words and choose Colour on the top right hand side of the Serif window
![Page 31: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/31.jpg)
If there is a lot of space on the left of the page you can change the Width of the page to make it wider…….see next slide
![Page 32: Serif Webplus 1](https://reader033.vdocuments.mx/reader033/viewer/2022061604/5681619d550346895dd1532d/html5/thumbnails/32.jpg)
Right click on the pageChoose Page Properties - Appearance Change the Width from 750 to e.g. 1200….then test the page again