整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

千辛万苦下载了一个网站模板,如何修改为成自己特色的网

千辛万苦下载了一个网站模板,如何修改为成自己特色的网站呢??

域名和空间都购买好 ,规划好了网站内容及定位,在网上千挑万选之后,终于下载了一款自己喜欢的网页模板,但是又不想和下载的风格一致,想改成自己特色的个性化网站,那怎么办?

Macromedia Dreamweaver 8

准备工作:修改网站模板必须要懂一些基本的技术:1.HTML语言 2.DIV+CSS 3.图片制作方法:Photoshop/Fireworks

网站模板的三大构架:1.网页的HTML文件 2.CSS文件 3.图片文件

在修改网页模板前,最好学习一下html标签,理解网页基本网页代码,有助于修改。(一般html标签一周就能记完并应用。)

可视化便捷修改

学习PS,可以参照同行,或者网页素材图片进行设计,注意颜色要符合网站本身的用途,搞环保的就用绿色,搞电脑IT的可用浅灰。(会PS会设计的忽略)

一个有特色的网站应该符合用户体验,在界面布局和用户体验上都应该做的很好,例如网站需要能交互,需要一些在线沟通的工具,或者有访客自己的后台,能很清晰了解访客的需求等等。

如果是建站系统CMS,wordpress,MetInfoCMS,织梦cms,动易cms等,其实这些风格的模板修改方法都类似,根据个人需求和喜好选择网站模板,只要你掌握其中一种,你就能举一反三,例如织梦dede cms都有视频教程。

div+css框架代码

初学者一看到满篇的HTML代码就蒙了,不知所措,这里教给你们一个简单的方法,就是网站模板可视化便捷修改方法。

其次,学会修改网页模板图片替换独特风格,将自己修改好的图替换。至于自己怎么修改,那就要操作者的基本功了。

photoshop

试数据库导入到wordpress本地网站后,我们就可以正式开始wordpress主题动态模板的编写了。在前面的章节中,我们已写好了wordpress主题的静态模板trans,那只是给wordpress主题创建了一个架子,给别人看一个第一印象,但它是没有灵魂的,它是一个死的,没有任何动态。所以,在开发wordpress动态模板时,我们会给trans添加上灵魂,让它拥有让人着魔的动态效果,也就是让trans可以从wordpress数据库中调用到相关的数据,在wordpress前端网站上展示。今天,我们首页来修改wordpress主题的首页的头部文件。

我们先来看一下trans首页头部的静态代码,如下:

< !DOCTYPE html>< html>< head>< meta charset="UTF-8">< title>Document</title>< link rel="stylesheet" href="style.css">< /head>< body><!-- 头部 -->< header>< div>< div>< ul>< a href="/"><img src="./images/index_02.jpg" alt=""></a>< /ul>< ul>< a href="index.html">首页</a >< a href="list.html">列表页</a >< a href="page.html">单页面</a >< a href="single.html">文章页</a >< a href="search.html">搜索页</a >< /ul>< /div>< /div>< div>< div>< ul>< li>< span class="dashicons-before dashicons-arrow-left-alt">< /span>< /li>< li>< span class="dashicons-before dashicons-arrow-right-alt">< /span>< /li>< li>< span class="dashicons-before dashicons-image-rotate">< /span>< /li>< /ul>< ul>< form action="/" method="get">< input type="text" name="search" id="">< input type="submit" value="搜索">< /form>< /ul>< /div>< /div>< /header>

对于头部这部分代码,现在我们需要修改的部分主要有3部分,如下图所示:

好,我们就来对这几个部分的代码做出相应的动态代码修改。wordpress主题静态代码变成动态代码,主要是通过wordpress程序提供的功能函数来实现。

第一部分:网页标题。

也就是< title >标签中的内容,这个网页标题是在浏览器的头部显示的,也是整个网页的标题。修改后的代码如下:

< title>< ?php bloginfo("name"); ?> < /title>

这里调用了bloginfo()函数,这个函数可以调用网站的常规选项,如:标题、副标题、网站URL、wordpress的URL路径、主题路径等等。在后面trans主题修改中,我们会经常用到。这里的bloginfo()函数的参数"name",是代码网站标题。

