Roadrunner loginPersonalize this document by keying in your
One of the key features of this web template is that it is responsive in the sense that it is sensitive to the browser width and is intended to work equally well for desktops, tablets, or smart phones. Web responsivity is one of the most recent demands upon web designers, due to the needs of small-width devices.Php assists in creating the page presentations by inserting various component pieces into a layout via file inclusions. Pages in a website often differ only by the content section, namely, they use the same links, the same header and footer. Rather than duplicating these portions, you can put them in one file and include them in each of the pages.
This template generates a variable-width centered "container" block within the document body. The container has maximum and minimum sizes.
ls (current directory listing) ls <DIR> (subdirectory listing) cd <DIR> (change to another directory) cd (change to home directory) mv <File1> <File2> (rename a file) cp <File1> <File2> (copy a file) rm <File> (delete a file) clear clear the terminal windowShell access to your account is achieved with a secure-shell client which can be:
- Windows clients such as PuTTy and SSH Secure Shell Client (the one in the lab).
- Command line from a terminal shell on UNIX-like machines (including Mac OS X):
$ ssh LOGIN@roadrunner.cs.wcupa.edu
- Log in to your roadrunner.cs.wcupa.edu account via a secure shell client.
- Change to the public_html folder:
$ cd public_html/ $ ls
- Retrieve the WebTemplate.zip archive file
and double check that you actually got it.
$ wget http://roadrunner.cs.wcupa.edu/samples/WebTemplate.zip $ ls ------------------------------------------- you should see the WebTemplate.zip file
$ unzip WebTemplate.zip $ ls ------------------------------------------- you should see WebTemplate
Rename the website:
$ mv WebTemplate WebSample $ ls ------------------------------------------- you should see WebSample
index.php (website root page) sample.php (a sample for page creation) twocol.php (another sample with "large" content)
- create a suitable text-based PNG image file with a variety of fonts, sizes and colors,
- see how the PNG file appears vertical color gradients,
- download the image (just right-click on it) as header.png and store it into the images directory (replacing the default one),
- exhibit the CSS settings to create the color gradient, and then edit css/layout.css, replacing the default settings in the header rule.
deny from all
<?php ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample</title> <link href="css/nav.css" rel="stylesheet" /> <link href="css/layout.css" rel="stylesheet" /> </head> <body> <main> <header> <img src="img/header.png" /> </header> <nav> <ul> <li><a href="#" class="no-action"><img class="menu" src="img/menu.png" /></a> <ul> <?php require_once "include/links.php" ?> </ul> </li> </ul> </nav> <section> <h2>Sample</h2> </section> </main> </body> </html>
<li><a href=".">Home</a></li> <li><a href="sample.php">Sample</a></li> <li class="arrow no-action"><a href="#">Header 3</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="twocol.php">Two Cols</a> <li><a href="#">Link 3</a></li> <li class="arrow no-action"><a href="#">Link 4</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Link 4</a></li>