第14章 网页设计与开发综合范例[13页]
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 2. 关于网页素材
• 准备好页面中需要用到的各类素材以及显示效果，主要有以下几个方面： • 文本：文本是网页中最基本的素材，也是最广泛的素材。文本文件的格式有：.txt
，.doc，.rtf等。 • 图像：图像素材相对于文字素材而言更加真实、直观、丰富多彩，在网页上更具吸
引力。图像的格式有：JPEG、GIF、BMP等。 • 动画：动画已成为网页制作的一个重要组成部分，他可以显示某种动态过程，还可
本章导读
• 从设计的内容来说，网站首页的设计主要包括版式的分
析设计、网页的大小设计、导航条的设计及页面框架的搭 建与分割等工作。好的网页，第一眼就能引起浏览者的极 大兴趣，这不仅要求网页设计在布局风格上能够充分展现 内容的丰富性和可捕捉性，更要求网页的每一个元素都能 充分融合在一起，网页是一个结合体，不是网页内容和元 素的简单堆砌。
14.2.2 建立本地站点
• 创建一个网站，如果将所有的网页都存储在一个目录下，随着站点 规模的越来越大，管理网站就会变得越来越困难，而且会对网站本身 的上传维护、站点内容未来的扩充和移植带来严重阻碍。因此，应合 理地使用和组织文件夹来管理文档。
• 在本例中，只有一个页面，且没有用到多媒体文件，因此将站点文件 夹建立为下图所示的结构。
HTML5+CSS3+JavaScript网 页设计项目教程
第14章 网页设计与开发综合范例
第14章 网页设计与开发综合范例
• 14.1 网页内容分析 • 14.2 综合实例——制作门户类网页 • 14.2.1 网页框架构建及素材的准备 • 14.2.2 建立本地站点 • 14.2.3 使用HTML创建页面结构 • 14.2.4 使用CSS布局并美化页面
class为container的div包裹起来，其中上部用class为container的 div装载，下方用class为box的div装载。
14.2.4 使用CSS布局并美化页面
• 在本项目中我们采用外部样式文件给页面添加CSS样式。首先新建 样式表文件global.css，然后在HTML文件的head标记中链接外部样式 表，代码如下：
14.1 网页内容分析
• 近年来，Internet飞速发展，不但企业和政府机构纷纷建立自己的 网站，在网上开展业务，树立形象，而且还有不少个人在网上建立自 己的个人主页，这使得主页制作成为当今的热门技术。下面简单介绍 制作网页包括的几个部分：
• 总体说来，网页的制作包括以下几个部分： • 1. 图形、图像处理制作 • 在网页上插入一些精美、适当的图片是必要的。因此，在设计网页之
14.1 网页内容分析
• 4. 框架设计 • 框架是网页的常用形式，它可以使网页更为清晰，可以把不同的页
面超链接在同一框架中，使得页面空间更紧凑。在HTML5中用 <frame>< /frame>标签编写。
• 5.表格应用 • 网页中很活跃的一种元素，它的应用可使网页更紧凑和灵活。在
HTML5中用< table> < /table>标签编写。表格不光是数据的集合 ，在网页设计中还有整齐布局的作用。
14.2.1 网页框架构建及素材的准备
• 1. 绘制页面结构草图
• 首先，可以根据页面效果绘制页面结构草图,标识出可能需要使用到的页面结构标记， 如header、div等；标识出页面中超链接部分；标识出页面中文字内容属于哪一级标题 、段落还是列表；判断页面中出现的图片是使用插入图片还是设置背景图片。
习题
• 制作个人主页，提供展示自我的平台，并将其发 布。
以显示自动幻灯片播放效果，网页上的动画一般有GIF格式和Flash格式。 • 音频：一个网页中如果增加了音频，会给网页增加活力，在网络上传输需要对声音
文件进行压缩。音频格式有：MP3、WAV、MIDI等。 • 视频：随着网络带宽的增加，视频显示在网页中也越来越多。视频格式有：AVI、
WMV、MPG、FLV等。
14.2.3 使用HTML创建页面结构
• 使用HTML创建页面结构的步骤如下： • （1）新建页面，在title标记中输入“综合实例”作为页面标题。 • （2）观察整个页面内容，根据语义来选择使用哪个标记。为了方便
设置整个页面内容 • 的样式，使用id为wrapper的div将所有元素包裹起来。 • （3）页面最上方的导航条使用header包裹起来；下方主体内容用
前，就应搜集或制作一些好看、适用的图片。 • 2. 动画制作 • 传统的做法是在HTML中嵌入用Java程序编写的动画，但这要求开发者
对Java语言的编程要熟悉。 • 3. 文本编写 • 网页中需要大量文字，这就要在网页编辑器中用HTML5语言中的标签
编写，前面章节都已介绍过。也可以利用网页编辑工具的“所见即所 得”功能，直接写入文字。这要用到网页设计工具。
14.2 综合实例——制作门户类网页
• 结合前面项目所介绍的网页规划及结构设计知识、使用CSS进行页面 布局及页面美化等，完整地介绍制作一个页面的流程。页制作前的准备工作，除了有定义站点和设计网站结构的目录， 还有就是要将网页设计制作中需要用到的所有图像素材整理好，最好 是放在一个文件夹中，如images。这样便于设计制作时的选取使用， 也不易造成素材的混乱。
• <img src="imags/slogan.png"/> • 在外部样式表文件master．css中依次设置页面各个部分的样式。
本章小结
• 本章通过实例了解了网页规划、结构、布局的相关知识 ，从整体上把握网页设计的要领，在具体实施中可以参考 网页设计须注意的问题，通过综合实训，掌握设计大型门 户网站的基本技能。
• 准备好页面中需要用到的各类素材以及显示效果，主要有以下几个方面： • 文本：文本是网页中最基本的素材，也是最广泛的素材。文本文件的格式有：.txt
，.doc，.rtf等。 • 图像：图像素材相对于文字素材而言更加真实、直观、丰富多彩，在网页上更具吸
引力。图像的格式有：JPEG、GIF、BMP等。 • 动画：动画已成为网页制作的一个重要组成部分，他可以显示某种动态过程，还可
本章导读
• 从设计的内容来说，网站首页的设计主要包括版式的分
析设计、网页的大小设计、导航条的设计及页面框架的搭 建与分割等工作。好的网页，第一眼就能引起浏览者的极 大兴趣，这不仅要求网页设计在布局风格上能够充分展现 内容的丰富性和可捕捉性，更要求网页的每一个元素都能 充分融合在一起，网页是一个结合体，不是网页内容和元 素的简单堆砌。
14.2.2 建立本地站点
• 创建一个网站，如果将所有的网页都存储在一个目录下，随着站点 规模的越来越大，管理网站就会变得越来越困难，而且会对网站本身 的上传维护、站点内容未来的扩充和移植带来严重阻碍。因此，应合 理地使用和组织文件夹来管理文档。
• 在本例中，只有一个页面，且没有用到多媒体文件，因此将站点文件 夹建立为下图所示的结构。
HTML5+CSS3+JavaScript网 页设计项目教程
第14章 网页设计与开发综合范例
第14章 网页设计与开发综合范例
• 14.1 网页内容分析 • 14.2 综合实例——制作门户类网页 • 14.2.1 网页框架构建及素材的准备 • 14.2.2 建立本地站点 • 14.2.3 使用HTML创建页面结构 • 14.2.4 使用CSS布局并美化页面
class为container的div包裹起来，其中上部用class为container的 div装载，下方用class为box的div装载。
14.2.4 使用CSS布局并美化页面
• 在本项目中我们采用外部样式文件给页面添加CSS样式。首先新建 样式表文件global.css，然后在HTML文件的head标记中链接外部样式 表，代码如下：
14.1 网页内容分析
• 近年来，Internet飞速发展，不但企业和政府机构纷纷建立自己的 网站，在网上开展业务，树立形象，而且还有不少个人在网上建立自 己的个人主页，这使得主页制作成为当今的热门技术。下面简单介绍 制作网页包括的几个部分：
• 总体说来，网页的制作包括以下几个部分： • 1. 图形、图像处理制作 • 在网页上插入一些精美、适当的图片是必要的。因此，在设计网页之
14.1 网页内容分析
• 4. 框架设计 • 框架是网页的常用形式，它可以使网页更为清晰，可以把不同的页
面超链接在同一框架中，使得页面空间更紧凑。在HTML5中用 <frame>< /frame>标签编写。
• 5.表格应用 • 网页中很活跃的一种元素，它的应用可使网页更紧凑和灵活。在
HTML5中用< table> < /table>标签编写。表格不光是数据的集合 ，在网页设计中还有整齐布局的作用。
14.2.1 网页框架构建及素材的准备
• 1. 绘制页面结构草图
• 首先，可以根据页面效果绘制页面结构草图,标识出可能需要使用到的页面结构标记， 如header、div等；标识出页面中超链接部分；标识出页面中文字内容属于哪一级标题 、段落还是列表；判断页面中出现的图片是使用插入图片还是设置背景图片。
习题
• 制作个人主页，提供展示自我的平台，并将其发 布。
以显示自动幻灯片播放效果，网页上的动画一般有GIF格式和Flash格式。 • 音频：一个网页中如果增加了音频，会给网页增加活力，在网络上传输需要对声音
文件进行压缩。音频格式有：MP3、WAV、MIDI等。 • 视频：随着网络带宽的增加，视频显示在网页中也越来越多。视频格式有：AVI、
WMV、MPG、FLV等。
14.2.3 使用HTML创建页面结构
• 使用HTML创建页面结构的步骤如下： • （1）新建页面，在title标记中输入“综合实例”作为页面标题。 • （2）观察整个页面内容，根据语义来选择使用哪个标记。为了方便
设置整个页面内容 • 的样式，使用id为wrapper的div将所有元素包裹起来。 • （3）页面最上方的导航条使用header包裹起来；下方主体内容用
前，就应搜集或制作一些好看、适用的图片。 • 2. 动画制作 • 传统的做法是在HTML中嵌入用Java程序编写的动画，但这要求开发者
对Java语言的编程要熟悉。 • 3. 文本编写 • 网页中需要大量文字，这就要在网页编辑器中用HTML5语言中的标签
编写，前面章节都已介绍过。也可以利用网页编辑工具的“所见即所 得”功能，直接写入文字。这要用到网页设计工具。
14.2 综合实例——制作门户类网页
• 结合前面项目所介绍的网页规划及结构设计知识、使用CSS进行页面 布局及页面美化等，完整地介绍制作一个页面的流程。页制作前的准备工作，除了有定义站点和设计网站结构的目录， 还有就是要将网页设计制作中需要用到的所有图像素材整理好，最好 是放在一个文件夹中，如images。这样便于设计制作时的选取使用， 也不易造成素材的混乱。
• <img src="imags/slogan.png"/> • 在外部样式表文件master．css中依次设置页面各个部分的样式。
本章小结
• 本章通过实例了解了网页规划、结构、布局的相关知识 ，从整体上把握网页设计的要领，在具体实施中可以参考 网页设计须注意的问题，通过综合实训，掌握设计大型门 户网站的基本技能。