电子商务网站设计1

1、网页设计与制作基础主讲教师: 冯波Email: gzfengbo8/15/2022通过本课程的学习，使学生掌握网页制作的基本知识，熟悉常用的网页制作软件Dreamweaver并且具备利用Dreamweaver来设计和制作网页的能力。教学目的与要求教学进度计划周次教学内容教学方式学时课外作业及平时考核2第1章及第2章：网页设计基础课堂讲授2学时3实验一 网页的认识实验2学时4、6第2章 HTML基础课堂讲授4学时5、7实验二 、三 网页的基本元素实验4学时8第3章 Dreamweaver基本操作课堂讲授2学时9实验四 Dreamweaver基本操作实验2学时实验报告110、12第4章 Dream

2、weaver网页布局设计课堂讲授4学时11、13实验五、六 Dreamweaver网页布局设计实验4学时14、16第5章 Dreamweaver高级应用课堂讲授4学时15、17实验七、八 Dreamweaver高级应用实验4学时18答辩课堂讲授2学时实验报告2DW CS4下载地址/download/dreamweaver.htm第一讲 网页设计基础1.1 网页设计相关概念网页与网站 Web服务器和浏览器 动态网页和静态网页URLInternetInternet是由遍布全世界的各种各样的网络通过TCP/IP协议连接成的一个松散结合的全球网，它使网络上的各台计算机（Internet上称为主机，即h

3、ost）可以互相交换信息。Internet为用户提供了各种各样的服务，如WWW，Email，FTP，即时通信等。WWWWWW（World Wide Web），简称为Web或“万维网”。它是一个基于C/S体系结构的分布式多平台的超文本(hypertext)超媒体（ hypermedia ）信息服务系统。WWW将位于全世界Internet上不同网址的相关数据信息有机地编织在一起，通过浏览器（browser）提供一种友好的信息查询界面。我们使用互联网这个庞大的技术系统的主要方式是什么？网 页网页即是超文本文件，是按照网页文档规范编写的一种纯文本文件。客户通过浏览器看到的包含了如文字、图像、声音和动画

4、等多媒体信息的每一个页面，其本质是一个纯文本文件。浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，通过URL嵌入到网页文件中。可以看出，WWW服务主要是通过一个个多媒体网页提供给用户各种信息的，因此，网页是WWW的基础文档。HTML超文本标记语言超文本标记语言HTML作为一种语言，它具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。所谓标记，就是作记号。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落所谓超文本，就是相比普通文本有超越的地方，如超文本可以通过超链接转

5、到指定的某一页，而普通文本只能一页页翻，超文本还具有图像，视频，声音等元素，并能和用户交互，这些都是普通文本无法达到的 HTML的历史超文本标记语言HTML是一种建立超文本/超媒体文档的语言。作为一种语言，HTML具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。所谓标记，就是作记号。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落。HTML用标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些元素。HTML的发展历程如图所示。 GML(1969)SGML(1985)HTML(1993)XML(1998)XHTML(2000)CMLVMLG

6、eneralized Markup LanguageStandard Generalized Markup LanguageHyper Text Markup LanguageeXtensible Markup Language网 站网站是一组相关网页以及有关的文件、脚本和数据库等内容的的有机集合，即若干个网页文件经过规划组织后形成完整结构的信息服务体系。一个网站对应一个文件夹，网站的所有网页和其他资源文件都会存放在该文件夹下或其子文件夹下，设计良好的网站通常是将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护。这些网页通过链接组织在一起，其中有个网页称为首页，常命名为inde

7、x.htm，必须放在网站的根目录下。网页是网站的基本信息单元Web服务器和浏览器网页被放置在Web服务器上用户通过Url请求web服务器时，web服务器把相应的网页传送到用户浏览器端 Web服务器的作用：对于静态网页，web服务器仅仅是定位到网站对应的目录，找到每次请求的网页传送给客户端。对于动态网页，web服务器找到该网页后要先对动态网页中的服务器端程序代码进行执行，生成静态网页代码再传送给客户端浏览器。Web服务器由于web服务器对静态网页起的只是一个查找和传输的作用，因此我们测试静态网页时可不安装web服务器，直接找到该网站对应的目录双击网页文件预览测试，而测试或运行动态网页则一定要在本

