Download presentation
Presentation is loading. Please wait.
1
WEBMASTER SKILL SESSION
Junyoung Justin Kim January 26, 2017
2
Overview Section One Website Requirements Content Requirements
Section Two Modifying your web page Basic HTML Section Three Skill practice time
3
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
4
Content Requirements Home Page Components (links, team description, etc.) Content of website (team pictures, project descriptions) Semester Documents
5
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
6
Project Partner Info Describes project partner's goals or philosophy
Provides link to project partner’s webpage An Example – oject.html
7
Checkpoint Section One Website Requirements Content Requirements
Section Two Modifying your web page Basic HTML Section Three Skill practice time
8
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
9
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.
10
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.
11
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 "/".
12
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>.
13
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>
14
Basic Tags Linking : < a href> Here a stands for anchor and href for hypertext reference Example -<a href=" is a link to google</a> <a 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" />
15
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>
16
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>
17
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>
18
Dreamweaver Connect to the driver that you mapped just now! Make changes and save it. Check it online directly!
19
Dreamweaver Practice
20
Practice?
21
Checkpoint Section One Section Two Section Three
Website Requirements Content Requirements Section Two Modifying your web page Basic HTML Section Three Skill practice time
22
Questions Please ask questions
Junyoung Justin Kim – (come to office hours) Your own TA Your advisor
Similar presentations
