静态网页设计流程 第1篇
关键词：网站设计与网站管理 教学网站 ASP DIV CSS
一、构建课程教学网站的目的及意义
随着互联网和信息技术的飞速发展，我们的学习方式也在产生变革，学生在查找资料时，从传统的查阅图书到了如今的利用互联网络上的资源为自己答疑解惑。电子商务专业与信息技术紧密相关，而网页设计与网站管理作为电子商务专业的必修课程，更应该实现学科教学与信息技术的完美结合，这必将成为当今学校教学的发展趋势之一。
通过构建课程教学网站，可以给学生和老师提供一个交流的平台，给学生提供一种学习的辅助工具，实现教学资源的共享，提高高校教学质量。
二、构建课程教学网站的技术与方法
1、DIV+CSS
DIV+CSS是一种常用的网页布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。不仅让整个网页看起来条理清晰，而且修改起来很方便。
2、ASP+IIS+SQL
现在常用的网站开发语言有ASP、PHP、JSP、等。ASP是微软所开发的一种后台脚本语言，它的语法和Visual BASIC类似，虽然ASP存在着安全性等问题，但是它简单易用。目前在微软的.net战略中新推出的借鉴了Java技术的优点，使用C Sharp （C#）语言作为的推荐语言，同时改进了以前ASP的安全性差等缺点。但是平台的局限性和ASP自身的安全性限制了ASP的广泛应用。
PHP的源代码完全公开，平台无关性是PHP的最大优点，但是如果在PHP中不使用ODBC，而用其自带的数据库函数来连接数据库的话，使用不同的数据库，PHP的函数名不能统一。这样，使得程序的移植变得有些麻烦。
JSP的最大优点是平台无关性，除了这个优点，JSP/Servlet的效率以及安全性也是相当惊人的。因此，JSP/Servlet虽然在国内目前的应用并不广泛，但是其前途不可限量。
如今主流的Web服务器软件主要由IIS或Apache组成。IIS支持ASP且只能运行在Windows平台下，Apache支持PHP，CGI，JSP且可运行于多种平台，虽然Apache是世界使用排名第一的Web服务器平台，但是众所周知，Windows以易用而出名，也因此占据不少的服务器市场。
综合以上分析，在构建课程教学网站时，采用的是DIV CSS的网页布局方法，结构清晰，修改方便；开发环境选择的是微软的ASP和IIS应用服务器，由于其简单易用，便于学生参与；数据层选择的是SQL Server2008，它是迄今为止最强大最全面的SQL Server版本。
三、课程教学网站的主要内容
1、提供注册登录功能，让学生能够实名上传作业，下载教学课件等；
2、课程安排，将理论课程、实验课程及课程设计安排详细说明及指导文档上传到网络，使学生能把握课程学习的进度；
3、提供教学视频，上传与课程相关的视频供学生学习；
4、作品展示区域，将往届优秀的学生作品在网上展示，供学生观摩学习；
5、开设交流论坛，供学生与老师或学生与学生之间进行交流；
6、资源推荐，将与课程相关的优秀资源网站链接推荐给学生。
根据以上分析，课程教学网站的结构如下：
四、课程教学网站的教学应用
1、学生可以通过教学网站已经学过的知识进行复习，对将要学到的内容进行预习。
2、遇到课堂上没有理解的知识或实践步骤，可以通过下载课件和实践指导，自行练习。
3、教师可以通过教学网站收集学生在学习中所遇到的问题，在课堂中详细进行讲解和点评。
4、学生可以通过登录教学网站，提交课程实践、课程设计等老师布置的作业和任务，还可以在交流论坛中与老师及同学交流。
通过《网页设计与网站管理》课程教学网站的建设，给学生提供了一种新的学习模式，会极大激发学生的学习热情，加强师生之间的沟通和交流。
本文系武汉大学珞珈学院教学研究项目（201216）的研究成果之一。
参考文献：
静态网页设计流程 第2篇
响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。
静态网页设计流程 第3篇
信息流广告是埋在信息流中的一种广告形式。这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样。比如朋友圈、知乎、Facebook 都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验。信息流广告的尺寸与信息流相同。
△ 知乎APP中信息流中的广告
在网站具体的页面设计中，底部会有一个区域我们称之为 footer。一般 footer 的颜色都会比上边内容区域要暗，因为 footer 的信息在逻辑的级别上是次要的。footer 区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让 footer 变得特别明显。
网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑 C盘保存一个叫 的图片，然后在浏览器打开这个网址：C:\ 你看到了什么？对，就是这张图片。这就是网站的原理：网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器。我们通过域名来调取网中不同的页面和文件，如果服务器关机了那么网站也就瘫痪了。每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个 IP地址，这个 IP地址就是服务器所在的门牌号码。找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如文字、边框、表格等实际上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完（比如登录成功这个信息）然后再下发给我们的浏览器。所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次「握手」。当然老「握手」会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费。这个机制就是「cookies」：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。
△ 基于鼠标的手势操作
△ 按钮与文字的不同状态
静态网页设计流程 第4篇
关键词：色彩；网站页面；页面设计；应用
中图分类号：
1 色彩在网站页面设计中的重要性
在网页设计中，色彩是一个非常值得研究的对象，最早将色彩引入到现代色彩体系中的教育家有很多，约翰内斯・伊顿就是其中的一位，他具有十分敏感的形式意识，在他看来，色彩是一种比较理性的事物，只有对色彩的构成进行认真地分析和研究，才能更好地展现出色彩的魅力。他曾经说过：“研究色彩美学的一种重要出发点就是对比效果及其分类，主观调整色彩感知力问题和建筑设计、艺术设计以及商业广告设计等具有紧密的联系。”由此产生了色彩美学的概念。色彩在网站页面设计中的作用，可以从色彩的表现力和色彩的结构性两方面进行研究。
色彩的表现力。人们通常将色彩形象地比喻为具有较强诱惑力的女性，主要是因为女性对色彩具有加强的敏感性。英国有专家指出，将色彩应用于视觉作品上将会增加作品的吸引力。在设计作品中半数以上颜色设计较好的作品能够吸引更多的女性消费者。
康定斯基曾说：“内部因素和外部因素是艺术作品中的两大因素。内部因素是指艺术家内心所具有的情感，可以引起观众类似情感。”设计师就是利用了自己真实的感受和对色彩的认识来设计作品的，目的是为了引起观众情感上的共鸣。与图形的变大效果相比，色彩具有更强的感染力。
色彩的象征性。对于色彩的心理感受，心理学家曾做过实验，结果发现人们在红色氛围下，情绪比较激动，脉搏跳动的比较快，而在蓝色氛围中就正好相反。
色彩可以指代不同的情感，因为人们的工作能力、风俗习惯、抵御、生活环境以及民族的差异，具有不同的象征。由此可见，色彩具有十分重要的作用。
2 网站网页色彩的基本设计原则
在网页设计中要遵循简洁原则。色彩主要分为两种，一种是有彩色，另一种是无彩色。无彩色主要包括三种颜色，它们是黑色、白色及灰色。其他的颜色就是有彩色。在网页中使用色彩时，并不是使用的颜色越多越好。除了无彩色之外，在使用其他颜色时尽量不要超过三种。这里需要注意一个问题，不少学生容易将无彩色中的黑色或白色或灰色也看作了有彩色，这是不正确的。注意，这里强调的是有彩色。很多网站的网页背景色都采用了无彩色，这样有助于减少配色出错的几率。
蓝、红、绿等分别代表一类具体的颜色，也就是色相。它是一种色彩区别于另一种色彩的名称，指的是色彩的外在特征。有些学生将浅蓝色和深蓝色看作是两个色相，实质上，它们仅是一种色相，就是红。这两种颜色是红色的基础上增添了不同的灰色，使色彩的饱和度发生了变化，或者色彩的亮度发生的变化。这种色彩的变化利用Photoshop的调色板很容易实现。网页色彩设计的简洁性原则，这个原则不会随着时间的改变而发生意义上的变化。
坚持主从关系的色彩设计原则。在色彩设计中，需要遵循的一项比较稳定的原则就是主从关系原则。大多数网站网页的背景采用的都是无彩色，除无彩色之外，其他颜色就是页面的主题颜色。如果在网站网页中进行色彩设计时，没有遵循主从原则，或者没有把握好这样原则，就很容易造成网页中缺乏主色调，所在不能使用较多的其他颜色，以免喧宾夺主。
在世界五百强企业中的网站的首页中，几乎全部重点突出一种色相，颜色看起来十分简洁，有的表现出一种诙谐幽默，有的表现出一种清新自由，有的表现出一种高贵典雅等，这些设计思想既遵循了简洁的设计原则，也充分体现了主从设计原则。通过这种设计原则可以将人们的视线集中在一种颜色之上，让人感觉像在一种色彩的世界当中，由此可见色彩所具有的独特魅力。
坚持色彩均衡设计原则。在网页设计中，如果使用过多明度较高的颜色就会使多数人的心理上无法认可，这时就可以用同色相或者黑色在小面积范围内进行适当地点缀，这样就可以色彩的设计趋于平衡，这样就可以满足大多人对色彩的要求。
有些主页的底色设计成黑色，而将字体也设计成比较深的颜色，色彩的亮度太接近，读者就会感觉阅读页面比较吃力，相反，如果颜色的亮度对比度过高，人们的眼睛也会感觉很不舒服，读起来很费劲。
选择色彩的原则：
（1）选择的色彩要与内容相符合。网页设计的目的是为社会提供服务，为自身的产品做有效的宣传，务必要根据页面的内容选择相符合的颜色，这样才有可能达到预期的效果，若颜色设计的不合理，那么后果是难以预测的。因此，我们对网页中的色彩进行设计时，要根据网页中的具体内容选择合理的颜色，使色彩的色相、明度以及色度，以及色彩的心理、物力以及生理等感觉要素的作用得到充分地发挥，力求选择的色彩更准确、更合理及更典型。
（2）保持色彩的时尚性。在设计网页颜色时，要充分了解时下的流行色。一般情况下，网站网页的颜色要根据每年流行色的发展进行重新设计，这样才助于保持网页颜色的时尚性。除非是一些每户网站，或者网站网色颜色的变动受到一定的限制，可以不进行改动。每年欧美等国家都会向外界一批大众比较喜爱的颜色，即流行色。如果将这些颜色应用在网站的网页设计中将会使网页更具有时尚性，更富有朝气和活力，将会更吸引大众的眼球。
（3）色彩的独特性。在设计网页色彩时，要使网页的色彩具有独特性，这不仅可以给人视觉上的冲击，也是增强人们对色彩识别度和记忆性地客观要求。因此，要确保网页具有与众不同的色彩选择和色彩搭配，这样有助于为网页访问者提供独特的感受，提高访问者对该网页的记忆度。
3 网站页面色彩的各部分设计原则
网页的组成部分主要有网页内容、网页标头、导航菜单所在区域、侧栏、页脚以及配色等。
网页内容。这部分空间主要用来存储信息，一般对背景的亮度要求较高，而对文字的亮度要求较低，需要拥有加大的对比度。不少网站网页的背景都是白色，字体选择黑色。也有一些网站页面的内容使用的是自己logo的颜色。例如北京大学网站首页内容的颜色就是应用logo的颜色，北大网站logo的颜色为蓝色，网站网址为http： //.从整体上看，页面内容的颜色显得比较协调。
网页标头。这部门的作用用于logo主要信息的存放，通常选用深色，并且要求具有较高的对比度，这样的设计有助于用户在短时间内就能够寻找到logo在该网站的具置。一般情况下，网页标题的颜色不同于网页的其他部分。在为其选择色彩时，一般选用和页面内容颜色差距非常大的颜色组合或者字体，也可以选择与页面内容相反的颜色。例如，中央美术学院网站首页内容的颜色是橘红色的背景，而页面标题的颜色就选择了与页面颜色差距较大的绿色，这样就形成了鲜明的对比，更加突显了标题的重要性。
导航菜单所在的区域。在设计这部分颜色时，要选择比较暗的颜色，这样就可以利用鲜明的颜色对比，以及特殊性较强的字体或对比度较高的图形元素，将菜单的作用和页面内容明确地划分开来。
侧栏。虽然侧栏并不是每个网站页面上都有的，但是它依然是用于现实附加信息的有效方式，也要将其和网页内容明确地区分开来，并且也要方便读者进行阅读。
页脚。页脚是网站网页中最不起眼的部分，不能让它过于突出，在进行颜色设计时，可以选择使用侧栏的颜色，也可以使用更深一点的颜色。
配色。在网页配色方面可以选择那些跳跃性较强的颜色，这样有助于快速地引导读者，例如沈阳师范大学网站首页的颜色就选择使用浅黄色，这种颜色在浅绿色的整体色调中比较显眼，能够更好地引导读者的视线。
参考文献：
[1]王鹰汉，张慧.浅谈旅游公司网站的设计[J].科协论坛（下半月），2011，2.
[2]刘秀芳，刘仲鹏.基于的商品交易网站设计与实现[J].黑龙江科技信息，2011，8.
静态网页设计流程 第5篇
网站建设过程中,系统的架构设计是重要的环节。本系统采用MVC(ModelViewController)模式,系统结构示意如图2所示。主要是在服务器端利用JSP(JavaServerPages)、Struts、JavaBean等技术进行开发。MVC模式的最大优点是耦合性低，视图层和业务层分离，这样就允许只更改视图层代码而不用重新编译模型和控制器代码，同理，一个应用的业务流程或者业务规则的改变只需要改动MVC的模型层即可[2]。
2网站实现平台
2．1软件和服务器环境操作系统：WINDOWSXP/7服务器软件：Apache数据库软件：MySQL(WAMP/XAMPP集成)编译器：MyEclipse，服务器Apache是一种网页服务器软件，在目_络技术市场中，Apache是唯一一款开源的，全世界的优秀程序员都在对它进行修改[3]。因此，Apache是JSP网站开发程序的首选页面服务器软件，有执行效率高，与JSP完美搭配、稳定等优点。虽然Apache配置过程较复杂，但是配置成功之后可长时间稳定运行。因此服务器上普遍采用LINUX+Apache的方式进行配置。个人计算机在开发调试过程中，可以选择集成开发环境XAMPP或WAMP，这也充分体现了JSP的跨平台特性。JSP技术类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件（后缀名为*.JSP)。用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行[4]。网站通过使用JSP技术，可以实现用户的登录、留言等数据库的操作功能。2．3MySQL管理软件MySQL同ORACLE、DB2、SQLSERVER等软件一样，是一款常用的关系型数据库管理软件[5]。比其他关系型数据库管理软件体积更小、效率更高、搜索快速、不需要花费任何费用，网站采用MYSQL数据库管理系统与JSP脚本语言相结合的数据库系统解决方案。数据库的功能是在计算机上实现数据管理。网站首先要建立数据库，数据库连接成功后，整个网站操作将更为简便。网站数据库中建立了三个基本的关系表：网站管理员用户表admin，如表1所示；网站普通用户表student，如表2所示；网站留言信息表comment，如表3所示。
3网站使用的相关技术
3．1数据库的连接大学生创新创业网站是一个运用Servlet来编写的动态网站，采用JDBC（JavaDataBaseConnectivity）来建立数据库。JDBC是一种用于执行SQL语句的JavaAPI（ApplicationProgrammingInterface），可以为多种关系数据库提供统一访问，它由一组用Java语言编写的类和接口组成。JDBC提供了一种基准，据此可以构建更高级的工具和接口，使数据库开发人员能够编写数据库应用程序[6]。部分核心代码如下：conn=(_jdbc:mysql:;characterEncoding=utf-8_,_root_,__);通过调用JDBC的核心类生成conn数据库操作对象，并利用getConnection方法将数库的地址和链接用户名以及数据库的打开字符集进行描述。整个网站平台的实现结构是利用‘数据库链接池’的软件架构,如图3所示。如果需要使用数据库资源，只需要调用链接Javabean的函数方法就可以了。使用这种架构的系统，结构清晰、功能可扩展性强、后期可维护性高。3．2Css样式表的设计Css（CascadingStyleSheet）是一种用来表现HTML（HyperTextMark-upLanguage标准通用标记语言的一个应用）或XML（eXtensibleMarkupLanguage标准通用标记语言的一个子集）等文件样式的计算机语言[7]。通过使用Css样式表可以使网站前台的文字和样式分离。在修改网页的时候只需要修改其文字内容而不需修改其样式，实现网页修改的渐变快捷和风格灵活；而在扩展和修改网站前台风格时，只需要通过修改网站的样式表就可以实现对网站整体风格的修改了；同时，其标签化的方式可以轻松的实现对表单
4结束语
静态网页设计流程 第6篇
了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由 HTML 编译的，我们在服务器上存储的网页代码基本都是 HTML 格式。HTML 全称是 HyperText Markup Language，即超文本标记语言。「超文本」是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用 HTML语言写一段文字会是什么样呢？
△ 模拟代码编译过程
△ 主流形式：HTML + CSS + JS
△ 主流后台编译语言：PHP ASP JSP CGI
我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：第一，HTML5 视频播放；这种方式缺点就是不兼容低端浏览器。第二，Flash Player 播放器播放；这种方式的缺点是Flash安全性很低而且效率慢。第三，动画使用 Gif 格式；这种方式的问题是动画长度不够，并且这个格式仅仅支持透明和不透明两级属性。那么像 Google 首页 Doodle 的动画是怎么实现的呢？这种技术叫做：雪碧图。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精灵，它是一种 CSS 图像合并技术。它本身调用的图片是支持多级透明的 PNG 格式，然后把动画并排排列出来。比如一个卡通人物的动画每帧宽度是100px，那么就把它的动作1 动作2 动作3 动作4 并排放在一张宽度是400px的 PNG 图片里。然后代码在一个100px的宽度框子内背景图调用这张 png，我们就看到了动作1，然后过一秒钟代码会悄悄移动100px我们就看到了动作2。由于速度很快就让我们看到了连续动画。雪碧图也有自身的缺点：如果帧数太多，会消耗很大的内存。所以帧数一定要控制少。如果你的动作设计了12帧，那么我建议你可以试试将2、4、6、8、10删除，保留一半的动作。
△ 雪碧图
视差滚动是一种运动速率不一样的设计效果，用以实现空间感。比如密尔沃基警察局官网就大量运用了视差滚动效果。其实现原理是，代码判定网页滚动，滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验仿佛是我们在物理现实中看到的空间感一样。视差滚动已经不是什么高新技术，如果你的网站比较适合视差滚动，请大胆设计并和前端工程师提需求，相信前端工程师可以满足你的要求。我们需要准备的就是运动速率不同的分层静态 PSD 文件。
△ 运用了视差滚动效果的密尔沃基警察局官网（）
终于，经历过长篇大论网站的原理与组成部分后，我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活，然而因为太灵活也会让我们的设计师无从下手。那么接下来我将介绍网站设计的规范，在您工作的时候可以参考。注意，在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等，这样有助于后期不会有误会。
因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。在最新版 Photoshop 网站 Web 预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。内容安全区域为1200px （或1000px / 1400px）。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸，因为对于适配的方式和后续配合他们更有发言权。
△ 网站的尺寸规范
我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。比如在苹果电脑上看到的文字效果和 Windows 系统电脑上看到的文字效果就有所不同：苹果会对文字进行渲染，而 windows 的文字几乎充满了像素颗粒。按照用户占比来说无疑 Windows 的用户是主流，所以尽管我们可能使用苹果电脑设计网页，但是设计出来的网页效果也应该和 Windows 显示一致。否则我们设计完漂亮的设计稿，程序员无法还原成我们设计的样子。另外，字号的大小也非常重要。网页的显示区域决定了文字不可以过大，在网站设计中我们的文字大小一般来说是12-20像素。为什么不能比12px更小？因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。那么总结一下：文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑、大小为14-20px、渲染方式选择 Windows Lcd 或锐利。另外，英文和数字需使用 Arial字体，渲染方式选择无。
△ 网站字体规范
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的 png 格式、图片文件很小的 jpg 格式、支持透明/不透明并且支持动画的 gif 格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？
第一种方法，给程序员切图的时候我们可以适当缩小图片文件的大小。比如 Photoshop 中存储为 web 所用格式就会比快速存储文件更小。
第二种方法，可以尝试使用例如 Tinypng、智图等工具再次压缩图片。这些工具会把图片中的多余信息删除并且压缩，而图像质量不受损失。
第三种方法，Google 研发了一种 Webp 格式，它的图片压缩体积大约只有 JPEG 的2/3，能节省大量的服务器宽带资源。比如 Facebook、Ebay 还有我们设计师常用的站酷图片存储都是使用了 Webp 图片格式。
第四种方法，浏览器和服务器握手时需要下载网页所调用的图片资源，那么如果一个网站有一百张图片的话，浏览器和服务器就得握一百次。第一会耗费服务器资源，第二访问速度就会慢一些。所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张 png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。
△ 在线压缩工具Tinypng网站
按钮的风格在过去的十几年发生了很大的变化，由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。
△ 不同时代下不同的按钮风格
静态网页设计流程 第7篇
摘要：本文以Web标准为基本思想，阐述了针对电子商务网站网页设计的思想和策略，探究了一套紧随时代需求的网站设计流程。
关键词 ：Web标准；电子商务网站；网页设计
引言
随着计算机网络技术的迅速发展，网站的网页设计布局也显得越来越复杂，在专业技术上的要求也越来越综合。同时，电子商务在这样的潮流下飞速发展，但电子商务网页设计却成了阻碍电子商务发展的一个重要因素，在这样的形势下，电子商务网页设计与制作就需要有专业的技术来实现，仅仅依靠传统的网页设计技术已不能满足时代的需求。目前，基于Web标准的网页设计思路已成为网站开发的主流，以Web标准为基本思想探究出一套有效的、紧跟时代步伐的设计流程，同时针对电子商务领域研究有效的网页设计策略。
1、关于Web标准的主要技术
什么是Web标准
Web标准不仅仅是一个标准，而是一系列标准的组合。一般的网页都由三个部分组成，即结构、行为和表现，而这三个部分中结构对应的标准为XML和XHTML，行为对应的标准为对象模型等，表现对应的标准为CSS。
① 结构
其中的主要技术包括可扩展超文本标记语言（XHTML）和可扩展标记语言（XML），主要应用在对网页数据的分类以及整合方面。在这两个标准中，XML是一种源语言，它能够让用户对自己的语言进行标记定义，其具有的数据转换能够相对来说比较强大，而XHTML在性能上结合了超文本置标语言（HTML）的简单特性，同时，它还使用了XML的强大的功能系统，在语法上相对来说也比较严格。
② 行为
其中的主要技术包括ECMAScript和对象模型（DOM），主要应用在交互操作网页文档方面。ECMAScript能够有效的实现界面上操作对象的交互操作，而DOM能够定义、修改以及表示文档所需的对象、所需的对象的属性和行为，同时还能处理这些所需的对象之间的关系。
③ 表现
其中的主要技术是CSS，即层叠样式表，主要应用在对浏览器的显示控制方面。CSS控制的表现与XHTML决定的结构相分离，主要用来设计网页的风格。
Web标准下的网页设计流程
Web标准下的网页设计流程主要包括语义结构定义、网页内容添加、CSS美化网页以及添加动态元素四个部分。
语义结构定义：进行这个部分时，需要我们能够根据网页上的设计图，对我们所需要的DIV层块进行进一步分析，同时也要分析各个层块之间的相互关系，为达到一个好的访问速度，DIV层块应该小于等于三层。
网页内容添加：在第一步中定义好语义结构后，然后根据网页设计图添加内容，并且在每一个层块添加合适的网页内容，其中包括添加文字、图像、表单、列表等。
CSS美化网页：在进行网页设计时，需要使用CSS对网页的整个页面进行布局，其中包括在页面中加入边框和背景等；同时，还需要使用CSS的相关设置，其中包括字体和大小等。
添加动态元素：在网页中添加动态元素时，需要根据网页设计图对各个方面的要求，利用JavaScript技术完成网页中动态元素的添加，包括添加导航菜单、焦点图及其它动态元素等。
2、电子商务网站网页设计所需要的技术
随着互联网科学技术的飞速发展，越来越多的企业应用互联网技术推动了企业的发展，人们的生活方式也受到互联网的影响。在这样的背景下，电子商务也逐渐发展壮大，而电子商务网站网页设计就成了相对重要的一部分，网页设计是以网络为载体，把一些对人们有用的信息方便快速的传达给他们。在进行电子商务网站网页设计时，整个过程都要用到大量的电子商务设计软件，而设计的过程又需要计算机技术作为基础。
在研究基于Web标准的电子商务网站网页设计时，在设计过程中需要有缜密的思想来进行设计的每一个流程，然后开发网上商店系统，以达到对网店实行有效的管理以及扩展网店的业务。在Web的标准下，网页设计者能够有效的将网页结构划分清楚，这样就能够提升电子商务网站网页开发的效率，同时还能够尽可能的降低网页设计成本。
3、电子商务网站网页设计过程
在设计电子商务网站网页时，可以按照下面的流程进行：内容分析、结构设计、方案设计以及表现设计。
第一，内容分析：即通过了解需要展示在网页上的具体内容，清楚各内容所具有的逻辑关系，最后分清楚各个内容的重要程度从而合理安排位置。第二，结构设计：即根据内容分析得出的相关结论，找到合理有效的网页布局，从而设计出好的XHTML结构。第三，方案设计：使用好的美工设计软件，设计出一个能给人视觉带来享受的网站页面设计图。第四，表现设计：表现设计又可分视觉设计和布局设计，视觉设计即是使用CSS美化网页的方式，同时配合美工设计元素，将设计方法转化为网页的方式。布局设计即是通过使用CSS和XHTML对网站页面进行布局设计。
内容分析
一个电子商务网站能否起到吸引客户的效果，取决于这个电子商务网站网页的布局是否清晰明了，能否给人一种视觉上的享受。网页设计就是一种视觉语言，对布局和色彩的搭配要求很高，要求网站的主页也能给人一种美的享受，其它网站页面的布局也应该与主页相协调。电子商务网站中网页布局形式多种多样，有“厂”字型、“国”字型、“封面”型以及经济“框架”型等。
结构设计
为电子商务网站开发网页时，网页中展示的有突出核心的业务区，也有展现其它功能的区域，整个网页开发完成后，用户可以在后台进行可视化的操作，同时，用户还可以创建属于自己的个性化的网页。在设计电子商务网站网页时，框架是整个网页的核心部分，它决定了整个网页的整体布局效果，框架一般都是HTML格式的文件，它能够将页面划分区域。
在制作电子商务网站时，首先要在硬盘上新建一个文件夹，并把这个文件夹作为网站的根目录，最后将这个目录上传到服务器上就行了。一个网站就对应一个磁盘上的文件夹，设计网站所需要的全部资源以及所有网页都放在这个文件夹里面。
表现设计
在设计好网页和它的结构后，可以使用CSS为网页文档添加样式。首先要将已经设计好的方案中的网页图片分离出来，然后使用CSS为其添加合适的样式，在进行这个操作的整个过程中，涉及到CSS的布局以及背景图片应用，在使用CSS时，可在网站的前台观察到网页的板块区域，板块区域的个数会根据有设计的电子商务网站的类型不同而有所变化，这个过程是由CSS规则确定的，并且整个框架结构是由HTML文件确定的。这样设计的网站，可以在其后台进行可视化设计，向所需要的区域添加好的插件等，这样网页表现出来的画面效果更好。
4、结语
随着时代的发展，人们不再满足于单调的生活模式，在这样的背景下，互联网技术慢慢融入到人们的生产与生活中去，这就使得方便人们生活的电子商务逐渐发展起来。目前，大多数人的生活开始与电子商务紧密联系在一起，而电子商务的网页设计的好坏直接关系到整个电子商务模式的运行。因此，研究基于Web标准下的网页设计技术成为了电子商务门户的重点，这样才能有效的提升电子商务网站的性能以及开发效率。
参考文献：
[1] 朱淑琴，魏威，张嘉萌. 基于Web标准的电子商务网站网页设计与制作[J]. 计算机与现代化. 2012(15),30-32.
[2] 王猛. 基于用户情感需求的电子商务网站首页界面设计研究[D].东北大学. 2012,18-23.
静态网页设计流程 第8篇
设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。当然 H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的 H5，就是通过 H5 工具生成。目前比较火的 H5 生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将 PSD 上传即可对每个原件进行动效的设置了。但是如果需要复杂的动效和交互，还是需要前端工程师的配合。
△ H5项目的尺寸
△ 微信公众号后台
△ Admin CRM dashboard by Divan Raj
如果我们服务于为企业搭建 CRM、ERP 或者 OA 等系统的第三方公司，那么我们可能会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是服务。其他公司会来提供 SaaS 服务的公司定制系统，然后服务公司会为客户提供从服务器到设计一体化的服务。这里提到这个词是防止设计师误解它的定义。
△ Robo Advisor - Projection, List and Questionnaire by Michal Parulski
了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分吧。网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。
静态网页设计流程 第9篇
【关键词】网站开发与网页制作 网络现状分析 网络设计未来发展规划
1 “网站开发与网页制作”网络设计现状分析
网站开发语言安全性
网站开发采用的语言有ASP、php、aspx、java等，实际开发制作中PHP+SQL的应用非常广泛，这在网络课程设计中也是综合运用的重要课程，它能独立实现网页的自由切换，完成复合图形的链接，调整网站的模式结构，它的动态因素还能起到吸引眼球，脱颖而出的效果；网站开发中PHP+SQL的综合运用更是提高了网页的利用空间，加速了后台数据库的建立，同时提高了网站开发的安全性和注重浏览者的综合感受。
静态网页制作中Dreamweaver的应用
收录引擎对网站的友好度
2 “网站开发与网页制作”设计发展规划
多层次深发展满足不同领域的需求
网络课程是一种以学生为主体的网络教育方式，它注重学生的实操能力和融会贯通能力，改变了老师口传式的传统教学模式，更好的活跃了学生氛围。网络课程设计可以根据学生接受能力的不同、所处领域的不同实行分类式教学模式，分层次辅导，有的放矢。例如，对研究和专业学生的教学，专业学生注重就业方向，我们设计的网络课程就偏重于实用性，把日后经常用到的知识点纳入教学中；对于研究倾向的学生偏重于后台技术的开发，使它们在今后的研究中取得新的进展和突破，这样做到有针对性的因材施教可以满足不同领域学生的需求。网络课程设计不受时间和地点的限制，可以重复式学习和互动，使学生更好的接受和完成学习任务。
整合资源优化知识结构，提高网络课程设计效率
在网络课程设计中，注重知识点的整合和知识结构的优化是关键的一个步骤。网页制作不仅要求学生灵活掌握网站框架结构，而且在其艺术性上也提出了更高的要求，例如：在网页制作中加入文字描述是我们常常遇到的问题，这时我们可以涉及如何加入文字并进行艺术设计，如何制作文字动态效果，并且兼顾抓取整段文字的关键词，浏览备注信息和搜索引擎中出现的频率等，这样就构成了由点到面，循序渐进形成一系列连贯的知识点。再有网站开发过程中，网站链接浏览器的选择也十分重要，它涉及到网站的权重问题和优先选择问题，网站权重突出了网站的地位和导向，我们来换位思考一下，在搜索时习惯输入什么知识点链接哪些网站，什么样的域名优先录取等都是我们需要考虑的，这也是我们网络课程设计中资源优化的体现。
理论实际相结合，培养学生动手能力
在网站开发与网页制作网络课程设计中，首选要建立大量的图库资源和图片资料，要求学生在日常生活中注意积累如各地人情，旅游风景，代表建筑物等一些列具有纪念价值的图片，使得网页制作过程中有丰富素材可用；其次课程设计中要多引进网站创新案例，利用多媒体播放一些特点鲜明的网站作品，使学生在潜意识中加深印象，在创新案例讲解过程中融入教学重点和网络设计难点，使学生享受成功案例的同时学到知识，长时间耳濡目染使学生形成一种创新网站设计构想的良性循环；最后要多培养学生善于总结和创新能力，注重学生的动手能力，在网络课程设计中要留出足够时间，反复实操。