网站的建立-站点的建立

相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
28

后台技术
◦ ◦ ◦ ◦

他山之石 可以攻玉,欣赏优秀的网页,学习他 人之长,激发学习网页设计的兴趣,分析优秀网页 的布局结构、颜色搭配、视觉效果,留下直观的第 一印象,为学习网页奠定基础。
29
1.网站描述:这是一家航空公司的网站首页。 2.布局 网页布局采用的是比较常见的分栏式结构 3.配色 网页选用蓝色系,象征天空,与网站主题一致。网页主要运用了两种蓝色,分 别是“#14397D”和“1E95BD”,如图所示。此外,网页文字的配色主要以白 色和蓝色为主。
2.5 制作简单网页
2.5.4 插入图像 Web上常用的图像格式包括以下3种:GIF、JPEG和PNG。 Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览 任何图像。使用Dreamweaver将一个图像插入到网页中有3 种方法: 在插入面板的“常用”分类中选择“图像”按钮; 执行“插入”→“图像”命令;
1



掌握网站的开发流程 掌握网页设计原理 掌握网页设计规范 欣赏优秀的网页,学习他人之长,激发学习网页设 计的兴趣
2
第一个阶段:规划和准备阶段。这个阶段要做的工作包括: (1)市场调查、市场分析; (2)制定网站技术方案; (3)规划网站内容; 第二阶段:网页设计、制作阶段。这个阶段要做的工作包括: (1)网站总体设计(风格、布局、色彩); (2)设计界面、制作网站中的各个网页; (3)将各个网页通过超级链接进行整合; (4)后台设计。 第三阶段:网站的发布、推广和维护阶段。这个阶段要做的 工作包括: (1)测试、调试与完善网站; (2)发布与推广网站; (3)维护和更新网站。
23
表1.1 色彩与心理反应
颜色 心理反应 应用情况 红色 热情、活力、温暖、喜庆 极易吸引人们的眼球,在网页中广泛使用 橙色 时尚、轻快、温馨、热烈 常常用于某些时尚新潮的网站中,如时装网站、 化妆品网站等 黄色 快乐、希望、明亮、乐观 营造出愉快的氛围,能够得到大部分浏览者的 认可 绿色 宁静、希望、清爽、自然 浅绿、黄绿等颜色既有绿色的特点,又能表现 出黄色的温暖,用在网站中常常能够得到青年 人和儿童的喜爱 蓝色 凉爽、清新、理智、平静 在商业设计中,强调科技、效率的商品或企业 形象,大多选用蓝色作为标准色 灰色 柔和、高雅、可靠、成熟 与红色、橙色等比较有视觉冲击力的颜色相比, 灰色比较低调。许多高科技产品,都采用灰色 作为高科技形象 白色 洁白、纯真、明快、简洁 通常需要和其他色彩搭配使用,多用于网站背 景色 黑色 深沉、高贵、庄严、优雅 适合于与许多颜色搭配 紫色 高贵、神秘、启发 由于具有强烈的女性化性格,所以在网页设计 中,除了和女性有关的商品或企业形象之外, 24 其他类的网站一般不采用紫色作为主色
◦ IE6.0:1003*600px ◦ IE8.0(隐藏菜单栏):1003*626 ◦ IE8.0(不隐藏菜单栏):1003*598

原则:不出现水平滚动栏
5


LOGO是网站的标志、名片,如同商标一样。在 网站设计中logo的设计是不可缺少的一个重要环节。 Logo是网站特色和内涵的集中体现,它作用于传递 网站的定位和经营理念、同时便于人们识别,会直 接影响到客户对网站的判断,特别是网站日后需要 进行全球性推广,优秀的商标设计会吸引来更多的 访问者。 LOGO可以是中文、英文字母,也可以是符号、 图案,还可以是动物或者人物。LOGO的设计创意 来源是网站的名称和内容。
网页是由文本、图像、动画、超级链接等基本元素构成 1.文本 建议用于网页正文的文字一般不要太大,也不要使用过多的字体, 中文字体一般使用宋体,大小一般使用9磅或12像素即可。 2.图像 网页中的图像主要有用于点缀标题的小图片,介绍性的照片,代 表企业形象或栏目内容的标志性图片(即LOGO),用于宣传的 广告(即Banner)等多种形式。 3.超级链接 超级链接是Web网页的主要特色,是指从一个网页指向另一个 目的端的链接。这个“目的端”通常是一个网页,也可以是下列 情况之一:相同网页上的不同位置、一个下载的文件、一幅图片、 一个E_Mail地址等。超级链接可以是文本、按钮或图片,鼠标指 向超级链接位置时,会变成小手形状。
26
7.框架 框架是网页的一种组织形式,将互相关联的多个网页的 内容组织在一个浏览器窗口中显示。例如在一个框架内放 置导航栏,另一个框架中的内容可以随着导航栏中的链接 而改变。 8.表单 表单是用来收集访问者信息或实现一些交互作用的网页, 浏览者填写表单的方式是输入文本,选中单选按钮或复选 框,从下拉菜单中选择选项等。 网页中除了上述这些最基本的构成元素外,还包括横幅 广告、字幕、悬停按钮、日戳、计算器、音频、视频、 Java Appplet等元素。
Page
52



