静态网页设计（静态网页设计实训报告总结）

本文目录一览：

• 1、静态网页设计制作中的布局模式
• 2、静态网页设计
• 3、如何用html写出一个静态的网页

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

布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

静态布局采用像素(px)作为页面设计的单位。在不同的显示宽度下，页面元素大小都是固定的。 流式布局 流式布局以百分比设定页面宽度，当显示区域变化时，页面布局会等比的发生改变。 流式布局强调的是适应屏幕宽度的变化。

静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

在网页设计中，主要的布局方式有表格布局、层布局和框架布局。

不同的制作者会有不同的布局设计。网页布局有以下几种常见结构： “同”字型结构布局 所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。

第二步：将制作好的静态网页效果图进行PS切片。通过PS切片可将一张大的效果图切成多张小图片，以后可直接用在网页上。

静态网页设计

静态网页的布局模式主要有：表格布局 层布局 div+css样式表布局 布局表格等 备注：表格布局容易把握，是最简单的一种总局方式，适用于初学者。设计网页的第一步是设计版面布局。

常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

Jekyll Jekyll是最受欢迎的开源静态生成工具之一，可以跨平台配置。Jekyll利用 Markdown 、 Liquid 、HTML 和 CSS 来生成静态的网页文件，它还支持从常见的 CMS。你能管理永久链接、类别、页面、文章，自定义布局等。

第一步：制作一个静态网页之前，我们需要先制作一个网页1：1的效果图，又称静态网页效果图。制作静态网页效果图可以使用Photoshop CS4破解中文版制作。第二步：将制作好的静态网页效果图进行PS切片。

静态页面利于网站优化，动态页面侧重互动和用户体验。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。

如何用html写出一个静态的网页

向左转|向右转 打开文件后，一个最简单的网页就出现了，有标签还有内容。向左转|向右转 最后，小编跟大家说一下，这个HTML文件是可以持续性更改的。先选中文件，然后右键，在“打开方式”里选择“记事本”。

你好。首先下载Dreamweaver.exe并打开，选择你使用的编辑语言，本案例用html 打开页面后，选着设计窗口，如图所示。设计窗口可以快速布局网页，不需要自己编辑代码。

你这种每部分格式是一样的，肯定用的for循环来输出。你要自适应屏幕，那你的文字大小就要改成自动的，css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。

首先，在计算机桌面上创建一个新文件夹，然后在该文件夹中创建一个新的文本文档。然后双击打开带有记事本的文本文档，如下图所示，我们编写一个简单的html代码。

可以建立非常复杂的页面，利用包含js文件的方法，在js文件内加入document.write()方法可以在所有页面内加入如页面头，广告等内容。

本机可以用10.1来观察或者localhost来看网站是否架设成功（前提你没有更改端口号）。