Its for a webdesign class at school. i already designed the interface in photoshop.
"Take your completed interface page and using the knife tool slice it up into parts that should be segmented such as the header, content area, links, footer.
Then, save for web and optimize each slice. All web elements should be optimized as GIFs, all photos as JPEGs. Save as index (homepage)HTML and images in your interface folder.
Notice Photoshop created an HTML file and a folder called images with the slices in it.
Now, open DW and open the HTML file. Here we will create another page and make some links."
"OK, open the interface index page in DW. Notice that's it's in a table with the slices as cells. Select the table and align it center using the properties inspector. Notice the options on the prperties inspector.
Go to modify>page properties and select a backround color. Other values for text, links, ect can be set here.
Save the index page and then save as any other pages to creat the site with at least 2 pages. They will all be the same (template).
Now insert data in content area.
Make internal and external links using properties inspector. Test site. Save."
Please help!
Sure, I'd be happy to help! It seems like you have already designed the interface in Photoshop and sliced it up into parts using the knife tool. Now, let's go through the steps you mentioned and further explain them:
1. Save for web and optimize each slice:
- After slicing the interface, you can save each slice separately for web by going to File > Export > Save for Web (Legacy) in Photoshop.
- In the Save for Web dialog box, you can choose the file format for each slice. GIF format is suitable for web elements (such as icons, buttons) that have limited colors and transparency. JPEG format is ideal for photos as it allows for more colors and better compression for photographic images.
- Optimize the slices by adjusting settings like image quality, resolution, and file size to ensure efficient loading on the web.
2. Save as the homepage (index.html) and create an interface folder:
- In Photoshop, when you save each slice for web, it automatically creates an HTML file and a folder called "images" with the slices in it.
- Rename the HTML file to "index.html" since this will be the homepage of your website. Keep the images and HTML file in the same folder, preferably named "interface" to keep everything organized.
3. Open Dreamweaver (DW) and load the HTML file:
- Open Dreamweaver and go to File > Open, and select the HTML file (index.html) from the interface folder you created.
- This will load the file into the Dreamweaver workspace, and you can see the table structure with the slices as cells.
4. Align the table and set properties:
- Select the table by clicking anywhere inside it, and you should see options in the properties inspector panel.
- Use the alignment options in the properties inspector to center align the table.
5. Modify page properties:
- Go to Modify > Page Properties on the top menu in Dreamweaver to access the page properties dialog box.
- Here, you can set various properties such as background color, text color, link color, etc. Choose the appropriate values based on your design preferences.
6. Save and create additional pages:
- Save the modified index.html file to apply the changes you made.
- To create additional pages for the website, simply save the index.html file with a different name (such as about.html, contact.html, etc.) within the same interface folder. These pages will have the same layout and design as the homepage, serving as a template for consistency.
7. Insert content and create links:
- Open the index.html file in Dreamweaver again and insert the desired content into the designated content area of the table.
- To create internal links, select the text or object you want to link, and in the properties inspector, click the "folder" icon next to the "Link" field and choose the corresponding HTML file.
- For external links, simply enter the full URL in the "Link" field of the properties inspector.
8. Test the site and save:
- Before uploading the website, you should preview and test it within Dreamweaver to ensure everything works as expected.
- Go to File > Preview in Browser to check how the pages look and ensure that the links function correctly.
- Make any necessary modifications or corrections if needed and save your files.
Following these steps should help you progress in your web design class and create a functional website using Adobe Photoshop and Dreamweaver. Good luck with your project!