网页文档的基本操作包括: (1)新建网页文档; (2)保存与另存网页文档; (3)打开网页文档; (4)关闭网页文档。
2.5 制作简单网页
2.5.1 新建与保存网页 Dreamweaver CS4为创建新文档提供了若干选项,用户可 以创建以下任意文档。 • 新的空白文档或模板;

9
10

一般为广告横幅图片、或者使用JavaScript或Flash 技术制作的动画,用于吸引用户观看
11
12

网页的主体
◦ ◦ ◦ ◦ 文本 图像 பைடு நூலகம்画 超链接
13

版权信息版块
◦ 制作单位、制作人、时间等
14


网站设计不是把所有内容放置到网页中就行了,还 需要我们把网页内容进行合理的排版布局,以给浏 览者赏心悦目的感觉,增强网站的吸引力。在设计 布局的时候要注意把文字、图片在网页空间上均匀 分布并且不同形状、色彩的网页元素要相互对比, 以形成鲜明的视觉效果。 常见的布局结构有 “同”字形布局、“国”字形布 局、“匡”字形布局、“三”字形布局和“川”字 形布局、上下框架型、封面型
图2-18 创建站点向导之一:填写网 站名称
图2-19创建站点向导之一:确定是 否使用服务器技术
图2-20 创建站点向导之三:设置编 辑方式
图2-21创建站点向导之四:设置如何 连接远程服务器
图2-22创建站点向导之五:完成设置,显 示设置信息
图2-23 新创建的站点

建立站点后,Dreamweaver CS4可以对站点及 站点文件进行管理。管理站点是对已经建立的本地 站点或远程站点进行管理,在Dreamweaver CS4 中,管理站点可以通过“管理站点”对话框进行管 理,在“管理站点”对话框中,可以创建新站点、 编辑站点、复制站点、删除站点以及导入或导出站 点。
15
16
17
18
19
20
21
版面典型风格
对称型
偏置型
标题型


色彩的运用在网页中的作用真是太重要了,有些 网页看上去十分典雅、有品位,令人赏心悦目,但 是页面结构却很简单、图像也不复杂,这主要是色 彩运用得当。色彩是人的视觉最敏感的元素,网页 色彩处理得好,可以锦上添花。 网页三原色:red、green、blue 色彩的属性:色相、饱和度、明度 色彩模式:RGB、CMYK Web216安全色

3
1.2.1网页设计的基本原则 (1)用户至上原则 (2)易用性原则

网页中的导航应放置明显、结构清晰、操作简单。网站 的链接结构合理,方便浏览者在不同网页之间跳转快捷、 方便。
(3)实用性原则
4
1.网页页面大小 标准显示器的屏幕分辨率为1024*768,则不同版 本的IE浏览器的屏幕大小为:


基于Dreamweaver附带的预设计页面布局文档;
基于现有模板的文档。
1.创建新文档 2.保存新文档
2.5 制作简单网页
2.5.2 页面属性设置 页面属性的设置包括页面的布局和格式设置。 1.设置网页标题
2.5 制作简单网页
2.5.2 页面属性设置 2.设置网页外观
2.5 制作简单网页
2.5.2 页面属性设置 3.设置网页链接
图2-30“管理站点”对话框
图2-32 创建文件和文件夹




