电大电子商务专业网页设计与制作课程汇编

1、网页网页设计公开课设计公开课2022-5-25珠海电大电子商务工作室邓同学 1 1、网页制作常用知识简介。、网页制作常用知识简介。(1)(1)HTMLHTML语言的知识语言的知识(2)Dreamweaver(2)Dreamweaver软件：网页制作中构造框架的主要软件。软件：网页制作中构造框架的主要软件。(3)(3)FlashFlash软件：动画制作软件。软件：动画制作软件。(4)(4)PhotoshopPhotoshop软件：图片设计软件。软件：图片设计软件。网页的基本知识网页的基本知识一般来说，一个一般来说，一个html文件应具有下面最基本的结构：文件应具有下面最基本的结构：标题标题文件内

2、容文件内容 一个一个html文件最基本的结构：文件最基本的结构：和和表示文件的开始与结束，被放置在整个文件的开始与结束表示文件的开始与结束，被放置在整个文件的开始与结束之处。之处。和和用来标示文件头。在这组标记里我们可以加入用来标示文件头。在这组标记里我们可以加入和和这组标记。这组标记。和和用来指定浏览器窗口的标题。用来指定浏览器窗口的标题。和和在这组标记里我们可以加入文件内容。另，我们可以利用在这组标记里我们可以加入文件内容。另，我们可以利用做一些设定：做一些设定：【设定背景颜色】：【设定背景颜色】：其设定方法为其设定方法为。范例：范例：现在的背景颜色是黄色！现在的背景颜色是黄色！【设定背景

3、图片】：设定背景图片】：其设定方法为其设定方法为范例：范例：看看背景图案是否不一样了！注意：仅支持看看背景图案是否不一样了！注意：仅支持BMP跟跟gif格式的图片，且图片格式的图片，且图片bg02.bmp必须跟网页在同一个路径下。必须跟网页在同一个路径下。 构成网页的基本元素构成网页的基本元素1、分段元素与分行元素、分段元素与分行元素html的分段完全依赖于分段元素的分段完全依赖于分段元素。回车回车不能形成分段，而分行则用不能形成分段，而分行则用2、居中链接签、居中链接签3、字体大小、颜色：字体大小、颜色：文字文字4、横线：横线：hr线长和线宽用线长和线宽用指定，指定，width是指线长，是指

4、线长， size 指线宽，单位指线宽，单位是象素是象素5、空格的表示方法：直接写、空格的表示方法：直接写&nbsp。6、插入图片：、插入图片：1、由文字链接到别处：由文字链接到别处：格式：格式：文字文字如：如： 广西民族大学广西民族大学2、由图片链接到别处：、由图片链接到别处：格式：格式：超文本链接超文本链接n1.2.1 标题栏标题栏n1.2.2 菜单栏菜单栏n1.2.3 插入栏面板插入栏面板n1.2.4 编辑窗口编辑窗口n1.2.5 文档工具栏文档工具栏n1.2.6 状态栏状态栏n1.2.7 属性面板属性面板n1.2.8 辅助设计工具辅助设计工具1.2 Dreamweaver 8的操

5、作界面的操作界面1.2 Dreamweaver 8的操作界面的操作界面1.2.1 标题栏标题栏1.2.2 菜单栏菜单栏1.2.3 插入栏面板插入栏面板插入栏提供了把特定对象插入到网页中的一种简易的方法。只要单击面板上的按钮就能把所需的对象插入到指定的位置， 1.2.4 编辑窗口编辑窗口1.2.5 文档工具栏文档工具栏文档工具栏包含了对该网页文件的常用操作 1.2.6 状态栏状态栏位于文档窗口底部的是状态栏。状态栏由标签选择器、窗口操作区、窗口大小设定区、文档网络属性区4个区间组成。 1.2.7 属性面板属性面板属性面板会根据对象的不同来显示相应的对象属性。 1.2.8 辅助设计工具辅助设计工具

6、标尺 1.2.8 辅助设计工具辅助设计工具辅助线用来辅助定位。 1.2.8 辅助设计工具辅助设计工具网格是一个有用的定位参考工具。 1.3 调整布局调整布局n1.3.1 显示和隐藏面板显示和隐藏面板n1.3.2 调整面板布局调整面板布局1.3.1 显示和隐藏面板显示和隐藏面板通过选择“窗口”菜单，可以显示/关闭各个面板。菜单中面板名称前的“”表示该面板已经显示在页面上。 1.3.2 调整面板布局调整面板布局面板布局同样可以改变。用户可以收藏面板，使页面编辑区扩大。 1.4 第一个站第一个站n1.4.1 设置本地站点位置设置本地站点位置n1.4.2 建立建立Dreamweaver 8本地站点本地

7、站点n1.4.3 网站框架和站点文件夹网站框架和站点文件夹n1.4.4 建立网页文件建立网页文件首先应该先在硬盘内创建文件夹作为将要建立站点的存储位置 。1.4.1 设置本地站点位置设置本地站点位置在Dreamweaver中建立本地站点的方法很多，其中一个是使用它提供的“新建站点向导”。 1.4.2 建立建立Dreamweaver 8本地站点本地站点新建站点 ：(1)在D盘新建一个文件夹“Myweb+学号”作为站点文件夹。(2)在文件夹“Myweb+学号”中再创建Images文件夹作为存放图片的地方。(3)单击“站点”新建站点，输入站点名称，如：web1，单击“下一步”。(4)选择“不使用服务

8、器技术”，单击“下一步”。(5)选择网页的存储位置为“D: Myweb+学号”，单击“下一步”。(6)在“如何连接远程服务器”中选择“无”，单击“下一步”“完成”，即可在右边的文件管理器中看见Web1站点。(7)右键单击“站点Web1“，选择”新建”文件，即可建立网站的第一个网页文件，通常命名为index.html，并作为主页。(8)保存网页，并按F12预览即可看到效果。1.4.2 建立建立Dreamweaver 8本地站点本地站点 建立站内文件夹框架。新建立的站点可以进行文件夹的移动、修改和删除。 1.4.3 网站框架和站点文件夹网站框架和站点文件夹网页各元素的设计网页各元素的设计1 1、文

9、字：直接输入，通过属性设置其大小、颜色、字体、加粗等。、文字：直接输入，通过属性设置其大小、颜色、字体、加粗等。（与（与WordWord类似）类似）如果字体列表中没有想要的字体，则需添加，方法：单击“字体”“编辑字体列表”在“可用字体”中将需要的字体添加到右边的“选择字体”框中，单击确定，再次单击“字体”，选择刚添加进来的字体即可。Dreamweaver的文字插入的文字插入图片图片2 2、图片、图片 (1) (1) 为使站点图片管理更规范，初学者最好将要插入的图片先复为使站点图片管理更规范，初学者最好将要插入的图片先复制到网站的文件夹制到网站的文件夹imagesimages中。，然后再单击中。，然后再单击“插入插入”图图形，选择图形的来源，单击确定即可。形，选择图形的来源，单击确定即可。（2 2）