1. Basic Web Design UVICELL Week 4 Templates and site management Week 4 Templates and site management

2. Creating a New Site in Dreamweaver  On the SITE pull-down menu select NEW SITE  Name your site, only you will see this name, click NEXT  Click the NO, I DO NOT WANT TO USE SERVER TECHNOLOGY radio button, click NEXT  Click the EDIT LOCAL COPIES ON MY MACHINE, THEN UPLOAD TO SERVER WHEN READY (RECOMMENDED) radio button  On the SITE pull-down menu select NEW SITE  Name your site, only you will see this name, click NEXT  Click the NO, I DO NOT WANT TO USE SERVER TECHNOLOGY radio button, click NEXT  Click the EDIT LOCAL COPIES ON MY MACHINE, THEN UPLOAD TO SERVER WHEN READY (RECOMMENDED) radio button

3. Creating a New Site in Dreamweaver Setting the Local Path  Click the folder next to the WHERE ON YOUR COMPUTER DO YOU WANT TO STORE YOUR FILES? and select the folder where you are creating your pages and storing your images, then click NEXT

4. Creating a New Site in Dreamweaver Connecting to the Web Server  The next screen will ask you HOW DO YOU CONNECT TO YOUR REMOTE SERVER  If you are at home and have an ISP with web site hosting then the answer will be FTP (file transfer protocol)  If you are on a corporate LAN and your company has web servers in-house then the answer is Local/Network  The next screen will ask you HOW DO YOU CONNECT TO YOUR REMOTE SERVER  If you are at home and have an ISP with web site hosting then the answer will be FTP (file transfer protocol)  If you are on a corporate LAN and your company has web servers in-house then the answer is Local/Network

5. Creating a New Site in Dreamweaver - FTP  You must contact your ISP to obtain your FTP settings  Be sure to ask for:  Hostname (address of FTP server)  Location on server or folder  Your username  Your password  If you do not have this information, enter your ISP name in the HOSTNAME space and click NEXT (to return to this window go to the SITES menu and select EDIT site, Name of site)

6. Creating a New Site in Dreamweaver - LAN/Network  If you are connecting through a corporate LAN or network you must call your IT department or systems administrator for the correct path and permissions to access the web server directory

7. Creating a New Site in Dreamweaver - Success  If all settings are correct you should see this window when you click TEST CONNECTION, click OK and then click NEXT  Click NO, DO NOT ENABLE CHECK IN AND CHECK OUT, click NEXT  In the SUMMARY window double check your information and click DONE when ready

8. Converting a Page to a Template  Create your page and make sure everything is in placed where you want it  Create links to the pages that you’ll be making  You can either create blank text pages in your site directory with the correct name and use those for the links  Or just type in the name of the link in the Properties Palette as “page_name.html”  Save page using the appropriate page name  If you are making the home page, name it “index.html”  Create your page and make sure everything is in placed where you want it  Create links to the pages that you’ll be making  You can either create blank text pages in your site directory with the correct name and use those for the links  Or just type in the name of the link in the Properties Palette as “page_name.html”  Save page using the appropriate page name  If you are making the home page, name it “index.html”

9. Converting a Page to a Template Page 2

10. Converting a Page to a Template Page 3 For each button be sure to provide a link to the page which should be displayed when the viewer clicks on it

11. Converting a Page to a Template Page 4  From the FILE MENU select SAVE AS TEMPLATE  Close the template (you will have to click OK when you are prompted)

12. Creating Editable Regions in Your Template  On the INSERTS palette select the TEMPLATES tab  Highlight the area on your template that you want to be able to edit, you can also select the entire page if you wish  Then click the EDITABLE REGIONS from the INSERTS > TEMPLATES palette  On the INSERTS palette select the TEMPLATES tab  Highlight the area on your template that you want to be able to edit, you can also select the entire page if you wish  Then click the EDITABLE REGIONS from the INSERTS > TEMPLATES palette

13. Creating Editable Regions in Your Template - Page 2  Give your EDITABLE REGION a name  Click OK  Give your EDITABLE REGION a name  Click OK

14. Creating Editable Regions in Your Template - Page 3  Note areas which are editable  Select SAVE from the FILE menu and allow Dreamweaver to save it to appropriate location  Note areas which are editable  Select SAVE from the FILE menu and allow Dreamweaver to save it to appropriate location

15. Opening Your Template  From the FILE MENU select NEW  Click the TEMPLATES tab (top center)  Click TEMPLATES FOR: select your site and click on your template in the center window  Be sure Update Page when Template Changes is checked!

16. Creating New Pages From Your Template - Add Title  Always Start at the top of the page - Be sure to change the page title first, you’d be surprised how many companies forget to do this

17. Creating New Pages From Your Template - Buttons (Optional)  Since this is the “About STX” page, the button state can be “On” for this page  Delete the button, and then select INSERT IMAGE from the INSERTS palette  Select the ON state for “About STX” button

18. Creating New Pages From Your Template - Content  Add your content for the new page  Save your page, FILE menu, SAVE AS, about_stx.html (your page name here)