闪电代写 -代写CS作业_CS代写_Finance代写_Economic代写_Statistics代写_代码代做_IT代写_加急帮助

Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

MANG6531 ● Computer Lab Session 3: CSS & Front-End Frameworks

After having introduced you to the basic ‘front-end’ building blocks of HTML and JavaScript, and server-side languages such as PHP that help you program the ‘back end’, the last piece in the puzzle is how to make your web pages look the part – i.e. styling your web application. In this third session, you will be introduced to CSS (Cascading Style Sheets), which will help you specify how HTML elements are to be displayed, and to front-end frameworks such as Bootstrap that will speed up the front-end design.

Activity 8: Embedding CSS into a HTML document

Download the earlier solution file for Activity 1 from Blackboard and refamiliarise yourself first with the markup code and how the page was displayed in your browser. Using Sublime Text, save the file again under a different name – Activity8.html. Since the old solution was still far from aesthetically appealing, we will be adding some styling information, and along the way learn more about the basic building blocks of CSS.

Let's focus first on the font used to display the page content. Insert some basic document- level CSS code (highlighted below) which is meant to:

• Change the font of the large header on top of the page (i.e. the welcome message behind the <h1> tag) to Times New Roman, 32 pt. size, boldfaced.

• Change the font of the paragraphs (<p> tags) to Verdana, 12 pt. size, dark blue colour.

...

<html>

<head>

<title>Activity 1: Creating a HTML document; HTML tables and forms</title>

h1 {font-family: 'Times New Roman';

font-size: 32pt;

font-weight: bold;

}

p {font-family: 'Verdana';

font-size: 12pt;

color: darkblue;

}

</style>

</head>

<body>

<h1>Welcome to our online shop</h1>

<p>Please specify your order.</p>

...

Note where we positioned the CSS code: it must go into the header section of the document (i.e. the part starting with <head> and ending with </head>). The style rules themselves are enclosed by the <style> and </style> tags of a style element. Can you infer from the highlighted code what each bit is meant to be doing?

Save and refresh the page in your browser – the page fonts should now have been changed to reflect your new style rules.

Have a closer look at the code inside the style element you just added. It contains a list of style rules, where each rule assumes the following form:

selector {property_ 1: value_ 1; property_2: value_2; ...; property_n: value_n;} The “selector” could be a single HTML element name (e.g. h1 or p) and the listed properties are those aspects of its visual appearance that you would like to change (e.g. the font family, size and weight). There are many different properties spread over multiple categories, e.g.:

• fonts

• lists

• alignment of text

• margins

• colours

• backgrounds

• borders.

To find what you are after, you will typically be looking up further details in a CSS reference list such as http://www.w3schools.com/cssref/default.asp, as you go along coding your CSS. See if, starting from there, you can find information on some of the properties we just set?

Having studied the CSS syntax, now try changing the font of level-3 headers (used for the “Payment Method:” line in your page) to Verdana, 16 pt. size, colour red. If you can't get it to work, have a look at the solution file on Blackboard, but try and have a go at it yourself first. After doing so, your page should now look as follows:

This line has a red font colour.

In the example thus far, the “selector” of a style rule was each time a single HTML element name (e.g. h1 or p), which meant the property values in the rule apply to all occurrences of that named element. Instead, the selector can also be a list of element names, separated by commas. That can obviously be useful to change the property values of several elements at once, using just a single rule. Try modifying the second rule (i.e. the one that sets the font properties for paragraphs) so that it now sets the fonts of both paragraphs (element p) and tables (element table) to ‘Verdana’ , 12 pt. size, dark blue.

In addition to the simple selector forms above, another type of selector called “style-class” selectors are often used to allow different occurrences of the same tag to use different style specifications. For example, say we would like to define two separate kinds of paragraphs, one having a black font, the other with a red font. Let's call those two different paragraph styles “black_text” and “ red_text” (you can of course choose any other names you prefer). Then, we simply need to define two different style rules for both so-called ‘classes’ by specifying:

p.black_text {property_value list }

p.red_text {property_value list }

In your HTML markup code, you can then specify the particular style class you want for a certain paragraph using the class attribute, e.g. by adding the following:

<p class="red_text">Please specify your order.</p>

Change your CSS and HTML code to do exactly that; i.e. add the two paragraph styles and change the font colour of the first paragraph in your document to either red or black. If you get stuck, have a quick look at the solution file on Blackboard to see what we are after.