文本 图片:Gif、JPEG、PNG、矢量格式 超链接:链接的对象是文本、图片、图片的某个区域、脚 本程序 动画:Gif动画、Flash动画 声音和视频:MIDI、WAV、MP3、RM 导航栏:一组超链接,在网页的顶部或一侧 表格:控制网页各元素的布局 表单:接收用户输入,反馈给服务器 网页特效:弹出窗口、文字随鼠标移动等, JaVaScript 、 VBScript 网页交互元素:聊天、购物、搜索,ADO结合ASP\JSP
使用〈Ctrl〉+〈Alt〉+〈I〉组合键。
2.5 制作简单网页
案例一:创建学校概况页面 【案例综述】制作学校概况页面,通过简单的页面制作展示学 校的基本情况。 【案例展示】本例中的素材包括4幅校园图片,实例效果如图 3-42所示。
2.5 制作简单网页
练习:制作爱家美食 网站“美食推荐”页 面 【展示】本实训中的 素材包括2幅图片, 制作如图所示的爱家 美食网站“美食推荐” 页面。
27

前台技术
◦ ◦ ◦ ◦ ◦ ◦ XHTML(网页的结构技术) CSS(网页的表现技术) ECMAScript(前身为JavaScript,脚本语言) Ajax(由JavaScript脚本语言扩展而来) E4X( 是ECMAScript的扩展,实现更快的访问XML数据 ) 切片(网页图形处理) ASP技术 动态网页技术,基于VBScript或JAVAScript ASP.NET技术是ASP的后续技术 JSP技术基于JAVA的多平台动态页技术 PHP技术多平台的网页后台技术,免费的网页脚本语言

25
4.导航栏 导航栏是一组超级链接,用来方便地浏览站点。导航栏 一般由多个按钮或者多个文本超级链接组成。 5.动画 动画是网页中最活跃的元素,创意出众、制作精致的动 画是吸引浏览者眼球的有效方法之一。 6.表格 表格是HTML语言中的一种元素,主要用于网页内容的 布局,组织整个网页的外观,通过表格可以精确地控制各 网页元素在网页中的位置。
参数设置 一般设置的参数有常规 参数、新建文档参数和 站点参数,这些都是开 始创建站点、设计网页 前需要考虑的因素。 1.常规参数设置 2.新建文档参数设置
参数设置 3.站点参数设置

Dreamweaver CS4有一套专业的创建和管理站点 的工具,实现站点的创建和管理非常方便。要制作 一个能够被公众浏览的网站,首先要在本地磁盘上 制作这个网站,然后把这个网站上传到WEB服务器 上。放在本地磁盘上的网站文件夹称为本地站点, 处于Internet 中WEB服务器上的网站文件夹称为远 程站点。Dreamweaver CS4提供了管理本地站点 和远程站点的强大的功能
6
7
导航栏
图像
sh 动画
超链接
8
网站导航的表现形式主要有:菜单、站内搜索引擎、当 前浏览位置等。 (1)菜单。菜单是网站最常见的导航方法,一个好的菜 单系统关键在于能适应网站的层次需要,并且容易让浏览 者理解网站的结构。 (2)站内搜索引擎。站内搜索引擎提供了一种主动查询 方式,浏览者只要把自己需要寻找的内容的关键字输入到 搜索引擎中,网站将自动地查找出站内符合条件的页面, 这是一种人性化的做法。 (3)当前浏览位置。所谓“当前浏览位置”就是在网站 的每个页面中加入当前位置的文字说明并逐级加入链接。
图1-6利顿茶商
图1-7中国瓷器
31
图1-8 中国古董网
图1-9 北美工艺品展
32
图1-11 花蝶谷网
图1-12艾艾在线
33
图1-13云水茶人坊
图1-14苹果树下
34
35


Dream weaver CS5工作界面 网站的创建 网站的管理


熟悉Dreamweaver CS5的界面布局和工作环境 掌握站点的创建和管理方法 会创建本地站点和远程站点
2.5 制作简单网页
2.5.2 页面属性设置 4.设置网页跟踪图像
2.5 制作简单网页
2.5.3 网页的基本排版 在通常情况下,网页上一般都包含文本、日期、特殊符 号及水平线等基本元素。 1.网页基本元素
2.页面的简单排版
(1)设置文本的大小 (2)设置文本的字体 (3)设置文本的颜色 (4)设置文本对齐方式
相关文档
最新文档