WEB前台静态网页开发设计
目录
一、设计思路 (2)
二、制作流程 (2)
三、关键技术总结和关键源代码分析（加注释） (2)
1. Javascript选项链接和实现图片的效果 (2)
2.//body背景和css链接
3. 鼠标点击出现阴影效果
1.css阴影效果:
#poto{
border-style: solid;
transition: box-shadow linear 0.2s;
box-shadow:0 0 0 0px rgba(255,255,255,0.2);
border-width:0;
float:inherit;
left: -29px;
}
#poto:hover {
box-shadow:0px 0px 50px 2px rgba(255,255,255,0.3);
}
#div1 input { height:10px; border-radius: 500px;
background:rgba(255,255,255,0.3); padding:20px 0px 20px 0px;
margin:20px 0px 20px 0px; width: inherit;border-style: solid;
transition: box-shadow linear 0.2s;
box-shadow:0 0 0 0px rgba(255,255,255,0.2);
border-width:0;
float:inherit;
left: -29px;}
#div1 .active {box-shadow:0px 0px 50px 2px rgba(255,255,255,0.3); }
四、HTML+CSS+javascript代码
1.CSS代码
静态网页制作
静态网页制作 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点：站点----管理站点----新建----站点（前三步也可直接从“新建站点”进入下面的设置向导对话框）----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开和保存网页文件 创建：文件----新建----创建 打开：文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存：文件---保存或另存为 b. 设置网页的页面属性 修改---页面属性---然后设置（标题、背景、背景图像、文本等） c. 设置网页对象的颜色 网页对象，如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d. 网页文本的输入和属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法：1、汉字输入法设置为全角方式，按空格键即可输入。2、属性面版格式中：预先格式化的 换行：ENTER、SHIFT+ENTER 实例练习： 1、输入以下文字 书签夹在诗集里， 落叶夹在深秋里。 喜悦夹在生活里， 追求夹在人生里。 2、第一次设置格式为“无”，字体为“华文行楷”，字体颜色为“红色”，字号为“5号”，添加项目符号。然后保存、预览。
3、第二次设置格式为“标题一”，字体为“楷体”，字体颜色为“蓝色”，字号为“5号”，添加项目符号，对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e. 网页图片的插入和属性设置 插入图片，在对话框中选择图片。（最好在建立站点时将欲用的图片素材复制到本地站点目录中） 插入图像占位符，在图片准备好后再加入图片。加入方法：1、双击图像占位符；2、点“属性面版”中的“指向文件”，拖到右边文件中要插入的文件处。 在图像属性面版中设置 f. 插入层 方法: 1、点击插入面版中的“描绘层”；2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层； 3、可以随意移动层的位置； 4、可在层中插入图像、文字等。 g. *插入表格,用表格定位 方法： 1、先用鼠标点至欲插入表格的位置； 2、点插入面版中的“表格”—“插入表格”； 3、确定行数、列数后确定即将表格插入到选定位置了； 4、可在表格中任何单元格里插入图像、文字等。 h. 建立超链接 方法: 1、选中要建立超链接的文字或图像； 2、点右键“创建链接”打开的窗口或在属性的链接栏里，填入链接的目标。（如：本网站另一个网页，或外部网页如https://www.360docs.net/doc/ab18512271.html,，或电子邮件如：mailto:zdhwangji@https://www.360docs.net/doc/ab18512271.html,） 3、在页面属性里修改链接的属性：修改--页面属性（链接、活动链接、访问过链接）