程序代写 Dr Martin White

Dr Martin White
Mobile Web 3D Applications
Creating a Responsive Mobile First Web Page

Creating A Responsive Mobile First Web Page
Table of Contents
Introduction 3
Code editor and libraries 3
Prerequisite knowledge 3
Live Feedback Site 3
Tutorial Style 3
Different technical approaches 4
Part 1: Site folder structure 5
Warning, your site might not work on the Web Server 6
Part 2: Creating the page structure with a fluid grid layout 7
Evaluate the task ahead 7
Examine the comp 7
What to do if things go wrong 8
Create a fluid grid page with Bootstrap 13
Create the header 16
Convert the navigation menu to a 3-bar icon 20
Create the Footer 23
Part 3 Insert the laboratory 1 contents 27
Insert the image content 27
Part 4 Create the CSS styling rules 33
Responsive web design – CSS3 media queries 33
Create the CSS rules for the mobile main contents 34
Install and declare fonts 35
Continue to build your custom.css file 38
Get used to using Chrome Developer Tools to examine your site 40
Create the CSS rules for the mobile header logo and navigation menu 44
Style the logo 44
Style the navbar 46
Style the navigation menu 47
Style the navigation dropdown menu 50
Create the CSS rules for the footer 52
Style the footer and its contents 52
Create the CSS rules for the other screen break points 54
Tidy up your CSS 59
Part 5 Publish your website — Lab 1 61
Part 6: Set up Git and GitHub with Visual Studio Code 62
Appendices 63
Appendix A — Getting Started 63
Set up your coding environment 63
Required Libraries 63
Integrating with GitHub 63
Prerequisite knowledge 63
Live Feedback Site 63
Appendix B — Some Technical Details 65
Different technical approaches 65
Appendix D — Best practices for naming files and folders in a website 66
Appendix E — Rationale for fluid grid 66
Appendix F — Setting up your Bootstrap template 67
Appendix G — Create a fluid grid page with Bootstrap 68
Appendix H — Convert the navigation menu to a 3-bar icon 69
Appendix I — Inserting Image Content 70
Appendix J — CSS media queries 72
Appendix K — Working from home 73
Appendix L — Using Git and GitHub for to manage your code 73

Introduction
Welcome to the Part 1 of this tutorial on creating a responsive mobile first web page. You may recall on the Canvas page where you downloaded this tutorial from that we suggested two approaches to acquiring the skills and knowledge needed to complete this tutorial:
1. You could find a video tutorial online, e.g. from YouTube, and there are plenty available, and follow that to achieve the same or similar results. Here is one, for example:
· https://www.youtube.com/watch?v=9cKsq14Kfsw
2. Alternatively, follow this tutorial in detail, where you can follow the instructions carefully and read the embedded learning materials as you proceed
3. Or, follow the instructions and catch up on the learning materials later.
Whichever approach you use, there is an optional tutorial quiz (go back to Canvas) that you can complete to solidify your knowledge.
Code editor and libraries
If you do not already have a preferred coding environment, you will need to set one up. We recommend using Visual Studio Code. Further, all tutorials will exploit the Bootstrap front-end framework extensively. Also, this tutorial requires no previous knowledge of a full web development stack — you will learn by doing in the lab (or at home) using the provided Canvas based learning materials. For a longer discussion on setting up your coding environment, etc. See the Appendix A for more details.
Prerequisite knowledge
This tutorial requires no previous knowledge of a full web development stack — you will learn by doing in the lab (or at home) using the Canvas learning materials. For a longer discussion on prerequisites, etc. See the Appendix A for more details.
Live Feedback Site
This laboratory tutorial gives you, in advance, a completed version of the end result located at the Live Feedback Site to enable you to compare your work with an end result if you get stuck. For a longer discussion, etc. Live feedback site links can be found on Module Canvas home page. See the Appendix A for more details.
Tutorial Style
This tutorial is developed from scratch, as we develop the code, we have written the tutorial in parallel. This produces more of a narrative style tutorial rather than a simple set of instructions; so, to reduce the overall length will try, where we can, to:
· Move some of the ‘learning material’ detail (as opposed to instructions) to the Appendix and provide, where appropriate Canvas quizzes to test your knowledge and understanding of key learning materials
· Provide links, e.g. in the document, to alternative third party (usually YouTube) videos that outline the same or similar key concepts.
· Provide some of our own video clips on key concepts where suitable third-party videos are not available.
The module convenors will complete and update all the lab tutorials each year again to test they still work, particularly after library updates. A particular consequence of this is that when we get coding, we sometimes change the CSS or some other code aspect, and then have to backtrack to update the tutorial text. This can lead to the odd mistake or anomaly in the tutorial text. However, there is no substitute for turning up to labs where you will find the module tutors who can correct any such anomalies, and we deeply appreciate your feedback to make the tutorials better.
Different technical approaches
There are many different ways we could use to develop a simple responsive and mobile first web 3D application (3D App). However, we have to choose an approach, as such we are choosing to develop mostly from scratch exploiting a small number of key libraries such as Bootstrap, and a using responsive and mobile first approach, rather than hybrid or native approaches. See Appendix B for more details.
Part 1: Site folder structure
In lab_0, you have set up your folder structure for the module, it may look like the Figure 1:

