当前位置: 首页 > 编程日记 > 正文

从网页模版切图到网页生成全攻略(转)

鉴于很多朋友问到如何切图这个问题,又鉴于这个问题可大可小,一两句话是绝对讲不清楚的,所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK,让我们开始:

step1:在Photoshop中打开设计稿,如下图

060404_edu_dw_01.jpg

选择工具板上的slice切片工具,先大刀阔斧的切上一番!技巧: 大面积的色块单独切成一块,尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示:

060404_edu_dw_02.jpg

step2:在PhotoShop中选择file-save for web...来输出,这里要注意一些参数的选择:

060404_edu_dw_03.jpg

我们来看看红线所标识的1,2,3部分,将1所示的切片工具选中,然后点选2所示的图片,在3所示的地方选择色值,如果色彩单一可以选择尽量小的色值位;(为什么要这样??)答案:这样会大大减小文件的大小,同时又能比较好的保持图片的色彩;设置好后点OK输出文件,这里的文件包括了一个htm和images文件夹,如图:

060404_edu_dw_04.jpg

这里候你的页面才算完成了一半,接下来在Dreamweaver里建立站点:

step3:定义站点:

060404_edu_dw_05.jpg

在图示左边的site name中为站点起一个名字,如example
然后在下面的local root folder中选择我们刚才导出的站点所以的文件夹;站点建好后在site map中我们看到:

060404_edu_dw_06.jpg

(为什么要建立站点?)建立站点可以使我们养成一种很好的习惯,就是把一个网站所包含的文件,文件夹有条理的放在一起,同时我们很容易的将这个站点移动到其它地方而不用对文件路径进行任何改写!(当然如果你实在不想建立站点也没人强求你,我在事际工作中就遇到这样的同事,没有习惯为页面建立站点,当然后果的要麻烦少少了)

step4:重新制作页面表格(为什么?)通常在photoshop中直接导出的htm文件是不可以直接使用的,因为有些地方在实际运用时要作调整,比如有动态文字的地方,我们需要在页面中输入页不是使用图片,那么图片就要把它拿走,如果你在直接生成的htm中拿走不想要的图片再加上你想要的东西,你们发现页面将变得惨不忍睹,整个页面可能完全乱了套!
好了,先来分析一下导出的htm文件吧:

060404_edu_dw_07.jpg

根据这个页面表格所示,我们在新的页面中建立一个三行一列的表格:

060404_edu_dw_08.jpg

注意,把cellpadding,cellspacing,border三项值设为0,这个很重要;因为图片中我们不希望看到空隙和错位;然后再在第一行中插入一个三行两列的表格,并合并左边三列的表格,如图:

060404_edu_dw_09.jpg

插入表格的时个要注意对比原htm文件中的内容,思考为什么这样做;
接下来在第二行中插入一个二行二列的表格,按上面的方法合并左边的格子,并在右边格子的第一行插入一个一行五列的表格如图示:

060404_edu_dw_10.jpg

最后在下面一行插入一个三行二列的表格,并将图示中1,2外分别合并:

060404_edu_dw_11.jpg
最后得到的页面应该是这样的:
060404_edu_dw_12.jpg

好了,现在我们的任务就是往表格里面加图加内容了!这里就不再赘述了!(其实已经赘述得够多了!)

还要提醒大家注意的是在加图片和内容时,表格单元格的align,valign这两个属性非常重要,要不遗余力的运用它们来帮你做事!OK,自己实践一下!

转载于:https://www.cnblogs.com/zgqys1980/archive/2007/03/22/683978.html

相关文章:

紫书 习题 10-17 UVa 11105 (筛法)

类似于素数筛的思想去做&#xff0c;不然暴力会超时而且还要判重 #include<cstdio> #include<cstring> #include<vector> #define REP(i, a, b) for(int i (a); i < (b); i) using namespace std;const int MAXN 1123456; int vis[MAXN]; vector<int…

(C++)按照公式求圆周率pi的近似值的两种方法

方法一 #include<cstdio> #include<cmath> //求圆周率pi的近似值int main(){double PI0,mu1;int i1;while(mu<1000000){if(i%2){PI 1/mu;}else{PI - 1/mu;}mu 2;i ;}PI * 4; printf("PI%10.8f",PI);return 0;} 方法2 #include<cstdio> #inc…

nginx rewrite 指令last break区别最详细的解释

总结&#xff1a; rewrite 可以在 server location 块&#xff0c; 正则比配的时候才重写&#xff0c;所以多条 rewrite 顺序靠前且匹配的优先执行。break跳出rewrite阶段&#xff0c;不会在匹配&#xff0c;进入输出阶段。 last 类似重新发起请求&#xff0c;所以会重新进行匹…

如何在Mac上加入adb服务

1,打开终端&#xff0c;敲入命令&#xff1a;sudo vi .bash_profile &#xff08;如果有密码就为本机登录密码&#xff09;&#xff08;如果没有这个文件就会创建一个新的&#xff09; 默认终端目录如图&#xff0c;生成的文件为隐藏文件&#xff1a; 2,在文件中写入一下内容&…

