用织梦实现一个从零到可以正常访问的网站--第二章

简介: 用织梦实现一个从零到可以正常访问的网站--第二章

终于抽出时间写建站的文章了,之前的文章在这里,第一章,如果不看第一章直接看第二章也是可以的,我们接着把之前没有完成的部分接着写。

回顾

-我们简单的回顾一下之前做的步骤:
-打开xampp
-打开apach的admin
-点击安装
-一直下一步就行
-最后安装结束
-点击登录后台
-账号:amdin
-密码:admin
-登录
-然后把你写的网站代码那个文件夹。移到xampp-htdocs-template(是文件夹)
-然后打开xampp
-进入apach后台
-将写好的html文件全部改为htm后缀的
-进入dede的系统菜单
-点击系统基本参数
-将参数按照要求改好
-点击生成菜单
-点击更新主页
-选择主页模板
-更改为你自己的主页
-生成静态
-更新主页html

新篇

ok,如果没有问题的话,我们接着写:

今天我们写一下怎么将站点里面的样式调好和对应起来,做一个最简单的织梦代码的调用。

首先我需要写一个例子,之前的例子被我玩坏了,再写一个完整的模板出来太耗费时间了,我直接写一个比较简单的页面,但是基本上网站都是这几块,我们先看一下运行的效果:

这个是简单的三个页面,我们看一下目录结构:

那么不管是大的网站还是小的网站其实基本都无非是这几块,多的话一般也会放到一个自己认识的文件夹里面,那么之前我们已经写到了可以直接运行了,但是没有样式是不是,所以我简单的加了几个样式,这是js和css的源码:

js源码:
1. /*
2.  aim : 为博客建站文章写demo提供的js
3.  author : clearlove
4.  date : 2017-7
5.  type : js
6.  * */
7. function _clicktest(){
8.      alert("我是测试页面");
9.    }
10. /*over*/
css源码:
1. /*
2.  aim : 为博客建站文章写demo提供的css
3.  author : clearlove
4.  date : 2017-7
5.  type : css
6.  * */
7. header{font: "微软雅黑";color: brown;}
8. a{font: "微软雅黑";color: blueviolet;text-decoration: none;margin-left: 1rem;}
9. a:hover{font-size: larger;color: darkblue;}
10. div{margin-top: 20%;margin-left: 40%;}
11. div input{width: 5rem;height: 2rem;}
12. /*over*/
H5源码:
1. <!DOCTYPE html>
2. <html>
3.  <head>
4.    <meta charset="utf-8" />
5.    <title>我是测试页面</title>
6.  </head>
7.  <link rel="stylesheet" type="text/css" href="css/all.css"/>
8.  <body>
9.    <header>
10.       <a href="index.html">首页</a>
11.       <a href="page1.html">切换页面1</a>
12.       <a href="page2.html">切换页面2</a>
13.     </header>
14.     <div>
15.       <input type="button" value="我是首页" οnclick="_clicktest()"/>
16.     </div>
17.   </body>
18.   <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
19. </html>
1. <!DOCTYPE html>
2. <html>
3.  <head>
4.    <meta charset="UTF-8">
5.    <title>我是测试页面</title>
6.  </head>
7.  <link rel="stylesheet" type="text/css" href="css/all.css"/>
8.  <body>
9.    <header>
10.       <a href="index.html">首页</a>
11.       <a href="page1.html">切换页面1</a>
12.       <a href="page2.html">切换页面2</a>
13.     </header>
14.     <div>
15.       <input type="button" value="我是page1" οnclick="_clicktest()"/>
16.     </div>
17.   </body>
18.   <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
19. </html>
1. <!DOCTYPE html>
2. <html>
3.  <head>
4.    <meta charset="UTF-8">
5.    <title>我是测试页面</title>
6.  </head>
7.  <link rel="stylesheet" type="text/css" href="css/all.css"/>
8.  <body>
9.    <header>
10.       <a href="index.html">首页</a>
11.       <a href="page1.html">切换页面1</a>
12.       <a href="page2.html">切换页面2</a>
13.     </header>
14.     <div>
15.       <input type="button" value="我是page2" οnclick="_clicktest()"/>
16.     </div>
17.   </body>
18.   <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
19. </html>

代码很简单,我们正所谓麻雀虽小,五脏俱全,只是我没有加图片,为什么不加呢?之后会说到这里。

我们打开之前做到的位置:

如果您正常按照我做的话,是可以直接访问的,但是没有样式,而且导航的链接也是错的,就像我这样的:

没有任何的样式,点击导航的链接的时候是这样的:

是吧,我们今天就解决样式的问题,很简单,首先将C盘的xampp下templets的源码打开(当然如果您担心代码乱了,也可以直接在没有上传之前在您的编辑器里面更改):

我们将引用CSS的引用方法改为这样的:

在引用的前面加上这串代码:

{dede:global.cfg_templets_skin/}/

解释一下:

{dede:global.cfg_templets_skin/}是调用默认样式路径  一般为 网站地址/templets/default ,你如果修改了默认样式文件夹 就是 网站地址/templets/默认文件夹。在模版中调用css的路径可以像这样调用{dede:global.cfg_templets_skin/}/style.css。如果其他几套的的样式和默认的文件一样,你就可以在后台进行样式的切换。skin英文意思是皮肤,对于网站,皮肤就是样式。这只是取的一个有意义的名字,方便调用而已。

那么js也是这样更改,img(如果有图片的话,也是这样更改,改完以后是这样的):

将别的页面也这样更改,结束以后我们更新一下网站然后打开:

问题解决

如果您按照我的步骤来的话,应该是不会出问题的,当然不排除手残党,我就是,那么排除问题的时候我们需要看这两个地方:

如果没有问题的话,就一定没有问题!

如果确实不行的话,可以打开您的页面,点击引用的路径看看是不是可以点进去:

如果一直解决不到的话, 可以博主简介QQ联系我!

这个时候我们的样式和js问题解决了,但是导航的链接还是错的啊,点击的时候会这样:

下一章我会更新怎么将链接调好。

谢谢阅读

我可能写的不够详细,毕竟能力有限,多多担待,哪里不明白的可以在博主简介那里QQ找到我,QQ是博主本人的QQ,或者可以扫下面的二维码找到我:

相关文章
|
9月前
用织梦实现一个从零到可以正常访问的网站--第三章
用织梦实现一个从零到可以正常访问的网站--第三章
48 0
|
9月前
|
前端开发 数据库
用织梦实现一个从零到可以正常访问的网站--终结篇
用织梦实现一个从零到可以正常访问的网站--终结篇
84 0
|
8天前
|
资源调度 JavaScript 前端开发
Van-Nav:新年,将自己学习的项目地址统一整理搭建自己的私人导航站,供自己后续查阅使用,做技术的同学应该都有一个自己网站的梦想
嗨,大家好,我是小华同学。今天为大家介绍一个基于Vue.js开发的导航组件库——Van-Nav。它支持响应式设计、多级菜单、丰富的配置选项和多种动画效果,适用于企业官网、电商平台、内容管理系统和个人博客等多种场景。轻松集成到Vue项目中,提供清晰有序的导航体验。关注我们获取更多优质开源项目和高效工作学习方法。
166 68
|
9月前
|
数据采集 Java API
百度搜索:蓝易云【Java爬虫与Python爬虫有什么区别】
综上所述,Java爬虫和Python爬虫在语言特性、代码复杂性、生态系统、并发处理和执行性能等方面存在一些区别。选择使用哪种爬虫工具取决于具体的需求、项目要求和个人技术偏好。
83 0
|
9月前
|
域名解析 JavaScript 前端开发
用织梦实现一个从零到可以正常访问的网站--第一章
用织梦实现一个从零到可以正常访问的网站--第一章
72 0
|
小程序 数据可视化 数据库
云开发(微信-小程序)笔记(十七)---- cms(内容管理)及案例
云开发(微信-小程序)笔记(十七)---- cms(内容管理)及案例
569 0
|
SQL JavaScript 前端开发
黑马B站视频JAVAWEB部分的知识范围、学习步骤详解
黑马B站视频JAVAWEB部分的知识范围、学习步骤详解 CSDN 转过来的,所以格式与内容有些许错误请见谅
|
前端开发 搜索推荐 数据库
开发人员,怎能没有个人博客!前人所创经典Typecho!
开发人员,怎能没有个人博客!前人所创经典Typecho!
244 0
开发人员,怎能没有个人博客!前人所创经典Typecho!
|
关系型数据库 MySQL PHP
开发人员,怎能没有个人博客!前人所创经典ZBlog
开发人员,怎能没有个人博客!前人所创经典ZBlog
244 0
开发人员,怎能没有个人博客!前人所创经典ZBlog
|
移动开发 小程序
怎么做论坛软件
在目前这个发达的互联网时代,行业论坛已近比较成熟了,各个行业都有做得比较好的论坛,行业论坛也是很多创业者的标配,所以我们目前看到了很多像汽车类论坛网站、美妆类论坛网站、地方类论坛网站、电商技术交流类论坛网站
314 0
怎么做论坛软件