Figure 1: The initial proposed site folder structure

You can see here that to organize your work for the other labs in this module you only need to add lab2, lab3 and so on. We anticipate, as your results from a previous lab are completed that, by and large, you will build on these in the following week’s lab requiring a copy of the previous lab and then to move forward by modifying it. Further, in Part 6 of this lab 1, we will store our work in a GitHub repository.

You will need to download from the Canvas module site the resources for this lab and insert them into the Lab 1 folder. Organise your images and text into an asset folder as indicated in Figure 2.

Figure 2: Adding some assets to the Lab 1 site structure
You’ve now defined a local site folder for your Mobile Web 3D Applications (3D App) Lab 1 site. This is where you will keep your working copies of your 3D App pages on your local computer (e.g. on the Home Share/3dapp/lab1 or your Laptop, and in my case I am using Dropbox).
Warning, your site might not work on the Web Server
You should take care when naming files and folders on your site when developing on a PC which is case insensitive and porting your files to a remote web server, which is likely to be Unix based and case sensitive. See Appendix D for more details.
Part 2: Creating the page structure with a fluid grid layout
The second part of this tutorial focuses on creating the fluid grid layout for your responsive mobile first web page, which is a core component of your 3D App (i.e. a web application with interactive 3D content). This section explains how to create a CSS-based fluid grid page layout (a pre-requisite for your 3D App). A fluid grid page layout determines how your page will appear in a desktop, tablet or smartphone browser showing, for example, the placement of menus, images, and other kinds of content utilizing image scaling, font resizing and CSS3 media queries.
Appendix E discusses how the rationale for creating a page structure with a fluid grid layout in more detail, don’t forget to read that information.
For this tutorial, our fluid grid layout will exploit Bootstrap, which is, and I quote “the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web”, or so they say!
So, you need to be careful about which versions of Bootstrap you use. You may come across code snippets that you want to adapt that only work with previous versions of Bootstrap. You should use the latest stable version of Bootstrap and can certainly use the previous year’s version shown on the Live Feedback Site.
Now, it is highly likely that you will hunt around the Internet for open source code snippets with which to build your larger applications, just remember to cite them.
Evaluate the task ahead
The first steps to creating a website usually begin on a piece of paper or in a graphics-editing application such as Adobe Photoshop. Graphic designers usually sketch out a piece of ‘comprehensive artwork’ (also known as a comp) for the website to show it to the client and make sure that the initial ideas for the site meet with their client’s approval.
Examine the comp
A comp consists of any number of page elements that the client has requested for a website. For example, the client might say, “I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips.” Based on that discussion, the designer begins planning the layout of the site and creates sketches of sample pages that fulfil the client’s requirements. You are given just such a list of requirements for your 3D App assignment — refer to the assignment section on Canvas.
However, although this isn’t a web site development module, we are going to exploit a full web stack to build our 3D App. Figure 3 shows an example comp of the required Lab 1 page layout. In this particular case, the comp could simply have been constructed in Photoshop, or it could have been sketched with paper and coloured pens — I actually just took a screen shot from a previous year’s Bootstrap results for this lab to simulate a Photoshop comp.
We can see from the comp that the graphic designer has provided you with a design that includes a number of content areas. These content areas include a top banner, with logo and navigation, a main 3D viewing area, with a Coke image as a backdrop, that will display your 3D models. Beneath the main 3D area are three columns, each with an image at the top — the image can act as a button link to a new page or to load the corresponding 3D model, and the text area below. At this stage, the comp’s contents may be undecided; you now need to layout this design in HTML5 and style it in CSS3.
What to do if things go wrong
When learning new techniques, or working with unfamiliar software, it’s easy to make mistakes.
The most common causes of mistakes are accidentally skipping a step in the instructions, or miss-spelling an ID or CSS property. If your page doesn’t look the way you expect, don’t ignore it and plough on, you must retrace your steps to make sure you did everything as instructed. The lab tutor does not have a magical wand to fix your code, well actually they do, it’s called, ‘here’s one I created earlier, located on the Live Feedback Site. You can look at the results there as a last resort to bug find, but although the latest this year version might not go live until a week or two after the lab session, there is always last year’s version available.
So, generally, you will find the all lab results in the Live Feedback Site so you can compare and contrast your results.
But, sometimes, the best idea is to start again from scratch. It can be frustrating, but you can learn a lot from your mistakes. Of course, if you do get stuck, call for help, the course convenor, lab tutor, or lab assistant will be there in the lab every week.

