电大电子商务专业网页设计与制作课程精要.ppt

新建站点 ： (1)在D盘新建一个文件夹“Myweb+学号”作为站点文件夹。 (2)在文件夹“Myweb+学号”中再创建Images文件夹作为存放图片的地方。 (3)单击“站点”—新建—站点，输入站点名称，如：web1，单击“下一步”。 (4)选择“不使用服务器技术”，单击“下一步”。 (5)选择网页的存储位置为“D:\ Myweb+学号”，单击“下一步”。 (6)在“如何连接远程服务器”中选择“无”，单击“下一步”—“完成”，即可在右边的文件管理器中看见Web1站点。 (7)右键单击“站点—Web1“，选择”新建”—文件，即可建立网站的第一个网页文件，通常命名为index.html，并作为主页。 (8)保存网页，并按F12预览即可看到效果。 1.4.2 建立Dreamweaver 8本地站点 建立站内文件夹框架。新建立的站点可以进行文件夹的移动、修改和删除。 1.4.3 网站框架和站点文件夹 网页各元素的设计 1、文字：直接输入，通过属性设置其大小、颜色、字体、加粗等。（与Word类似） 如果字体列表中没有想要的字体，则需添加，方法：单击“字体”—“编辑字体列表”—在“可用字体”中将需要的字体添加到右边的“选择字体”框中，单击确定，再次单击“字体”，选择刚添加进来的字体即可。 Dreamweaver的文字插入 图片 2、图片 (1) 为使站点图片管理更规范，初学者最好将要插入的图片先复制到网站的文件夹images中。，然后再单击“插入”—图形，选择图形的来源，单击确定即可。 （2）使用图像属性面板调整图形的各种属性。 （3）单击“图像对象”—鼠标经过图像，确定“源图像”和“鼠标经过图像”，可以插入动态的翻转图像。 Dreamweaver的图片插入 * 网页设计公开课 * 珠海电大电子商务工作室 邓同学 1、网页制作常用知识简介。 (1)HTML语言的知识 (2)Dreamweaver软件：网页制作中构造框架的主要软件。 (3)Flash软件：动画制作软件。 (4)Photoshop软件：图片设计软件。 网页的基本知识 一般来说，一个html文件应具有下面最基本的结构：htmlheadtitle标题/title/headbody文件内容/body/html  一个html文件最基本的结构： ◎html和/html表示文件的开始与结束，被放置在整个文件的开始与结束 之处。 ◎head和/head用来标示文件头。在这组标记里我们可以加入title和 /title这组标记。 ◎title和/title用来指定浏览器窗口的标题。 ◎body和/body 在这组标记里我们可以加入文件内容。另，我们可以利用body做一些设定： 【设定背景颜色】：其设定方法为body bgcolor=颜色名称。范例：body bgcolor=yellow现在的背景颜色是黄色！/body 【设定背景图片】：其设定方法为body background=“背景图片路径”范例：body background=“bg02.bmp”看看背景图案是否不一样了！注意：仅支持BMP跟gif格式的图片，且图片bg02.bmp必须跟网页在同一个路径下。 /body 构成网页的基本元素 1、分段元素与分行元素 　html的分段完全依赖于分段元素P。回车 不能形成分段，而分行则用br 2、居中链接签center…/center 3、字体大小、颜色： font size=字号 color=颜色文字/font 4、横线：hr 线长和线宽用hr size=n width=n指定，width是指线长， size 指线宽，单位是象素 5、空格的表示方法：直接写nbsp。 6、插入图片： img src=“图片路径”/img 1、由文字链接到别处： 格式：a href=“链接地址”文字/a 如： a href=“Http://”广西民族大学/a 2、由图片链接到别处： 格式：a href= “链接地址” img src=“图片存放位置/a  超文本链接 1.2.1 标题栏 1.2.2 菜单栏 1.2.3 插入栏面板 1.2.4 编辑窗口 1.2.5 文档工具栏 1.2.6 状态栏 1.2.7 属性面板 1.2.8 辅助设计工具 1.2 Dreamweaver 8的操作界面 1.2 Dreamweaver 8的操作界面 1.2.1 标题栏 1.2.2 菜单栏 1.2.3 插入栏面板 插入栏提供了把特定对象插入到网页中的一种简易的方法。只要单击面板上的按钮就能把所需的对象插入到指定的位置， 1.2.4 编辑窗口 1.2.5 文档工具栏 文档工具栏包含了对该网页文件的常用操作