第二部分:CSS样式调用。

如果不修改CSS样式的路径地址,按照上面静态代码中的CSS路径,会直接调用网站根目录下的style.css样式表文件。可是,此时的根目录下,是wordpress程序的所有PHP文件,而不是trans主题的文件了。而我们要调用的是trans主题目录下的style.css。所以,我们这里把代码修改成如下:

< link rel="stylesheet" href="< ?php bloginfo("stylesheet_url"); ?>">

这里的参数stylesheet_url,表示调用的是trans主题的style.css样式表文件。

第三部分:修改logo图片地址。

在trans静态模板中,logo图片地址,也是网站根目录下,这里,我们同样要修改它的路径到trans主题目录下,代码如下:

< img src="< ?php bloginfo("template_url")."/images/logo.png"; ?>" alt="" >

这里bloginfo()函数的参数是 template_url ,表示当前主题trans的路径,而logo.png图片在这个trans主题目录下的images目录下。

第四部分:调用顶部导航菜单。

在trans静态代码中,顶部导航菜单是写死的。我们这里要调用wordpress本地网站后台创建的顶部菜单数据。这时,我们也要分2步走。

1、给wordpress主题添加菜单功能。

在trans主题目录下创建一个functions.php文件,这个是主题函数文件。在这个functions.php文件中添加如下代码来添加菜单功能模板:

//菜单register_nav_menus( array('menu_top'=> '头部导航','menu_bottom'=> '底部导航',) );

这时,我们在后台创建菜单时,就会有“头部导航”和“底部导航”的选项。如下图:

?2、调用wordpress后台创建的菜单。

原trans静态模板的头部菜单的代码如下:

< a href="index.html">首页</a>< a href="list.html">列表页</a>< a href="page.html">单页面</a>< a href="single.html">文章页</a>< a href="search.html">搜索页</a>

现在我们通过wp_nav_menu()这个菜单函数来调用我们在后台创建的菜单,代码如下:

< ?php $menu=array( 'container'=> false, //最外层标签名'echo'=> false, //不让直接输出,而是以一个变量'theme_location'=> 'menu_top', //菜单名 'depth'=> 0, //菜单深度);echo strip_tags(wp_nav_menu( $menu ), '<a>' );? >

添加好trans主题的顶部导航菜单功能后,我们再在wordpress网站后台创建菜单时,勾选“顶部导航”,就可以给wordpress本地网站添加顶部的菜单了。

通过上面的几步,我们为trans主题首页的头部做出了相应的修改,它们不再是死的了,不再是一成不变了。它们会随着wordpress网站后台的修改而做出相应的变化。这就是我们所需要的前后台互动的效果,后台不动,前台就不动。后台一动,前台就立马行动。


TML编辑器是一种用于创建、编辑和预览HTML(超文本标记语言)代码的工具或应用程序。它提供了一个直观的界面,使用户能够轻松地编写和设计网页内容。本文主要介绍HTML 常用编辑器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。


参考文档:https://www.cjavapy.com/article/3299/


1、Visual Studio Code(VS Code )


Visual Studio Code(简称VS Code)是一款由微软开发的跨平台源代码编辑器,支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发,包括编辑HTML、CSS、JavaScript等前端技术。VS Code是一款轻量级的代码编辑器,启动迅速,占用资源少。VS Code提供了丰富的扩展和插件,可以根据需求安装插件来增强编辑器功能。


1)安装和配置


官网地址:Visual Studio Code - Code Editing. Redefined


根据操作系统下载并安装相应版本的VS Code。打开VS Code后,可以根据自己的喜好配置编辑器设置,如主题、字体等。


2)新建HTML文件


在 VS Code 安装完成后,选择" 文件(F)->新建文件(N) ",在新建的文件中输入以下代码:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


3)编辑HTML文件


在VS Code中,点击左上角的"文件"菜单,选择"打开文件",或者使用快捷键Ctrl+O(Windows)或Cmd+O(macOS)来打开HTML文件。


在编辑器中可以直接修改HTML文件的内容。VS Code会自动识别HTML标记,并提供代码高亮和智能提示功能。编辑完成后,使用快捷键Ctrl+S(Windows)或Cmd+S(macOS)来保存HTML文件。


