静态网页设计与制作 HTML+CSS网页设计与制作

大家好，今天小编来为大家解答静态网页设计与制作这个问题，HTML+CSS网页设计与制作很多人还不知道，现在让我们一起来看看吧！

简要叙述静态网站制作的主要步骤

一、整理规划。

网站建设的开始就应该有一个整体的战略目标，即确定站点的目标。

首先要有一个总的目标，这个网站到底是要做什么。有的要显示自己的设计水平，这就要求页面美观；有的是为了求职而设计的求职网站，这就要求提供足够的信息让别人了解你的工作能力；有的是要为用户服务，这就要求网站有较强的互动性，而本站建设之初的主要目的就是为了本人更好的学习网络知识，只是兴趣而已，

确定好目标之后，还要决定网站的目标观众。

二、新建站点

规划好站点之后，就可以用专门的网页开发软件创建站点了。

三、收集资源

确定好站点目标和结构之后，接下来要做的就是收集有关网站的资源。

四、布局页面

设计站点结构和收集了足够的资源之后，就可以开始布局页面了。在Dreamweaver中，可以通过以下手段进行排版

五、编辑文档与超级连接

经过上面的几个步骤之后，一切准备工作都已经就绪，现在可以像装箱一样把收集到的资料及制作的组件放到页面布局中为它们指定的位置上了。

六、发布站点

站点的发布

网站发布就是把网站上传到因特网上，以提供浏览者浏览。

站点的维护

站点发布之后还要经常对站点进行维护。站点维护是指不断优化网站功能和更新网页内容。维护网站的目的是使网站的结构规划合理、内容与形式统一、主题鲜明，经常更新网页内容，让网站与时俱进。

静态网页设计

我把网上最主流的网页/网站制作工具都列出来了

其中第1、2是主要制作工具，后面的多是辅助工具

3、6是比较容易上手的

另外最简单的静态页面其实可以用word制作，保存成html就可以

你可以试试

1、FrontPage

FrontPage是一款优秀的网页制作与开发工具之一，它本身也是Office2000中的一个重要组件，采用了与Office2000其他组件一致的界面和操作方式，只要您使用过Office软件，就可以轻松掌握FrontPage的用法。

2、网页制作三剑客

Flash、Dreamweaver、Fireworks合在一起被称为网页制作三剑客。这三个软件相辅相承，是制作网页的首选工具，其中Dreamweaver主要用来制作网页文件，制作出来的网页兼容性好、制作效率也很高，Flash用来制作精美的网页动画，Fireworks用来处理网页中的图形。

3、Photoshop

Photoshop是Adobe公司的王牌产品，无论是在平面广告设计、室内装潢，还是处理个人数码照片方面，Photoshop都已经成为不可或缺的工具。在网页制作方面，它多姿多彩的滤镜和功能强大的选择工具可以做出各种各样的文字效果来。

4、Swishmax

Swish是一款非常方便的Flash文字特效制作工具，你只要点几下鼠标，就可以创造出形状、文字、按钮动画，你也可以选择内建的超过230种诸如爆炸、漩涡、3D旋转以及波浪等预设的动画效果。

5、PhotoImpact

PhotoImpact提供了多媒体时代专业影像设计者最直觉的创意空间、最方便的制作工具、及最宽广的表达形式，整合了新时代的3D物件及文字特效与粒子效果、压力笔支援、不同的自然笔触、各式直觉操作的特效图库、以及网页影像与办公室文件的相容性，将构思到表达的过程完整组合，是专业网页影像设计者不可或缺的利器。

6、Sound Forge

Sound Forge软件是一款非常棒的音效编辑软件,它除了音效编辑软件的功能外,还可以让你处理大量的音效转换的工作,使你能够轻松的完成各种看似复杂的音效编辑工作。如果下载的是英文版，可以用金山快译永久汉化，但效果不是很尽人意。

7、硕思闪客精灵

硕思闪客精灵是一款用于浏览和解析Flash动画的工具。它可以将.swf文件导出成.fla文件，还能将flash动画中的图片、矢量图、声音、视频（*.flv）、文字、按钮、影片片段、帧等基本元素完全分解，以及对动作脚本(ActionScript)进行解析，清楚的显示其动作代码，让你对Flash动画的构造一目了然。建议你赶快去下载吧！｝

8、Clipyard

你只要导入不同的Flash动画文件，将其放在不同的层上，经调试效果，导出后就成了一个单独的flash了，操作简单，特别适合于将自己喜欢的Flash动画加入祝福、签名后赠送友人。

9、FlashFXP

是一款优秀的FTP工具，特别适合Web站点管理员使用。支持文件夹(带子文件夹)的文件传送、删除；支持上传、下载及第三方文件续传；可以跳过指定的文件类型，只传送需要的文件；可以自定义不同文件类型的显示颜色；可以缓存远端文件夹列表，支持FTP代理；具有避免空闲功能，防止被站点踢出；可以显示或隐藏“隐藏”属性的文件、文件夹；支持每个站点使用被动模式等。

10、FlaX

FlaX是一款制作Flash文字特效的小巧软件。在以前若要制作文字绕圆圈的动画，在Flash里一个一个字的慢慢调整位置，颇费时间，如果使用FlaX很快就可以就搞定。 FlaX有四个窗口面板：预览窗口、影片属性面板、文字属性面板、特效属性面板。

11、Web Animator

Web Animator(网页动画设计)是HomePage Builder附带的创建动画GIF的程序。所谓动画GIF是GIF格式图像文件的一种，组合几个图像象漫画一样连续运动。动画GIF与普通的GIF图像一样可以粘贴到页面。使用Web Animator可以完成如下工作：组合现有的图像，创建类似于漫画的动画；给一个图像添加动画效果，创建具有效果的动画；给指定的字符串添加动画效果，创建字符动画。

12.golive

Adobe收购mm之后推出的网页制作工具,将代替Dreamweaver成为主流.

满意请采纳。

静态网页设计制作中的布局模式

一、静态布局（Static Layout）

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

2、设计方法：

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

在移动端开发中采用静态布局的两种方式：

（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app变革之rem）

（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫"Fluid")是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域(viewport)和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

三、自适应布局（Adaptive Layout）

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

2、设计方法：使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四、响应式布局（Responsive Layout）

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式几乎已经成为优秀页面布局的标准。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：媒体查询+流式布局。通常使用@media媒体查询和网格系统(Grid System)配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS给单一网页不同设备返回不同样式的技术统称。

好了，文章到这里就结束啦，如果本次分享的静态网页设计与制作和HTML+CSS网页设计与制作问题对您有所帮助，还望关注下本站哦！