搜索
1掌握网站的开发流程掌握网页设计原理掌握网页设计规范欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣2第一个阶段：规划和准备阶段。这个阶段要做的工作包括：（1）市场调查、市场分析；（2）制定网站技术方案；（3）规划网站内容；第二阶段：网页设计、制作阶段。这个阶段要做的工作包括：（1）网站总体设计（风格、布局、色彩）；（2）设计界面、制作网站中的各个网页；（3）将各个网页通过超级链接进行整合；（4）后台设计。第三阶段：网站的发布、推广和维护阶段。这个阶段要做的工作包括：（1）测试、调试与完善网站；（2）发布与推广网站；（3）维护和更新网站。31.2.1网页设计的基本原则（1）用户至上原则（2）易用性原则网页中的导航应放置明显、结构清晰、操作简单。网站的链接结构合理，方便浏览者在不同网页之间跳转快捷、方便。（3）实用性原则41.网页页面大小标准显示器的屏幕分辨率为1024*768，则不同版本的IE浏览器的屏幕大小为：◦IE6.0：1003*600px◦IE8.0（隐藏菜单栏）：1003*626◦IE8.0（不隐藏菜单栏）：1003*598原则：不出现水平滚动栏5LOGO是网站的标志、名片，如同商标一样。在网站设计中logo的设计是不可缺少的一个重要环节。Logo是网站特色和内涵的集中体现,它作用于传递网站的定位和经营理念、同时便于人们识别，会直接影响到客户对网站的判断，特别是网站日后需要进行全球性推广，优秀的商标设计会吸引来更多的访问者。LOGO可以是中文、英文字母，也可以是符号、图案，还可以是动物或者人物。LOGO的设计创意来源是网站的名称和内容。678超链接Flash动画导航栏图像网站导航的表现形式主要有：菜单、站内搜索引擎、当前浏览位置等。（1）菜单。菜单是网站最常见的导航方法，一个好的菜单系统关键在于能适应网站的层次需要，并且容易让浏览者理解网站的结构。（2）站内搜索引擎。站内搜索引擎提供了一种主动查询方式，浏览者只要把自己需要寻找的内容的关键字输入到搜索引擎中，网站将自动地查找出站内符合条件的页面，这是一种人性化的做法。（3）当前浏览位置。所谓“当前浏览位置”就是在网站的每个页面中加入当前位置的文字说明并逐级加入链接。910一般为广告横幅图片、或者使用JavaScript或Flash技术制作的动画，用于吸引用户观看1112网页的主体◦文本◦图像◦动画◦超链接13版权信息版块◦制作单位、制作人、时间等14网站设计不是把所有内容放置到网页中就行了，还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。常见的布局结构有“同”字形布局、“国”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局、上下框架型、封面型15161718192021版面典型风格对称型偏置型标题型色彩的运用在网页中的作用真是太重要了，有些网页看上去十分典雅、有品位，令人赏心悦目，但是页面结构却很简单、图像也不复杂，这主要是色彩运用得当。色彩是人的视觉最敏感的元素，网页色彩处理得好，可以锦上添花。网页三原色：red、green、blue色彩的属性：色相、饱和度、明度色彩模式：RGB、CMYKWeb216安全色23颜色心理反应应用情况红色热情、活力、温暖、喜庆极易吸引人们的眼球，在网页中广泛使用橙色时尚、轻快、温馨、热烈常常用于某些时尚新潮的网站中，如时装网站、化妆品网站等黄色快乐、希望、明亮、乐观营造出愉快的氛围，能够得到大部分浏览者的认可绿色宁静、希望、清爽、自然浅绿、黄绿等颜色既有绿色的特点，又能表现出黄色的温暖，用在网站中常常能够得到青年人和儿童的喜爱蓝色凉爽、清新、理智、平静在商业设计中，强调科技、效率的商品或企业形象，大多选用蓝色作为标准色灰色柔和、高雅、可靠、成熟与红色、橙色等比较有视觉冲击力的颜色相比，灰色比较低调。许多高科技产品，都采用灰色作为高科技形象白色洁白、纯真、明快、简洁通常需要和其他色彩搭配使用，多用于网站背景色黑色深沉、高贵、庄严、优雅适合于与许多颜色搭配紫色高贵、神秘、启发由于具有强烈的女性化性格，所以在网页设计中，除了和女性有关的商品或企业形象之外，其他类的网站一般不采用紫色作为主色表1.1色彩与心理反应24网页是由文本、图像、动画、超级链接等基本元素构成1．文本建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文字体一般使用宋体，大小一般使用9磅或12像素即可。2．图像网页中的图像主要有用于点缀标题的小图片，介绍性的照片，代表企业形象或栏目内容的标志性图片（即LOGO），用于宣传的广告（即Banner）等多种形式。3．超级链接超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、一个E_Mail地址等。超级链接可以是文本、按钮或图片，鼠标指向超级链接位置时，会变成小手形状。254．导航栏导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。5．动画动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的有效方法之一。6．表格表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。267．框架框架是网页的一种组织形式，将互相关联的多个网页的内容组织在一个浏览器窗口中显示。例如在一个框架内放置导航栏，另一个框架中的内容可以随着导航栏中的链接而改变。8．表单表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本，选中单选按钮或复选框，从下拉菜单中选择选项等。网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、JavaAppplet等元素。27前台技术◦XHTML（网页的结构技术）◦CSS（网页的表现技术）◦ECMAScript（前身为JavaScript，脚本语言）◦Ajax（由JavaScript脚本语言扩展而来）◦E4X（是ECMAScript的扩展，实现更快的访问XML数据）◦切片（网页图形处理）后台技术◦ASP技术动态网页技术，基于VBScript或JAVAScript◦ASP.NET技术是ASP的后续技术◦JSP技术基于JAVA的多平台动态页技术◦PHP技术多平台的网页后台技术，免费的网页脚本语言28他山之石可以攻玉，欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣，分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习网页奠定基础。291．网站描述：这是一家航空公司的网站首页。2．布局网页布局采用的是比较常见的分栏式结构3．配色网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD”，如图所示。此外，网页文字的配色主要以白色和蓝色为主。图1-6利顿茶商图1-7中国瓷器31图1-8中国古董网图1-9北美工艺品展32图1-11花蝶谷网图1-12艾艾在线33图1-13云水茶人坊图1-14苹果树下3435DreamweaverCS5工作界面网站的创建网站的管理熟悉DreamweaverCS5的界面布局和工作环境掌握站点的创建和管理方法会创建本地站点和远程站点参数设置一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。1．常规参数设置2．新建文档参数设置参数设置3．站点参数设置DreamweaverCS4有一套专业的创建和管理站点的工具，实现站点的创建和管理非常方便。要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作这个网站，然后把这个网站上传到WEB服务器上。放在本地磁盘上的网站文件夹称为本地站点，处于Internet中WEB服务器上的网站文件夹称为远程站点。DreamweaverCS4提供了管理本地站点和远程站点的强大的功能图2-18创建站点向导之一：填写网站名称图2-19创建站点向导之一：确定是否使用服务器技术图2-20创建站点向导之三：设置编辑方式图2-21创建站点向导之四：设置如何连接远程服务器图2-22创建站点向导之五：完成设置，显示设置信息图2-23新创建的站点建立站点后，DreamweaverCS4可以对站点及站点文件进行管理。管理站点是对已经建立的本地站点或远程站点进行管理，在DreamweaverCS4中，管理站点可以通过“管理站点”对话框进行管理，在“管理站点”对话框中，可以创建新站点、编辑站点、复制站点、删除站点以及导入或导出站点。图2-30“管理站点”对话框图2-32创建文件和文件夹Page52文本图片：Gif、JPEG、PNG、矢量格式超链接：链接的对象是文本、图片、图片的某个区域、脚本程序动画：Gif动画、Flash动画声音和视频：MIDI、WAV、MP3、RM导航栏：一组超链接，在网页的顶部或一侧表格：控制网页各元素的布局表单：接收用户输入，反馈给服务器网页特效：弹出窗口、文字随鼠标移动等，JaVaScript、VBScript网页交互元素：聊天、购物、搜索，ADO结合ASP\JSP网页文档的基本操作包括：（1）新建网页文档；（2）保存与另存网页文档；（3）打开网页文档；（4）关闭网页文档。2.5.1新建与保存网页DreamweaverCS4为创建新文档提供了若干选项，用户可以创建以下任意文档。•新的空白文档或模板；•基于Dreamweaver附带的预设计页面布局文档；•基于现有模板的文档。1．创建新文档2．保存新文档2.5制作简单网页2.5.2页面属性设置页面属性的设置包括页面的布局和格式设置。1．设置网页标题2.5制作简单网页2.5.2页面属性设置2．设置网页外观2.5制作简单网页2.5.2页面属性设置3．设置网页链接2.5制作简单网页2.5.2页面属性设置4．设置网页跟踪图像2.5制作简单网页2.5.3网页的基本排版在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。1．网页基本元素2．页面的简单排版（1）设置文本的大小（2）设置文本的字体（3）设置文本的颜色（4）设置文本对齐方式2.5制作简单网页2.5.4插入图像Web上常用的图像格式包括以下3种：GIF、JPEG和PNG。Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览任何图像。使用Dreamweaver将一个图像插入到网页中有3种方法：在插入面板的“常用”分类中选择“图像”按钮；执行“插入”→“图像”命令；使用〈Ctrl〉+〈Alt〉+〈I〉组合键。2.5制作简单网页案例一：创建学校概况页面【案例综述】制作学校概况页面，通过简单的页面制作展示学校的基本情况。【案例展示】本例中的素材包括4幅校园图片，实例效果如图3-42所示。2.5制作简单网页练习：制作爱家美食网站“美食推荐”页面【展示】本实训中的素材包括2幅图片，制作如图所示的爱家美食网站“美食推荐”页面。2.5制作简单网页在网页制作过程中，要求为目录和文件命名时都应遵循相应的规范，名称应能代表文件的意义，以便进行查找、修改。下面从网站目录建立规范、文件命名规范、文件头代码规范三个方面，具体介绍网页制作的规范。网站目录建立的原则是以最少的层次提供最清晰简便的访问结构。网站目录建立规范如图所示。基本原则：以最少的字母达到最容易理解的意义。所有文件名、文件夹使用小写英文字母、数字、下划线的组合，比如：news.html，unit1_1.html等。不要使用汉字、空格和特殊字符。有些服务器无法识别这些字符，会导致文件链接出错。尽量使用英文，最好有一定的意义，这样以后便于别人或自己修改。例如：名为“Login.html”的文件，一看名称