网站静态页面设计
6_静态网页制作
换行
对于需要换行的地方，应加上<Br>标记， 有了它浏览器会自动将右边的文字转移至 下一行。请注意， <Br>是单标记。 示例：没有换行效果 换行效果
段落标记
为了使文本排列的整齐和清晰，文字段落 之间常用<P>和 </P>来做标记。 </P>是可 以省略的，因为下一个<P>的开始就意味着 上一个<P>的结束。 <P>标记还有一个属性ALING，它用来指明 字符显示时的对齐方式，一般值有 CENTER、LEFT、RIGHT3种。 示例：段落标记效果
6.2.2 页面布局与文字标记
文本是网页传播信息的基本载体，在网页 中的重要地位可想而知。对于任何一个基 本网页来说，文本都是必不可少的，文本 的格式化也是非常重要的。
标题
HTML中提供了相应的标题标记<Hn>。HTML 总共提供6个等级的标题，n越小标题字号就越大。 字号大 <H1>„ </H1> 一级标题 <H2>„ </H2> 二级标题 <H3>„ </H3> 三级标题 <H4>„ </H4> 四级标题 <H5>„ </H5> 五级标题 字号小 <H6>„ </H6> 六级标题 示例:标题效果
1. 2. 3. 4.
5.
简单动态页面处理流程 浏览器发出对动态页面的请求； Web服务器找到该页面，传给应用服务器； 应用服务器扫描页面，执行代码，生成结果； 应用服务器把结果页面返回给Web服务器； Web服务器发回该结果页面给浏览器。
HTML课程设计_简单静态网站制作
综合实验简单静态网站制作姓名：学号：班级：计算机科学与技术*班日期：【实验目的】综合掌握HTML5+CSS设计静态网站的方法。
【实验环境与设备】计算机实验室要求：机器上安装有浏览器和记事本等。
【实验要求】1、完成学期初每个人自己设计的网站，网站至少由5个页面构成，除主页外，至少要包含四个主栏目，每个页面必须图文并茂，能较好地表达主题，切忌采用过多的文字、过多的图像或者过多flash，不允许添加视频和音频。
作品应体现Web的特点，网站结构完整，链接正确、导航有效。
2、网站主题可从如下几个选择：中国传统文化、互联网时代、畅想未来。
3、对于HTML，文档的语义应正确、清晰可读，符合行文规范。
4、对于页面上各个元素，使用CSS进行外观设计，根据主题选取适当的字体大小、颜色和元素背景等。
5、要求使用外部CSS文件。
6、布局方面，使用DIV+CSS布局。
7、对于设计完成的网页样式，要求具有较高的灵活性、可维护性和可重用性，既要确保整个网站外观风格上的统一，每个页面之间也要存在一定的差异。
注意：●内容和网页形式自定，不允许抄袭，一经发现0分处理。
●不允许提交未在网页中使用的图像、flash、声音和图像文件。
●每个学生以学号加姓名命名站点名称。
●完成并提交该实验报告【报告内容】1网站设计结构2网页代码①第1个页面<!doctype html><html><head><meta http-equiv="Content-Type"charset="utf-8"/> <title>中国传统文化</title><link href="style.css"rel="stylesheet"type="text/css"/> </head><body><div id="container"><div id="top"><img src="images/banner.png"/></div><div id="navi"><span><a href="index.html">首页</a></span><span><a href="朝代.html">朝代</a></span><span><a href="民族.html">民族</a></span><span><a href="地域.html">地域</a></span><span><a href="文化.html">文化</a></span> <span><a href="杂家.html">杂家</a></span> <span><input type="text" name="title" value="" />搜索</span></div><div id="main"><div id="left"><ul><li><h3>朝代></h3></li><li>三皇五帝夏朝商朝西周东周</li><li><h3>民族></h3></li><li>汉族壮族满族回族苗族</li><li><h3>地域></h3></li><li>东北地区华北地区华东地区</li><li><h3>文化></h3></li><li>儒家道家释家诸子百家</li></ul></div><div id="center"><img src="images/1400401422.jpg"/></div><div id="right"><ul><li>中国第46个遗产项目...</li><li>浅析粽子飘香的端午节...</li><li>世界第三大无人区</li><li>“鸟的王国”—青海湖鸟岛...</li><li>“陇上林泉之冠”—麦积山...</li><li>嘉峪关文物景区：传承...</li><li>中国第八处世界自然遗产</li><li>景德镇古窑民俗博览区...</li><li>江南三大名湖之西湖</li><li>世界上岛屿最多的湖</li></ul></div></div><div id="main1"><img style="float:left;"src="images/ctbackg.gif"/><img style="float:left;width:516px;"src="images/index.jpg"/><div id="box1"><img style="float:left;width:250px;height:180px;margin-left: 8px;"src="images/1408004447_thumb.jpg"/><p>若要说中国历史，夏朝是不能不说、也是无论如何不可逾越的峦峰。
静态网页设计教学大纲
静态网页设计教学大纲课程概述1.课程性质《静态网页设计》课程是高职计算机应用技术、计算机网络、软件技术等相关计算机专业的一门专业必修课程。
2.课程设计理念本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，通过各项目的练习操作，熟练地掌握岗位所需知识和技能，并不断强化。
项目特别强调对学生操作能力和解决问题能力的培养，充分体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。
3.课程开发思路本课程主要以当下典型的项目案例为主题，教材为参考，同时借鉴了一些企业网站，有利于学生的理解与学习。
颠覆传统讲授风格，主要通过项目实例让学生以师傅带徒弟的形式一步一步学习项目开发流程。
带着对一个项目雏形的不断完善，功能需求及其他功能的完善，进阶，使学生掌握一个网站项目的设计与制作相关经验。
经验从实践中来，因此学生实验课时约占到了总课时的三分之二。
让学生在职业实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。
授课目标通过本课程的学习使学生具备网页制作、网站规划与网站维护的专业能力，培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
作为计算机相关专业的核心主干课程，使学生掌握商业网站的开发流程，并能独立进行操作。
学生毕业后可胜任网站管理员、网页设计师等工作岗位。
课程大纲第一章网页设计基础知识1.1：网站剖析1.2：网站开发流程1.3：Dreamweaver CS6的安装第二章生活网网站的创建2.1 初识Dreamweaver CS62.2 新建和管理站点2.3 为网页设置头信息和页面属性——页面总体设置前两章测验第三章生活网网站页面的布局3.1 使用表格布局页面3.2 使用AP Div布局页面3.3 使用框架布局网页第三章测验第四章输入和编辑网页元素4.1 添加文本类网页元素4.2 在网页中添加图像4.3 在网页中添加多媒体元素第四章单元测验第五章网站内容的链接与特效网页的制作——应用链接与行为5.1 设置网站中的超级链接5.2 利用行为制作网站中的特效网页5.3 制作页面中的弹出式菜单5.4 利用CSS美化页面第五章测验第六章利用模板和库创建页面6.1 利用模板创建页面6.2 利用库项目创建页面第六章测验第七章利用表单创建交互式页面7.1 利用表单创建酒店预订客户页面（一）7.2 利用表单创建酒店预订客户页面（二）7.3 利用表单创建酒店预订客户页面（三）第七章测验第八章项目综合实训分析项目实训概述8.1 个人网页设计分析8.2 文化类网页的设计分析8.3 旅游休闲类网页的设计分析第九章HTML5+CSS39.1 初始HTML9.2 HTML代码编辑工具9.3 网页基本信息9.4 基本HTML5标签第九章测验第十章HTML5高级标签10.1 列表10.2 表格10.3 表单第十章测验第十一章CSS3入门11.1 CSS3简介11.2 CSS3核心基础11.3 文本样式属性11.4 CSS3选择器11.5 CSS3盒子模型预备知识1、计算机应用基础（1）计算机的基本概念知识；（2）计算机基本操作能力；（3）Internet基础知识；2、PhotoShop基础应用（1）版面设计知识（2）配色相关知识（3）平面图像处理基本技能参考资料1、Dreamweaver CS6实例教程魏三强李静杨子燕主编人民邮电出版社出版2、网页设计与制作任务驱动式教程陈承欢主编高等教育出版社出版3、HTML5+CSS3网站设计基础教程传智播客高教产品研发部编著人民邮电出版社4、HTML5+CSS3前端技术北京课工场教育科技有限公司编著中国水利邮电出版社。
静态网站源代码及设计报告
静态网站源代码及设计报告1. 引言静态网站是由静态网页组成的网站，页面内容不会随着用户的交互而改变。
与动态网站相比，静态网站的设计和开发相对较简单，并且在性能方面有一定的优势。
本报告将介绍静态网站的源代码和设计，并讨论其特点、优势以及可能的限制。
2. 源代码以下是一个简单的静态网站的源代码示例：html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Static Website</title><link rel="stylesheet" href="styles.css"></head><header><h1>Welcome to My Static Website</h1></header><nav><ul><li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li></ul></nav><main><section><h2>About Me</h2><p>I am a web developer with a passion for creating beautiful and user-friendly websites.</p></section><h2>Contact Me</h2><p>Email: example@example</p><p>Phone: 123-456-7890</p></section></main><footer><p> 2022 My Static Website. All rights reserved.</p></footer></body></html>3. 设计报告3.1 特点静态网站的设计具有以下特点：1. 简单易用：静态网站的设计和开发相对简单，不需要后端服务器和数据库。
什么是静态页面静态网页特点是什么
什么是静态页面静态网页特点是什么静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。
那么你对静态页面了解多少呢?以下是由店铺整理关于什么是静态页面的内容，希望大家喜欢!静态页面的介绍静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。
静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面，如果想更新网页内容，要通过FTP软件把文件DOWN下来用网页制作软件修改(通过fso等技术例外)。
常见的静态页面举例：.html扩展名的、.htm扩展名的。
静态页面的优缺点首先静态页面的优缺点与动态页面的优缺点是相对的。
动态页面是一对多访问。
通过一个页面。
可以根据若干参数返回其不同的数据。
但是静态页面因为是静态所以是一个页面对应一个内容，也就是一对一的关系。
他的优点就是无论你如何访问都只是让服务器传数据给请求者。
并不做脚本计算及读取后台数据库。
从而大大的提高了访问速度及降低了部分安全隐患。
采用静态页面的方法可以将数据库及后台系统与前台划分开。
两者间没有绝对的联系。
从而从提高站点的安全。
以上就是静态页面的最大的优点。
速度快，可以跨平台，跨服务器。
同样静态页面也拥有相等与优点的缺点。
今天的静态页面已经不是单纯的用FrontPage或DreamWeaver来一张张做。
然后发布到网上了。
他已经是动态与静态结合的产物。
通常我们的制作流程是这样的。
第一步：发布信息到数据库第二步：选择页面的模版第三步：程序读取模版 +数据库信息 = 静态页面第四步：发布索引页面(如首页，引导页等)完成静态页面的生成至少需要上述几个步骤才能完成。
所以模版是关键的。
因为静态页面无法在你调整后自动更新。
必须再次创建。
数据量大的话。
这个更新的时间也相当可怕。
所以你会发现有些大的网站新的文章与旧的文章长不是一个样子。
在加上静态页面本身因为不具备动态页面的特性。
也就无法做一些WEB应用。
最明显的一点搜索。
静态网页的制作实验报告
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
clear:both;
line-height：24px；
}
</style>
</head>
<body>
<divid="header"><imgsrc="image/falali.jpg"height="400"
width="1002">
</div>
<divid="xiala">
跑车：
<selectname="select">
<br>                                                                                 - Copyright 2016 - 版权所有</div>
静态网页设计与制作说课.ppt
中认真关注，随时解答疑问。
实践法
24
学生汇报计划与实施过程，回答同学与老师提出的问题。
重点检查流程的认知和网站团队运作，师生共同评价各
小组及个人的工作成果： 1.自评：学生对本项目的整个实施过程进行评价； 2.互评：以小组为单位，分别对其它小组的工作进 行评价；
提问引导法 实践法 讨论法
2
3.教师评价：教师对互评结果进行评价，指出每个
学习情境描述
“个人网站制作”学习情境表1-
1
学习情境1：个人网站制作
学时：38
项目目标
1．掌握个人网站制作的流程和方法、学习欣赏网站，制订个人网站制作策划方案； 2．熟悉Dreamweaver基本工具的使用； 3.分组制作一个个人网站； 4.培养学生团队精神、创新能力、自主探究学习能力、表达能力。
社会能力目标
沟通能力协作精神 勤于思考认真做事 勇于创新敬业乐业
自主学习能力 知识应用能力 良好的职业道德 较强的工作责任心
课程设计理念
以职业资格为依据
内容选取
教学组织
课程标准
以工作需求为目标 以工作过程为主线
以真实项目为载体
教学实施
表现形式
以实际工作为场景
课程设计思路
企业 调研
确定岗 位（群）
5%
5
项目制作报告
项目制作工作计划、总结和成果评价表书写认真、完整、字迹清 楚、页面整洁，项目制作收获较大
10%
合计
100%
敬请专家指导！ 谢谢！
教师知识与能 熟悉网站制作流程，网页制作Dreamweavera工具，网页素材制作方法，网页制作方
力要求
法与技巧；较强的归纳能力；较强的教学管理与教学组织能力。
页面布局的几种方式（静态化布局，流式布局，自适应布局，响应式布局，弹性布局）
页⾯布局的⼏种⽅式（静态化布局，流式布局，⾃适应布局，响应式布局，弹性布局）⼀、静态布局（static layout） 即传统Web设计，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。
1、布局特点 不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。
常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计⽅法 PC：居中布局，所有样式使⽤绝对宽度/⾼度(px)，设计⼀个Layout，在屏幕宽⾼有调整时，使⽤横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.根据浏览器⽤户代理，识别移动端，并重定向。
pc端⾃适应设计详情参考优点：这种布局⽅式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。
当前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。
固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。
但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。
⼆、流式布局（Liquid Layout） 流式布局（Liquid）的特点（也叫"Fluid") 是页⾯元素的宽度按照屏幕分辨率进⾏适配调整，但整体布局不变。
代表作栅栏系统（⽹格系统）。
⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽度为80%，min-width为960px。
图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
1. 布局特点 屏幕分辨率变化时，页⾯⾥元素的⼤⼩会变化⽽但布局不变。
【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
版面布局的形式
版面设计
版面设计的原则
设计版面布局要做到：
主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰
布局原则：
正常平衡 异常平衡
对比 凝视 空白
尽量用图片解说
正常平衡
异常平衡
对比
凝视
空白
图片说明
版面设计
版面布局的步骤
轮廓设计 布局设计
细节设计
版面设计
版面布局的形式
底色和图形色
整体色调
配色的平衡
配色时要有重点色
配色的节奏 渐变色的调和 在配色方面的统调 在配色方面的分割
网页色彩设计
网页色彩设计
网页内容
网页标题
导航菜单
侧栏 页脚
网页色彩设计
网页色彩搭配的技巧
暖色调即红色、橙色、黄色、赭色等色彩的搭配
冷色调即青色、绿色、紫色等色彩的搭配
对比色调即把色性完全相反的色彩搭配在同一个空
JPEG 格式
JPEG 格式支持 24 位颜色，并保留照片和其 它连续色调图像中存在的亮度和色相的显著和细 微变化。大多数浏览器都支持 JPEG。 JPEG 通过有选择地减少数据来压缩文件大小。 因为它会弃用数据，故 JPEG 压缩称为损耗压缩。 较高品质设置导致弃用的数据较少，但是 JPEG 压缩方法会降低图像中细节的清晰度，尤其是包 含文字或矢量图形的图像。 JPEG 格式不支持透明度。
描述页面元素样式的标记：<body>、<p>、<h1> 指向其他资源的标记：<img>、<a>
属性名
一、HTML简介（2）
一、HTML简介（3）
HTML标记的结构形态
<标记>页面元素内容</标记>
如：<p>这是一个文本段落</p>
<标记
属性名=“属性值”>页面元素内容 </标记>
如：<font
第6章
网站静态页面设计
本章要点：
主页设计 栏目与版面设计
页面可视化设计
静态网页制作技术
6.1 主页设计
确定主页的功能模块
设计主页的版面 处理技术上的细节
1、确定主页的功能模块
2、主页版面设计
勾画草图—软件实现
3、处理技术上的细节
风格、链接、图形、动画、文字、速度
6.2 栏目与版面设计
网页上传后，逐一测试每一页的每一个超链接 是否有效，以杜绝失败的链接
6.6 图像设计
网页中图像的格式： 网页中使用的图像可以是GIF、JPEG、 BMP、TIFF、PNG等格式的图像文件， 其中使用最广泛主要是GIF和JPEG两种 格式 网页中图形设计技巧
GIF 格式
GIF 格式使用 8 位颜色，并在保留锐化细节 （如艺术线条、徽标或带文字的插图）的同时， 有效地压缩实色区域。还可以使用 GIF 格式创 建动画图像。大多数浏览器都支持 GIF 格式。 GIF 格式使用 LZW 压缩，它是无损耗的压 缩方法。但是，因为 GIF 文件只有 256 种颜色， 故将原 24 位图像优化为 8 位 GIF 会导致颜色 信息丢失。另外，Photoshop 和 ImageReady 允许对 GIF 文件应用损耗压缩。使用“损耗” 选项可通过牺牲一定的图像品质来生成显著减小 的文件。
栏目设计 版面设计
栏目与版面设计
栏目设计
网站栏目安排要注意以下几方面： 紧扣网站的主题
设立一个最近更新或网站指南栏目 设定一个可以双向交流的栏目 设一个下载或常见问题回答栏目
栏目与版面设计
版面设计
版面也称为版块：指的是浏览器看到的完整的一 个页面（可以包含框架和层）
版面设计的原则
版面布局的步骤
6.7 动画设计
动画就是在一定时间内显示的一系列图像 或帧。每一帧较前一帧有轻微的变化，当 连续、快速地显示这些帧时就创造出运动 的效果。
GIF动画 Flash动画
附：网站设计基础语言HTML
本节要点：
HTML简介 HTML的语法格式 文件标签 版式标签 框架标签 字体标签 表格与清单标签 表单标签
颜色的概念
颜色 是由光的折射产生的。红，黄，蓝
被称为三原色，其它的色彩都可以
用这三种色彩调和而成
颜色 分非彩色和彩色两类
色彩的基本知识
色彩的搭配
网页色彩搭配的基本原理：
色彩的鲜明性
色彩的独特性
彩的合适性
色彩的联想性
网页色彩设计
网页配色的基本方法
网页色彩设计 网页色彩搭配的技巧
网页色彩设计
网页配色的基本方法
间里
ቤተ መጻሕፍቲ ባይዱ
6. 4 字体设计
考虑人们的阅读习惯与效果
不要用花纹繁复的图案作背景，以便突出
主要文字内容
定位于国际性质的网站，应该针对不同地 区访问者，设计不同的字体
6.5 导航设计
网站导航要清晰，容易查找 注意超链接颜色与单纯叙述性文字的颜色区别 一般网页的长度不超过三个屏幕高度为佳
以文档中关键的字眼作为超链接的锚点
三、文件标记（2）
<body>标记
可包括属性，由此决定页面内容的总体显示风格、
背景等。 Text属性：用于设定文字颜色 Bgcolor属性：设定页面背景颜色 link，alink，vlink属性，分别用于设定页面中 超级链接“访问前、正在按下时、访问后的颜 色”，不设定时取默认值（蓝、红、紫）。 Background属性：用于设定背景图片 Scroll属性：设定浏览器滚动条是否显示，取 值”yes”或 “no”，一般用于弹出式窗口
“T”结构布局 “口”型布局 “三”型布局 对称对比布局 POP布局 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型
6.3 色彩设计
色彩的基本知识
网页色彩设计
色彩的基本知识
颜色的概念
色彩的搭配
色彩的心理感觉
色彩的对比
色彩的区域大小和形状
色彩的位置
色彩的基本知识
超链接标签
多媒体标签
一、HTML简介（1）
HTML语法
标记（标签）：以”<”、”>”括起来的内容，大多成对出现（称 为首标记与尾标记），也有单一的标记。 书写约定：不区分大小写，忽略标记间多余的空格与回车 分类：
例：这是<b>粗体</b>字 标记的作用：描述页面元素的显示方式及其他资源访问方式 属性及其值：进行一步提供详细描述信息，所有属性均放在首标 记中，多个属性间以空格分开 如：<img src=logo.gif width=520 height=81> 属性值
color=“red”>红色字</font>
<标记>
如：以内容下换行显示<br>第二行内容
二、创建HTML文档（1）
在浏览页面时修改HTML源文件
二、创建HTML文档（2）
执行“查看—源文件”菜单，调用记事本打开
源代码，欲重新查看修改后的效果只需单击IE 工具栏“刷新”按钮。
三、文件标记（1）