Home > Developer > Web Develop
Section I.
1, first download PHPCMS v9 integrated installation package and installation, here is not explained in detail.
2, local debugging recommendations you use Apmserver, or wampserver, you can go to phpcms Bar official homepage link to download. Install the root directory "phproot→phpcms→templates" folder to open V9 and copy the "default" folder to a name "redu".
3, Login v9 Background login address: http://localhost/admin.php
User name: phpcms Password: phpcms
4, open the interface → template style → style logo redu under the detailed list under the content folder
1, first modify the homepage template index.html
Before the change to introduce you to the working mode of V9, V9 and his predecessor Phpcms 2008 is the same is the "tag Call header + Home section + tag Call bottom"
So in the order of starting from scratch
The first step is to open heard.html
Now we begin to analyze the structure of header.html:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Above is the Web page standard
<meta http-equiv= "Content-type" content= "text/html; Charset={charset} "/>{charset}" = Character set (GBK or Utf-8)
<meta http-equiv= "x-ua-compatible" content= "ie=7"/>
<title>{if isset ($SEO [' title ']) &&!empty ($SEO [' title '])} {$SEO [' title ']}{/if}{$SEO [' Site_title ']} </title>
Judgment Statement Translation: If the caption is set and the caption is not empty, the caption is displayed, otherwise the site name is displayed
<meta name= "keywords" content= "{$SEO [' keyword ']}" >
<meta name= "description" content= "{$SEO [' description ']}" >
<link href= "{css_path}reset.css" rel= "stylesheet" type= "Text/css"/>
<link href= "{css_path}default_blue.css" rel= "stylesheet" type= "Text/css"/>
The above 2 lines are external CSS calls {Css_path}
<script type= "Text/javascript" src= "{js_path}jquery.min.js" ></script>
<script type= "Text/javascript" src= "{js_path}jquery.sgallery.js" ></script>
<script type= "Text/javascript" src= "{js_path}search_common.js" ></script>
The above 3 lines are the JS calls of the Web page
<body>
<div class= "Body-top" >
<div class= "Content" >
{pc:content action= "position" posid= "9" order= "id" num= "ten" cache= "3600"}
<div id= "Announ" >
<ul>
{Loop $data $k $v}
<li><a href= "{$v [url]}" >{$v [title]}</a></li>
{/loop}
</ul>
</div>
{/PC}
<script type= "Text/javascript" >
$ (function () {
StartMarquee (' Announ ', 22,1,500,3000);
})
</script>
<div class= "Login lh24 Blue" ><a href= "{App_path}index.php?m=content&c=rss&siteid={get_siteid ()}" class= "RSS IB" >rss</a><span class= "RT" ><script type= "Text/javascript" >document.write (' < iframe src= "{app_path}index.php?m=member&c=index&a=mini&forward= ' +encodeuricomponent (location.href) + ' &siteid={get_siteid ()} "allowtransparency=" true "width=" height= "frameborder=" 0 "scrolling=" no "> </iframe> ') </script></span></div>
</div>
</div>
<div class= "Header" >
<div class= "logo" ><a href= "/" ></a></div>
Here is the search section
<div class= "Search" >
<div class= "tab" id= "Search" >
{php $j = 0}
{php $search _model = getcache (' Search_model_ '. $siteid, ' Search ');}
{Loop $search _model $k + = $v}
{PHP $j + +;}
<a href= "javascript:;" style= "outline:medium none;" hidefocus= "true" {if $j ==1 && $typeid = $v [' typeID ']} Class= "on" {/if}>{$v [' name ']}</a>{if $j! = count ($search _model)}<span> | </SPAN>{/IF}
{/loop}
{php unset ($j);}
</div> <div class= "BD" >
<form action= "{app_path}index.php" method= "get" target= "_blank" >
<input type= "hidden" name= "M" value= "search"/>
<input type= "hidden" name= "C" value= "index"/>
<input type= "hidden" name= "a" value= "Init"/>
<input type= "hidden" name= "typeID" value= "{$typeid}" id= "typeID"/>
<input type= "hidden" name= "SiteID" value= "{$siteid}" id= "SiteID"/>
<input type= "text" class= "text" name= "q" id= "Q"/><input type= "submit" value= "Search" class= "button"/>
</form>
</div>
</div>
End of search section
<div class= "banner" ><script language= "JavaScript" src= "{app_path}index.php?m=poster&c=index&a= Show_poster&id=1 "></script></div>
<div class= "BK3" ></div>
<div class= "Nav-bar" >
<map>
{pc:content action= "category" catid= "0" num= "siteid=" $siteid "order=" Listorder ASC "}
<ul class= "Nav-site" >
<li><a href= "{SiteURL ($siteid)}" ><span> Home </span></a></li>
{Loop $data $r}
<li class= "line" >|</li>
<li><a href= "{$r [url]}" ><span>{$r [catname]}</span></a></li>
{/loop}
</ul>
{/PC}
</map>
</div>
{if $top _parentid}
<div class= "Subnav" >
{pc:content action= "category" Catid= "$top _parentid" num= "" siteid= "$siteid" order= "Listorder ASC"}
{Loop $data $r}
<a href= "{$r [url]}" >{$r [catname]}</a><span> | </span>
{/loop}
{/PC}
{if $modelid}<a href= "{app_path}index.php?m=content&c=search&catid={$catid}" > Search </a>{/if}
</div>
{/if}
</div>
It is recommended to download an opera browser for his check page element features awesome!
{Template "content", "header"}
Call the root directory under the Phpcms/template/content/header file
<!--main--> This is a template note! It is recommended to develop the habit of writing code and commenting
This is a div tag, do not know what is div can go online to find some tutorials to learn, this is not understood there is no need to continue to see
<!--here is the PC tag {pc:content parameter name = parameter value argument name = parameter value parameter name = parameter value}-->
{pc:content action= "position" posid= "2" order= "Listorder DESC" num= "4"}
<!--display data from PC labels--
{Loop $data $r}
{Str_cut ($r [title],36)}
{if $n ==1} {/if} {Str_cut ($r [description],112)}
{/loop}
{/PC}
<!--end tag--
<!--here or PC label--
{pc:content action= "position" posid= "1" order= "Listorder DESC" thumb= "1" num= "5"}
{Loop $data $r}
{/loop}
{/PC}
Promote
{pc:block pos= "Index_block_1"}
{/PC}
Picture News
{pc:content action= "position" posid= "" thumb= "1" order= "id DESC" num= "10"}
{Loop $data $r}
{Str_cut ($r [title],20)}
{/loop}
{/PC}
{Loop subcat (0,0,0, $siteid) $r}
{PHP $num + +}
{$r [catname]} more >>
{pc:content action= "lists" catid= "$r [catid]" num= "1" thumb= "1" order= "id DESC" return= "info"}
{Loop $info $v}
{str_cut ($v [' title '],28)}
{str_cut ($v [' Description '],100)}
{/loop}
{/PC}
{pc:content action= "lists" catid= "$r [catid]" num= "5" order= "id DESC" return= "info"}
{Loop $info $v}
· {str_cut ($v [' title '],40)}
{/loop}
{/PC}
{if $num%2==0}
{/if}
{/loop}
Notice
{pc:announce action= "lists" siteid= "$siteid" num= "2"}
{Loop $data $r}
{$r [' title ']}
{/loop}
{/PC}
Featured More >>
{pc:special action= "lists" siteid= "$siteid" elite= "1" listorder= "3" num= "2"}
{Loop $data $r}
{if $n!=1}
{/if}
{str_cut ($r [title], ' 18 ')}
{str_cut ($r [' Description '],50)}
{/loop}
{/PC}
Hot Spots | Comments | Focus on the rankings
{pc:content action= "hits" catid= "num=" + order= "views DESC"}
{Loop $data $r}
{$r [title]}
{/loop}
{/PC}
{pc:comment action= "bang" num= "ten" cache= "3600"}
{Loop $data $r}
{$r [title]}
{/loop}
{/PC}
{pc:content action= "hits" catid= "num=" + order= "views DESC"}
{Loop $data $r}
{$r [title]}
{/loop}
{/PC}
Questionnaire more >>
More links for >> links
{pc:link action= "type_list" siteid= "$siteid" linktype= "1" order= "Listorder DESC" num= "8" return= "Pic_link"}
{Loop $pic _link $v}
{/loop}
{/PC}
{pc:link action= "type_list" siteid= "$siteid" order= "Listorder DESC" num= "ten" return= "Dat"}
{Loop $dat $v}
{if $type ==0}
{$v [name]} |
{Else}
{/if}
{/loop}
{/PC}
$ (function () {
New Slide ("#main-slide", "cur", 310,260, 1);//Focus Map
New Swaptab (". Swaptab "," span ",". Tab-content "," ul "," FB ");//Ranking Tab
})
{Template "Content", "Footer"}
form a div tag for writing specifications
In Search engine optimization (SEO), the optimization of the code is also a key step. In order to better conform to the SEO specifications, the following is the current popular Css+div naming rules:
DIV ID naming
Page Header: Header
Login Strip: Loginbar
Logo: Logo
Sidebar: SideBar
Ad: Banner
Navigation: Nav
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Searches: Search
Scrolling: Scroll
Page body: Main
Contents: Content
Tabs page: Tab
Article List: List
Hint Message: MSG
Tip: Tips
Column Title: Title
Links: Friendlink
Footer: Footer
Join: Joinus
Guide: Guild
Services: Service
Hotspot: Hot
Press: News
Download: Download
Registration: Regsiter
State: Status
Button: BTN
Vote: Vote
PARTNER: Partner
Copyrights: Copyright
Name of CSS ID
Jacket: Wrap
Main navigation: Mainnav (GLOBALNAV)
Sub-navigation: Subnav
Footer: Footer
Entire page: Content
Headers: Header
Footer: Footer
Trademark: Label
Caption: Title
Top Navigation: Topnav
Side navigation: SideBar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Logo: Logo
Slogan: Banner
Menu 1 Contents: menu1content
Menu 1 Capacity: Menu1container
Sub-menu: submenu
Edge navigation icon: Sidebaricon
Note: note
Breadcrumbs: breadCrumb (i.e. navigation tips for page location)
Container: Container
Contents: Content
Searches: Search
Login: Login
Functional area: Shop (e.g. shopping cart, cashier)
The current
Style file naming
Full site label default style: General.css or Global.css
Layout layout design style: Layout.css or Container.css
Common styles (such as text, forms, etc.): style.css
column/Channel style: COLUMNS.CSS
Print output style: Print.css
Theme Template style: Themes.css
How to use V9 to clone a website
First, the Preparation tool 1,
CSS Manuals
2. Phpcms Manual
3, DW CS5 No can use Notepad
4, PS
5. Screen Ruler
6. Lustful Ghosts
7. Website Downloader
8, a variety of browser IE6 IE7 IE8 IE9 firefox Google Opera Safari with IE and Firefox is basically enough
9, conditional can prepare a PHP manual and HTML manual
10, also song (this is very useful to listen to the song software, every time I write code will open his listening to songs)
11, the test environment does not have the next PHPCM V9 integration package
12, have not thought of ... Thought of in writing (hehe, in order to write more points Saharan
Second, prepare the material
1, download the website to prepare imitation website file
2, according to the target website to produce the corresponding size of the picture (such as logo) some need to change, some do not need to change (here is also to write more points ...) ）
3, still did not expect to prepare what ... Think of writing (hehe, or to write more. Saharan
Iii. start of Imitation station
1. Open the song and listen to the music first.
2, open the need to imitate the station, view the page source code! (You can see it in the blank area of the page)
3, first find the Web page of the CSS file (download down to the root directory \statics\css renamed Reset.css) Why do <link href= "{css_path}reset.css" rel= "stylesheet" type= " Text/css "/>
{css_path}reset.css equals root directory \statics\css under Reset.css file (if downloaded with Web site Downloader then it is more convenient to find the CSS file in the download file)
Note: The file section of the Statics directory belongs to the background template, so it is recommended to create a new directory to put your own CSS, JS or picture file {Css_path}reset.css is the background of the CSS code, here do not change! Changed the backstage, ran off.
4. Edit the header file with Dwcs 5 or Notepad to open the header.html file under the V9 template directory.
Phpcms v9 Template Making tutorial (reprint)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