(C++)求Fibonacci数列的第n个数的两种方法

方法一 #include<cstdio> #include<cmath>int main(){int n;scanf("%d",&n);if(n1||n2){printf("1");}else{int Fibonacci[50];Fibonacci[1]Fibonacci[2]1;for(int i 3;i<n;i){Fibonacci[i]Fibonacci[i-1]Fibonacci[i-2];}printf(&qu…

GDI+ Bitmap与WPF BitmapImage的相互转换

原文:GDI Bitmap与WPF BitmapImage的相互转换using System.Windows.Interop; //... // Convert BitmapImage to Bitmap private Bitmap BitmapImage2Bitmap(BitmapImage bitmapImage) {return new Bitmap(bitmapImage.StreamSource);}// Convert Bitmap to BitmapImageprivate…

linux vim 基本操作

&#xff08;一定要在英文输入法的状态下才有效&#xff09;vi:实际上linux 上的 vi 不是真正的 vi,而是 vim;纯的 vi只在某些 unix 系统上还存在纯 的vi里面不支持退格键盘了&#xff0c;当按退格键盘以后&#xff0c;不是删除一个字符&#xff0c;而是切换到命令模式&#…

Oracle重建所有表和索引

定义两个存储过程&#xff0c;先执行表移动&#xff0c;再执行索引重建。&#xff08;如果记录很多&#xff0c;执行时间可能会很长&#xff0c;几个小时也有可能&#xff0c;建议在系统空闲时运行&#xff09;&#xff1a;create or replace procedure p_remove_all_table (ta…

线性回归预测PM2.5值

文章目录一、问题描述二、设计简要描述三、程序清单四、结果分析五、调试报告六、实验总结一、问题描述 希望用线性回归解决问题&#xff1a; 给定某个地区连续9小时包括PM2.5在内的18项污染物每小时的数据&#xff0c;预测第10个小时的PM2.5的值。 二、设计简要描述 机器学…

Sharding-eth

原文&#xff1a;https://github.com/ethereum/wiki/wiki/Sharding-FAQ 作者&#xff1a;vbuterin 简介 目前&#xff0c;在所有的区块链协议中每个节点存储所有的状态&#xff08;账户余额&#xff0c;合约代码和存储等等&#xff09;并且处理所有的交易。这提供了大量的安全性…

用CSS3制作很特别的波浪形菜单

用CSS3制作很特别的波浪形菜单 原文:用CSS3制作很特别的波浪形菜单网页菜单我们见过很多&#xff0c;各种炫酷的、实用的菜单比比皆是。昨天我看到一款很特别的CSS3菜单&#xff0c;它的外形是波浪形的&#xff0c;弯弯曲曲&#xff0c;结合背景&#xff0c;看上去还挺不错的&a…

二分类任务:确定一个人是否年收入超过5万美元

文章目录一、 问题描述二、 设计简要描述三、 程序清单四、 结果分析五、 调试报告六、 实验总结一、 问题描述 学会使用学习到的概率生成模型相关的知识&#xff0c;找出各类别最佳的高斯分布&#xff0c;从而达到通过输入测试&#xff0c;完成二分类任务&#xff0c;成功预测…

Android Splash界面支持用户点击 直接进入主界面

转载请注明出处&#xff1a;http://blog.csdn.net/lmj623565791/article/details/23613403 现在大部分APP都有Splash界面&#xff0c;下面列一下Splash页面的几个作用&#xff1a; 1、展示logo,提高公司形象 2、初始化数据 (拷贝数据到SD) 3、提高用户体验 4、连接服务器是否有…

Python爬一下抖音上小姐姐的视频~

image.png在简书也码了1W多字了&#xff0c;发现还是爬虫类的文章看的人多。 算法工程师现在都啥价位了&#xff0c;你们还在看爬虫→_→ 介绍 这次爬的是当下大火的APP--抖音&#xff0c;批量下载一个用户发布的所有视频。 各位也应该知道&#xff0c;抖音只有移动端&#xff…

哈哈,我的博客开通啦,欢迎光临~~~~~~~~~~~~

毕业快一年了&#xff0c;参加工作一年多了&#xff0c;几多苦闷&#xff0c;几多快乐。用某某人的话说就是“痛苦并快乐着&#xff01;”。工作了&#xff0c;才发现现实和理想真的有差距啊&#xff01;但我将直面“惨淡”的程序人生。希望与同龄人&#xff0c;不同龄人共勉。…

逻辑回归:确定一个人是否年收入超过5万美元

文章目录1. 问题描述2. 设计简要描述3. 程序清单4. 结果分析5. 调试报告6. 实验小结1. 问题描述 学会使用学习到的逻辑回归的知识&#xff0c;手动使用梯度下降方法&#xff0c;通过给定的相关数据来完成年薪是否高于50k的二分类预测任务。 2. 设计简要描述 机器学习的三个基…

【特征匹配】ORB原理与源码解析

