本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> 成都网站建设_成都网页设计
立即购买视频教程 网页制作有关知识
夜鹰教程网 来源:www.yyjcw.com 日期:2016-11-5 14:06:22
 掌握与HTML有关的概念和术语;

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



1.1动手制作第一个主页
 启动DreamweaverMX2004,创建一个HTML文件;
 2保存文件,命名为Index.htm。
 3输入网页标题“第一次亲密接触”。
 4页面中输入文本“大家好,欢迎光临我的主页,这是我的第一次尝试,做得不好,请多多指教。”
 5插入一个外部图象文件。
 6按F12键,在IE中预览。

1.2网页的基本概念、术语、要素
 网页的制作就是文字、图象等内容进行合理的编排以及设置相互的链接。

1、WWW
 WWW(World Wide Web),即万维网,是因特网的一部分,是20世纪末出现的新技术,是基于超文本结构体系,由大量的电子文档组成的,这些文档存储在世界各地的计算机上,目的是让不同地方的人使用一种简洁的方式共享信息资源。

2、网页
 万维网上的文档又称为网页,网页可以 包含文本、图像、音频、视频等信息。
 存贮网页的 计算机通常称为万维网服务器(Web服务器)。
 网页按表现形式分为静态网页和动态网页。
 (1)静态网页
 静态网页实际是图文结合的页面,浏览者可以在网页上阅读信息,但无法进一步查询、留言、聊天、电子商务等。
 (2)动态网页
 动态网页指的是浏览器端和服务器端可以进行信息交流的网页,即服务器可以根据浏览者的请求做出相应的动作或回复。
 常见的动态网页类型有ASP 、PHP和CGI。

、网站
 网站实际上就是网页的集合,是将网页通过超链接的形式组成的 

、网页源代码HTML
 HTML即Hyper Text Markup language的缩写,超文本标记语言,是Internet中 编写网页的主要标识语言,网页文件也叫HTML 文件。
 HTML是纯文本文件。
动手操作:在记事本上查看制作网页的源代码
 1用IE打开制作的 网页文件index.htm;
 2单击查看菜单,选择源文件命令。

、网页编辑器
 所谓网页编辑器是指编辑网页的 工具软件。
 按照网页编辑器的基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器。
 (1)所见即所得网页编辑器
 主要优点是直观、方便,容易上手,缺点是在浏览器中很难完全达到真正想要得效果。
 常用编辑器有Dreamweaver 、Frontpage 、HomeSite 、HotDog等。
 (2)非所见即所得网页编辑器
 优点是所有HTML代码都是在用户得 监控下产生,制作的网页在浏览器中可以达到真正想要的 效果。缺点是工作效率低下。
 常用编辑器包括记事本、写字板和Word。
课堂练习:在Windows记事本中编写简单的网页文件
 1打开附件中记事本程序,保存文件Hello.htm
 2在文档中输入代码

      Hello,world!
  
 3保存文件,双击运行文件。

、文件路径
 文件路径是指文件在计算机上的存储位置,分绝对路径和相对路径。
 绝对路径是完整形式的路径,系统按照完整的路径进行文件查找。
 相对路径是以当前文件所在的路径和子目录为起点进行相对的路径查找。
 在网页制作中,通常使用相对路径。
 这样的好处是在改变保存位置时可以保证步会产生链接错误。
例如:
 当前文件为D:\myweb文件夹下 的index.htm,如果将其链接到D:\myweb文件夹下 mybook子文件夹中的网页文件Story.htm,
 则绝对路径写法是:href=“D:\myweb\mybook\story.htm”
 相对路径写法:
 Href=“mybook\sory.htm”

1.2.2与HTML相关的术语
 1.URL
 URL(Uniform Resource Lcator),即统一资源定位器,是一种通用的地址格式。
 每一个网页在万维网上都有一个唯一的URL地址,指出文件在Internet中的位置。
 一个完整URL地址由协议名、Web服务器地址、文件在服务器中的路径和文件名四部分构成。
 例如:Http://www.microsoft.com/intl/cn/index.htm
 动手操作:在IE地址栏中输入URL
2.链接
 又被称为超级链接,用于连接万维网中的其它网页。
3.超文本(Hyper Text)
 指可链接至其它网页或其它资料上的文字,叫超文本。
4.超媒体(Hypermedia)
 指可链接至其它网页或其它资料上的媒体,包括文字、图形或声音,而被链接的资料也可以是 其中的某种多媒体资料。
5网站类别
 Web服务器地址不同后缀标志着不同的 网站类型。
 其中
 com:商业组织
 gov:政府部门
 net:网络支持中心
 edu:教育机构
 mil:军事部门
 org:以外的组织
 int:国际组织
 www.sina.com.cn
 其中Web服务器地址的 第四部分代表国家代码。Cn代表“中国”。

练习:
 大家可以查查Jp 、in 、fr 、uk后缀分别代表哪个国家?
1.2.3网页中包括的主要元素
 1网页上常用的功能组件
 (1)站标(Logo):是一个网站的标志。
 (2)导航栏:可直观反映网页的具体内容,带领流浪者顺利访问网页。
 (3)广告条:一般位于网页顶部、导航栏上方,与左上角的站标相邻。
 (4)搜索引擎:方便用户以最快的方式在站点内查找所需信息,一般放在导航栏下方。
 (5)注册和登陆区:用户在此注册会员可享受网站提供的更多服务。
 (6)主内容区:网页中呈现给用户的内容。
 (7)友情链接:一种相互宣传的方式。
2.网页基本信息形式和表现手段
 (1)按钮:形式灵活,任何板块都可设计位按钮形式;
 (2)文本:最多内容的表现形式;
 (3)图像:表现、美化网页的最佳元素;
 (4)表格:控制网页的布局;
 (5)表单:收集信息、实现交互作用的表;
 (6)多媒体及特殊效果:吸引用户浏览。

