网页制作与网站建设初学者必看教程(免费下载)_第1页
网页制作与网站建设初学者必看教程(免费下载)_第2页
网页制作与网站建设初学者必看教程(免费下载)_第3页
网页制作与网站建设初学者必看教程(免费下载)_第4页
网页制作与网站建设初学者必看教程(免费下载)_第5页
已阅读5页，还剩87页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第1章网页设计与制作基础2知识技能要点互联网、Web浏览器网页的类型网页设计的基本流程31.1互联网技术随着Internet／Intranet的不断普及和发展，越来越多的公司、企业和个人正在开始建设自己的Web站点、编写Web网页，以一种新的方式向外界发布信息，供人们去浏览、阅读和应用。因此，网页制作已经受到越来越多的专业人员的重视。4网页网页是指通过Internet向全球提供信息的一些文档文件，包括个人信息、商业、娱乐等内容。567网页是在浏览因特网时看到的一个个的画面；文字、图片和动画等网站则是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。首页(主页):构成网站的第一页8网页是利用超文本标记语言HTML(HyperTextMarkupLanguge)编写的，存放在Internet／Intranet上的Web服务器中，供访问者使用浏览器来阅读。利用HTML语言编写出来的网页又称为超文本，即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。通常我们看到的网页，都是以

htm

或

html

后缀结尾的文件，称

HTML

文件。9第26次中国互联网发展状况统计报告(2010.7.15)2006.12-2010.6中国网站规模变化101.1.2

互联网的应用技术现在的网络资源及各种业务、应用日趋丰富。电子政务、远程教育、远程医疗、移动短信、在线数字内容等网上各类业务日新月异，电子商务交易额快速增长，信息交流更加便捷高效。11Internet提供的服务：WWW服务（网上冲浪）电子邮件服务（Email）网上传呼（OICQ、QQ）文件传输（FTP）BBS12万维网（WWW）

WWW

是WorldWideWeb（环球信息网）的缩写,简称为Web，中文名字为“万维网”。通过万维网，人们可以使用很简单的方法，就可以很迅速方便地取得丰富的信息资料。

是当前Internet上最受欢迎、最为流行、最新的信息检索服务系统。13蒂姆·伯纳斯-李（TimBerners-Lee）于1990年创建了WorldWideWeb(WWW)。Web最初的构想和研发的目的是为了满足在世界各个大学、不同研究所工作的科学家信息共享的需求。WWW的基本概念是把所有个人计算机、计算机网络和超文本整合成一个功效强大并且易于使用的全球信息系统。14“互联网之父”151.2浏览器16浏览器

浏览器是获取WWW服务的基础，它的基本功能就是对网页进行显示，目前使用最广泛的浏览器是微软公司推出的InternetExplorer浏览器，还有火狐浏览器Firefox等等。1718浏览器之战191.2.3网页制作工具1.记事本20步骤如下：单击“开始”按钮，选择“程序/附件/记事本”。在“记事本”的窗口中输入HTML代码。输入代码结束后，选择“文件”菜单中的“保存”或“另存为”命令，则弹出图1-1所示的另存为对话框。在“文件名”框中键入Web页的名称，注意文件名必须以.html或.htm为扩展名。如果需要，应在“保存在”列表框中定位到特定的目录。单击“保存”按钮，即创建了一个Web页。见图1-2。进入到你的文件架，单击，进行测试，你的HTML的网页就完成了。21“另存为”对话框22单击ie图标，进行测试23例：<html><head><title>网站制作</title></head><body>文本内容</body></html>24运行效果如图2526一个典型的HTML文本的基本结构形式如下：<html>

<head>

<title>网页标题</title>

</head>

<body>网页的主要内容

</body>

</html>

结束标记开始标记文件头文件主体28HTML标签，（HTMLTag）都是由一对“<>”括起来的，成对出现。<标记名></标记名>表示标记的开始和结束，例如(<html></html>)HTML语言正是通过这些标签来设置网页的结构、网页元素的位置和类别，网页元素的显示效果等。29标记符属性

属性是用来描述对象特征的特性。例如，一个人的身高、体重就是人这个对象的属性。在HTML中，所有的属性都放置在开始标记符里，多个属性之间用空格分开。如：<bodybgcolor=“blue“text=“white”>

30关于颜色颜色值是一个关键字或一个RGB格式的数字。aqua，black，blue，fuchsia,gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow31在HTML中对于颜色的定义可以用6位十六进制数。电脑屏幕的色彩是由rgb（红、绿、蓝）三种色光所合成的，通过调整这三个基色就可以调配出其它的颜色。每2位数代表一种颜色的浓度，三种颜色的顺序为红、绿、蓝，00代表颜色浓度最小，FF代表颜色浓度最大。#000000代表纯黑、#FFFFFF代表纯白、32d图中所示是部分颜色的RGB代码:

例：为页面设置背景色：

<bodybgcolor=“#FFFF33”>332.网页编辑器用FrontPage或者Dreamweaver工具FrontPage和Dreamweaver是最著名的网页编辑工具。FrontPage是微软的Office中的一件组件，是入门时很容易掌握的工具。342.网页编辑器Dreamweaver是Macromedia公司出品的网页三剑客其中的一个软件，是专业网页制作软件。35Dreamweaver36美化网页的基本工具PhotoshopPhotoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。37FireworksFireworks是由Macromedia公司开发的图形处理工具。第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。38FlashFlash是美国Macromedia公司开发Flash是交互式矢量图和Web动画的标准。使用Flash可创作出既漂亮又可改变尺寸的导航界面以及其它奇特的效果。它易学、易用，可以做出有很多动画的网站。39401.2.4网页的基本构成元素

