Differences

This shows you the differences between two versions of the page.

--- personal_webpage [2018/09/21 22:25] – [Editing a Page] mcloughlin
+++ personal_webpage [2018/09/21 23:48] (current) – external edit 127.0.0.1
@@ Line 3: / Line 3: @@
 In this tutorial, we will be teaching you how to use ECON's personal webpage templates to create your own personal webpage on the ECON website. You will be downloading and customizing these template pages using an HTML editor in order to fill the page with your personal information.
-**NOTE: All Job Market Candidate Sites MUST adhere to the ECON template design. An example can be found at [[http://econweb.umd.edu/~support/jobmarketexample/|this link]]**
+**NOTE: All Job Market Candidate Sites MUST adhere to the ECON template design. An example can be found at [[http://econweb.umd.edu/~support/jobmarketexample/|this link]]**.
-**
 //NOTE: If you are using a non-departmental computer, click the following link for instructions to access your Z drive: [[FTP]]//
@@ Line 28: / Line 27: @@
 ==== Editing a Page  ====
-  - Find the file in Z:\username\public_html\ that you wish to edit.
+For this purposes of this tutorial, we are going to simply be using Notepad (or any equivalent text editor) to manually change the code directly within each file. For ease of use, we have labelled each item in the HTML code with "user-created" in order to make it easier to find what you want to edit.
+=== index.html ===
+{{:wiki:webpage-index.png?nolink|}}
-======EVERYTHING BELOW IS OLD======
+  - **Name ("user-created-name")**: change the text within the <h1> bracket to reflect your name.
-#*Alternatively, you can enter the web address of a web page you wish to edit by using the 'Open' option, and save it once finished editing.
+  - **Graduation Date ("user-created-graduation-date")**: change to reflect your graduation month and year.
-#Select the template you wish to edit:
+  - **Fields ("user-created-fields")**: change each object within the <li> brackets to reflect your areas of study.
-#*The difference between "index.html" and "without_navigation.html" is that "index.html" has a navigation sidebar, as illustrated in the figure below. If you're unsure which to use, we recommend "index.html". <br>[[File:Template diff.png]]
+  - **Contact Information ("user-created-contact-info")**: change the text to reflect your personal contact information. You will not need to change the office location, as that is where your mailbox resides.
-#Edit the body of the template according to your needs. For example:<br>[[file:pw2.jpg|500x550px]]
+  - **Extra Information ("user-created-extra-info")**: change the text within the <p> brackets to reflect any extra information you wish to convey.
-=== Saving Your Webpage ===
+=== research.html ===
-#To save your customized template file, go to File -> Save As -> Z:\username\public_html, where "username" is your ECON username.
-#Save the file as "index.html", as shown below:<br>[[file:pw4.jpg|500x700px]]
-== Adding a File to Your Webpage ==
+{{:wiki:webpage-research.png?nolink|}}
-#Go to your public_html directory on your Z drive (z:\username\public_html\, where "username" is your ECON username).
-#Copy and paste the file that you need to upload into your public_html folder:<br>[[file:pw12.jpg|500x500px]]
-== Adding a New Sidebar Menu Item ==
+You will find the following code in the "user-created" section of your research.html file.
-To add a new item in the sidebar menu or to edit your sidebar menu, you have two options:
+<code>
+<div>
+    <h2>Example Research Project</h2>
+    <p>Take this space to explain your project and any details you wish to include</p>
+</div>
+</code>
-=== Method 1 - Editing the Page Directly ===
+  * You can add as many of these divider elements to your page as needed. The template contains three by default, but you can copy and paste as you like.
-#Right click an already present link, and select insert or edit a link.
+  * Enter the title of your research between the <h2> tags.
-#Give the link a name.
+  * Enter a description of your research within the <p> tag. You can add more <p> tags to give your description more paragraphs.
-#Specify where it should direct to by entering an address or selecting a file.
-#*If selecting a file, remove the part of the address that says 'file:///Z:/<username>/public_html/'. In other words, unless the file is in another folder in public_html, simply put the name of the file without any preceding slashes.
-#Click OK, and then put your cursor at the end of the new link and hit delete to get rid of extra space.
-=== Method 2 - Editing the Page's Source Code ===
+=== teaching.html ===
-#Go to the 'Source' tab (below the editing screen) of your currently opened file.
-#In the 'Source' Tab window, find the code by pressing 'Ctrl + F' and enter the text <div class="header-dark", as shown in the figure below.<br>[[file:pw6.jpg|800x600px]]
-#When you find the text , you will get to see the list of links associated with your page.
-#Your new sidebar menu item needs to be in the format <nowiki><a href="http://www.google.com">My favorite search engine</a></nowiki>
-#You can replace the URL between the quotes to the URL of the webpage you want to link to. You can also change the description to fit the link.
-#When you are done, paste the edited code segment just before the </ul>.
-#Now save the file by going to File -> Save.
-== Creating a Link ==
+{{:wiki:webpage-teaching.png?nolink|}}
-#You can create a link on your page for a particular text.
-#Select some text and right click, then click 'Insert or Edit link' which will pop up a link properties window.
-#Now select the target to be associated with the link. The target can be another web page, a file or even an email address.
-#*If selecting a file, remove the part of the address that says 'file:///Z:/<username>/public_html/'. In other words, unless the file is in another folder in public_html, simply put the name of the file without any preceding slashes.<br>[[file:Link.png]]
-#Make sure you check the box for  'Link is to be opened' with your preferences from drop down menu.
-'''Note:''' All the files associated with links and all the inserted objects in the page should be kept in the location 'Z:\yourusername\public_html\files'
+You will find the following code in the "user-created" section of your teaching.html file.
-== Adding images to Your Webpage ==
+<code>
-#Place images that you need to place on your page in your public_html directory, preferably in a folder named "images", i.e. Z:\'your_username'\public_html\images\
+<div>
-#Click the "Insert image" button as shown in the figure below.<br>[[File:InsImage.png]]
+    <h2>Instructor</h2>
-#In the window that pops up, enter the address to the image in the folder you created earlier, i.e. "images/x.jpg".
+    <ul><li>Class 1</li><li>Class 2</li> <li>Class 3</li></ul>
-#Enter a caption for the image in both the "title" and "alternate text" boxes.
+</div>
-#Click OK and the image should be placed on your page.
+<div>
-#If you want the image to redirect to an other page/email when clicked, simply right click the image and follow the same direction in creating a link to text.
+    <h2>Teaching Assistant</h2>
-#You can resize the image by using the mouse on the sides and corners of the image.
+    <ul><li>Class 1</li><li>Class 2</li> <li>Class 3</li></ul>
+</div>
+</code>
-== Testing Your Webpage ==
+  * There are two divider elements here: one dedicated to courses you've instructed and which you've assisted, indicated by the text within the <h2> tags.
+  * Each class is indicated by the <li> tag. There are three by default, and you can change the text within them. Add more <li> elements as needed within the <ul> brackets.
+===== Testing Your Webpage =====
 Open any internet browser and open the following URL: http://econweb.umd.edu/~username/ (where "username" is your ECON username).
-== Clearing Browser Cache ==
+===== Clearing Browser Cache =====
+Sometimes when a change is made to your website, the page might not show the latest changes made. This is due to the browser bringing up a cached version of the webpage to save time.  When the browser cache is cleared, the latest changes will appear. Press the F5 button on your keyboard to refresh the page and reload any changes.
-Sometimes when a change is made to your website, the page might not show the latest changes made. This is due to the browser bringing up a cached version of the webpage to save time.  When the browser cache is cleared, the latest changes will appear. Use the following keyboard shortcuts to clear browser cache and refresh the webpage:
-*'''Microsoft Internet Explorer''': Ctrl + F5
-*'''Mozilla Firefox''':  Ctrl + Shift + R
-*'''Google Chrome''': Ctrl + F5 or Shift + F5