零基础学做网站培训介绍

当前位置:

手机网站怎么仿站,WAP手机站仿站方法

本节课程将带领大家学习一下如何去进行手机网站仿站,请大家掌握WAP手机站仿站方法。

操作步骤

1、目标网站:https://www.xuewangzhan.net/vip/xiehui/

问题:仿站要仿哪些页面?
回答:仿站时,并不是要仿目标网站的所有页面的,要分析哪些页面的布局结构不一样,各自下载一个就行了。

2、页面的命名

为了方便后面的模板开发,我们在下载页面时,就规范一下页面的名称。

首页----index.html
产品列表页-----category-pro.html
新闻列表页-----category-wz.html
单页介绍页-----page.html (如:公司简介、联系我们)
文章内容页-----single.html (或者single-pro.html 和 single-wz.html)

3、仿站的工具

3-1、本地环境软件:https://www.xuewangzhan.net/wordpress/708.html
3-2、页面下载小工具:https://www.xuewangzhan.net/tools/25203.html
3-3、WP仿站助手:https://www.xuewangzhan.net/jztools/

4、仿站的流程步骤

A、下载各类型页面。使用仿站小工具:https://www.xuewangzhan.net/tools/25203.html

B、为了方便仿站调试,需要安装一下本地环境软件,并且在本地环境下安装wordpress程序。程序下载地址:点此直接下载

C、将页面的各类页面制作成wordpress模板。WP仿站助手:https://www.xuewangzhan.net/jztools/

1、了解wordpress模板的构造。
首页模板:index.php
样式文件:style.css 头部模板:header.php
底部模板:footer.php
边栏模板:sidebar.php
分类目录(列表页)模板 :category.php 产品列表:category-pro.php 新闻列表:category-wz.php
单页面模板:page.php
文章页模板:single.php

2、新建index.php和style.css,并添加版权信息,在index.php的</head>标签上面引入style.css,再把整个模板文件夹放入themes文件夹下,后台启用自己的主题。

小巧型代码编辑软件:Notepad++ 下载地址:https://notepad-plus.en.softonic.com/download (如果打网站打不开,也可以在这里下载:https://dl.pconline.com.cn/html_ ... amp;linkPage=1.html)

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

4、修改index.php中的图片的所有相对路径为WP绝对路径. 否则网页会变形,图片不显示。

5、替换TDK信息;

6、网站导航菜单制作,创建模板函数functions.php。

7、轮播图的制作

8、替换各个版块的固定文字、链接、图片

9、修改下拉导航 和颜色

10、分类头部、底部模板。

===========================================

课程PPT 内容

不同的手机站,它的仿制方法是不一样的

从现阶段来看,手机站主要分为二种:

一种就是自适应手机站 pC站之后,它就自带有手机站

另一种是通过代码切换从PC站转为手机站

通过URL ----PC站与手机站 首页地址是一样

PC站与手机站 首页地址不一样的
https://www.xuewangzhan.net/vip/xiehui/
https://www.xuewangzhan.net/vip/xiehui/m/

需要下载的页面:

1、首页 https://www.xuewangzhan.net/vip/xiehui/m/index.html

2、page 页面 https://www.xuewangzhan.net/vip/xiehui/m/list-1.html

3、archive列表页 :https://www.xuewangzhan.net/vip/xiehui/m/list-5.html

4、page 表单页面:https://www.xuewangzhan.net/vip/xiehui/m/list-22.html

5、single内容页:https://www.xuewangzhan.net/vip/xiehui/m/view-67.html

1、本地网站的URL 地址:127.0.0.1/wordpress

2、本地环境数据库地址:http://127.0.0.1/phpmyadmin/

本地数据库信息:shoujifz root

3、存放模板的文件夹:\www\wordpress\wp-content\themes

4、CTRL F

5、模板函数 functions.php

控制图片大小


.contxt img{display:block;max-width:100%;height:auto;margin:10px auto;}

相关阅读:

织梦手机网站仿站课程介绍

DEDECMS怎么仿手机网站,织梦手机网站仿站教程

wordpress怎么仿手机网站,wordpress手机网站仿站教程

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 什么是自适应手机网站 视频教程 (192840 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 什么是手机域名手机域名又叫Mobi域名。Mobi是被ICANN批准,并致力于将internet内容传送到移动装置,例如智能电话,PDA,手机等的专属域名
  • 仿站长网admin5主题模板 图文教程 (15472 次浏览)
    这是一款模板站长网admin5的wordpress主题模板,这个模板综合了门户和企业网站所有特点,内容特别丰富,而且有大量的广告位可供站长放广告图片,实现网站
  • 在学习仿站教程时,我们在仿制某个目标网站,如果遇到引用了很多的CSS文件,应该拿哪一个命名为style.css呢?如:在Wordpress仿站教程中,我们
  • 整站下载器介绍对于很多不懂美工,但又想学做网站的人来说,特别好的方法就是去仿站。在网上找一些自己喜欢的风格的网站,然后通过仿站技术去制作出
  • 问:现在手机这么流行,很多人都使用手机上网,如果做了网站之后,怎么做一个网站的手机客户端呢?答:1、要将网站做成手机APP的话,到应
  • 学习了老师的建站课程之后,我陆陆续续建了几个网站。但是多数都是PC端网站,近期要建一个wap手机网站。本想用仿站课程来仿,但昨天无意中看到这一个w
  • 我做了一个企业网站,请问老师如何让网站支持手机WAP浏览而不变形?是可以单独设置,还是通过二级域名去重新做一个手机WAP网站?