8、机上安装web服务器(如IIS)，因为动态网页要经过web服务器解释执行生成html文档才能被浏览器解释 浏览器浏览器：用户浏览网页所用浏览器的本质：解释html代码生成我们看到的网页 目前常见的浏览器有：IE6，Firefox 3，Netscape，Opera 静态网页和动态网页静态网页是不包含服务器端代码的html文件，web服务器只是负责把静态网页发送给浏览器，由浏览器解释执行动态网页中含有服务器端代码，需要先由web服务器对这些服务器端代码进行解释执行生成客户端代码后再发送给客户端浏览器 动态网页的特征同一个网页根据每次请求的不同，可每次显示不同的内容因为要显示不同的内容，所以往往需要

9、数据库做支持从网页的源代码看，动态网页中含有服务器端代码，后缀名不能是.htm。URL URL（Universal Resource Locator）是统一资源定位器的英文缩写，每个站点或站点上的每个文件（网页及所有资源文件）都有一个唯一的地址，浏览器是通过URL来定位目标信息的 URL的一般格式为：协议名:/主机名:端口号/文件夹名/文件名常用协议名如：http（超文本传输协议，用于传送网页）；ftp（文件传输协议，用于传送文件）例：/web/1/200807/10172331484.html1.2 网页基本元素网页是网站提供信息服务的主要形式，一般包含文字、图像和表格等内容，以及实现信息块

10、之间跳转的超链接。网页通常以网页文件及其附属文件形式存在。常见的网页元素包括文本、图片、超链接、表格、导航栏、动画、音频和视频、交互表单等。1.3 网站的目录结构网站的目录结构是指网页文件的存放结构。不合理的目录结构会使得站点的维护、移植和扩充变得异常的繁琐和困难。不要将所有文件都存放在根目录下。按栏目内容建立子目录。在每个主目录下都建立独立的 images 目录。 目录的层次不要太深。不要使用中文目录。不要使用过长的目录。尽量使用意义明确的目录。一个网站的目录结构：root/ |-images/ |-message/ |-quanzhou/ |-member/ | - |-01/ | - |

11、-. | - |-47/ |-index.html1.4 网页设计语言与工具网页设计语言静态网页设计语言网页特效脚本语言动态交互式网页设计语言网页设计工具网页设计辅助软件Adobe的Dreamweaver CSXMicrosoft的Frontpage和Expression Web1.5 网站运行环境的建立域名注册：符合规范、简洁、容易记忆、不容易与其他域名混淆、与公司名称、商标或核心业务相关建站方式的选择：服务器空间 虚拟主机 主机(服务器)托管 独立服务器 Web服务器的构建选择操作系统：须具有高性能的操作系统；必须支持多种通信协议；必须独立于硬件；必须支持其他计算机的工作平台；必须方便用户

12、访问网络资源；必须有较好的应用程序编程接口；必须支持远程过程调用（Remote Procedure Call）；容错技术；有方便使用、功能强大的网络管理工具 Web服务器：安全，开放，性价比，可扩展性开发工具数据库：易用，分布，并发，可移植，安全，容错 2. HTML与XHTML标准HTML文档的基本结构标记(Tags)和元素( Elements )HTML标记的分类行内元素和块级元素从HTML到XHTML的转变html存在的问题和web标准XHTML与HTML的区别 2.1 (X)HTML文档的基本结构：告诉浏览器HTML文档开始和结束的位置，其中包括head部分和body部分。HTML文档

13、中所有的内容都应该在这两个标记之间，一个HTML文档总是以开始，以结束。：HTML文件的头部标记，头部主要提供文档的描述信息，head部分的所有内容都不会显示在浏览器窗口中，在其中可以放置页面的标题以及页面的类型、使用的字符集、链接的其它脚本或样式文件等内容：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记指明主体区域的结束 编写HTML网页文档的方法HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存使用记事本编辑一个html文件使用Dreamweaver新建一个html文件2.2 标记(Tags)和元素（Elements） 标记是HTML文档中一些有特定意义的

