网页制作与网站建设初学者必看教程(免费下载)解析.ppt

* 推荐学习网站之技术文章 太平洋学院 /pcedu/sj/wz/ 蓝色理想 / 天极网网页陶吧 / 网页设计师联盟 / * 本章重点内容小结 网页、网站 万维网、浏览器 网页制作工具（包括网页制作语言HTML） 网页中的基本元素 网页中颜色的定义 网站建设流程 网页版式布局 * 1.5 练习题课本P15 1.接入Internet的计算机必须共同遵守（） A.CPI/IP协议 B.PCT/IP协议 C.PTC/IP协议 D.TCP/IP协议 2.万维网的网址以http为前导，表示遵从（）协议 A.纯文本 B.超文本传输 C.TCP/IP协议 D.POP协议 3.URL的组成格式为（） A.资源类型、存放资源的主机域名和资源文件名 B.资源类型、资源文件名和存放资源的主机域名 C.主机域名、资源类型、资源文件名 D.资源文件名、主机域名和资源类型 4.URL的使用是（） A.定位主机的地址 B.定位资源的地址 C.域名与IP地址的转换 D.表示电子邮件的地址 5.使用记事本，用HTML语言编写如下图所示效果的页面。 * 网页标题 * 互联网以其丰富的内容、快捷的方式已经成为人们工作、学习、生活的重要组成部分。个人网站、企业网站、商业网站、教育和科研机构网站等各种类型网站地不断涌现正在悄然改变着人们的工作、学习和生活方式。 因此网页设计技术越来越受到更多人的关注，可以说网页设计也成为信息时代必备的技能之一。 * * 中国互联网络信息中心CNNIC * 我们通常所称的浏览网页，就是指的WWW操作。 * 1955年出生 * Google Chrome2008年，Google 携 Chrome 参战; 苹果公司的 Safari，2003年，苹果 Safari 浏览器登场 * Opera 是由挪威Opera software公司 * 一种专门用于网页制作的语言（网页文件的支持语言,用户通过IE浏览到的精美网页其实是IE执行网页的HTML代码的结果 ） * 这个网站用了宽大的边框分隔内容和背景，在背景处布置了大面积的图案。页面的宽度符合阅读习惯，而扩展出来的背景又在视觉上饱满了屏幕尺寸 * * 1.3.3 网站设计的基本流程 1、整体规划 例如，网站主题、风格、页面元素、逻辑结构等。 2、资料收集 例如，收集与主题相关的文字图片资料，一些优秀的页面风格，下载一些你喜欢的交互页面，开放的源代码等。 * 主 页 页面1 页面2 页面3 页面4 页面5 页面7 页面8 一级标题 二级标题 页面6 如： * * 如： 主 页 个人简历 我的相册 作品展示 家 庭 相 册 心情随笔 个 人 相 册 网 站 作 品 平面 作 品 涂鸦 作 品 * 1.3.3 网站设计的基本流程 3、页面设计 根据事先规划的结构，利用平面图片的形式设计你想要的最终效果。 * 4、网页测试 5、网页上传 6、网站推广与维护 * 1.4.1 Web站点主页的基本成分? 页面标题（说明网站的性质与内容） 网站标识 LOGO都是被精心设计的, Logo 的作用很多，最重要的就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。一个绝妙的Logo不但会使首页蓦然生辉，而且会成为整个网站的形象大使。 页眉（用来放置最希望浏览者看到的内容） 导航栏（栏目索引） 内容 页脚（联系方式、版权信息等） * d 站标 导航栏 标题 * d 页脚信息区 * d 站标 导航栏 标题 * 1.4.2 版式布局? 整体布局合理化、有序化、整体化 字体的大小、型号、字间距、行间距，以及配色等表现功能。 网页的版式设计有创造性、艺术性 将文字、图形图像、色彩、动画、视频图像等网页的传达要素，根据特定的内容和主题，在网页所限定的范围中，运用造型元素和形式原理进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。 * * * 用表格排版， * * * 由于人们习惯于将视线从左到右、从上到下移动，因而视区中的不同位置注目程度不同。 * 网页中最常见的构图布局 * / 层次分明 * /portfolio/ 这个网站用了宽大的边框分隔内容和背景，在背景处布置了大面积的图案。页面的宽度符合阅读习惯，而扩展出来的背景又在视觉上饱满了屏幕尺寸 * / * * /intl/top/about/corporate/career/pages/businessareas.aspx * * SGI silicon graphics,inc / * * 网站内不同页面的设计风格要有所统一。有些是色彩和布局都统一；有些则是布局统一，色彩跳跃。 * * 色彩和布局都统一 * * 布局不同而色调一致 / * *