设计一个静态网站

艺术欣赏与网页设计

1 综合实验 简单静态网站制作

姓名： 学号： 班级：计算机科学与技术*班 日期：

【实验目的】

综合掌握HTML5+CSS设计静态网站的方法。

【实验环境与设备】

计算机实验室

要求：机器上安装有浏览器和记事本等。

【实验要求】

1、完成学期初每个人自己设计的网站，网站至少由5个页面构成，除主页外，至少要包含四个主栏目，每个页面必须图文并茂，能较好地表达主题，切忌采用过多的文字、过多的图像或者过多flash，不允许添加视频和音频。作品应体现Web的特点，网站结构完整，链接正确、导航有效。

2、网站主题可从如下几个选择：中国传统文化、互联网时代、畅想未来。

3、对于HTML，文档的语义应正确、清晰可读，符合行文规范。

4、对于页面上各个元素，使用CSS进行外观设计，根据主题选取适当的字体大小、颜色和元素背景等。

5、要求使用外部CSS文件。

6、布局方面，使用DIV+CSS布局。

7、对于设计完成的网页样式，要求具有较高的灵活性、可维护性和可重用艺术欣赏与网页设计

2 性，既要确保整个网站外观风格上的统一，每个页面之间也要存在一定的差异。

注意：

 内容和网页形式自定，不允许抄袭，一经发现0分处理。

 不允许提交未在网页中使用的图像、flash、声音和图像文件。

 每个学生以学号加姓名命名站点名称。

 完成并提交该实验报告

【报告内容】

1 网站设计结构

艺术欣赏与网页设计

3 2 网页代码

① 第1个页面

中国传统文化

首页

朝代

民族

地域 艺术欣赏与网页设计

4 文化

杂家

搜索

三皇五帝 夏朝 商朝 西周 东周

5

6

若要说中国历史，夏朝是不能不说、也是无论如何不可逾越的峦峰。但是，夏朝却是一个没有多少考古实物出土的王朝，它仅仅存留于人们的记忆中和传说中。因此，历代关于夏王朝的真实存在性成为公案，众多...

5种布局⽅式

⼀、静态布局（static layout）

即传统Web设计，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。1、布局特点

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

2、设计⽅法

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

移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.。

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

缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。当前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。

⼆、流式布局（Liquid Layout）

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

⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽度为80%，min-width为960px。图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。1.布局特点

屏幕分辨率变化时，页⾯⾥元素的⼤⼩会变化⽽但布局不变。【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰。2.设计⽅法

使⽤%百分⽐定义宽度，⾼度⼤都是⽤px来固定住，可以根据可视区域 (viewport)和⽗元素的实时尺⼨进⾏调整，尽可能的适应各种分辨率。往往配合 max-width/min-width等属性控制尺⼨流动范围以免过⼤或者过⼩影响阅读。

制作网页静态页面

1.制作HTML的前期工作（注：在整套页面中个类命名时必须是英文，包括类名、文件夹名）

1)新建一个项目文件夹

2)在项目文件中分类新建CSS（样式文件夹）、images（图片文件夹）、jquery（js文件夹）、

html（页面文件夹）

3)根据情况可以在各类文件下建立子类文件夹

4)根据效果图源文件，把页面中出现的图片、icon、部分背景图或部分特殊字体部分切图出来以图片的形式保存到相应的文件夹中

2.根据效果图进行网页排版（严格以效果图为准）

1)用Dreamweaver新建HTML5类型的页面文件，保存到相应的文件夹中

2)要明确规划好各个模块，搭建结构，每块结构之间不能有交叉，一定要先搭建机构，再调整样式

3)每个结构中的父级和子级之间需要明确却别，一般是需要换行，子级用Tab键缩进一个单位，以此类推，一定要保证页面整洁，及代码的可读性高

4)书写每个标签时都要有始有终

5)每个结构标签的命名，一定要清楚明了（英文字母，切记不能使用汉字命名）

6)在适当的位置添加注释，用来解释或标记此模块的内容

3.CSS样式制订

1)初始化样式，包括body、a、img、input、select……等的样式初始化

2)相同样式和结构的模块尽量用统一的Class类名，以免代码冗余

3)注意添加注释，增强代码可读性和可维护性

4.jQuery效果添加

1)初始化效果，一定写在【$(function)】中

2)一定要写清注释，以便修改和阅读

3)每个函数（事件）由大括号【{}】包含，每段语句都要相较于主体用Tab缩进一个单位

4)每段语句换行时都要以分号【;】结尾

5)测试语句是否执行时，可以用弹窗形式，使用弹出框语句【alert(123);】弹出框123

6)所有语句中的符号都必须为英文半角

5.以上的CSS样式和jQuery文件必须要单独列出，然后在HTML页面引用，每个页面可以引用多个CSS和jQuery文件

web网页模板

Web网页模板。

在网页设计和开发中，网页模板是一个非常重要的部分。它可以帮助设计师和开发者快速地创建出符合需求的网页，同时也能够提高网页的美观性和用户体验。本文将介绍一些常见的web网页模板类型，以及它们的特点和应用场景。

首先，我们来说说静态网页模板。静态网页模板是最基础的网页模板类型，它通常由HTML和CSS构成，没有后台数据库和动态交互功能。静态网页模板适用于一些简单的网页，比如企业官网、产品介绍页等。它的优点是加载速度快，兼容性好，缺点是更新维护不够方便，无法实现复杂的交互功能。

其次，我们来说说动态网页模板。动态网页模板是在静态网页模板的基础上增加了一定的动态交互功能，比如表单提交、数据交互、用户登录等。动态网页模板通常由HTML、CSS、JavaScript和后台语言（比如PHP、Java、Python等）构成。它适用于一些需要与用户进行交互的网页，比如论坛、博客、电子商务网站等。动态网页模板的优点是功能丰富，用户体验好，缺点是对开发者的技术要求较高，同时也需要更多的服务器资源支持。

最后，我们来说说响应式网页模板。随着移动互联网的发展，越来越多的用户开始使用手机和平板设备访问网页。因此，设计一个能够在不同设备上良好显示的网页变得非常重要。响应式网页模板可以根据用户的设备屏幕大小和分辨率自动调整布局和样式，以适应不同的设备。响应式网页模板通常由HTML5和CSS3构成，它的优点是能够提供统一的用户体验，无论用户使用什么设备访问网页，都能够得到良好的显示效果。

总结一下，web网页模板有静态网页模板、动态网页模板和响应式网页模板这三种类型。不同类型的网页模板适用于不同的网页需求，设计师和开发者需要根据实际情况选择合适的模板类型。在使用网页模板的过程中，也需要注意保持网页的简洁性和美观性，提高用户体验，这样才能更好地吸引和留住用户。希望本文对你有所帮助，谢谢阅读！