Figure 3: An example comp of the Lab 1 web page layout
So, let’s build your 3D App landing page similar to that shown in Figure 3 — we will use Bootstrap 4.3.
Head on over to the Bootstrap site and download the libraries, then install them into your project directory. Don’t forget to have a read around the Bootstrap ‘Get started’ notes and make a decision on whether to use Bootstrap’s managed dependencies, a Bootstrap CDN or a compiled build of Bootstrap’s CSS and JS. We tend to use either a CDN or a compiled build, more usually the compiled build. We suggest you download the compiled CSS and JS build.
It should download as a zip file containing a ‘css’ and a ‘js’ folder, which each contain all the variations of Bootstrap CSS and Bootstrap JS that you may need. You will probably need only the bootstrap.js, but you can use the minified version, and I think you should only need the bootstrap.css (or the bootstrap.min.css) versions of the CSS files — but no harm in leaving them all in the ‘css’ folder for now — you can clear out the ones you don’t need later.
Instruction: Install the ‘css’ and ‘js’ folder into your project directory at the root, i.e. same level as your assets folder, and while you are doing this add a folder for some fonts in your assets folder, see Figure 4.
As we move forward through the module labs we will build up the assets folder to include other media, e.g. 3D, videos, whatever.

Figure 4: The lab 1 file structure with the new assets/fonts, css and js folders
That is about all we need for now, so let’s open up a code editor to start developing our code and markup. In this tutorial we will use Visual Studio Code, see Figure 5 for the Lab 1 site opened in Visual Studio Code. Here, you can see the overall Mobile Web 3D Application module folder structure, which correlates to that shown in Figure 4. You will be building code and creating media assets for Labs 1 through to Lab 7, Lab 8 will be an example of a very basic 3D App, and Lab 9 will be a Coca Cola based 3D App continued as a partially completed Bootstrap version of Lab 6, but exploiting the MVC design pattern, which you explore in Lab 7 and 8. Note, each week you will add lab2, lab3, and so on, folders. AS the labs are completed each week we will usually add these new results to the Live Feedback Site.
You can see from Figure 5 that we have installed all the Bootstrap CSS and JS files that we downloaded. However, you only need the bootstrap.css or bootstrap-min.css and the bootstrap.js or bootstrap-min.js. I suggest to use the bootstrap.js and bootstrap.css versions, because there is some feature we need later that is left out of the min versions! You can remove the rest or archive them away somewhere, or just leave them where they are for now.