相关 : Fast原理与源码解析 Brief描述子原理与源码解析 Harris原理与源码解析 http://blog.csdn.net/luoshixian099/article/details/48523267 ORB特征提取详解 ORB特征点检测 为了满足实时性的要求&#xff0c;前面文章中介绍过快速提取特征点算法Fast,以及特征描述子Brief。…

C# 的三种序列化方法

序列化是将一个对象转换成字节流以达到将其长期保存在内存、数据库或文件中的处理过程。它的主要目的是保存对象的状态以便以后需要的时候使用。与其相反的过程叫做反序列化。 序列化一个对象 为了序列化一个对象&#xff0c;我们需要一个被序列化的对象&#xff0c;一个容纳被…

DotNetNuke(DNN)网站发布、部署、迁移和重建

DotNetNuke(DNN)网站本质上是一个ASP.NET网站&#xff0c;由网站文件&#xff08;也就是website目录&#xff09;和数据库组成的&#xff0c;所以&#xff0c;“发布、部署、迁移和重建”实际上也就是把网站文件和数据库文件拷贝到服务器上并修改相应设置的过程。对于"发布…

PyTorch基础与简单应用:构建卷积神经网络实现MNIST手写数字分类

文章目录(一) 问题描述(二) 设计简要描述(三) 程序清单(四) 结果分析(五) 调试报告(六) 实验小结(七) 参考资料(一) 问题描述 构建卷积神经网络实现MNIST手写数字分类。 (二) 设计简要描述 机器学习的三个基本步骤—— 程序设计思路——(此图放大可看清) (三) 程序清单 …

from selenium.webdriver.support.ui import Select

from selenium.webdriver.support.ui import SelectSelect(d.find_element_by_id(ukey_开户行)).first_selected_option.text转载于:https://www.cnblogs.com/paisen/p/3669272.html

rocketmq-flink

https://github.com/apache/rocketmq-externals/tree/master/rocketmq-flink https://issues.apache.org/jira/browse/ROCKETMQ-82

基于Numpy构建全连接前馈神经网络进行手写数字识别

文章目录(一) 问题描述(二) 设计简要描述(三) 程序清单(四) 结果分析(五) 调试报告(六) 实验小结(一) 问题描述 不使用任何机器学习框架&#xff0c;仅仅通过Numpy库构建一个最简单的全连接前馈神经网络&#xff0c;并用该网络识别mnist提供的手写数字体。 (二) 设计简要描述…

sqlserver 三种恢复模式

sql server数据库提供了三种恢复模式&#xff1a;完整&#xff0c;简单和大容量日志&#xff0c;这些模式决定了sql server如何使用事务日志&#xff0c;如何选择它要记录的操作&#xff0c;以及是否截断日志。截断事务日志是删除己执行事务并把该日志空间让给新事务的过程&…

Confluence 6 配置日志

我们推荐你根据你的需求来配置你自己的 Confluence 日志。你可以有下面 2 种方法来修改你的日志&#xff1a;通过 Confluence 管理员控制台进行配置 – 你的修改仅在本次修改有效&#xff0c;下次重启后将会把所有修改重置。编辑属性文件 – 你的修改将会在下次重启后生效同时针…

最近最近在微软的Mobile Soft factory

最近公司在做PDA项目的开发&#xff0c; 我主要负责Mobile的框架设计和开发。以前都是在做winform程序&#xff0c;对Mobile 的开发 知之甚少&#xff0c;现在突然开始做mobile的项目&#xff0c;压力有点大&#xff01; 不知该从何处下手&#xff0c;幸好发现微软提供的Mobile…

神经网络训练技巧

文章目录一、问题描述二、 设计简要描述三、程序清单四、结果分析五、调试报告六、实验小结一、问题描述 基于二元函数f(x,y)z1/20 x2y2掌握梯度下降和权重初始化的技巧&#xff0c;基于手写体识别掌握正规化和两种防止过拟合的技巧。 二、 设计简要描述 梯度下降方法 1.1.1 …

Unix的轻巧“约取而实得”(上篇)

在经过上机操作实践以及掌握Unix系统相关的基础知识之后&#xff0c;可以说已跨进了迈向成功的门槛。接着要登堂入室&#xff0c;继续专进&#xff0c;就必须更加深入的了解Unix基本命令的功能、使用并掌握一些必备的技巧。这一轮学习会有一定难度&#xff0c;需要强烈的求知欲…

操作系统2--操作系统结构

操作系统结构 操作系统的结构需要从这几个方面来考虑:他为用户提供了哪些服务和界面,系统各个组成部分及其相互关系 操作系统的操作 大致可分为:进程管理,主存管理,文件管理,辅存管理和IO管理 进程管理 进程的创建和结束进程的挂起和恢复进程锁\进程交互\进程死锁的规则内存管理…

Windows环境下启动Mysql服务提示“1067 进程意外终止”的解决方案

2019独角兽企业重金招聘Python工程师标准>>> 在Windows服务里启动Mysql服务时提示“1067 进程意外终止”。 此时我们打开计算机管理查看Windows日志&#xff0c;如下图所示&#xff1a; 完整错误提示如下&#xff1a; The server option lower_case_table_names is …