With so many different properties being included, it is pointless to attempt a comprehensive discussion of all. Let's look though at a few more examples of what CSS styling can do.

For example, how about adding a background image to our page? It is the background-image property that is used to put an image in the background of an element. On Blackboard, you will find a jpg-file with a picture of a record player (Record_player.jpg). Download that to the same file folder you are working in. Now add the following style rule to your page, which will make this picture the background of your page body, and test the result in your browser.

body {background-image: url(Record_player.jpg);}

Take a few minutes out exploring some of the other things you can do with regards to background colours and images, using http://www.w3schools.com/css/css_background.asp (each time click the ‘Try it Yourself’ button!).

Going back to our form, one of the other things that still look distinctly old-fashioned are the ‘submit’ and ‘clear’ buttons. CSS3 added some very nice button styling features you can try next. Add the following CSS code to your solution (use copy and paste to speed up things):

.button {

background-color: darkblue;

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

Note that the class selector here does not include a tag name like p or h3, which means we are now defining a generic style class that can be applied to the content of several kinds of tags. Apply it to the two buttons by inserting class = "button" into the two HTML input elements for submitting and clearing an order. If all goes well, your two old buttons should now have been replaced with a pair of flat dark-blue buttons... More cool-looking buttons can be found here: http://www.w3schools.com/css/css3_buttons.asp (give some of them a try; note that the navigation strip on the left also lists some of the other newer CSS3 features).

Activity 9: External style sheets

So far, we have been writing document-level CSS; i.e. the styling rules were included in the HTML document itself. Obviously, this is not the preferred option as that would mean having to repeat the same code in multiple pages as well as having to change those multiple pages each time, we want to make a change to the look-and-feel of our site. Instead, it makes sense to specify all the rules in an external style sheet – i.e. a separate file with only CSS, no HTML, which can be applied to any number of HTML pages.

For more on why to use external stylesheets and an example of how the page layout can be changed instantly by switching stylesheets, see: http://www.w3schools.com/css/css_intro.asp.

Let's now do so ourselves, save our page under a new name, Activity9.html, and move all of the styling out of the file into a new CSS file that we will call Activity9.css (the style sheet file must be saved with a .css extension and cannot contain any HTML). You can use Sublime Text just as you did previously, and cut and paste all of the style rules inside your style element (but excluding the <style> and </style> tags themselves!) into your new CSS file.

Now get rid of the remaining <style> and </style> tags in your HTML page and instead use a <link> element. With that you can specify that the browser is to fetch and use an external style sheet file to style the page:

With both files now saved in the same folder, try refreshing the page in your browser to see whether it is still shown correctly. Try making a change to your style sheet (e.g. changing the button colour to red) and saving it. Refresh the page in your browser and see how it will automatically have the new styling applied to it.

To see how the same stylesheet can be applied to multiple pages, download the Privacy.html file from our first lab session, put it in the same folder, edit it to make it link to the same CSS file, and then try both pages out in your browser by clicking on the ‘Privacy’ link of your order page. You should now see a consistent visual look across both pages.

You can have your CSS validated by uploading this external style sheet file to the following resource: http://jigsaw.w3.org/css-validator/. Does it pass the test?

Activity 10 (optional): The box model; changing the product table layout

There is of course still a great deal more to learn but by now you have already grasped the syntax and key principles behind the CSS language. One of the things you may want to familiarise yourself with a bit more is how CSS deals with borders – we shall try and apply this to the HTML table on our page, which we have so far left largely untouched.

Almost all document elements can have borders. Apart from specifying the border colour and width, we can e.g. change the amount of space between the content of an element and its border (known as padding) or the space between the border and a neighbouring element (known as the margin). The resulting so-called ‘box model’ is explained in further detail on http://www.w3schools.com/css/css_boxmodel.asp. Read through the short explanation and then use the ‘Try it Yourself’ button to change the border in the example from 25px to 5px and click ‘run’ to see the result; do the same for the padding, and finally the margin. This will help you understand the difference between the three.

Having learned this, create another version of your CSS file in which you add further styling to leave more padding between the text content of your table cells and their border (e.g. set this to 15 pixels), and replace the border around cells and the table itself by a two-pixel solid dark- blue border. Hint: change the border for tables (i.e. the table element), table header cells (th elements) and table data cells (td elements) to 2px solid darkblue, and set the padding property for the two types of table cell elements (th and td) to 15px, as follows:

table, th, td {

border: 2px solid darkblue;

}

th, td {

padding: 15px;

}

See what the products table ends up looking like: it should now have a double border around each cell as well as a double outer-border. If we do not want that, setting the border-collapse property of a table element to collapse replaces them by single borderlines. Try adding the CSS code for that yourself before checking your solution.

This is just one of many possible table designs – and not a very appealing one yet. Later on, in your own time, you could try borrowing a few ideas from the example code snippets on http://www.w3schools.com/css/css_table.asp for implementing horizontal dividers, hoverable tables, and table colours, and use those to replace your current styling (you can put that between /* */ symbols, turning it into comments rather than deleting it). Perhaps neither of these designs is entirely satisfactory yet, but in doing so, you should become more confident in integrating CSS from different sources and further customising it.

Note: Many contemporary web designers tend to steer away from HTML tables, particularly for page layout, among other reasons because they are not a natural match for responsive designs where the positioning of elements is expected to change depending on the available screen size. A popular alternative is to use <div> tags, which allow you to define different sections of a document and then apply a separate style to each such section. We shall see an example of their use in the next and final activity.

Activity 11: Creating your first Bootstrap page

In Lecture 2, we learned that, rather than having to code everything from scratch, we can use frameworks to further speed up design and development. Bootstrap is a very popular front- end framework that includes HTML, CSS, and JavaScript components for developing responsive, mobile-first web sites. Responsive web design is about making web content look good on all devices (desktops, tablets, and phones); it uses HTML and CSS (including CSS media queries) to resize, hide, shrink, enlarge, or move the content, depending on available display size.1 For example, on a phone, users could be shown content shown in a single column view, whereas a tablet might show the same content in two columns. To see an example, use the ‘Try it Yourself’ button on http://www.w3schools.com/bootstrap/default.asp (W3School's bootstrap tutorial) and inspect how the page changes as you make the window narrower.

Let's create our first Bootstrap page – what do we need? Let's download an earlier prepared example page from Blackboard called My_First_Bootstrap_Page.html. Open it in your browser

and see how it responds when you resize your browser window. Inspect the code in Sublime Text (also shown below).

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>This paragraph is inside a container.</p>

<p>Try resizing it - it should span the entire width of the viewport. Lorem ipsum dolor sit

amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua.</p>

</div>

</body>

</html>

Have a closer look at the four lines that were highlighted in the header section. The first of these is required to make the page responsive – it sets the width of the page to follow the available screen width on the device. The second links to Bootstrap's CSS, as provided by MaxCDN. If you want to make sure you are linking to the most recent version, then instead copy and paste the snippet from http://getbootstrap.com/getting-started/ (note that here you could also download a version in case you would like to work offline). The third line includes jQuery from another content delivery network (CDN) (in this case: Google). jQuery is a JavaScript library that simplifies JavaScript programming and on which Bootstrap depends. The last line links to Bootstrap's minified JavaScript file, which will control much of the functionality on your Bootstrap page.

Once your page has been set up like this, Bootstrap provides you with a large collection of pre- defined style classes (like the ones we defined ourselves at the end of Activity 8) which you can use to design your page typography (fonts etc.), any forms and their input elements, tables, navigation bars and buttons, image carousels, etc. To learn how we use these, let's add an image of our record player to the page. In HTML, images are defined with the <img> tag (see https://www.w3schools.com/html/html_images.asp if you would need further details). Add the following HTML line to your page body, at first simply using the default styling:

Reopen the page in your browser and now resize your browser window to a smaller size – by default, the image will end up being clipped. Instead, using the .img-responsive class provided by Bootstrap will make your image into a responsive one that automatically reduces in size to fit the parent element. Add this class to the <img> tag, as follows:

Try it out. The page should now also behave much nicer on a device with a smaller screen. Note what we did – we used one of Bootstrap's predefined style classes in our HTML code, which meant we did not have to write any CSS of our own to achieve the desired effect.

The "container-fluid" class in the first line of your page body is another such example of a Bootstrap style class defined somewhere in the Bootstrap stylesheet you are linking to. This is the class that creates the full-width container which rescales to fill up the available space.

To specify different styling for different sections of a page, you will often use an HTML element we haven't introduced yet in our first lab session: <div> tags. They will come in particularly handy when using Bootstrap's grid system. To understand both, change your page layout so that (given a large enough screen) the content is now arranged in two columns, by changing the body section of the page to this (note: as you may be running out of time by now, you could also just download Activity11.html from Blackboard and try it out!):

<h1>My First Bootstrap Page</h1>

<p>This paragraph is inside the left column of the grid.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

ut labore et dolore magna aliqua.</p>

</div>

<p>The picture starts off in the right column, but try making the window smaller.</p>

</div>

The outer <div class="row"> ... </div> delineates the part of your page that will be put in a grid row; inside that row, we create two further sections or divisions, again using <div> tags. By each time adding class="col-sm-6" we indicate that they are meant to be organised in two equal-width columns. If instead we would specify class="col-sm-4" for the left column, and then class="col-sm-8" for the right column, the right column would become twice as wide as the left one.2 Give that a try! What's more, the grid system is also responsive: if you make your browser window smaller, the initial two-column design will revert to one where the items are stacked on top of each other (which would be more suitable for a mobile phone). To learn more about Bootstrap's grid system after this session, please refer to:

• http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

• http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Where to find more

After this first encounter, you are ready to start learning more about the Bootstrap framework. An excellent tutorial, with plenty of code examples, is provided on W3Schools. Start here: http://www.w3schools.com/bootstrap/default.asp.

There, I recommend you have a quick look first at BS Forms and BS Inputs (select those in the navigation menu on the left), use the ‘Try it Yourself’ button to experiment with a few examples. You could then identify which of these designs you think would improve the layout and user-friendliness of the online shop page you created in the earlier lab activities. You will also see how by including the correct type (e.g. type="email") in an input element, Bootstrap (and jQuery) will already take care of several of the required checks and error handling (e.g. flagging up whether an email address is invalid).

Some other interesting pre-defined Bootstrap classes which might be suitable for the shopfront example:

• BS Tables – as an alternative to the HTML product table we created earlier;

• BS Navbar – at the very end of this section of the tutorial, the code example for ‘Collapsing The Navigation Bar’ will show you how to bring up the ‘hamburger’ button we talked about in Lecture 3 (i.e. the button that some users struggle to notice...).

The same W3Schools tutorial, in the “Bootstrap Themes” section, also has a few example HTML page templates that use Bootstrap. Those provide some pre-defined pages that you could experiment with and make into your own versions.

You may want to work your way through some other parts of the CSS and Bootstrap tutorials selectively, as you work on your task.

Apart from these tutorials, another fun resource you may want to give a try is the “Net Ninja”'s YouTube introduction to Bootstrap – the first video in the series can be found at: https://www.youtube.com/watch?v=xvfm7IpEkBk. Note that the HTML & CSS editor shown in the videos is called Brackets – yet another alternative to Sublime Text (http://brackets.io/).

Finally, for those preferring a written-out introduction to CSS, Chapter 3 of Sebesta's text book (see Blackboard for the full reference) would do, but note that this book does not yet cover Bootstrap, and if you decide to use Bootstrap, the amount of CSS coding required will be much less.

IMPORTANT – What do you need for your individual assignment?

One of the marking criteria relates to how you styled your web page(s). Although you are free to consider other alternatives, the Bootstrap framework could be a convenient way to produce a good-looking, responsive page design, without having to write too much CSS code of your own. You could e.g. start with a free example HTML page template that makes use of Bootstrap, get to know its various elements, and then further customise your page(s) to better suit the task. You could learn more as you go along:

• By referring to one of the proposed HTML tutorials, you could look up more information on the HTML page elements that need changing;

• Learning the CSS basics (as we did today) means you know how to apply certain style elements to your page;

• A Bootstrap tutorial will help you understand what other styling choices may be available that better suit your intended design.

In your accompanying report, you are expected to document what you did and justify the main design decisions you took.

As the task also involves some back-end database connectivity, in addition to this, you will then need to include some PHP scripting (cf. Lab Session 2). One way to proceed could be as follows. Start by taking the HTML page that is meant to show the list of products, change the extension from ‘ .html’ to ‘ .php’, and test it out on our web server. Next, you identify the section of the page where you want to show the information product categories. There, at first you could just try inserting some of the PHP code from Lab Session 2 and make it show the list of products_class we produced in that session. That way you know that you are putting the code in the right spot and that it connects successfully to our database server. Once you can get your script to successfully show the products, you can then spend time further modifying it so that it produces content with a similar styling to the rest of your solution. Good advice is: regularly test the changes you make to your code on the web server before you make any more changes; keep backups so that you can revert back to a working version if things go amiss.

2023-04-25

Java

物理(Physical)

LINUX

C++

Python

Processing

sas

ios

maths

maple

C语言