首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >用织梦实现一个从零到可以正常访问的网站--第二章

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

作者头像
何处锦绣不灰堆
发布于 2020-05-29 04:28:21
发布于 2020-05-29 04:28:21
98200
代码可运行
举报
文章被收录于专栏:农历七月廿一农历七月廿一
运行总次数:0
代码可运行

回顾

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

新篇

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

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

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

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

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

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

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

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

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

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{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问题解决了,但是导航的链接还是错的啊,点击的时候会这样:

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/07/10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
pycharm菜鸟教程_pycharm首次使用教程
造成这个问题的原因不是我们的环境配置有问题,只是“连接超时”而已,从”HTTPSConnectionPool”,”Read timed out”这两个关键词也能看出问题所在。造成此异常的原因,可能有2种情况:
全栈程序员站长
2022/09/27
1K0
pycharm菜鸟教程_pycharm首次使用教程
Pycharm使用指南【完整版】
步骤:点击File—>Settings—>Editor—>Color Scheme—>选择自己喜欢的主题即可
hacker707
2023/04/04
1.6K0
Pycharm使用指南【完整版】
Pycharm 常用快捷键大全
本文对Pycharm常用快捷键进行了汇总整理,强烈建议你收藏学习,相信这些快捷键一定能提高你Python编程的效率。
龙哥
2021/11/10
1.2K0
Pycharm使用教程(三)(非常详细,非常实用)
1、 汉化:把resources_zh.jar拷贝到PyCharm的安装目录下的lib目录,重启Pycharm即可。
北京-宏哥
2019/09/11
3.2K0
Pycharm使用教程(三)(非常详细,非常实用)
第二:Pycharm设置配置(非常详细)「建议收藏」
1、 汉化:把resources_zh.jar拷贝到PyCharm的安装目录下的lib目录,重启Pycharm即可。
全栈程序员站长
2022/09/25
3K0
第二:Pycharm设置配置(非常详细)「建议收藏」
pycharm使用小技巧_pycharm学笨办法
点击左上角的“File”(文件),选择“Settings”(设置),输入“font”(字体)找到“Font”,在“Size”(大小)里面设置数字,默认是13,建议15或者18就可以了。
全栈程序员站长
2022/09/27
3650
pycharm使用小技巧_pycharm学笨办法
pycharm入门教程(非常详细)_pipe使用教程
1、 汉化:把resources_zh.jar(自行下载)拷贝到PyCharm的安装目录下的lib目录,重启Pycharm即可。
全栈程序员站长
2022/09/25
8070
pycharm入门教程(非常详细)_pipe使用教程
PyCharm的高效使用技巧
以前在写 Python 代码时,总觉得效率很低,因为要时不时地动动鼠标、调整一下格式。这一分神,思路就被打断了,再想接上刚才的思路又得花好长时间...
SuperFeng
2019/09/26
5650
PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)
在File—>Settings—>Appearance & Behavior—>Material Theme UI—>Settings—>Selected Theme中更改主题
hacker707
2024/04/08
6.9K0
PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)
「建议收藏」Pycharm使用教程(非常详细,非常实用)「建议收藏」
pycharm是Jetbrains家族中的一个明星产品,Jetbrains开发了许多好用的编辑器,包括Java编辑器(IntelliJ IDEA)、JavaScript编辑器(WebStorm)、PHP编辑器(PHPStorm)、Ruby编辑器(RubyMine)、C和C++编辑器(CLion)、.Net编辑器(Rider)、iOS/macOS编辑器(AppCode)等。pycharm现在在官网[https://www.jetbrains.com/pycharm/download/#section=windows]是分为两个版本,第一个版本是Professional(专业版本),这个版本功能更加强大,主要是为Python和web开发者而准备,是需要付费的。第二个版本是社区版,一个专业版的阉割版,比较轻量级,主要是为Python和数据专家而准备的。一般我们做开发,下载专业版本比较合适。
全栈程序员站长
2022/09/25
2.4K0
「建议收藏」Pycharm使用教程(非常详细,非常实用)「建议收藏」
pycharm怎么用啊_我不想用失去来教会你
1、右上角的 工具栏 能够 执行(SHIFT + F10) / 调试(SHIFT + F9) 代码
全栈程序员站长
2022/09/27
8060
pycharm怎么用啊_我不想用失去来教会你
pycharm怎么缩小代码_pycharm快速缩进
2、取消代码块的缩进 选中要取消缩进的代码块,按shift+tab键,整个代码块取消缩进
全栈程序员站长
2022/09/27
8240
【说站】python中Pycharm的快捷键及用法
这里说下Python的单行注释是 # , 多行注释是 '''注释内容''' ,  java的单行注释是 // , 多行注释 /* 注释内容 */,  文档注释 /** 注释内容 */
很酷的站长
2022/11/23
4120
【说站】python中Pycharm的快捷键及用法
pycharm使用小技巧_pycharm基本使用方法
Pycharm作为Python开发最常用的IDE之一,不仅兼容性好,而且功能也相当丰富,比如调试、语法高亮、智能提示等等功能,它还支持web开发框架比如Django等,当你熟悉了它之后,开发效率是相当之高的。
全栈程序员站长
2022/09/27
5360
pycharm使用小技巧_pycharm基本使用方法
pycharm 常用快捷键_pycharm下一行快捷键
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/173173.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/25
6690
vscode快捷键与使用配置[通俗易懂]
主命令框 F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内,可以输入任何命令,例如:
全栈程序员站长
2022/08/31
5450
pycharm创建一个新项目_pycharm没有解释器怎么办
python和pycharm的安装可以查看我的上一篇日志https://mp.csdn.net/postedit/80236418 1,设置python文件的抬头,即新建一个python文件的时候,默认会添加如下的内容。
全栈程序员站长
2022/09/27
9130
pycharm创建一个新项目_pycharm没有解释器怎么办
pycharm第一次打开
下载地址:https://www.jetbrains.com/pycharm/ 版本:PyCharm Professional Edition 收费 版本:PyCharm Community Edition 免费
全栈程序员站长
2022/09/27
1.7K0
pycharm第一次打开
pycharm设置c语言注释颜色,pycharm设置注释颜色的方法[通俗易懂]
File–>Settings–>Editor–>Color&Fonts–>LanguageDefaults–>Linecomment–>设置颜色即可
全栈程序员站长
2022/09/25
3.1K0
Pycharm入门使用教程(for python)「建议收藏」
2.选择解释器 选择了合适自己python代码的解释器,编译才不会出错 settings-project-Interpreter-选择合适自己的python3.x或者python2.x
全栈程序员站长
2022/09/27
7950
Pycharm入门使用教程(for python)「建议收藏」
推荐阅读
相关推荐
pycharm菜鸟教程_pycharm首次使用教程
更多 >
目录
  • 回顾
    • -我们简单的回顾一下之前做的步骤: -打开xampp -打开apach的admin -点击安装 -一直下一步就行 -最后安装结束 -点击登录后台 -账号:amdin -密码:admin -登录 -然后把你写的网站代码那个文件夹。移到xampp-htdocs-template(是文件夹) -然后打开xampp -进入apach后台 -将写好的html文件全部改为htm后缀的 -进入dede的系统菜单 -点击系统基本参数 -将参数按照要求改好 -点击生成菜单 -点击更新主页 -选择主页模板 -更改为你自己的主页 -生成静态 -更新主页html
  • 新篇
    • js源码:
    • css源码:
    • H5源码:
  • 问题解决
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档