![]() ![]() Only copy the images we need to use for this website, so only the header text, the top and bottom of the content and the middle part too. We are going to add our text logo now, remember those sliced images from Photoshop? I hope so! We now need to copy those images to our other images map we made with Dreamweaver. Make sure the insert is “at selection point” and give the ID the name header, click add new CSS line, again that box will popup and click OK. You can now delete the text that been added in the div and make sure you are still in that div, add a new div the same way we made the OK, So far so good? If not please re-read the steps or ask some help via the comments.įrom now on everything we do MUST be in the wrapper div. It can be bigger or smaller according to your website wishes. The Wrapper div is made to ALWAYS center your website that’s why we have the right & left margin set to auto and the width set to 800 px because that is the size of our website. Then we go to option “Box” and use Margin left & Right Auto.Īnd click OK. In this menu we can add and change the CSS.įirst we go to “Positioning” and use Width 800 px and Height set to auto. Nothing is need to be changed here just click OK and yes, again a box will pop up. Next we choose the option “Insert Div-Tag”Ī box like this one will appear and make sure the first thing is “at selection point”I’m not sure if this is the right translation because my DW is in Dutch, just make sure it isn’t the option: at the beginning or the end of the tag) and give it the ID of wrapper. On your top right you have a menu called “Insert” and a drop-down menu with possibilities like: Forms, Text, Favorites. ![]() (If not? You skipped step 5! You get punished and have to go back to start!) Okay good, we now have a white page with a title and saved as index. First things first, We give it a Title and save it as index.html Now you can make a new HTML file by selecting it from that Dreamweaver popup box. We use this method to manage your sites more easy, you will understand it when you make more then 1 site, Nothing really happened now, but as you can see on your right your site is there. ![]() Select the folder and create a new map called “images” Now select Advanced Settings so you can choose your dir for your images. I called it Slice & Code tutorial and I saved it on my desktop in a new map called “tutorial”. In the top menu bar where you find File, Edit,… you will see a menu called “Site” and select “New Site” Now you open your Dreamweaver, We will start of with doing the right thing when we make a new site when using Dreamweaver. This will save the sliced images to a map called “images” You will notice you have more images then you need but don’t mind that, we will deleted them later. Go to File > Save for Web & Devices (Alt+Shift+Ctrl+S) and save it as only Images and PNG. Next we will save this for web and devices. Select it so that you have the red/orange part from the top and a small part from the sides, do the same with the footer and drag a new selection somewhere in your content box from border till border, It can be 2 pixels of height. Start by disabling the background color so it will be transparent.ĭrag with your slice tool a selection around the header text, and drag a new selection on your content top. In this case it will be the text from the header, NOT the menu since it is just text and some parts of the content box since I used a border. I have no idea what you’ve learned before but I want you to just slice only the bits that you really need. You need to begin somewhere right? Step 2: In the future your template will look more complicated but hopefully this tutorial will help you start. With the template open, we will start slicing this template. Open it with Photoshop and select your slice tool. You can start with downloading the Slice and Code PSD. The PSD and the HTML of this template is available for download so you can easily follow the steps. ![]() It’s a very basic template so it won’t be that hard, for now. In your further development carrier you’ll use more HTML5 tags but once again, you have to start with something. You have to start at some point right? So, let’s use DIV’s. I’ll try to explain you how to slice your template in Photoshop and how to code it in Dreamweaver using DIV tags. Okay, here is a tutorial about how to slice AND code your website for starters. In this tutorial I’m explaining how to slice and code your website. Congratulations! But what do you have to do now? How do you get your website up and running. So, you are probably new into webdesign and you might just created your first website in Photoshop ever. Slice and code your first website – Part 1 ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |