第1章-网页设计与网站建设ppt课件

.,网页设计与网站建设,时炳艳,.,课程介绍,课程的必要性：是大学生的必备素质和能力，是培养电子商务人才的需要。课程特点：具有计算机类课程的共性，同时具有自己的特点（集规划、设计、制作、创意、艺术设计于一体）。课程按排：4+2学习方法：理论知识（40%）+操作实践（60%）讲授方法：讲授+多媒体演示+自主实践+创意设计制作学习要求：制作简单的网站考核形式：上机考核或提交作品,5,.,我们与网络,在网上主要做什么？,.,电子商务职业技能,网络交易管理能力,网站建设与管理能力,网上银行支付与管理能力,电子商务安全管理能力,网络营销能力,网络服务与即时沟通能力,.,课程纲要,第1章网页设计与网站建设第2章网页基本元素第3章网页布局第4章应用框架第5章使用CSS修饰网页第6章使用行为制作网页特效第7章构建动态网页第8章Flash动画基础第9章网页动画制作第10章使用Fireworks处理网页图像第11章综合实例,.,第1章网页设计与网站建设,1.1网络基础知识1.2网站制作软件1.3网页的布局与配色1.4站点的创建和管理,.,1.1网络基础知识,一、万维网和浏览器WWW和IE(InternetExplorer)二、IP地址和域名IP分4个字节，用“.”分隔，域名是与IP对应域的构成，通常由三、四级等构成，如三、统一资源定位器UEL(UniformRrsourceLocator),格式为服务:/主机名：端号/路径/文件名服务类型：http:、telnet:、ftp:、gopher:、wais:、news:四、HTML与XML五、CSS六、静态网页与动态网页七、动态网页开发技术,1.2,.,常见一、二级域名类型及含义,7,.,四、HTML与XML,1.HTML：HypertextMarkupLanguage是一种利用各种标记来标志文档结构和超级链接的超文本标记语言HTML的文件的扩展名：.htm或htmlHTML的结构HTML语法HTML文档的编辑可以使用任何文本编辑软件或网页编辑软件2.XMLeXtensibleMarkupLanguage,.,HTML的文档结构,注：其中省略号处为实际需要的内容例,.,HTML实例,HTML实例简单例子请看详细内容,.,HTML基本语法1,1.HTML文档中的标记均用括起来,大小写均可，以为开始标记，以为结束标记2.标记的大多数要成对出现,可以写在一行也可以分行写.前面的称为头标,如:;后面的称为尾标,如:.头尾之间是该范围的显示内容和处理方式，不区分大小写3.标签是整个文档的开始和结束标记4.标签之间的内容是HTML文档的头部，用来放置有关网页的信息。，位置在标签之后及标签之前。5.标签是网页标题标记符，例：我的网络空间,.,HTML基本语法2,6.标签之间是网页的主体内容，包括文本、链接、图像及其他媒体内容。每个文档只能有一个，位置在之后。7.表示超级链接,=后的内容为超级链接的IP地址或E-mail地址等,前边的内容为链接的载体8.段落标记,.,六、静态网页与动态网页,1.静态网页静态网页是内容相对固定不变的标准HTML文件，其文件扩展名是.htm或.html。通常静态网页中的动画等是视觉动态效果2.动态网页动态网页是网页内容含有程序代码，并会被服务器端执行的网页，通常在服务器端以扩展名.asp或.aspx储存。动态网页具有“交互性”，不同请求可以显示不同内容动态网页可以实现注册、登录、在线调查、购物等3.二者的区别动态网页中的脚本只能在Web服务器上运行，静态网页中的HTML代码能被IE浏览器识别并执行。,.,七、常用的动态网页技术,1.ASPASP（ActiveServerPage）是一个Web服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。2.PHPPHP（HypertextPreprocessor）是一种跨平台的服务器端的嵌入式脚本语言，它大量地借用C、Java和Perl语言的语法，并耦合自己的特性，使Web开发者能够快速地写出动态生成页面。3.JSPJSP（JavaServerPage）是Sun公司推出的新一代站点开发语言，它完全解决了ASP、PHP的通病脚本级执行，实现编译运行，可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。,.,1.2网站制作软件,xxx8或xxxCS3是版本的区别DreamweaverFireworksFlashPhotoshop,.,1.3网页布局与配色,一、结构布局国字型拐角型左右框架型其它二、艺术布局分割构成对称构成平衡构成其它三、配色216网页安全色区别颜色的元素：背景、普通文本、超级链接文本、已访问过的链接文本、当前链接文本等,19,.,网页外观结构,首页结构1,注意：为了使页面的结构合理、美观、悦目，通常在制作网页之前要用绘图软件画出页面的布局草图,.,1.4站点的建立与管理,一、站点的建立1.建立站点根文件夹：我的电脑窗口选一驱动器，建立文件夹（用英文或拼音+数字的名称）2.打开”站点定义”对话框：“站点”|“新建站点”3.输入站点名称:可以用中文或英文4.服务器技术的选择(动态网页使用),静态网页选择”否.”5.1）如何使用您的文件项：选择第一个选项2）选择文件的存储位置（已经建立的站点根文件夹）6.远程服务器的选择:单击”无”7.点击“完成”二、站点文件和文件夹的创建三、实例四、站点的管理五、站点视图与文件的上传与下载,.,二、站点文件和文件夹,（一）站点文件和文件夹的创建1.在根文件夹中创建在文件面板根文件夹上右击选择新建文件/新建文件夹文件/文件夹名：将默认的untitled1.html或untitled改为自己设计的名称，如index.html2.在文件夹中创建在文件面板的对应文件夹上右击其它同上（二）站点文件和文件夹的编辑,1.站点文件/文件夹的编辑即对已建立的文件和文件夹进行复制、删除、重命名、更改位置等操作2.操作步骤（1）复制、删除、重命名选中文件/文件夹并右击选择相应的操作方法（2）更改位置选择文件/文件夹按住鼠标左键并拖动到指定文件夹上释放,.,三、实例,创建旅游网站的站点：要求：站点名为“旅游”，站点根文件夹为luyou创建旅游网站网页和文件夹要求：1.创建一个index.html文件，并打开将一幅图片插入到页面中2.创建images、music、db、pages、flash、books文件夹3.在pages文件夹中创建new.html、jingdian1.html、jingdian2.html网页文件,.,四、站点的管理,1.新建与复制站点新建：选择菜单站点|管理站点命令，在对话框中选择“新建”按钮复制：选择菜单站点|管理站点命令，在对话框中选择站点，单击“复制”按钮2.编辑站点编辑站点即修改站点的名称，存储位置等选择菜单站点|管理站点命令，在对话框中选择站点，单击“编辑”按钮在对话框中如创建时一样进行各项设置3.删除站点在管理站点对话框中，选择站点，单击“删除”按钮4.导入与导出站点,.,五、站点地图与文件的上传与下载,1.站点地图即对本地整个站点的文件链接的的视觉地图，又称为“本地视图”站点地图的打开：单击文件面板上的“地图视图”按钮选择视图方式：