《网页设计》课件网页设计-1.ppt

1、基础知识基础知识网页设计与制作网页设计与制作网站建设基础网站建设基础基础基础篇篇5基础知识基础知识 概 述 网络协议 IP地址与域名管理系统 网站浏览原理网页制作全球信息网全球信息网:WWW(World Wide Web，即，即Web)基于基于Internet的信息服务系统，向用户提供一个以超的信息服务系统，向用户提供一个以超 文本技术为基础的多媒体的全图形浏览界面；所有文本技术为基础的多媒体的全图形浏览界面；所有 WWW的页面都是用的页面都是用HTML编写的文件。编写的文件。超文本标记语言超文本标记语言:HTML Hyper Text Markup Language 其格式为其格式为ASCI

2、I码码,即纯文本文件即纯文本文件,是是WWW用于建立用于建立 与识别超文本文档的标准语言。与识别超文本文档的标准语言。基础知识基础知识 概概 述述基础知识基础知识基础知识基础知识应用层应用层表示层表示层会话层会话层OSI 参考模型（参考模型（7层协议）层协议）传输层传输层网络层网络层数据链路层数据链路层物理层物理层TCP/IP参考模型参考模型应用层应用层传输层传输层网络互联层网络互联层网络接口层网络接口层基础知识基础知识 网络协议网络协议11000000101010000000000101110011192.168.1.115 IP地址的表示地址的表示 IP地址的作用地址的作用 域名与主机名域

3、名与主机名 IP地址的组成地址的组成基础知识基础知识 IP地址与域名地址与域名基础知识基础知识 网站浏览原理网站浏览原理5网页设计与制作网页设计与制作 网站设计原则 Web 页面设计 网页制作方法 网页设计与制作流程网页制作l 主题定位主题定位制作网站首先要考虑网站的制作网站首先要考虑网站的主题主题。好的。好的网站不仅应该有美感、个性、创意，更网站不仅应该有美感、个性、创意，更要有质量。要有质量。网站的网站的内容内容是最重要的是最重要的基本因素基本因素，空洞，空洞的网站对人没有任何吸引力。的网站对人没有任何吸引力。基础知识基础知识 网站设计原则网站设计原则l 题材选择题材选择主题要小而精；主题

4、要小而精；题材最好是自己擅长或者喜爱的内容，题材最好是自己擅长或者喜爱的内容，题材不要太滥或者目标太高；题材不要太滥或者目标太高；网站名称要正气、易记、要有特色。网站名称要正气、易记、要有特色。（体现自己的个性）（体现自己的个性）网站的题材主要有：网站的题材主要有：新闻、体育、聊天、即时新闻、体育、聊天、即时信息、信息、ICQ、社区、邮件列表、计算机技术、社区、邮件列表、计算机技术、网页网页/网站开发、娱乐、旅行、参考、资讯、求网站开发、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚以及一些体现个职、家庭、教育、生活、时尚以及一些体现个人特色和爱好等的网站。人特色和爱好等的网站。网站的名

5、称网站的名称很重要，它在很大程度上也决定了整个很重要，它在很大程度上也决定了整个网站的定位。网站的名称要有概括性、简短、有特网站的定位。网站的名称要有概括性、简短、有特色、容易记，还要符合自己网站的主题和风格。色、容易记，还要符合自己网站的主题和风格。例：闪客帝国、清风文苑、红果园等。例：闪客帝国、清风文苑、红果园等。网站的网站的色彩搭配色彩搭配、网站的标准、网站的标准字字体体、网站的整体、网站的整体风格风格和和创意创意等。等。几种设计几种设计LogoLogo的方法的方法网站的色彩搭配网站的色彩搭配网站的标准字体网站的标准字体网页网页默认默认的字体：的字体：中文为中文为“宋体宋体”9磅字磅字

6、英文为英文为“Times New Roman”（有价值、高质量和有创意）（有价值、高质量和有创意）Web页面设计页面设计基础知识基础知识 网页类型网页类型 网页制作方法网页制作方法 网页制作方法网页制作方法基础知识基础知识基于客户端：基于客户端：静态网页（静态网页（htm）动态页面（动态页面（DHTML、JavaScript）网页的类型网页的类型基于服务器端：基于服务器端：动态页面（动态页面（ASP、PHP、JSP等）等）n Deamweaver是网页编辑软件是网页编辑软件n Fireworks是图形是图形/图像处理软件图像处理软件n Flash是矢量动画编辑软件是矢量动画编辑软件编程基础编程

