This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| personal_webpage [2018/09/21 23:47] – mcloughlin | personal_webpage [2026/08/24 18:41] (current) – removed mcloughlin | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Create a Personal Webpage ====== | ||
| - | |||
| - | 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:// | ||
| - | |||
| - | //NOTE: If you are using a non-departmental computer, click the following link for instructions to access your Z drive: [[FTP]]// | ||
| - | |||
| - | ===== Creating Your Webpage ===== | ||
| - | |||
| - | - [[http:// | ||
| - | - Unzip the downloaded templates into a folder. | ||
| - | - Copy the unzipped files to the " | ||
| - | - Your website is now active, and will be accessible on the web at the URL: http:// | ||
| - | |||
| - | ===== Your Webpage ===== | ||
| - | |||
| - | The files you unzipped to your Z: drive are laid out as follows: | ||
| - | |||
| - | * index.html : this is your main page, and what people see first when they visit http:// | ||
| - | * research.html : this page can be used to enter completed and ongoing research projects | ||
| - | * teaching.html : this page can be used to enter classed in which you have instructed or assisted | ||
| - | * files : this folder is where you will place any loose files on your site (e.g. PDFs, code, spreadsheets) | ||
| - | * files/ | ||
| - | * files/ | ||
| - | |||
| - | |||
| - | ==== Editing a Page ==== | ||
| - | 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 " | ||
| - | |||
| - | ==== index.html ==== | ||
| - | {{: | ||
| - | |||
| - | - **Name (" | ||
| - | - **Graduation Date (" | ||
| - | - **Fields (" | ||
| - | - **Contact Information (" | ||
| - | - **Extra Information (" | ||
| - | |||
| - | ==== research.html ==== | ||
| - | |||
| - | {{: | ||
| - | |||
| - | You will find the following code in the " | ||
| - | |||
| - | < | ||
| - | <div> | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | * 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. | ||
| - | * Enter the title of your research between the <h2> tags. | ||
| - | * Enter a description of your research within the <p> tag. You can add more <p> tags to give your description more paragraphs. | ||
| - | |||
| - | ==== teaching.html ==== | ||
| - | |||
| - | {{: | ||
| - | |||
| - | You will find the following code in the " | ||
| - | |||
| - | < | ||
| - | <div> | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | <div> | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | * 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:// | ||
| - | |||
| - | ===== 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. | ||
| - | |||