信大家应该都知道在整个网站的制作过程当中,网页制作是整个网站建设的重中之重。创建企业网页的总体效果会影响着整个网站的制作质量和制作水平,所以,在进行创建企业网页的环节当中,一定要较好的把握住网页制作的几个重点,只有这样,才能够为广大用户设计制作出令大家满意的公司网站。那么,下面小编就来与大家分享创建企业网页中关于静态网页如何设计的问题。
一、静态网页设计的重要性
就目前的市场情况来说, 创建企业网页使用到静态网页设计的情况多为一些不需要经常更新内容的网站。这类网站之扬以会选择静态网页是因为:
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
https://gitee.com/didispace/SpringBoot-Learning.git
https://gitee.com/jeff1993/springboot-learning-example.git
https://gitee.com/kutilion/MyArtifactForEffectiveJava.git
通常实际的项目中会引入大量的静态资源。比如图片,样式表css,脚本js,静态html页面等。这章主要学习引入模板来实现访问静态资源。
一般Springboot提供的默认静态资源存放位置是/resources之下。html的文件一般存放在/resources/templates中。
渲染静态页面通常会用到模板。模板种类很多,这里介绍两种:
另外比较常用的模板还有velocity,但是velocity在Springboot1.5开始就不被支持了。
示例相关代码如下:
Thymeleaf
FreeMarker
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>
执行结果:
原理和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>
执行结果:
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
*请认真填写需求信息,我们会在24小时内与您取得联系。