4)插件推荐


HTML CSS Support:提供对HTML和CSS的支持,包括代码片段、自动补全等功能。


Live Server:启动一个本地开发服务器,实时预览HTML页面的效果。


Prettier:格式化HTML代码,使代码结构更整洁。


Auto Close Tag:自动闭合HTML标签,提高编码效率。


Bracket Pair Colorizer:对成对的括号进行着色,方便识别代码块。


2、Sublime Text


Sublime Text是一款流行的跨平台源代码编辑器,支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发,包括编辑HTML、CSS、JavaScript等前端技术。


Sublime Text的界面非常简洁,没有多余的菜单和工具栏,更便于专注于代码编辑。Sublime Text支持多种编程语言,包括HTML、CSS、JavaScript、Python、Java等。Sublime Text拥有强大的插件系统,用户可以根据需要安装插件来扩展编辑器功能。用户可以自定义快捷键、主题、颜色方案等,以满足个性化需求。Sublime Text启动迅速,响应快速,适合于快速编辑代码。


1)安装和配置


官网地址:Sublime Text - Text Editing, Done Right


根据操作系统下载并安装相应版本的Sublime Text。打开Sublime Text后,可以根据自己的喜好进行编辑器设置,如字体、主题等。


2)新建HTML文件


在Sublime Text 安装完成后,选择" File->New File ",在新建的文件中输入以下代码:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


3)编辑HTML文件


在Sublime Text中,点击左上角的"File"菜单,选择"Open File",或者使用快捷键Ctrl+O(Windows)或Cmd+O(macOS)来打开HTML文件。在编辑器中可以直接修改HTML文件的内容。Sublime Text会自动识别HTML标记,并提供代码高亮和智能提示功能。编辑完成后,使用快捷键Ctrl+S(Windows)或Cmd+S(macOS)来保存HTML文件。


4)插件推荐


Emmet:提供HTML/CSS快速编写和自动完成功能,可以大大提高编码效率。


Sublime Linter:对代码进行实时语法检查,帮助发现潜在的错误和警告。


Color Highlighter:对CSS中的颜色进行高亮显示,方便调试和修改样式。


SideBarEnhancements:增强侧边栏功能,提供更多文件操作选项。


3、Dreamweaver


Dreamweaver是由Adobe公司开发的一款全球知名的网页设计和开发工具。它为开发人员和设计师提供了一个可视化的界面,可以直观地创建和编辑网页内容,同时也支持手动编辑代码。Dreamweaver提供可视化界面,可以直观地拖拽和编辑网页元素,无需手动编写代码。除了可视化界面,Dreamweaver也支持手动编辑代码,适合于开发人员和设计师。Dreamweaver可在Windows和macOS等多个平台上运行。Dreamweaver集成了代码编辑器、预览窗口、文件管理器等功能,提供全面的开发环境。


1)安装和配置


官网地址:Website design software | Adobe Dreamweaver


根据操作系统下载并安装相应版本的Dreamweaver。打开Dreamweaver后,,根据需要进行编辑器设置,如界面语言、字体、代码颜色等。


2)编辑HTML文件


在Dreamweaver中,点击左上角的"File"菜单,选择"New",然后选择"HTML",即可新建一个空白的HTML文件。内容如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


使用可视化界面,可以直接拖拽页面元素、调整布局、插入图片等。若需要手动编辑HTML代码,可以在下方的代码编辑器中进行修改。Dreamweaver会自动提供代码补全和语法高亮功能。在Dreamweaver中,可以实时预览网页效果,点击右上角的"Live View"按钮即可。


3)CSS和JavaScript支持


Dreamweaver也支持CSS和JavaScript的编辑和预览,可以帮助创建更丰富的网页效果。在编辑器中可以直接编辑CSS样式和JavaScript代码,并实时查看效果。


4)网页上传和发布


Dreamweaver集成了FTP功能,可以直接将编辑好的网页上传到服务器。点击"Site"菜单,选择"Manage Sites",配置好站点设置,即可进行上传和发布。


5)Dreamweaver模板和库


Dreamweaver提供模板和库功能,可以保存和复用常用的网页元素和样式,提高开发效率。


参考文档:https://www.cjavapy.com/article/3299/