网页设计与制作基础篇

基础知识网页设计与制作网站建设基础基础篇基础知识概述网络协议IP地址与域名管理系统网站浏览原理网页制作全球信息网:(WorldWideWeb，即Web)基于Internet的信息服务系统，向用户提供一个以超文本技术为基础的多媒体的全图形浏览界面；所有编写的文件。超文本标记语言:HTML—HyperTextMarkupLanguage其格式为ASCII码,即纯文本文件,是用于建立与识别超文本文档的标准语言。基础知识①概述网页(Webpage)：在浏览器上看到的画面叫网页主页(Homepage)：进入网站后所看到的第一个页面(index.htm)网站(Site)：是一组相关网页的集合基础知识网页文件：就是指HTML文件，网页上的所有数据全部由HTML文件控制。超链接（Hyperlink)：是上的一种链接技巧，通过单击某个图标或某段文字，就可以自动连接相对应的其他文件，从一个网页跳转到另一个网页。基础知识应用层表示层会话层OSI参考模型（7层协议）传输层网络层数据链路层物理层TCP/IP参考模型应用层传输层网络互联层网络接口层基础知识②网络协议11000000101010000000000101110011192.168.1.11532位②IP地址的表示①IP地址的作用④域名与主机名③IP地址的组成基础知识③IP地址与域名网页Homepage主页HTTP协议浏览器用HTML编写用开发工具编写如DreamweaverData基础知识④网站浏览原理网页设计与制作网站设计原则Web页面设计网页制作方法网页设计与制作流程网页制作主题定位制作网站首先要考虑网站的主题。好的网站不仅应该有美感、个性、创意，更要有质量。网站的内容是最重要的基本因素，空洞的网站对人没有任何吸引力。基础知识①网站设计原则题材选择主题要小而精；题材最好是自己擅长或者喜爱的内容，题材不要太滥或者目标太高；网站名称要正气、易记、要有特色。（体现自己的个性）网站的题材主要有：新闻、体育、聊天、即时信息、ICQ、社区、邮件列表、计算机技术、网页/网站开发、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚以及一些体现个人特色和爱好等的网站。网站的名称很重要，它在很大程度上也决定了整个网站的定位。网站的名称要有概括性、简短、有特色、容易记，还要符合自己网站的主题和风格。例：闪客帝国、清风文苑、红果园等。所谓CI(CorporateIdentity)，是借用的广告术语，意思是通过视觉来统一企业的形象。主要包括Logo设计、网站的色彩搭配、网站的标准字体、网站的整体风格和创意等。定位网站CI形象网站的标志（Logo）Logo广义上是站点特色和内涵的集中体现，是网站的标志，如同商标一样；是站点特色和内涵的集中体现，是网站文化的浓缩，看见logo就让大家联想起你的网站。Logo狭义上是指用于链接本网站的图标标识，即88*31像素的小图标banner。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。定位你的网站CI形象--Logo有代表性的人物、动物、花草作为设计蓝本，加以卡通化和艺术化。例如：迪斯尼的米老鼠、搜狐的卡通狐狸等。如果网站的内容具有较强的专业性，可以本专业有代表的物品作为标志。例如：中国银行的铜板标志、奔驰汽车的方向盘标志、校徽等。几种设计Logo的方法标准颜色：蓝/绿色、黄/橙色、黑/灰/白等其他颜色注意：背景颜色和前文的对比一定要大，为了突出主要文字，背景绝对不能选择花纹繁杂的图案；色彩要控制在三种颜色以内。网站的色彩搭配网站的标准字体网页默认的字体：中文为“宋体”9磅字英文为“TimesNewRoman”网站的整体风格和创意网站风格：建立在有价值的内容的基础之上必须保证内容的质量和价值明确自己网站想留给人什么样的印象创意思考的过程：准备期/孵化期/启示期/验证期/形成期明确制作网页的目的确定网页的内容和风格（有价值、高质量和有创意）②Web页面设计基础知识网页类型网页制作方法③网页制作方法基础知识基于客户端：静态网页（htm）动态页面（DHTML、JavaScript）网页的类型基于服务器端：动态页面（ASP、PHP、JSP等）Deamweaver是网页编辑软件Fireworks是图形/图像处理软件Flash是矢量动画编辑软件编程基础何谓动态网页？动态网页，重点在“态”，即状态上。同一个网页文件在这一状态显示这个内容，而在另一状态则显示完全不同的内容了，即随着请求的不同，产生不同的网页。（实现网页的动态更新与发布）动态网页技术的出现使得网页从单纯的展示平台变成了网络交互平台，如用户的注册和登录、在线留言、论坛、网上调查等。直接编写HTML源代码利用制作工具利用任何文本编辑软件保存为纯文本文件即可（htm或html）通过编辑窗口编辑网页(不需要html源代码)如:FrontPage、DreamweaverJavaScript、Java、ASP、CGI、PHP、JSPFireworks、Flash网页制作方法草案粗略布局定案确定网页的功能模块设计网页的版面处理技术上的细节网页设计网页版面布局首页制作页面属性页面设计（表格、框架）填写内容添加链接和交互版权信息等其他页面设计和首页保持相同的风格要有返回首页的链接目录结构不要超过四层什么是网络三剑客？DreamweaverFireworksFlash是Macromedia公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。是Macromedia公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。Macromedia与Adobe需求分析页面设计（风格、标志）素材整理（脚本编写）制作素材（动画、图片等）制作网页构建网站（上传文件并发布）④网页设计与制作流程网站建设基础创建站点发布站点WindowsXP下的IIS设置网页制作创建本地工作文件夹创建站点与本地文件夹关联网站建设基础①创建站点“站点/管理站点/新建┅/站点”命令根据提示按“下一步”按钮┅┅直到完成申请主页空间发布网页设置服务器上传文件浏览网站网站建设基础②发布站点在服务器上申请空间：登录网站注册登记上传网页设置个人服务器：PWS（PersonalWebServer）即个人网页服务器IIS的安装设置Internet信息服务IIS创建虚拟目录设置虚拟目录属性访问浏览③WindowsXP下的IIS设置网站建设基础教学实践：⑴学习安装网页制作三剑客软件⑵利用Dreamweaver创建站点⑶熟悉Dreamweaver基本操作⑷习题一作业