Figure 5: The lab 1 file structure opened in Brackets
We can now start to develop the fluid grid layout in HTML5 using Bootstrap. First we need to get a basic template up and running. If you look on the Bootstrap Get started site you will see they have a starter template you can copy.
You will have to do some digging a round to install the libraries for JQuery, popper and Bootstrap. For example, Bootsrap downloads as a zip file and you simply grab the files you need and put them in your css and js folders, while for the Popper and JQuery you can use the CDNs or as we prefer, I simply opened the CDNs and copied the contents into new files and installed in the css and js folder, then tested they worked ok.
Here’s an example that you can use, stick it in your code editor and tidy it up, and save it as index.html, see Figure 6.

Hello, world!

Note, you will see that first we tried out the CDNs for JQuery and Popper, then created the local versions and installed them.
For more details on setting up a Bootstrap template, check out Appendix F. If you decide to use the CDN, you will have an HTML template like that shown in Figure 6, but note the libraries versions have advanced.

Figure 6: Your new index.html initial template.
So, once you have setup your initial HTML template as shown in Figure 6 check it works on a web server. Here, you can use your Home Share/public_html/lab1 directory as discussed in Part 1, i.e. copy over your file structure to your Home Share/public_html/lab1. In which case, you will access it through something like:
· http://users.sussex.ac.uk/~martinwh/3dapp/lab1/
Your path might be slightly different, for a start use your own username, obviously.
Alternatively, if you are working from home, perhaps on your personal laptop, then you can install a web server such as XAMPP, WampServer for a PC or MAMP for a Mac and check it works on your localhost, see Figure 7, and the path might be:
· http://localhost:8888/3dapp/lab1/

Figure 7: Hello world on your localhost
Clearly, this isn’t an exhaustive test! Ok, let’s get on with creating the page structure, for the comp given in Figure 3, with a fluid grid layout.
Create a fluid grid page with Bootstrap
Bootstrap’s grid system allows up to 12 columns across the web page, which can be grouped into a wider column, e.g. 2, 4, 6, 12, etc. You do odd columns as well, e.g. 3, 5, 4, and mix it up! Because the Bootstrap grid system is responsive, these columns will re-arrange depending on screen size.
For a more detailed discussion on fluid grid in Bootstrap see Appendix G. Also, here is a very good YouTube video describing Bootstrap fluid grid layouts: Bootstrap 4 Grid System Explaind! Note, here they are using Bootstrap 4.0.0-alpha, and they have added some custom CSS.
To design your layout, it is often useful to jump over to somewhere like w3schools and use their Bootstrap grid examples where you can try out different layouts and then reuse the code. So, if we look at the comp in Figure 3 we can see that we will need a number of block elements that include:
· A header that contains a logo based on text, not an image, and a navigation bar.
· A row that contains a background main image with a floating text box.
· Another row that contains three columns with an image in each.
· Another row that contains three columns with text aligned under each image and a button in each to link to other information. However, in this case we don’t use a Bootstrap row because we want the text to stay underneath the associated image when we shrink to smaller devices. If we make the image 100% width of the column, then the text has to float beneath the image.
· And, finally a footer that contains some copyright information and links constructed from awesome fonts.
The layout is designed to be responsive maintaining the same layout for desktop and larger tablets and rearranging to single column for smaller tablets and mobiles.
Don’t worry about the header and footer yet, focus on the main contents, put these contents in a Bootstrap container class — you can use a Bootstrap container or container-fluid class, but later if you use a container fluid class you will need to make sure you have enough background images for each media query break point. For now, I am going to use a Bootstrap container class.
That should be enough information to go and use the w3schools site to get the grid layout designed. You should end up with something like that illustrated in Figure 8. Try mo

程序代写 CS代考加微信: powcoder QQ: 1823890830 Email: powcoder@163.com

Hello, world!

Related Posts