整合营销服务商

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

免费咨询热线:

关于静态网页如何设计的问题

信大家应该都知道在整个网站的制作过程当中,网页制作是整个网站建设的重中之重。创建企业网页的总体效果会影响着整个网站的制作质量和制作水平,所以,在进行创建企业网页的环节当中,一定要较好的把握住网页制作的几个重点,只有这样,才能够为广大用户设计制作出令大家满意的公司网站。那么,下面小编就来与大家分享创建企业网页中关于静态网页如何设计的问题。

一、静态网页设计的重要性

就目前的市场情况来说, 创建企业网页使用到静态网页设计的情况多为一些不需要经常更新内容的网站。这类网站之扬以会选择静态网页是因为:

1、静态网页在工作中可以通过浏览器直接访问,不需要通过网络服务器或应用服务器,访问速度快;

2、这类网站非常安全,静态网页中的HTML页面不会受Asp相关漏洞的影响,以减少攻击;

3、网站的后台数据库出错时,不地影响网站前台的正常访问。

二、静态网页设计需要哪些开发工具

创建企业网页中静态网页设计主要用到的软件有DreamWeaver、photoshop和Notepad三种,这三款软件在的静态网页设计中睥分工和作用是不同的。

1、photoshop主要完成的是对静态网页中所有用到的图片的修改和设计工作。

2、Notepad是一款有着多种的主题和模板,HTML代码编辑工具,除了语法高亮,它还支持代码片段和隐藏/显示代码的功能。帮助静态网页设计者生成HTML代码。

3、DreamWeaver是进行网上框架设计、页面布局等静态网页设计工作的软件。可以将图片与HTML代码结合起来,最终形成一个完整的静态网页。

三、制作静态网页要做哪些准备?

创建企业网页中在进行静态网页设计制作时需要做的准备有很多,如理清制作静态网页的顺序,网页风格的定位、内容布局的确认等等。

1、理清顺序

理清制作静态网页的顺序就是想弄清楚先做什么,后做什么,网站建设要有一个有序的过程,不要东一榔头西一棒子的乱弄。静态网页制作时要先做好用户定位,网页产品和服务内容确认,网站架构确认等这些大方向和基础性的东西,然后再决定网页的外观和风格。这样有利于企业在进行网站建设时减少返功的危险。

2、风格定位

静态网页的风格包括:网页的色彩、字体的大小、图片的规格等等。网页的色彩选择需要根据企业的实际情况进行确认,一定要与企业的整体形象和尚UI设计相符合。需要强调的是:网站中的网页背影图片和色彩要一致,底色或背景图片必须与文字对比强烈,这样才能有易于阅读,尤其是那些包含大量文字的网站页面,尽量为让访问者营造舒适的阅读环境。

3、页面布局

 创建企业网页的页面布局主要针对的是网页的内容布局、排版等。在进行静态网页设计排版时应做到不要太疏、太密或用过大的字,在网页的顶部标题栏左侧标题栏中放置最为重要的内容,这样是符合人们的浏览习惯的。页面布局要做到简洁明快、满足用户浏览需求,实现良好的用户体验。需注意的是:网页的长主要适当,不要将网页设计的太长,这样会让用户因感觉网页滑动太麻烦而跳出。

文章由才艺多收集编写转载请注明出处:http://www.caiyiduo.com/article/show-4942.html

学习记录的代码,部分参考自gitee码云的如下两个工程。这两个个工程有详尽的Spingboot1.x和2.x教程。鸣谢!

https://gitee.com/didispace/SpringBoot-Learning.git

https://gitee.com/jeff1993/springboot-learning-example.git

本学习记录的示例代码克隆地址,分支为develop

https://gitee.com/kutilion/MyArtifactForEffectiveJava.git

静态资源

通常实际的项目中会引入大量的静态资源。比如图片,样式表css,脚本js,静态html页面等。这章主要学习引入模板来实现访问静态资源。

一般Springboot提供的默认静态资源存放位置是/resources之下。html的文件一般存放在/resources/templates中。

渲染静态页面通常会用到模板。模板种类很多,这里介绍两种:

  • Thymeleaf
  • FreeMarker

另外比较常用的模板还有velocity,但是velocity在Springboot1.5开始就不被支持了。

示例相关代码如下:

Thymeleaf

  • studySpringboot.n06.webframework.web.WebController.java
  • templates/06_webframework/thymeleaf.html

FreeMarker

  • studySpringboot.n06.webframework.web.WebController.java
  • templates/06_webframework/freemarker.ftl

Thymeleaf

build.gradle

为了使用Thymeleaf模板,需要在build.gradle脚本中引入模板引擎的依赖

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf

WebController.java

控制器类中声明访问路径,并且为模板添加一个变量

 @RequestMapping("/thymeleaf")
 public String ThymeleafTest(ModelMap map) {
 map.addAttribute("host", "http://blog.kutilionThymeleaf.com");
 return "06_webframework/thymeleaf"; 
 }

注意这个方法的返回值,因为静态页面没有直接放在templates文件夹下,而是放在templates文件夹的子文件夹06_webframework中,所以返回值中要把路径带上

thymeleaf.html

静态页面中使用了el表达式,可以将java变量反映到页面上

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8" />
 <title></title>
</head>
<body>
<h1 th:text="${host}">This Thymeleaf framework test page.</h1>
</body>
</html>

执行结果:

FreeMarker

原理和Thymeleaf基本是一样的

build.gradle

implementation 'org.springframework.boot:spring-boot-starter-freemarker'

WebController.java

 @RequestMapping("/freemarker")
 public String FreeMarkerTest(ModelMap map) {
 map.addAttribute("host", "http://blog.kutilionFreemarker.com");
 return "06_webframework/thymeleaf";
 }

freemarker.ftl

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8" />
 <title></title>
</head>
<body>
<h1 th:text="${host}">This Freemarker framework test page.</h1>
</body>
</html>

执行结果:

总结

  • 引入并且使用了Thymeleaf和FreeMarker模板
  • Springboot默认已经配置好这两种模板了,如果需要手动配置需要参考两种模板的文档

phinx是一款支持多种编程语言的文档生成工具,可以由reStructuredText或Markdown文档生成HTML静态网页,并且自动生成索引,可以作为个人网站、博客,或者制作电子教程、书籍等。

1.安装Python

Python官网(https://www.python.org/)下载安装Python3+。

2.安装sphinx

pip install sphinx

3.安装markdown支撑的模块

pip install sphinx-markdown-tables

4.安装主题模板

pip install sphinx-rtd-theme

5.创建项目文件夹test并进入

6.启动Sphinx,输入以下信息

Project name:Python教程

Author name(s):zbxx.net

Project language [en]:zh_CN

启动Sphinx后会在项目文件夹test中创建如下文件结构:

7.编辑 source/conf.py 文件

extensions = ['recommonmark','sphinx_markdown_tables']

html_theme = 'sphinx_rtd_theme'

8.将markdown笔记文件Python.md放到source目录下

9.编辑 source/index.rst 文件,加入python.md

10.生成HTML

make html

生成静态HTML网页文件,位置:build\html,我们就拥有了一个完整的静态网站。

打开index.html预览效果,可以本地使用或上传个人网站。

markdown笔记修改后,需要清空HTML,重新生成。

make clean