Tuesday, 12 June 2007
CSS with Table Layout
Students just a quick note to tell you about a great tutorial on CSS and table layouts. Check it out here: ProjectSeven.com I have already downloaded the project files for you. You will find them in Chicama\Computers\Printed Units\Key Stage 3 S1 and S2\S2 Units\Unit 82\Resources\Web Design Resources. Have a go at the tutorial and you will learn the power of CSS.
Saturday, 9 June 2007
Creating your Home Page
This week we started to create our home pages. I was very surprised to notice that many of you had not set up your web sites correctly, some not at all. Earlier I told you that you should create a folder in the ..\My Documents\My Webs\ path on your C drive. There is a good reason for this. It is a special folder created by your Windows system to hold web pages. Also it makes everything easier to find, you don't have to click through many folders to get to it.
To set up your web site in Dreamweaver see the video tutorial from the Teach-ICT web site. Here is the link: Setting up a New Site
I also noticed that some of you had placed your web pages in a sub-folder of your main web site folder. This will NOT work. You must place your web pages in the root of your web site folder, that means not in any sub-folders. Actually it's only the home page that need be in the root folder but it is good practice to leave the others there as well. Which brings me to the home page. After you had set up your W drive to store your web pages, some of you could not see your home page when you tried to view it with Internet explorer. This is because you named your home page something other than index.htm. The home page MUST be called index.htm because Internet Explorer looks for this page first if you enter a URL without specifying a page name. So if you dont have an index page your browser will give an error message.
To set up your home page correctly have a look at the Teach-ICT video here: Setting up a Homepage
When you make any changes to the names of your pages or move them from folders, you should do this from within Dreamweaver. That way Dreamweaver can make any changes in links etc automatically for you.
Remember you should use tables to layout your web page according to your layout plan you created earlier. You can do this in either standard or layout view. Try not to make your tables too complicated. I have seen many of you create large unwieldy tables and content appears scattered all over the page. Remember your research about good web design. Take a look at this site for some ideas: Current Styles in Web Design Also here is an interesting article from Matt Brown of the Dreamweaver community. Matt Brown on Good Design
Thats all from me for now. Happy page building.
To set up your web site in Dreamweaver see the video tutorial from the Teach-ICT web site. Here is the link: Setting up a New Site
I also noticed that some of you had placed your web pages in a sub-folder of your main web site folder. This will NOT work. You must place your web pages in the root of your web site folder, that means not in any sub-folders. Actually it's only the home page that need be in the root folder but it is good practice to leave the others there as well. Which brings me to the home page. After you had set up your W drive to store your web pages, some of you could not see your home page when you tried to view it with Internet explorer. This is because you named your home page something other than index.htm. The home page MUST be called index.htm because Internet Explorer looks for this page first if you enter a URL without specifying a page name. So if you dont have an index page your browser will give an error message.
To set up your home page correctly have a look at the Teach-ICT video here: Setting up a Homepage
When you make any changes to the names of your pages or move them from folders, you should do this from within Dreamweaver. That way Dreamweaver can make any changes in links etc automatically for you.
Remember you should use tables to layout your web page according to your layout plan you created earlier. You can do this in either standard or layout view. Try not to make your tables too complicated. I have seen many of you create large unwieldy tables and content appears scattered all over the page. Remember your research about good web design. Take a look at this site for some ideas: Current Styles in Web Design Also here is an interesting article from Matt Brown of the Dreamweaver community. Matt Brown on Good Design
Thats all from me for now. Happy page building.
Monday, 4 June 2007
Creating your Home Page
This week you should be working on your home page. You will already have decided on the layout and you should use your plan to help you.
Some of the elements you should add are:
mailto link. As the web designer you should add an email link using your school email. See the Teach-ICT video on how to do this.
Navigation buttons. You can use Flash buttons for navigation, Teach_ICT also has a video tutorial on how to do this.
Images don't forget your images should be non-copyright. You should recognise the source of any image.
Text. Do not copy and paste text from another web site. Write your own. You do not need to write paragraphs of text.
Some of the elements you should add are:
mailto link. As the web designer you should add an email link using your school email. See the Teach-ICT video on how to do this.
Navigation buttons. You can use Flash buttons for navigation, Teach_ICT also has a video tutorial on how to do this.
Images don't forget your images should be non-copyright. You should recognise the source of any image.
Text. Do not copy and paste text from another web site. Write your own. You do not need to write paragraphs of text.
Saturday, 2 June 2007
Cascading Style Sheets
This week we looked at Cascading style sheets. Have a look at the Wiki post for CSS here CSS is a powerful markup tool for defining colours, fonts, and layout in your web pages. We looked at two different ways of applying CSS styles; embedded and external.
Embedded style, blocks of CSS information inside the HTML document itself.
External stylesheets, i.e. a separate CSS-file referenced from the document.
CSS allows the designer to apply sweeping changes to a web site by simply adding CSS code to a style sheet.
Some examples of code are;
BODY {font-family: Tahoma; color: black; font-size: 10pt; background-color: white}
H1 {font-size: 20pt}
H2 {font-size: 18pt}
H3 {font-size: 16pt}
A:hover {color: red; background-color: white; text-decoration: none}
This code will set the body background colour to white, the text to a black Tahoma font. Heading 1 will be size 20 pt etc, and hyperlinks will be coloured red.
For some examples of CSS style sheets have a look at the CSS Zen Garden. You'll find the link in the LInks list section of this blogg. Also have a look at the W3schools web site for a complete tutorial.
Embedded style, blocks of CSS information inside the HTML document itself.
External stylesheets, i.e. a separate CSS-file referenced from the document.
CSS allows the designer to apply sweeping changes to a web site by simply adding CSS code to a style sheet.
Some examples of code are;
BODY {font-family: Tahoma; color: black; font-size: 10pt; background-color: white}
H1 {font-size: 20pt}
H2 {font-size: 18pt}
H3 {font-size: 16pt}
A:hover {color: red; background-color: white; text-decoration: none}
This code will set the body background colour to white, the text to a black Tahoma font. Heading 1 will be size 20 pt etc, and hyperlinks will be coloured red.
For some examples of CSS style sheets have a look at the CSS Zen Garden. You'll find the link in the LInks list section of this blogg. Also have a look at the W3schools web site for a complete tutorial.
Subscribe to:
Comments (Atom)