1.3.3网站建设流程
 1确定网站主题
 常见的题材主要有科技、自然、生活、娱乐、体育、影视、旅游、文学、游戏、留学、资讯、求职、家庭、时尚、教育、计算机技术、网页/网站开发。

 确定主题的原则:
 (1)自己擅长并感兴趣的;
 (2)主题小而精
 (3)题材有新意
 (4)体现个性

 2为网站命名
 网站命名原则:
 (1)有很强的概括性;
 (2)易记,琅琅上口;
 (3)名称不要过长;
 (4)有个性,有内涵;
 例如:闪客帝国

 3搜集素材
 网络吸引人之处就是丰富的资源,精心设计和收集素材,体现特色。

 4结构设计
 网站内容----罗列素材资料-----根据内容设计结构蓝图
 网站的主页是什么 
 网站有哪些栏目?
 要划分哪些版块?
 如何设置栏目与页面间的链接?
 导航图的设计?

 5形象设计
 (1)网站的标志
 网站的商标,是站点特色和内涵的集中体现。
 一个好的Logo设计,应该是网站文化的浓缩。

卓越设计网:http://www.xpwu.com/Index.html  
中国设计在线:
http://www.cn-d1.com/Article/Index.html  

 (2)网站的标准色彩
 网站给人的第一印象是视觉冲击。不同的色彩搭配会产生不同的效果,会影响访问者的情绪。
 一般网页标准色主要有:蓝色、黄/橙色、黑/灰/白色3大系。

 网站色彩一易过多;
 不同颜色给人不同的心理感受;
 不同人群对色彩有不同的喜好;
 例如:儿童喜欢鲜明的纯色;草原人喜欢红色;闹市喜欢淡雅颜色;沙漠人喜欢绿色。

 迪士尼主页http://disney.go.com/home/today/index.html  

 (3)网站的标准字体6-
 网页内涵的一种体现。默认字体是宋体。特殊字体应设计为图象。
 (4)网站的宣传标语
 网站的高度概括,好的标语会提高网站知名度,吸引更多浏览者。
 例如:E 龙网的“ 网情深”
 Intel的“给你一个奔腾的心”

 6网页设计
 主页设计:网站徽标、导航条、横幅广告、更新列表、栏目介绍、搜索、友情链接、版权信息。突出重点,平衡协调。
 其他页面与主页风格保持一致。

 (7)站点规划
 站点规划原则:
 创建一个根文件夹,管理整个站点;
 建立一个主页文件index.htm;
 建立一个image文件夹用于管理图象素材;
 在根文件夹下建立不同栏目的文件夹。

 (8)创建站点
 (9)制作网页
 后面具体介绍!

 (10)测试站点
 上传到网上之前要测试网页的兼容性和链接的有效性。

 (11)申请域名、空间
 (12)上传
 (13)宣传
 (14)后期维护

1.3.4几种常见的网页布局
 网页的布局设计非常重要,网站设计不是把所有内容放置到网页中就行了,需要我们对网页内容进行合理的布局,给浏览者赏心悦目的感觉,增强网站的吸引力。
1、国字形布局
 大型网站采用的类型。
 “当当网”www.dangdang.com
2、匡字形布局
 华军软件园www.onlinedown.net/index.htm
3、三字形布局
 简洁明快的网页布局,国外使用较多。
4、川字形布局
 最大限度地突出主页的索引功能。
 “Beijing2008” http://www.beijing2008.com/  
5、封面形布局
 精美的平面设计和一些小的动画组合而成,放置几个简单的链接,设计好,会令人赏心悦目!
 大多用于企业网站和个人网站。
 “漫游同盟”www.hojo-tskuasa.com

6、Flash布局
 整个页面就是一个Flash画面,动态、绚丽、有趣,新潮的布局方式。
 耐克首页          www.nike.com/main.htm
 音乐游戏网站 Http://p11.com/funhaus/

7、标题文本型布局
 页面以文字内容为主。主要用于一些文章页面和注册页。
8、框架型布局
 专业设计人员很少采用,一些大型论坛和企业网站常采用。
 例如网易游戏论坛 http://bbs.netease.com/game/  
9、变化型布局

复制链接 网友评论 收藏本文 关闭此页
上一条: 如何加入网页代码的基本知识  下一条: QQ空间开心农场升级最快的方法
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
Dreamweaver CS4 SN以及注册机、激…
成都网站建设:私人网站建设的好处…
向上下左右不间断无缝滚动图片的效…
网站建设需要准备哪些资料?
ASP无限级分类实例教程
使用IE8常见问题问答
网页制作有关知识
如何加入网页代码的基本知识
QQ空间开心农场升级最快的方法
不让你的QQ好友删除你
HTML框架(Frames)
什么域名?如何注册域名?如何解析…
如何做好需求分析:需求管理是项目…
QQ远程协助后黑屏或花屏故障解决办…
专业化操作 Word 2007文档审阅技巧…
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
如何使用百度地图API一些简单的功…
C#正则表达式提取网址、标题、图片…
网站高并发解决思路(转)
安装好Discuz!NT论坛后首页是一片…
有哪些细节设计给你带来好的用户体…
抄袭来的东西进行拼装之后,属于我…
成都最便宜网站建设 QQ:14167596…
成都网站建设:私人网站建设的好处…
夜鹰教程网网站建设常见问题集锦
浅谈网站建设的十二大误区
网站建设需要准备哪些资料?
怎样才能写好一篇软文呢:越低俗越…
什么域名?如何注册域名?如何解析…
站长如何将网站的访客变为顾客?
夜鹰教程网打造成都私人网站建设的…
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3