14、符号，这些符号指明内容的含义或结构。标记总是放在三角括号中，大多数标记都是成对出现的，表示开始和结束。把HTML标记如和标记之间的内容组合称为元素。网页中文字，图像，链接等所有的内容都是以元素的形式出现在html代码里的。标记相同而标记中的内容不同应视为不同的元素，同一网页中标记和标记中的内容都相同的元素如果出现两次也应视为两个不同的元素，因为任一个元素在网页中浏览器都会为它分配唯一的id，不存在两个元素的id也完全相同的情况。 例1下面body内元素的个数是多少图片的说明内容图片的说明内容答案：5个通用标记结构 内容 元素名即预定义的标记（签）属性：用来指定标记的行为确定元素内容的显示方式，

15、如果标记有属性，则将跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出现的顺序。：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用小写（有的操作系统大小敏感，如unix）HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应用.htm或.html。带有属性的HTML元素的结构 /例2 找出下面html代码的错误下列HTML元素的写法错在什么地方？ Congratulations! linked textThis is a new paragraphThe list item

16、HTML标记 的分类头部标记：title, meta, link, style文本标记：font, b, i, u , strong,段落标记：p, hn, pre, marquee, br, hr列表标记：ul, ol, li, dl, dt, dd5)超链接标记：a, map, area6)图像及媒体元素标记：img, embed, object7)表格标记：table, tr, td, th, tbody8)表单标记：form, input, textarea, select, option, fieldset, legend, label9)框架标记：frameset, frame,

17、iframe10)容器标记：div, spanHTML标记 的分类（2）为便于记忆，可将标记按出现的情况分为：单标记：， ， ， 配对标记：大部分标记都是配对标记成组标记：table，form，ul, ol, dl, frameset，fieldset及其子标记等，配对标记中很多都是成组标记 行内元素和块级元素 行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行。块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。块级元素内部可包含行内元素或块级元素，行内元素内部可包含行内元素，但不得包含块级元素

18、，另外，块级元素元素内部也不能包含其他的块级元素 行内元素和块级元素举例行内元素：a，img，font，b，i，u， span，input块级元素：p, div, hn, pre, hr, ul, ol, li, form 快速记忆法即所有文本标记、链接标记和图像标记是行内元素所有段落标记、列表标记是块级元素行内元素和块级元素示例粗体文字图片的标题图片的说明内容粗体文字粗体文字2.3 html存在的问题和web标准 HTML语言最开始是用来描述文档的结构的，如标题，段落等标记，后来因为人们还想用它控制文档的外观，HTML又增加了一些控制字体，对齐等方面的标记和属性，这样做的结果是HTML既可以

19、用来描述文档的结构，又能表示文档的外观，但是两方面都描述不好。于是人们提出了web标准，即结构和表现分离，网页由结构，表现和行为组成，用HTML的新版本XHTML描述文档的结构，XHTML是一种为了适应XML而重新改造的HTML。用CSS控制文档的表现，因此XHTML和CSS就是内容和形式的关系，由XHTML确定网页的内容，而通过CSS来决定页面的表现形式。 Web标准网页由什么构成？1内容：内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。如：忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆

20、江南。作者介绍772846 ，字乐天，太原人。唐德宗朝进士2结构：可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。 Web标准结构标题 忆江南(1)作者 唐.白居易正文江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。节1作者介绍772846 ，字乐天，太原人。唐德宗朝进士 Web标准表现表现（Presentation）：虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现” 行为行为：就是对内容的交互及操作效果。例如，使用JavaScript可以响应鼠标的点击和移动，可以判断一些表单提交，使我们的操作能和网页进行交互。 回顾 Web 标准行为层内容如何对事件做出响应表现层内容如何显示结构层内容的语义内容层内 容网页是由四层信息构成的一个共同体：Web标准的实现结构标准语言（1）XML（2）XHTML表现标准语言CSS（Cascading Style Sheets，层叠样式表）行为标准语言D