手机网站制作教程: - 网站建设 - 深圳网站建设,微信APP开发,网店装修,艺之都网络公司官网

网站建设

你的位置: 首页>>我的观点>>网站建设


手机网站制作教程:

点击数:3882018-04-24 10:17:02 来源: 艺之都网络官网

新闻摘要:课程目标:制作出一个手机网站的主题。课后作业,跟着视频,完成一个相同主题的制作。

手机网站制作流程,怎么做手机网站

学做网站论坛 手机网站制作视频教程:

课程目标:制作出一个手机网站的主题。课后作业,跟着视频,完成一个相同主题的制作。

手机网站制作流程,怎么做手机网站

获取博客名字:

获取主页路径:

获取主题存放路径:

调用当前主题:

Style.css路径调用:


1、WP手机网站模板分析


a 、WP模板的必须条件 :index.php    style.css

b、index.php首页模板

Style.css  模板样式表

archive.php分类模板

page.php  页面模板

single.php文章模板

header.php头部模板

footer.php底部模板

Comments.php评论模板


2、模板版权的添加


用DW打开style.css

添加主题版权信息:

/*

Theme Name: 学做网站论坛

Theme URI: http://www.xuewangzhan.net

Description:学做网站论坛 公司手机主题

Author: 学做网站论坛

Author URI: http://www.xuewangzhan.net

Version: 1.0

Tags: white, blog,学做网站论坛, blue

*/

如果后台乱码,要修改,css 的页面属性,如果网页出现乱码,要修改index.php的页面属性。修改——页面属性——编码。

后台缩略图:在主题文件来下面放一个缩略图图片,缩略图的名字必须是:screenshot.png或者screenshot.jpg

1-2、制作index.php

1-2-1、修改css文件路径

Style.css路径调用:

1-2-2、修改index.php中的图片的所有相对路径为WP绝对路径

获取主题存放路径:

如果还出现有些图片不显示的话,要修改style.css中的路径,因为这是的style.css是从images文件夹中拿出来的,路径已经改变了。

分离头部,改用WP调用,调用顶部标签:

2-1、元信息调用


>


<?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?>

if ( is_singular() && comments_open() ) {

wp_enqueue_script( 'comment-reply' );

wp_enqueue_script('jquery');

}

?>


2-2、网站目录导航制作

'','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>

2-3、CSS样式的规范化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {

margin: 0;

padding: 0;

}

body, button, input, select, textarea { font: 13px/1.5 \5fae\8f6f\96c5\9ed1,tahoma,arial,\5b8b\4f53,sans-serif }

h1 { font-size: 1.4em }

h2 { font-size: 1.3em }

h3 { font-size: 1.2em }

h4 { font-size: 1.1em }

h5 { font-size: 1em }

h6 { font-size: .9em }

address, cite, dfn, em, var { font-style: normal }

code, kbd, pre, samp { font-family: courier new,courier,monospace }

pre, code {

background: #eee;

padding: 2px;

margin: 0 2px;

}

pre { padding: 2px 10px }

small { font-size: 12px }

dt { font-weight: bold }

ul { list-style: square }

ol { list-style: decimal }

li{ list-style: none;}

ol ol { list-style: upper-alpha }

ol ol ol { list-style: lower-roman }

ol ol ol ol { list-style: lower-alpha }

article, aside, footer, header, hgroup, menu, nav, section, audio, video {

display: block;

margin: 0;

padding: 0;

}

a {

text-decoration: none;

color: #06C;

}

a:hover { text-decoration: underline }

