WEBMASTER SKILL SESSION Junyoung Justin Kim January 26, 2017
Overview Section One Website Requirements Content Requirements Section Two Modifying your web page Basic HTML Section Three Skill practice time
Website Requirements Week 5 New team member pictures/descriptions New project descriptions/pictures New TA and/or advisor w/pictures Updates on past delivered projects, if any Week 15 All project updates and detailed descriptions, including delivered projects Everything from week 5
Content Requirements Home Page Components (links, team description, etc.) Content of website (team pictures, project descriptions) Semester Documents
Home Page Team Description Project Partner Description Contact Info Link to Team Members Link to project descriptions and current status Link to delivered projects, if any Aesthetics
Project Partner Info Describes project partner's goals or philosophy Provides link to project partner’s webpage An Example – https://epics.ecn.purdue.edu/abod/currentpr oject.html
Checkpoint Section One Website Requirements Content Requirements Section Two Modifying your web page Basic HTML Section Three Skill practice time
Accessing Your Site Your team’s share drive is located at: Windows - \\epics.ecn.purdue.edu\epics\xxxx Mac - smb://epics.ecn.purdu.edu/epics/xxxx You can type this into an explorer bar. Might need “ECN\” before your username (e.g. ECN\bhargavr) Use your career password
Regular Access – Mapping The T: Drive You can map \\epics.ecn.purdue.edu\epics\xxx\ to T: (or Z:) for convenience In the T: drive, your webpage files live in the WWW folder. Your homepage is index.html, index.php, index.htm, etc. For off campus , you need to be connected to Purdue through a VPN connection.
Common Issues What if your website is very far out-of-date? Redo it! Ask your team members to submit entries What if you don’t know PHP? Or what if you don’t know how to program? Consider a redesign in HTML. It won’t take as long as you might think. Use the template pages offered in Dreamweaver.
HTML – Your first web page HTML – Hyper text markup Language The basic structure of an HTML document includes tags, which surround content and apply meaning to it. All tags have the same format: they begin with a less-than sign "<" and end with a greater- than sign ">". There are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/".
Structure of an HTML page An HTML document is divided into two sections Heading – The heading contains information describing the documents such as title. The head section is indicated by the opening tag <head> and the closing tag </head>. Body – The body section is where the Web document text, graphics and other elements are placed. The head section is indicated by the opening tag <body> and the closing tag </body>.
My first Web Page <html> <head> <title> <h2 style="background-color:#ff0000;"> My first website </title> </h2> </head> <body> <p>Hurrah! This is my website.</p> </body> </html>
Basic Tags Linking : < a href> Here a stands for anchor and href for hypertext reference Example -<a href="http://www.google.com">Here is a link to google</a> <a href="mailto:epics@purdue.edu"> epics@purdue.edu</a> </h3> Image: <img> All you need do is first tell the browser that you want to insert an image (img) and then where it is located(src). Example - <img src = “C:\Users\Radhika\Desktop\purdue.jpg” alt=“Purdue" />
Basic Tags Heading – There are six heading tags which include <h1>,<h2>,<h3>,<h4>,<h5>,<h6>. Select – The select tag creates a drop down list. E.g. <select> <option value = “Volvo”>Volvo</option> <option value = “Mercedes”>Mercedes</option> <option value = “Audi”>Audi</option> </select>
Basic Tags <style> - It is used to define the font size, color and other attributes of the data. Example <style> body{ color: white; background-color: black; font-size: 5cm; } </style>
Tables Tags used Example <table> <table> - Defines that we have a table <tr> - Defines a table row <td> - Defines a table data Example <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
Dreamweaver Connect to the driver that you mapped just now! Make changes and save it. Check it online directly!
Dreamweaver Practice
Practice? http://www.w3schools.com/html/
Checkpoint Section One Section Two Section Three Website Requirements Content Requirements Section Two Modifying your web page Basic HTML Section Three Skill practice time
Questions Please ask questions Junyoung Justin Kim – kim302@purdue.edu (come to office hours) Your own TA Your advisor