7、基础何谓动态网页？何谓动态网页？动态网页，重点在动态网页，重点在“态态”，即状态上。同一个，即状态上。同一个网页文件在这一状态显示这个内容，而在另一状网页文件在这一状态显示这个内容，而在另一状态则显示完全不同的内容了，即随着请求的不同态则显示完全不同的内容了，即随着请求的不同，产生不同的网页。，产生不同的网页。（实现网页的动态更新与发布实现网页的动态更新与发布）动态网页技术的出现使得网页从单纯的展示平动态网页技术的出现使得网页从单纯的展示平台变成了网络台变成了网络交互交互平台，如用户的注册和登录、平台，如用户的注册和登录、在线留言、论坛、网上调查等在线留言、论坛、网上调查等。直接直接编写编写H

8、TMLHTML源代码源代码 利用制作工具利用制作工具n 利用任何文本编辑软件利用任何文本编辑软件 保存为纯文本文件即可保存为纯文本文件即可 （htm 或或 html）n 通过编辑窗口编辑网页通过编辑窗口编辑网页(不需要不需要html 源代码源代码)如如:FrontPage、Dreamweaver n JavaScript、Java、ASP、CGI、PHP、JSPn Fireworks、Flash网页制作方法网页制作方法 草案草案 粗略布局粗略布局 定案定案 确定网页的功能模块确定网页的功能模块 设计网页的版面设计网页的版面 处理技术上的细节处理技术上的细节网页设计网页设计网页版面布局网页版面布

9、局 页面属性页面属性 页面设计（表格、框架）页面设计（表格、框架）填写内容填写内容 添加链接和交互添加链接和交互 版权信息等版权信息等 和首页保持相同的风格和首页保持相同的风格 要有返回首页的链接要有返回首页的链接 目录结构不要超过四层目录结构不要超过四层l 什么是网络三剑客？什么是网络三剑客？Dreamweaver Fireworks Flash U是是MacromediaMacromedia公司网页设计公司网页设计“三剑客三剑客”之之“火火焰焰”，它以处理网页图片为特长，并可以轻松创，它以处理网页图片为特长，并可以轻松创作作GIFGIF动画。动画。U是由美国著名的软件开发商是由美国著名的软

10、件开发商MacromediaMacromedia公司推出的一个公司推出的一个“所见所见即所得即所得”的可视化网站开发工具。的可视化网站开发工具。U是是MacromediaMacromedia公司网页三剑客之中的公司网页三剑客之中的“闪电闪电”，其以制作网上动画为特长，它做出的动画声音动其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。画效果都是其他软件无法比拟的。Macromedia与与Adobe 需求分析需求分析 页面设计（风格、标志）页面设计（风格、标志）素材整理（脚本编写）素材整理（脚本编写）制作素材（动画、图片等）制作素材（动画、图片等）制作网页制作网页 构建网站

11、（上传文件并发布）构建网站（上传文件并发布）网页设计与制作流程网页设计与制作流程5网站建设基础网站建设基础 创建站点 发布站点 Windows XP下的IIS设置网页制作l创建本地工作文件夹创建本地工作文件夹l创建站点与本地文件夹关联创建站点与本地文件夹关联网站建设基础网站建设基础 创建站点创建站点l“站点站点/管理站点管理站点/新建新建/站点站点”命令命令根据提示按根据提示按“下一步下一步”按钮按钮 直到完成直到完成u 申请主页空间申请主页空间u 发布网页发布网页 设置服务器设置服务器 上传文件上传文件u 浏览网站浏览网站网站建设基础网站建设基础 发布站点发布站点 在服务器上申请空间：在服务

12、器上申请空间：l 登录网站登录网站l 注册登记注册登记l 上传网页上传网页设置个人服务器：设置个人服务器：PWS（Personal Web Server）即个人网页服务器）即个人网页服务器u IIS的安装的安装 u 设置设置Internet 信息服务信息服务IIS u 创建虚拟目录创建虚拟目录 u 设置虚拟目录属性设置虚拟目录属性 u 访问浏览访问浏览 Windows XP 下的下的IIS设置设置网站建设基础网站建设基础教学实践：教学实践：学习安装网页制作三剑客软件学习安装网页制作三剑客软件 利用利用DreamweaverDreamweaver创建站点创建站点 熟悉熟悉DreamweaverDreamweaver基本操作基本操作 习题一习题一