一个构思奇妙、制作精美的网页会使整个网站形象地位得到提高。网页制作是一个可简单、可复杂的过程。制作一个优秀的网页不仅需要有艺术的修养，懂得必要的网络语言，还要对图形图像、音频、视频制作，传输技术等有很深刻的理解。41设计页面时经常使用的一些元素：文字图形菜单按钮、链接、表单、数据交换...背景表格颜色多媒体元素页面布局421.文字（标题、字号、字型...）文字是网页发布信息所用的主要形式。在网页中可以通过字体、颜色、底纹、边框等来设置文本的属性。431.文字（标题、字号、字型...）在网页制作中，文字都可以很方便地设置成各种字体和大小，文字不要太大，也不要使用过多的字体，中文文字使用宋体，9像素或者12像素左右即可，因为过大的字在显示器显示时，线条不够平滑。另外，颜色也不要使用太多，以免让人看起来眼花缭乱。Web本身对文本和字体的格式化能力并不强，在Web页面中，可以指定文本尺寸、如果需要使用某种特殊字体，可以把这些字画在图片上，然后将图片插入到页面中。44452.图形图形（网页上经常使用的图片格式：Jpg、Gif...），可以使用Photoshop、Firework等图像处理工具制作完成。46GIF在颜色数很少(256)的情况下，产生的文件很小。JPG最主要的优点是能支持上百万种颜色，从而可以用来表现照片PNG可移值网络图形。Macromedia公司的Fireworks的默认存盘格式就是PNG。它集合了GIF和JPG格式的优点。473.交互功能交互功能（菜单按钮、链接、表单、数据交换...），帮助浏览者在Web内导航。484.多媒体元素多媒体元素：包括声音、动画、视频片断、背景音乐等。例如，动画可以使用flash等工具制作完成。491.3网站的设计、建设501.3.2网站类型的划分网站有很多种类型，如门户型网站、电子商务网站、个人网站等等。如果依据传达信息内容的特点来进行类型的划分，可以分为以下6种形式：511.信息查询类：像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。522.大众媒体类：具代表性的就属各大门户网站的新闻版块，传统媒体在网络空间的拓展——报刊杂志的电子版。533.宣传窗口类：宣传窗口类型的网页具有内容专一，形式多样的特点。尤其是企业的网页，具有企业形象传达的作用，可以看作CI设计的延伸。个人网站也成为这种类型的重要组成部分，因此格外受到重视。544.电子商务类：电子商务的出现使单向的信息传送变成了双向的交互服务，从真正意义上实现了网络的交互性。555.交流平台类：各种论坛、BBS、聊天室566.网络社区类：即虚拟网上生活。从网上交流发展到网络社区，网络已成为人们生活、存在的新空间，在网络社区可以充分的消遣、放松，获得深入交往并享有充分自由的理想场所。571.3.3网站设计的基本流程1、整体规划 例如，网站主题、风格、页面元素、逻辑结构等。2、资料收集 例如，收集与主题相关的文字图片资料，一些优秀的页面风格，下载一些你喜欢的交互页面，开放的源代码等。58主页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题页面6如：5960如：主页个人简历我的相册作品展示家庭相册心情随笔个人相册网站作品平面作品涂鸦作品611.3.3网站设计的基本流程3、页面设计

根据事先规划的结构，利用平面图片的形式设计你想要的最终效果。

624、网页测试5、网页上传6、网站推广与维护631.4.1Web站点主页的基本成分

页面标题（说明网站的性质与内容）网站标识LOGO都是被精心设计的,Logo的作用很多，最重要的就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。一个绝妙的Logo不但会使首页蓦然生辉，而且会成为整个网站的形象大使。页眉（用来放置最希望浏览者看到的内容）导航栏（栏目索引）内容页脚（联系方式、版权信息等）64d站标导航栏标题65d页脚信息区66d站标导航栏标题671.4.2

版式布局

整体布局合理化、有序化、整体化字体的大小、型号、字间距、行间距，以及配色等表现功能。网页的版式设计有创造性、艺术性将文字、图形图像、色彩、动画、视频图像等网页的传达要素，根据特定的内容和主题，在网页所限定的范围中，运用造型元素和形式原理进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。686970用表格排版，717273由于人们习惯于将视线从左到右、从上到下移动，因而视区中的不同位置注目程度不同。74网页中最常见的构图布局75/层次分明76/portfolio/这个网站用了宽大的边框分隔内容和背景，在背景处布置了大面积的图案。页面的宽度符合阅读习惯，而扩展出来的背景又在视觉上饱满了屏幕尺寸77/2023/2/178/intl/top/about/corporate/career/pages/businessareas.aspx2023/2/179SGIsilicongraphics,inc/2023/2/180网站内不同页面的设计风格要有所统一。有些是色彩和布局都统一；有些则是布局统一，色彩跳跃。2023/2/181色彩和布局都统一2023/2/182布局不同而色调一致/2023/2/183布局相同，色彩跳跃2023/2/1842023/2/1852023/2/18687推荐学习网站之网页素材网页制作大宝库/sucai/素材精品屋/index.asp黑马网页素材/遐思素材屋h

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论