|
1.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。
3 、网站
网站实际上就是网页的集合，是将网页通过超链接的形式组成的 。
4 、网页源代码HTML
HTML即Hyper Text Markup language的缩写，超文本标记语言，是Internet中 编写网页的主要标识语言，网页文件也叫HTML 文件。
HTML是纯文本文件。
动手操作：在记事本上查看制作网页的源代码
1用IE打开制作的 网页文件index.htm;
2单击查看菜单，选择源文件命令。
5 、网页编辑器
所谓网页编辑器是指编辑网页的 工具软件。
按照网页编辑器的基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器。
（1）所见即所得网页编辑器
主要优点是直观、方便，容易上手，缺点是在浏览器中很难完全达到真正想要得效果。
常用编辑器有Dreamweaver 、Frontpage 、HomeSite 、HotDog等。
（2）非所见即所得网页编辑器
优点是所有HTML代码都是在用户得 监控下产生，制作的网页在浏览器中可以达到真正想要的 效果。缺点是工作效率低下。
常用编辑器包括记事本、写字板和Word。
课堂练习：在Windows记事本中编写简单的网页文件
1打开附件中记事本程序，保存文件Hello.htm
2在文档中输入代码
Hello,world!
3保存文件，双击运行文件。
6 、文件路径
文件路径是指文件在计算机上的存储位置，分绝对路径和相对路径。
绝对路径是完整形式的路径，系统按照完整的路径进行文件查找。
相对路径是以当前文件所在的路径和子目录为起点进行相对的路径查找。
在网页制作中，通常使用相对路径。
这样的好处是在改变保存位置时可以保证步会产生链接错误。
例如：
当前文件为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 龙网的“ 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、变化型布局
|