Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web

Transcription

1 Tutorial 4 Activities Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Ensure that the editor is in code mode, down the bottom of the main page, click on the code button You should see a page that looks like this This is the default blank page you get, we are going to start building sites (more than one page) today, so let s up out environment Go to Site new site On the location, there is a browse button, click on this

2 Select desktop Click on open At the end of the location, type in the name of your site, in this case, use tutorial 4 Then click on ok Expression defaults its main page to default.html, which works on all major web servers (Apache and IIS), though to keep things simple, right click and rename it to index.html

3 Tick the don t show again and Yes Now double click the index.html file It should open up the page in code view and put in the basic requirements for a page, as we are going to work with html 5, you need to modify a couple of things to the basic html 4 layout supplied. The doctype needs to be cleaned up, remove the extra xmlns information from the html tag and, for the moment, remove the meta content. You should end up with this: Save the website

4 From here we now look at the design of the site This is the index page so to start with, let s create the skeleton structure Start from the outside and work your way in. Next is the header

5 Then content Now we add the div boxes for the dheader section Next is the breakdown of the dcontent And finally the breakdown of dcright From here we now move onto the styles; as always work from the outside in, testing each line as you type it in. So first is dpage

6 Save and check the page You should have a floating green box Next is dheader, remember, we shouldn t be seeing any lime once we have finished putting in the level of styles Save and look Next is the dcontent box Save and view

7 Now we move on to the dlogo and dtitle that reside in the header part of our page Next is the left and right columns of the content box

8 Finally we style the 4 rows left in the dcright column Now that we have our base layout, before we start putting in content, let s make some folders for the directory structure of our site and then move the styles to an external stylesheet. So, we want to make the following folders css, images and pages; to do this, we right click on the folder name in the folder list section and add new

9 Repeat for all of the folders Now, let s make the external stylesheet and link it up. Highlight the new css folder, right click, new css file Call it stylesheet.css

10 Now, click on the attach stylesheet section and link the stylesheet to your index page Notice how it is now linked with css/stylesheet.css, this is because the system recognises that your stylesheet is actually within a folder. To go forwards into a folder you put the folder name and a / to navigate back, you use../ From here, drag and drop the styles from the current page to the stylesheet.css in the manage styles section You should end up with a page that looks like this

11 Save and run up the page, make sure it is working So what we will do is now put some content into the site, I m going to be putting in information regarding robots. Jump on Bing, find some image relating to robots and text, So the index page is my introduction to the site, with links to pages on ASIMO, TOPIO and Actroid Don t forget to create a Logo When you download your images, put them in the images folder As, I know that I will have 4 pages, I can now make them, resaving the index page into the appropriate folder, pages.

12 Remember that index.html doesn t go into the pages folder. It stays in the root directory of the site. Okay, content time, open up the index page and put in the logo and title text Notice the new technique of nesting the style of h1 inside the #dtitle tag. What this means is, that when the browser is displaying this page, when it goes inside the dtitle area and finds a h1, it knows there is a style specifically for that. Now that I am happy with that look, I can drag the 2 new styles into the stylesheet and apply an appropriate background colour for the text From here, a quick look at the navigation of the site This code produces So, a quick look shows that we are going to need to put line breaks in and increase the font of the links And, also, that 100px for navigation is probably too small. Now, we create a class to modify the links and change the width of navigation to 200px in the style sheet css file

13 So, now that has been done, the links have more space to work with but there should still be some changes, no underline, white background. When you are dealing with your site, you work this out based upon your original design. So the underline, I can do on the class, th background in the style sheet. Once I have completed the class, I ll drag it into the stylesheet to keep all the styles in the same place.

14 I also added the navigation change on mouse over. From here, just add the text and images for each box, centre the images then follow it with a heading and some text, the text boxes should also have links to the relevant page, and then we will turn the images into links as well. Added the following styles and content

15 This produces: Now the stylesheet can be modified, but here we can introduce a tip that will make that easier. The text box and image boxes are pretty much the same thing, with additional styles being applied to the content without changing them, as such they can all be amalgamated into a singular data box, so the new external stylesheet looks like this

16 And the index page changed to: Produces

17 Now that we have a page that looks better, we still have to make the images link to do this, do the following Also add a border of 0 to all images in the external style sheet. This produces an image that works as a link

18 Without letting the image get a purple border Now do a file save as of the index page over the other pages. And clear out the content each page. You should have the following code Load up the page and check to make sure your navigation works, now, on the sub pages, have a look at the link layout and compare with the index page Asimo page

19 Index Page Make note that the index page should not be in the pages folder Now that you have a bare bones structure for your website, finish it off with additional content Create the Asimo page so that it looks like this Create the Actroid Page so that it looks like this:

20 And finally make the TOPIO page to look like this: Each of the pages were modified by styles on their own page and didn t touch the external stylesheet. Attempt to design and code them before continuing on

21 Here s the code for Asimo This is the code for Actroid

22 And finally TOPIO

23