第一部分 网页设计与制作基础知识

网页设计与制作李超锋QQ：361730241E-mail:[e-mail]学习方法以实践为主，多动手，多讨论。充分利用课堂时间，在课堂完成内容的入门。形成对网页设计和制作的兴趣，尝试制作你所见到的每一个网页或网页特效，不局限在课堂的范围之内。提高自己解决问题的能力！第一部分HTML网页设计概述HTML基础图片超链接表格表单框架多媒体1、网页设计概述一、基础知识：几个基本概念是WorldWideWeb的缩写，简称Web，中文名“万维网”是当前Internet上最受欢迎、最为流行、最新的信息检索服务系统它把Internet上现有的资源连接起来，使用户能够访问Internet上所有站点的超文本媒体资源文档用户主要通过网页的形式访问一、基础知识：几个基本概念HTML英文全称：HyperTextMarkUpLanguage中文名称：超文本标记语言一个HTML文件的后缀名是.htm或者是.html用记事本就可以编写HTML文件查看HTML源代码的方法点击鼠标右键，点击ViewSource(查看源文件)命令选择浏览器菜单View(查看)中的Source(源文件)命令。一、基础知识：几个基本概念HTTPHypertextTransferProtocol超文本传输协议用于从服务器传输超文本到本地浏览器的传送协议URLUniformResourceLocator统一资源定位器是一种地址形式，指定协议（如HTTP或FTP）及对象、文档、上的位置。一、基础知识：几个基本概念浏览器（Browser）可以显示网页服务器或文件系统的HTML文件的内容，并让用户与这些文件交互的一种软件主要通过HTTP协议与网页服务器交互并获取网页，这些网页由URL指定，文件格式通常为HTML常用浏览器IEFirefox，火狐，开源，体积小速度快Opera，支持Linux、Mac、Windows，手机浏览器Maxthon（IE内核），傲游谷歌浏览器，基于更强大的JavaScriptV8引擎同一个网页在不同浏览器中可能有不同的显示效果，所以在网页设计与制作的过程中不能只考虑在一种浏览器中的显示效果，应尽可能考虑在多种浏览器下的显示效果。一、基础知识：几个基本概念静态网页与动态网页静态网页：纯粹的HTML页面，网页的内容是固定的、不变的，一经编写完成，显示效果就确定动态网页：内容根据具体情况变化，一般根据网页的输入参数和数据库中内容的变化而变化可以简单的从文件的扩展名来看一个网页文件是动态网页还是静态网页静态网页的URL的后缀是.htm、.html、.shtml、.xml等，动态网页的URL的后缀是.asp、.aspx、.jsp、.php、.perl、.cgi等二、常用网页设计技术HTMLCSS：层叠样式表Javascript：客户端脚本语言美工在现实的网页设计中占有重要的地位，有兴趣的同学平常注意积累培养自己这方面的能力。三、常用网页设计工具Dreamweaver“所见即所得”的可视化网站开发工具主要用于网页的设计与制作Fireworks创建与优化Web图像和快速构建网站与Web界面原型的工具主要用于编辑矢量图形与位图图像三、常用网页设计工具Flash创作动画Flash动画是由MacroMedia公司推出的交互式矢量图和Web动画的标准Photoshop图像处理软件主要用于图像编辑、图像合成、校色调色及特将制作等都是Adobe公司的产品，前三者被称为网页三剑客，以前由MacroMedia公司出品。四、网站建设流程需求分析目标定位：做这个网站干什么？这个网站的主要职能是什么？网站的用户对象是谁？他们用网站干什么？用户分析：网站主要用户的特点是什么？他们需要什么？他们厌恶什么？如何针对他们的特点引导他们？如何做好用户服务？市场前景：网站如同一个企业，它需要能养活自己。这是前提，否则任何惊天动地的目标都是虚无的。网站的市场结合点在哪里？四、网站建设流程平台规划内容策划：这个网站要经营那些内容?其中分重点、主要和辅助性内容，这些内容在网站中具有各自的体现形式.内容划分好以后,就进行文字策划(取名),把每个内容包装成栏目.界面策划:结合网站的主题进行风格策划.如色彩包括主色、辅色、突出色，版式设计包括全局、导航、核心区、内容区、广告区、版权区及板块设计。网站功能：主要是管理功能和用户功能。管理功能是我们通常说的后台管理，关键是做到管理方便、智能化。而用户功能就是用户可以进行的操作，这涉及交互设计，它是人和网站对话的接口，非常重要。四、网站建设流程项目开发界面设计：根据界面策划的原则，对网站界面进行设计及完善。程序设计：根据网站功能规划进行数据库设计和代码编写。系统整合：将程序于界面结合，并实施功能性调试。四、网站建设流程测试验收项目人员测试：项目经理，监察员及项目开发人员一同根据前期规划对项目进行测试和检验。非项目人员测试：邀请非项目参与人员作为不同的用户角色对平台进行使用性测试。公开测试：网站开通，并接受网友的使用测试，设立反馈信息平台。收集意见和建议信息，针对平台存在的不足进行思考和完善。平面设计能力自主学习能力网页制作能力动态网站开发能力平面设计设计先行PhotoshopIllustratorFireworks图像处理网页设计创意设计网页制作细节决定成败记事本FrontpageDreamweaver切片+表格表格排版DIV+CSS排版编码实现动态网站制作1%聪明+99%勤奋=成功Java.NetCMS数据库设计算法设计Asp/php网站功能、结构和内容自主学习能力搜索引擎学习网站参考资料论坛良师益友社会大学+自学=终身学习网站架构栏目首页文章页面网站首页链接列表频道首页平面设计网页设计动态网站2、HTML基础知识要点标准HTML文件的结构基本HTML标记HTML的属性HTML颜色字符实体2.1HTML的标记网页其实就是HTML文件一个HTML文件不仅包含文本内容，还包含一些Tag，中文称为“标记”HTML标记最基本的格式是：标记内容/标记标记通常成对使用，标记表示某种格式的开始，/标记表示这种格式的结束。实例2-1第一个网页2.2标准HTML文件的结构HTML标记html文件头head题目title主体bodyhtmlheadtitle第一个页面的标题/title/headbody这是第一个页面的内容。/body/html2.3基本HTML标记正文标题标记格式：h1/h1、h2/h2、h3/h3、h4/h4、h5/h5、h6/h6作用：设置正文标题字体的大小示例：2-22.3基本HTML标记特点：h1到h6的内容都自动加粗并且显示为黑体字。h1到h6自动换行。2.3基本HTML标记分段标记和换行标记格式：分段p/p，换行br作用：分段和换行（另起一行）实例：2-32.3基本HTML标记特点：p……/p是分段标记，它是一个成对的标记，段之间的距离较大，相当于换行后又空一行。br是换行标记，它是一个单标记，表示换行。注释语句标记格式：!----作用：可以把代码的功能、作者、注意事项等信息放入其中特点：注释语句的内容都会被浏览器忽略，不显示在网页上示例：2-42.4列表标记HTML有三种列表形式：有序列表(OrderedList)、无序列表(UnorderedList)和定义列表(DefinitionList)。有序列表每个列表项前标有数字，表示顺序由ol开始，/ol结束其中的每个列表项由li开始，/li结束实例：2-52.4列表标记无序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点、方块等。由ul开始，/ul结束其中的每个列表项同样由li开始，/li结束。实例：2-62.4列表标记定义列表常用于术语的定义和解释由dl开始，/dl结束术语由dt开始，/dt结束术语的解释说明由dd开始，/dd结束，dd/dd里的文字缩进显示。实例：2-72.4列表标记2.5HTML的属性HTML标记可以有很多属性，属性可以扩展HTML标记的功能。属性通常由属性名和属性值成对出现，语法格式如下：标记属性1=属性值1属性2=属性值2…………/标记属性通常是写在开始标记里面，属性值一般用双引号标记起来（注意：是英文半角状态下的双引号）,多个属性并列的时候，用空格间隔2.5HTML的属性align属性作用：定义对齐方式常见属性值有left、center、right，能够控制大多数元素的左对齐、居中、和右对齐。实例2-82.5HTML的属性style属性作用：定义样式，如文字的大小、色彩、背景颜色等。书写格式：标记style=属性名称1：属性值1;属性名称2：属性值2……/标记一个style属性中可以放置任意多个样式属性名称，每个属性名称对应相应的属性值，属性名称之间用分号隔开。实例2-92.6HTML颜色HTML颜色的表示方式颜色名称：如blue表示蓝色，red表示红色等十六进制数值：分别给出RGB的颜色值RGB分别代表Red、Green、Blue的首字母，即红、绿、蓝三原色每种原色的最小值为0（0），最大值为256（FF）表示方式：#RRGGBB，其中RR、GG、BB的取值范围都是00到FF，如白色的RGB值为（255,255,255），就用#FFFFFF表示，黑色的RGB值为（0,0，0），就用#000000表示。2.6HTML颜色实例：2-10添加页面的背景颜色注意事项HTML网页中默认字体和边框都为黑色，背景为白色；十六进制的数码有0-9，a-f在W3C制定的HTML4.0标准中，只有16种颜色名称表示，其它颜色都要用十六进制RGB颜色值表示aqua(浅绿)black(黑)blue(蓝)fuchsia(紫红)gray(灰)green(绿)lime(酸橙)maroon(栗色)navy(藏青)olive(橄榄)purple(紫)red(红)silver(银灰)teal(水鸭)white(白)yellow(黄)2.7div和span标记div标记是一个块状的容器，其默认的状态就是占据整个一行。span标记是一个行间的容器，其默认状态是行间的一部分，占据行的长短由内容的多少来决定。实例2-112.8滚动字幕marquee基本语法结构：marquee……/marquee基本属性属性描述可取值direction移动方向left,right,down,upbehavior移动方式scroll,slide,alternateloop循环次数-1,2,…scrollamount移动速度2,10,…align对齐方式top,middle,bottombgcolor背景颜色#rrggbbheight底色所占高度40pxwidth底色所占宽度50px2.8滚动字幕marquee实例2-12marquee的应用2.8滚动字幕marquee利用简单的JavaScript语句控制文字的运动状态onmouseover表示鼠标经过滚动字幕时stop()意为停止滚动。实例2-13控制文字的运动状态2.9字符实体对于HTML代码而言，有些字符有特别的含义，比如小于号“”就表示HTML标记的开始，它是不在网页里显示的。特殊字符有两种：在HTML中有特殊含义的字符，如：,,”,&,空格等；无法用键盘直接输