a:hover, a:active { color: #ff4b33 }

a img { border: 0 }

hr {

background: none;

border: none 0;

border-top: 1px dotted #ccc;

height: 0;

}


第三节、底部制作



5、底部制作

通过WP标签调用回来,调用底部标签:

获取主页路径:

版权信息:

Copyright © 2012 学做网站论坛

第四节、手机网站首页制作


1、PHP循环代码1



2、PHP循环代码2







标题调用:

分类的名称:

摘要调用:

第二步:缩略图调用操作步骤:

1-1、新建函数文件functions.php  放入以下代码:

function get_first_image() {

global $post;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('//i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img = bloginfo('template_url') . "/images/default.jpg";

};

return $first_img;

}

1-2、图片的调用:

1-3、在images文件夹下建一个默认图片:default.jpg

第三步:浏览量的调用

1、在functions.php中加入以下代码:

/*显示文章浏览次数*/

function getPostViews($postID){

$count = get_post_meta($postID,'views', true);

if($count==''){

delete_post_meta($postID,'views');

add_post_meta($postID,'views', '0');

return "0";

}

return $count.'';

}

function setPostViews($postID) {

$count = get_post_meta($postID,'views', true);

if($count==''){

$count = 0;

delete_post_meta($postID,'views');

add_post_meta($postID,'views', '0');

}else{

$count++;

update_post_meta($postID,'views', $count);

}

}

2、使用以下PHP代码去调用浏览量:


第五节、分类页面模板


1、制作archive.php页面

2、调用header、sidebar、footer文件

调用头部标签:

调用底部标签:


3、循环调用文章



标题调用:


日期调用:


分类名字调用:


日期调用:


图片的调用:


调用浏览量:

4、分页功能制作

在页面底部放上以下代码:


max_num_pages > 1 ) : ?>




将以下CSS样式放到style.css中

#nav-below a {

margin: 10px;

display: block;

text-align: center;

background: #06C;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

color: #fff;

font-size: 13px;

padding: 10px 0;

}

#nav-below div{width: 50%;}

#nav-below .nav-previous{float:left;}

#nav-below .nav-next{float:right;}

#comments #nav-below a { margin: 10px 0 }


第六节、文章内容页面制作



1、制作single.php

2、调用header、sidebar、footer文件


调用头部标签:

调用底部标签:


3、循环调用文章(一定不要忘了放循环代码)


标题:

内容:


4、元信息调用

日期调用:

分类目录:


上一片,下一片代码直接粘贴到相应显示的位置就可以了。

上一篇调用:

下一篇调用:

优势

SUPERIORITY

为一流企业提供金牌网络服务

我们为客户提供一站式服务,没有最好的方案,只有最适合每个企业的设计方案……

理念

IDEA

持续追求更高品质

艺之都团队的十年,是一个典型的技术团队成长的十年。一群年轻人,追着梦想,从无到有,从痴迷小组到精英团队艺之都从成立的那一天开始永放光芒……

售前咨询
0755-33563420
免费网络问题咨询
免费网络解决方案策划
免费网站问题诊断
免费网店问题诊断
免费网站网店推广咨询
服务与支持
网站建设
微信开发
APP开发
网店装修
网站推广
网店运营
大数据服务
营销培训
服务器租赁
账号与支持
合同申请
转账付款
线下汇款
索取发票
快速入口
网站管理
备案管理
账号管理
域名信息查询
域名控制台
服务器控制台
其他服务
客户案例
新品活动
海外服务
技术论坛
注册公司
财务代理
VI设计
资源推荐
提交建议
关注艺之都网络
企业决策者必读
艺之都网络APP
艺之都微信
艺之都微博
艺之都服务中心

核心产品:  营销型网站系统  微信分销商城系统  网店运营系统  大数据精准营销系统  域名注册备案  游戏开发运营

增值服务:  工商注册  财务代理  VI设计  LOGO设计  营销策划  网站备案  短信服务  企业邮箱  WHOIS查询  网站模板  服务器维护

更多推荐:  企业线上方案  品牌线上方案  线上商城方案  社交直播方案  医疗网络方案  旅游线上方案  精准营销方案

关于艺之都    法律声明    廉政举报    荣誉查询    友情链接

艺之都网络  深圳网站建设  东莞网站建设  广州网站建设  上海网站建设  北京网站建设  南阳网站建设  【添加分公司链接】

2007-2019 yizhidou.com 版权所有粤ICP备:14099120号-3

深圳市艺之都网络科技有限公司  深圳市龙岗区坂田商业广场禾田步行街二层