الرئيسيةالبوابةمكتبة الصوراليوميةس .و .جالتسجيلالأعضاءالمجموعاتدخول

شاطر | 
 

 To create a full web site starting from a template

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
muslem



عدد الرسائل : 772
تاريخ التسجيل : 02/08/2006

مُساهمةموضوع: To create a full web site starting from a template   الثلاثاء 6 مارس - 17:56

To create a full web site starting from a template you have to create new pages. Let's say that you have modified the templates layout according to your needs and now you have an index page ready. Almost every time the content pages keep some design elements from the index file but not all the elements...so you have to adapt the layout for the content pages. This means that you have to re-slice and re-export for the web the new layout. To make your work less difficult you have to re-design the main layout so that the resulting content page has as many elements in common with the main layout as possible. Doing this you will have to redo only few slices not all the slices. Let's take a look at our index.psd file.
Open the index.psd file located in template/psd (Note: if the opened file doesn't have the slices visible just press Ctrl+H to unhide them).
As you can see below we have marked the area for our content pages. Only this area will be modified to create content pages. So the rest of the layout will remain the same and we don't need to modify the slices. It is very important that you slice the layout from the beginning in a way that will permit you to create content pages / subpages more easily. As you can see the area we designated to be modified in the content pages in somehow independent from the rest of the layout. It doesn't "share" slices with rest of the layout. This means that if we delete all the user slices in the marked area we'll have only one autoslice and this is perfect because we can start to recreate slices without modifying the rest of the layout.

Let's delete all the slices in the marked area. To do that simply go to Tools and choose Slice Select Tool:

Now click on the every slice inside the area marked above and press Delete from keyboard. You'll notice that every time you delete a user slice it is replaced by an autoslice and the autoslices are then merged into bigger autoslices until you we'll have only one autoslice covering the entire marked area.

And after deleting all the slices the layout will look like this:

As you can see the slices are renumbered but this doesn't influence their names.
Now that we have deleted the slices in the content area let's hide the layers of the index file content. Find the layers in the Layers palette or Ctrl+click on every element to select it and then hide it.

Now let's create a new content. Open the only .jpg image from template/tutorial_images and drag the image on the layout. (See our previous tutorials for more help). Create a block of html text a spacer line and a headline text so that the layout looks like this (You can create the layout as you like. This is just an example):

Now let's create slice for the content we have added using the Slice Tool ("K"):

Now you have to save this new .psd file with a new name to use it for the rest of your content pages. Do not save over the original index.psd. Give new names for the new content slices and open the file in ImageReady. If you don't have rollovers to create just hide the layer with the block of html text and save the layout for web. The new generated html file will have by default the name of the .psd file. You can give it any name. For example you may name it "services.html" if this page is the Services page. When you'll save the file ImageReady will ask you if you want to overwrite some of the image files. These are the common files both for index.html and for content pages. You may overwrite them or not, doesn't matter, because they are identical as you have not modified the slices that generate them.
Now you know what you have to do if you want to reconfigure your slices and create new modified pages.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
muslem



عدد الرسائل : 772
تاريخ التسجيل : 02/08/2006

مُساهمةموضوع: رد: To create a full web site starting from a template   الثلاثاء 6 مارس - 17:58

Our example template has a folder structure a little bit different from the templates you can download from our website. That's because this template has two versions: HTML and Flash.
Let's see its folders structure to access more quickly the files we need in this tutorials.
"flash" folder
It contains the source files for the Flash movies:

  1. index.fla is the source for the main movie,
  2. home.fla is the source of the home.swf movie that is automatically loader in the main movie
  3. content.fla is the source for the rest of the content movie.


"fonts" folder

It contains the fonts used in the source files both Flash and Photoshop
To install the fonts copy them from this folder and go to your Windows Fonts folder in C:\Windows\Fonts and paste them there. If you already have one of these fonts installed you will be notified.
"html" folder
It contains the final html files for the HTML version of the template and for the Flash version of the template.
In "flash_version" folder you'll find the exported flash movies and the html file. The "images" folder contain the images used in the Flash movies, images that were exported from Photoshop

In "html_version" folder you'll find the index.html file for the html version together with the "images" folder that contains the images exported from ImageReady and the "css" folder that contain the styles.css file.

"psd" folder
It contains the index.psd Photoshop file of this template.

"tutorial_images" folder
It contains 2 images that we will use in our tutorials
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
muslem



عدد الرسائل : 772
تاريخ التسجيل : 02/08/2006

مُساهمةموضوع: رد: To create a full web site starting from a template   الثلاثاء 6 مارس - 18:01

After exporting the index.psd file as HTML from ImageReady you must edit it in a HTML editor to insert text, text links, add CSS and more. We will use Macromedia Dreamweaver.
So start your Dreamweaver application and open the index.html file from template/html/html_version. Depending on your Dreamweaver version the program window will look like this or with little differences that don't matter that much:

This is the final html file resulted from our Photoshop index.psd, already edited in Dreamweaver.
1. These tabs let's you select the way you see & manipulate the html layout. Depending on the mode you select the options may be different. "Many designers use tables to lay out web pages. Macromedia Dreamweaver provides two ways to view and manipulate tables: Standard mode, in which tables are presented as a grid of rows and columns, and Layout mode, which allows you to draw, resize, and move boxes on the page while still using tables for the underlying structure". "In Layout mode, you use layout cells and tables to lay out your page before adding content". "Expanded Tables mode temporarily adds cell padding and spacing to all tables in a document and increases the tables’ borders to make editing easier. This mode enables you to select items in tables or precisely place the insertion point" (Dreamweaver Help)
2. These tabs let's you select the way you see the document. In Code view you only see the html code (or other code you use). In Split mode you see both the html code and the preview of your page. And finally in Design view you only see the preview of you page without the code.
3. Here you can write your page's name
4. This tab offers you information about the CSS. In our template we work with an external CSS file so here you'll find all the styles defined in that file. You can view & modify the styles directly from here.
5. This is the Properties tab in which you'll find all the settings you need depending on the element you select.
To preview a file in a web browser press F12 and the file will be opened in your default browser.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
muslem



عدد الرسائل : 772
تاريخ التسجيل : 02/08/2006

مُساهمةموضوع: رد: To create a full web site starting from a template   الثلاثاء 6 مارس - 18:04

Depending on your preferences you may define a name for each different page or you can define a name for all the pages of your web site. Giving a name/title to a web page is one of the first steps in the design process.
Let's give our index.html page a name. Open the file index.html from template/html/html_version.

As you can see above we have already give this page a name. You can edit the title area anytime you want so if you want to change this page's name just click and select the text and write your desired name. To apply the new name you must press Enter (Return) from the keyboard.
In code view the page's name is in the <HEAD> area and its tag is <title></title>. Switch to Split view to see both the code and the page.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
muslem



عدد الرسائل : 772
تاريخ التسجيل : 02/08/2006

مُساهمةموضوع: رد: To create a full web site starting from a template   الثلاثاء 6 مارس - 18:06

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
muslem



عدد الرسائل : 772
تاريخ التسجيل : 02/08/2006

مُساهمةموضوع: رد: To create a full web site starting from a template   الثلاثاء 6 مارس - 18:13

. Creating New Pages
To complete your web site you need to create new pages from Photoshop/ImageReady if you modify the layout or directly from Dreamweaver if you indent to modify only text or to replace images but not to modify the web page's structure.
Open the file index.html from template/html/html_version.

Not let's save it with another name. Go to the main menu File->Save As...

Save the new file where you want it and give it the desired name.
Now let's edit modify our layout trying to create a different one. For example we want to replace the content area with a block of text:

To do that we have to delete all the cell in that area and replace them with new ones. Go to Layout mode to exactly see the cells:

Because we cleverly designed our slices the entire content area is somehow "independent" from the other areas because it forms a rectangular area an then if we delete all the cells in this area the html table will not be affected. Go an click place your mouse over the border of each cell until it turns red then click on it to select the cell (you have to select the cell not its content to delete it):

If you have correctly selected the cell it will turn its border in a solid blue line:

Now press Delete to erase it and continue with the other slices in the content area:

Finally the layout will look like this:

Now you can redefine new cells. Let's create 2 cell like 2 columns. To do that you have to use the Draw Layout Cell tool available only in the Layout mode:

Select the Draw Layout Cell tool and place your mouse inside the empty content area and drag a new rectangular area (it's like defining new slices in Photoshop).

The new defined cell will automatically display the background color because it doesn't have its own background color. Drag a second cell to fill the remaining empty space. Now click select one of the new cells and set a new background color.

Pick the desired color for this cell and then for the other one. Now you can continue adding content to the new cells.
This was an example of how important is to cleverly design your slices in Photoshop.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
حامد



عدد الرسائل : 198
تاريخ التسجيل : 11/11/2006

مُساهمةموضوع: رد: To create a full web site starting from a template   الأربعاء 25 يوليو - 18:37

جزاك الله خيرا موضوع مفيد في مجاله
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
 
To create a full web site starting from a template
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» Camfrog 5.1.129 pro version full
» لعبة Turning Point: Fall of Liberty Full Rip الشهيرة باكثر من سيرفر
» CCCam Full Server
» خلفيات صور كارتون جميلة
» تنظيم السنة الدراسية و العطل المدرسية بقطاع التربية الوطنية 2008-2009

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات المسلم :: اللغه الانجليزيه :: All Other English Topics-
انتقل الى: